diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index d064826eaeaf90e..df3d19dc5212814 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -61,7 +61,7 @@ /scripts @mdn/engineering /tests @mdn/engineering -# These are @mdn-bot because the auto-merge GHA workflow uses the PAT of this account. -# If another reviewer is specified, update the PAT token or auto-merge will cease to be automatic. -/package.json @mdn/engineering @mdn-bot -/yarn.lock @mdn/engineering @mdn-bot +# Dependencies +/package.json @mdn/engineering @mdn-bot +/package-lock.json @mdn/engineering @mdn-bot +/yarn.lock @mdn/engineering @mdn-bot diff --git a/.github/labeler.yml b/.github/labeler.yml index 926e139e171fe62..17f7be264d88958 100644 --- a/.github/labeler.yml +++ b/.github/labeler.yml @@ -4,7 +4,7 @@ system: - changed-files: - any-glob-to-any-file: - package.json - - yarn.lock + - package-lock.json - .github/** - .vscode/** - .* diff --git a/.github/workflows/auto-cleanup-bot.yml b/.github/workflows/auto-cleanup-bot.yml index f384a91b37f8cc2..8d2b25628e30db1 100644 --- a/.github/workflows/auto-cleanup-bot.yml +++ b/.github/workflows/auto-cleanup-bot.yml @@ -25,8 +25,8 @@ jobs: node-version-file: ".nvmrc" package-manager-cache: false - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -34,9 +34,9 @@ jobs: - name: Lint markdown files run: | - yarn content fix-flaws - yarn fix:md - yarn fix:fm + npm run content fix-flaws + npm run fix:md + npm run fix:fm node scripts/sort_and_unique_file_lines.js .vscode/dictionaries env: # Used by the `rari` cli to avoid rate limiting issues diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml index 5976e82691d4b1c..d37d77057b06b6d 100644 --- a/.github/workflows/markdown-lint.yml +++ b/.github/workflows/markdown-lint.yml @@ -7,7 +7,7 @@ on: - .nvmrc - .prettier* - package.json - - yarn.lock + - package-lock.json - .github/workflows/markdown-lint.yml - .github/workflows/markdownlint-problem-matcher.json @@ -27,10 +27,10 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -38,5 +38,5 @@ jobs: - name: Lint markdown files run: | echo "::add-matcher::.github/workflows/markdownlint-problem-matcher.json" - yarn lint:md - yarn lint:fm + npm run lint:md + npm run lint:fm diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index f26370311a41d69..1e81a11c4279571 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -82,11 +82,11 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages + - name: Install if: steps.check.outputs.HAS_FILES == 'true' - run: yarn --frozen-lockfile + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -119,7 +119,7 @@ jobs: echo "Running markdownlint --fix" MD_LINT_FAILED=false - MD_LINT_LOG=$(yarn markdownlint-cli2 --fix "${files_to_lint[@]}" 2>&1) || MD_LINT_FAILED=true + MD_LINT_LOG=$(npx markdownlint-cli2 --fix "${files_to_lint[@]}" 2>&1) || MD_LINT_FAILED=true echo "MD_LINT_LOG<<${EOF}" >> "$GITHUB_OUTPUT" echo "${MD_LINT_LOG}" >> "$GITHUB_OUTPUT" echo "${EOF}" >> "$GITHUB_OUTPUT" @@ -135,12 +135,12 @@ jobs: echo "Running Prettier" PRETTIER_FAILED=false - PRETTIER_LOG=$(yarn prettier --check "${files_to_lint[@]}" 2>&1) || PRETTIER_FAILED=true + PRETTIER_LOG=$(npx prettier --check "${files_to_lint[@]}" 2>&1) || PRETTIER_FAILED=true echo "PRETTIER_LOG<<${EOF}" >> "$GITHUB_OUTPUT" echo "${PRETTIER_LOG}" >> "$GITHUB_OUTPUT" echo "${EOF}" >> "$GITHUB_OUTPUT" echo "PRETTIER_FAILED=${PRETTIER_FAILED}" >> "$GITHUB_OUTPUT" - yarn prettier -w "${files_to_lint[@]}" + npx prettier -w "${files_to_lint[@]}" if [[ -n $(git diff) ]]; then echo "FILES_MODIFIED=true" >> "$GITHUB_OUTPUT" diff --git a/.github/workflows/pr-check_javascript.yml b/.github/workflows/pr-check_javascript.yml index 9e6eb00e3bb5eef..552d29a84c1a822 100644 --- a/.github/workflows/pr-check_javascript.yml +++ b/.github/workflows/pr-check_javascript.yml @@ -24,13 +24,13 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Lint JavaScript files - run: yarn lint:js + run: npm run lint:js diff --git a/.github/workflows/pr-check_json.yml b/.github/workflows/pr-check_json.yml index b686b45b0809c5e..0b40da1d483bb52 100644 --- a/.github/workflows/pr-check_json.yml +++ b/.github/workflows/pr-check_json.yml @@ -24,13 +24,13 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Lint JSON files - run: yarn lint:json + run: npm run lint:json diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml index 74497781885f615..9f60dc6cf849d76 100644 --- a/.github/workflows/pr-check_redirects.yml +++ b/.github/workflows/pr-check_redirects.yml @@ -19,7 +19,7 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm # This is a "required" workflow so path filtering can not be used: # https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/collaborating-on-repositories-with-code-quality-features/troubleshooting-required-status-checks#handling-skipped-but-required-checks @@ -34,16 +34,16 @@ jobs: - "files/**" - ".github/workflows/pr-check_redirects.yml" - - name: Install all yarn packages + - name: Install if: steps.filter.outputs.required_files == 'true' - run: yarn --frozen-lockfile + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Check redirects file(s) if: steps.filter.outputs.required_files == 'true' - run: yarn content validate-redirects en-US + run: npm run content validate-redirects en-US env: # Used by the `rari` cli to avoid rate limiting issues # when fetching the latest releases info from the GitHub API. diff --git a/.github/workflows/pr-check_scripts.yml b/.github/workflows/pr-check_scripts.yml index 943b21b8d796f6c..cc2f8b9b65422f6 100644 --- a/.github/workflows/pr-check_scripts.yml +++ b/.github/workflows/pr-check_scripts.yml @@ -5,7 +5,7 @@ on: paths: - .nvmrc - package.json - - yarn.lock + - package-lock.json - .github/workflows/pr-check_scripts.yml # No GITHUB_TOKEN permissions, as we only use it to increase API limit. @@ -24,15 +24,15 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: yarn install - run: yarn --frozen-lockfile + - name: npm ci + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - run: yarn up-to-date-check + - run: npm run up-to-date-check start: runs-on: ubuntu-latest @@ -46,16 +46,16 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: yarn install - run: yarn --frozen-lockfile + - name: npm ci + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - name: yarn start - run: yarn start > /tmp/stdout.log 2> /tmp/stderr.log & + - name: npm start + run: npm start > /tmp/stdout.log 2> /tmp/stderr.log & - name: Wait for Rari (localhost:8083) run: curl --retry-connrefused --retry 5 -I http://localhost:8083/en-US/ @@ -88,15 +88,15 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: yarn install - run: yarn --frozen-lockfile + - name: npm ci + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - run: yarn filecheck --help + - run: npm run filecheck -- --help content: runs-on: ubuntu-latest @@ -110,19 +110,19 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - run: yarn content --help + - run: npm run content -- --help - - run: yarn content fix-redirects en-US + - run: npm run content fix-redirects en-US - - run: yarn content validate-redirects en-US + - run: npm run content validate-redirects en-US build: runs-on: ubuntu-latest @@ -136,12 +136,12 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: yarn install - run: yarn --frozen-lockfile + - name: npm ci + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - - run: yarn build --help + - run: npm run build -- --help diff --git a/.github/workflows/pr-check_url-issues.yml b/.github/workflows/pr-check_url-issues.yml index e62a256f12c8c10..e3e21c52422fa98 100644 --- a/.github/workflows/pr-check_url-issues.yml +++ b/.github/workflows/pr-check_url-issues.yml @@ -23,7 +23,7 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - name: Check URL deletions and broken fragments run: | diff --git a/.github/workflows/pr-check_yml.yml b/.github/workflows/pr-check_yml.yml index c880a58cb846fd9..d4ae953fa5f1c99 100644 --- a/.github/workflows/pr-check_yml.yml +++ b/.github/workflows/pr-check_yml.yml @@ -4,7 +4,7 @@ on: pull_request: paths: - .nvmrc - - yarn.lock + - package-lock.json - "**/*.yml" - .github/workflows/pr-check_yml.yml @@ -24,13 +24,13 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - name: Lint markdown files - run: yarn lint:yml + run: npm run lint:yml diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index 324876bfc3ca7d1..350b585971a6720 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -112,7 +112,7 @@ jobs: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} working-directory: content - run: yarn --frozen-lockfile + run: npm ci - name: Analyze PR build if: steps.check.outputs.HAS_ARTIFACT diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 4a79e5247eeb8b3..63591ead078bbeb 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -21,7 +21,7 @@ jobs: BASE_SHA: ${{ github.event.pull_request.base.sha }} HEAD_SHA: ${{ github.event.pull_request.head.sha }} # This is the directory where the built files will be placed. - # It's also hardcoded in the `yarn build` command in package.json. + # It's also hardcoded in the `npm run build` command in package.json. # If you change it here, you must also make the same change in # package.json. BUILD_OUT_ROOT: build @@ -81,11 +81,11 @@ jobs: uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 with: node-version-file: ".nvmrc" - cache: yarn + cache: npm - - name: Install all yarn packages + - name: Install if: steps.check.outputs.HAS_FILES == 'true' - run: yarn --frozen-lockfile + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -135,12 +135,12 @@ jobs: ARGS+=("-f" "$PWD/$file") done - yarn rari build --no-basic --json-issues --data-issues "${ARGS[@]}" + npx rari build --no-basic --json-issues --data-issues "${ARGS[@]}" # Workaround, as fred-ssr doesn't copy assets. cp -vR node_modules/@mdn/fred/out/. "$BUILD_OUT_ROOT" - yarn fred-ssr + npx fred-ssr echo "Disk usage size of the build" du -sh $BUILD_OUT_ROOT @@ -172,4 +172,4 @@ jobs: readarray -t files_to_check <<< "$GIT_DIFF_FILES" export CONTENT_ROOT=$(pwd)/files - yarn filecheck "${files_to_check[@]}" + npm run filecheck "${files_to_check[@]}" diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml index 7b41cc5ce49ae21..666b838eec84673 100644 --- a/.github/workflows/spelling-check-bot.yml +++ b/.github/workflows/spelling-check-bot.yml @@ -28,8 +28,8 @@ jobs: node-version-file: ".nvmrc" package-manager-cache: false - - name: Install all yarn packages - run: yarn --frozen-lockfile + - name: Install + run: npm ci env: # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -38,7 +38,7 @@ jobs: id: check run: | echo Running spelling check... - output=$(yarn --silent lint:typos-group-by-file || exit 0) + output=$(npm run --silent lint:typos-group-by-file || exit 0) if [ -n "${output}" ]; then output=$(node scripts/linkify-logs.js "${output}") output=$(echo "$output" | sed 's/^/- /') diff --git a/.github/workflows/system-file-changes.yml b/.github/workflows/system-file-changes.yml index f4e8c56815ba5cf..e8ae8b22b4e7b3a 100644 --- a/.github/workflows/system-file-changes.yml +++ b/.github/workflows/system-file-changes.yml @@ -10,7 +10,7 @@ on: - ".github/dependabot.yml" - "scripts/**" - package.json - - yarn.lock + - package-lock.json # No GITHUB_TOKEN permissions, as we don't use it. permissions: {} @@ -38,7 +38,7 @@ jobs: # Check actor. if [ "$ACTOR" != "$AUTHOR" ]; then - ACTOR_PERMISSION=$(gh api https://api.github.com/repos/${{ github.repository }}/collaborators/$ACTOR/permission --jq .permission) + ACTOR_PERMISSION=$(gh api https://api.github.com/repos/${{ github.repository }}/collaborators/$ACTOR/permission --jq .permission) if [ "$ACTOR_PERMISSION" != "admin" ]; then echo "PR actor ($ACTOR) is not an admin, please ping someone for a review." diff --git a/.gitignore b/.gitignore index c5a59591416bef3..c7c38ea54c7a82b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,6 @@ /node_modules /build .env -yarn-debug.log* -yarn-error.log* _githistory.json .DS_Store .idea diff --git a/.gitpod.yml b/.gitpod.yml index ac4d56b767d315f..858481b46d805f5 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -1,6 +1,6 @@ tasks: - - init: yarn install - command: yarn run start + - init: npm install + command: npm start ports: - port: 5042 diff --git a/.lefthook.yml b/.lefthook.yml index 7db894ca7fb6bae..74cae0397d29204 100644 --- a/.lefthook.yml +++ b/.lefthook.yml @@ -3,17 +3,17 @@ pre-commit: jobs: - name: Format sidebars glob: "files/sidebars/*.yaml" - run: yarn content fmt-sidebars + run: npm run content fmt-sidebars stage_fixed: true - name: Fix redirects glob: "files/en-us/_redirects.txt" - run: yarn content fix-redirects en-US && yarn content validate-redirects en-US + run: npm run content fix-redirects en-US && npm run content validate-redirects en-US stage_fixed: true - name: Format non-markdown glob: "*.{js,json,yml,yaml,css,html}" - run: yarn prettier --write --cache {staged_files} + run: npx prettier --write --cache {staged_files} stage_fixed: true - name: Sort cSpell dictionaries @@ -21,9 +21,9 @@ pre-commit: run: node scripts/sort_and_unique_file_lines.js {staged_files} stage_fixed: true - - name: Run 'yarn filecheck' + - name: Check files glob: "files/*.{svg,png,jpeg,jpg,gif}" - run: yarn filecheck {staged_files} + run: npm run filecheck {staged_files} - name: Check URL issues glob: "files/**/*.md" @@ -31,7 +31,7 @@ pre-commit: - name: Front matter tests glob: "tests/**/*.*" - run: yarn test:front-matter-linter + run: npm run test:front-matter-linter - name: Fix markdown glob: "*.md" @@ -42,20 +42,20 @@ pre-commit: run: node scripts/front-matter_linter.js --fix true {staged_files} stage_fixed: true - name: Markdownlint - run: yarn markdownlint-cli2 --fix {staged_files} + run: npx markdownlint-cli2 --fix {staged_files} stage_fixed: true - name: Prettier - run: yarn prettier --write --cache {staged_files} + run: npx prettier --write --cache {staged_files} stage_fixed: true - name: Check changed xrefs - run: yarn node scripts/update-moved-file-links.js --check + run: node scripts/update-moved-file-links.js --check post-merge: only: - ref: main commands: - yarn-install: - run: yarn install + npm-install: + run: npm install output: - summary diff --git a/.nvmrc b/.nvmrc index 53d1c14db376ead..54c65116f15a683 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -v22 +v24 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3021e66cfb6611a..1aec3d2eb18c1d8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -150,28 +150,28 @@ This section describes how to build the project locally and how to prepare your ### Preparing the project -To serve the site locally, you need to have [Node.js](https://nodejs.org/) and [Yarn 1 (Classic)](https://classic.yarnpkg.com/) installed. +To serve the site locally, you need to have [Node.js](https://nodejs.org/) installed, which comes bundled with [npm](https://www.npmjs.com/). You can check if these are installed by running the following commands: ```bash node -v -yarn -v +npm -v ``` -After you have installed Node.js and Yarn, you can install the dependencies using `yarn`: +After you have installed Node.js, you can install the dependencies using `npm install`: ```bash # Assuming your fork is in ~/repos/content cd ~/repos/content -yarn +npm install ``` ### Running the project -After you have installed all dependencies, you can start the local preview using `yarn start`: +After you have installed all dependencies, you can start the local preview using `npm start`: ```bash -yarn start +npm start ``` Once started, a live preview is available at `http://localhost:5042/` @@ -218,7 +218,7 @@ This will make it easier to submit a pull request for your changes. To ensure that all MDN documents follow the same formatting, we use both [Prettier](https://prettier.io/) and [MarkdownLint](https://github.com/DavidAnson/markdownlint) to format and lint Markdown files. This helps us enforce uniform styling across all documents with minimal reviewer intervention. -If you have a [local checkout](#forking-and-cloning-the-repository) of the repository and have [installed the dependencies](#preparing-the-project), or you are using [github.dev](https://github.dev/), a pre-commit hook will be installed which automatically runs while making a commit. To save some headache and improve your work flow while authoring, you may wish to [configure your editor to automatically run Prettier](https://prettier.io/docs/editors.html). Alternatively, you may run `yarn fix:md` in the command line to manually format all Markdown files. +If you have a [local checkout](#forking-and-cloning-the-repository) of the repository and have [installed the dependencies](#preparing-the-project), or you are using [github.dev](https://github.dev/), a pre-commit hook will be installed which automatically runs while making a commit. To save some headache and improve your work flow while authoring, you may wish to [configure your editor to automatically run Prettier](https://prettier.io/docs/editors.html). Alternatively, you may run `npm run fix:md` in the command line to manually format all Markdown files. > [!NOTE] > Automatically formatting changes does not work for pull requests opened using the GitHub Web UI as described in the ["Simple changes" section](#simple-changes). @@ -237,21 +237,21 @@ There are a few things to keep in mind: ### Moving documents -Moving one or more documents (or an entire tree of documents) is made easier with the `yarn content move` command. +Moving one or more documents (or an entire tree of documents) is made easier with the `npm run content move` command. This command moves the file and fixes up redirects automatically. You can use this command as shown below: ```bash -yarn content move [locale] +npm run content move [locale] ``` > [!WARNING] > Don't edit the `_redirects.txt` file manually. > See the [Redirecting a document](#redirecting-a-document) section for more information. -To use `yarn content move`, provide the slug of the document you'd like to move (e.g., `Learn/Accessibility`), and the slug of its new location (e.g., `Learn/A11y`). +To use `npm run content move`, provide the slug of the document you'd like to move (e.g., `Learn/Accessibility`), and the slug of its new location (e.g., `Learn/A11y`). The locale of the existing document can be provided as an optional third argument (this defaults to `en-US`). For other locales, `CONTENT_TRANSLATED_ROOT` has to be set correctly in your environment. -If the document you'd like to move contains child documents (i.e., it represents a document tree), the `yarn content move` command will move the entire tree. +If the document you'd like to move contains child documents (i.e., it represents a document tree), the `npm run content move` command will move the entire tree. Let's say you want to move the entire `/en-US/Learn/Accessibility` tree to `/en-US/Learn/A11y`, you can do so as follows: @@ -267,11 +267,11 @@ Let's say you want to move the entire `/en-US/Learn/Accessibility` tree to `/en- git checkout -b moving-a11y ``` -2. Move files with `yarn content move`. +2. Move files with `npm run content move`. This will delete and modify existing files, as well as create new files. ```bash - yarn content move Learn/Accessibility Learn/A11y + npm run content move Learn/Accessibility Learn/A11y ``` 3. Once files are moved we need to update references to those files in the other content files as well. Use following command to update all the references automatically in one go: @@ -291,22 +291,22 @@ Let's say you want to move the entire `/en-US/Learn/Accessibility` tree to `/en- ### Deleting a document -Similar to moving files, you can delete documents or a tree of documents easily by using the `yarn content delete` command. +Similar to moving files, you can delete documents or a tree of documents easily by using the `npm run content delete` command. > [!WARNING] -> Don't delete files or directories from the repository manually; the `yarn content delete` command handles the necessary changes such as updating the `_wikihistory.json` file. +> Don't delete files or directories from the repository manually; the `npm run content delete` command handles the necessary changes such as updating the `_wikihistory.json` file. You can use this command as shown below: ```bash -yarn content delete [locale] --redirect +npm run content delete [locale] -- --redirect ``` -To use `yarn content delete`, provide the slug of the document you'd like to delete (e.g., `Learn/Accessibility`), and the locale as an optional second argument (this defaults to `en-US`). +To use `npm run content delete`, provide the slug of the document you'd like to delete (e.g., `Learn/Accessibility`), and the locale as an optional second argument (this defaults to `en-US`). If the slug of the page you wish to delete contains special characters, include it in quotes. For example: ```bash -yarn content delete "Glossary/Round_Trip_Time_(RTT)" --redirect Glossary/Latency +npm run content delete "Glossary/Round_Trip_Time_(RTT)" -- --redirect Glossary/Latency ``` If the document has child documents (i.e., the document represents a document tree), you must specify the `-r, --recursive` option, else the command will fail. @@ -324,10 +324,10 @@ Say you want to delete the entire `/en-US/Learn/Accessibility` tree and redirect git checkout -b deleting-a11y ``` -2. Run the `yarn content delete` command and redirect all deleted documents. +2. Run the `npm run content delete` command and redirect all deleted documents. ```bash - yarn content delete Learn/Accessibility --recursive --redirect Web/Accessibility + npm run content delete Learn/Accessibility -- --recursive --redirect Web/Accessibility ``` > [!WARNING] @@ -348,7 +348,7 @@ Say you want to delete the entire `/en-US/Learn/Accessibility` tree and redirect If you are [moving a document](#moving-documents) as shown above you don't need to create a redirect. However, you may need to do so when fixing a broken link or after [deleting a document](#deleting-a-document) without the `--redirect` flag. -You may do this by using the `yarn content add-redirect` command. +You may do this by using the `npm run content add-redirect` command. 1. Start a fresh branch to work in: @@ -362,10 +362,10 @@ You may do this by using the `yarn content add-redirect` command. git checkout -b deleting-a11y ``` -2. Add a redirect with `yarn content add-redirect`. The target page can be a page on MDN or an external URL: +2. Add a redirect with `npm run content add-redirect`. The target page can be a page on MDN or an external URL: ```bash - yarn content add-redirect /en-US/path/of/deleted/page /en-US/path/of/target/page + npm run content add-redirect /en-US/path/of/deleted/page /en-US/path/of/target/page ``` 3. Commit all of the changed files and pushing your branch to your fork: diff --git a/README.md b/README.md index 7558d3d98628abb..006c965bb54cef9 100644 --- a/README.md +++ b/README.md @@ -17,19 +17,19 @@ In addition to English-language articles, over 35 volunteers lead translation an ## Build the site -To set up the site locally, you need to have [Node.js](https://nodejs.org/) and [Yarn](https://classic.yarnpkg.com/) installed. +To set up the site locally, you need to have [Node.js](https://nodejs.org/) installed, which comes bundled with [npm](https://www.npmjs.com/). You can check if these are installed by running the following commands: ```bash node -v -yarn -v +npm -v ``` -After you have installed Node.js and Yarn, you can install the dependencies using `yarn` and start the local preview: +After you have installed Node.js, you can install the dependencies using `npm install` and start the local preview: ```bash -yarn -yarn start +npm +npm start ``` Once started, a live preview is available at `http://localhost:5042/`. diff --git a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md index 2039ecffc20a61c..540c6a5fa02f02d 100644 --- a/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md +++ b/files/en-us/learn_web_development/core/scripting/build_your_own_function/index.md @@ -78,9 +78,7 @@ To begin with, let's put together a basic function. closeBtn.textContent = "x"; panel.appendChild(closeBtn); - closeBtn.addEventListener("click", () => - panel.parentNode.removeChild(panel), - ); + closeBtn.addEventListener("click", () => body.removeChild(panel)); ``` This is quite a lot of code to go through, so we'll walk you through it bit by bit. @@ -117,10 +115,10 @@ panel.appendChild(closeBtn); Finally, we call {{domxref("EventTarget/addEventListener", "addEventListener()")}} to add a function that will be called when the user clicks the "close" button. The code will delete the whole panel from the page — to close the message box. -Briefly, the `addEventListener()` method is provided by the button (or in fact, any element on the page) that can be passed a function and the name of an event. In this case, the name of the event is 'click', meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()")}} DOM API function to specify that we want to remove a specific child element of the HTML element — in this case, the panel `
`. +Briefly, the `addEventListener()` method can be called on any element on the page, and is usually passed two arguments: the name of an event and a function to run when the event occurs. In this case, the event name is `click`, meaning that when the user clicks the button, the function will run. You'll learn a lot more about events in our [events article](/en-US/docs/Learn_web_development/Core/Scripting/Events). The line inside the function uses the {{domxref("Node.removeChild()", "removeChild()")}} method to specify that we want to remove a specific child element of the `` element: in this case, the panel `
`. ```js -closeBtn.addEventListener("click", () => panel.parentNode.removeChild(panel)); +closeBtn.addEventListener("click", () => body.removeChild(panel)); ``` Basically, this whole block of code is generating a block of HTML that looks like so, and inserting it into the page: diff --git a/files/en-us/mozilla/firefox/releases/144/index.md b/files/en-us/mozilla/firefox/releases/144/index.md index c1f4cff6f57c132..d439daf0e0c203a 100644 --- a/files/en-us/mozilla/firefox/releases/144/index.md +++ b/files/en-us/mozilla/firefox/releases/144/index.md @@ -45,6 +45,7 @@ Firefox 144 was released on [October 14, 2025](https://whattrainisitnow.com/rele - The [View Transition API](/en-US/docs/Web/API/View_Transition_API) is now supported for [SPAs (single-page applications)](/en-US/docs/Glossary/SPA). This provides a mechanism for easily creating animated transitions between different website views. ([Firefox bug 1985809](https://bugzil.la/1985809)). - The {{domxref("CSSStyleProperties")}} interface of the [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) is now implemented (this was renamed from a non-standard interface `CSS2Properties`). The new interface is present but not yet used. ([Firefox bug 1919582](https://bugzil.la/1919582)). - The {{domxref("PerformanceEventTiming.interactionId", "interactionId")}} property of the {{domxref("PerformanceEventTiming")}} interface is a unique identifier that associates related events belonging to a single user interaction. This can be used to calculate the {{glossary("Interaction to next paint")}} metric, which helps analyze responsiveness to user interaction over the lifetime of a page. ([Firefox bug 1956809](https://bugzil.la/1956809)). +- The {{domxref("Navigation.navigate()")}} method of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} no longer accepts URLs with a scheme of `javascript`. Calling `navigate()` with a `javascript:` URL now throws a `NotSupportedError` exception. ([Firefox bug 1981104](https://bugzil.la/1981104)). #### DOM diff --git a/files/en-us/web/api/customelementregistry/get/index.md b/files/en-us/web/api/customelementregistry/get/index.md index 78f0ae9b89a1f04..cadd9bb0f04c8a7 100644 --- a/files/en-us/web/api/customelementregistry/get/index.md +++ b/files/en-us/web/api/customelementregistry/get/index.md @@ -34,16 +34,16 @@ customElements.define( "my-paragraph", class extends HTMLElement { constructor() { - let templateContent = document.getElementById("custom-paragraph").content; + const template = document.getElementById("custom-paragraph"); super() // returns element this scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot - .append(templateContent.cloneNode(true)); + .append(document.importNode(template.content, true)); } }, ); // Return a reference to the my-paragraph constructor -let ctor = customElements.get("my-paragraph"); +const ctor = customElements.get("my-paragraph"); ``` ## Specifications diff --git a/files/en-us/web/api/customelementregistry/getname/index.md b/files/en-us/web/api/customelementregistry/getname/index.md index 723608cb9856103..95406aade6a9839 100644 --- a/files/en-us/web/api/customelementregistry/getname/index.md +++ b/files/en-us/web/api/customelementregistry/getname/index.md @@ -32,10 +32,10 @@ The name for the previously defined custom element, or `null` if there is no cus ```js class MyParagraph extends HTMLElement { constructor() { - let templateContent = document.getElementById("custom-paragraph").content; + const template = document.getElementById("custom-paragraph"); super() // returns element this scope .attachShadow({ mode: "open" }) // sets AND returns this.shadowRoot - .append(templateContent.cloneNode(true)); + .append(document.importNode(template.content, true)); } } diff --git a/files/en-us/web/api/document/importnode/index.md b/files/en-us/web/api/document/importnode/index.md index c7c9cca89378a97..d3126bc8ea05384 100644 --- a/files/en-us/web/api/document/importnode/index.md +++ b/files/en-us/web/api/document/importnode/index.md @@ -8,17 +8,13 @@ browser-compat: api.Document.importNode {{APIRef("DOM")}} -The {{domxref("Document")}} object's **`importNode()`** method creates a copy of a -{{domxref("Node")}} or {{domxref("DocumentFragment")}} from another document, to be -inserted into the current document later. +The **`importNode()`** method of the {{domxref("Document")}} interface creates a copy of a {{domxref("Node")}} or {{domxref("DocumentFragment")}} from another document, to be inserted into the current document later. -The imported node is not yet included in the document tree. To include it, you need to -call an insertion method such as {{domxref("Node.appendChild", "appendChild()")}} or -{{domxref("Node.insertBefore", "insertBefore()")}} with a node that _is_ -currently in the document tree. +The imported node is not yet included in the document tree. To include it, you need to call an insertion method such as {{domxref("Node.appendChild", "appendChild()")}} or {{domxref("Node.insertBefore", "insertBefore()")}} with a node that _is_ currently in the document tree. -Unlike {{domxref("document.adoptNode()")}}, the original node is not removed from its -original document. The imported node is a clone of the original. +Unlike {{domxref("document.adoptNode()")}}, the original node is not removed from its original document. The imported node is a clone of the original. + +The {{domxref("Node.cloneNode()")}} method also creates a copy of a node. The difference is that `importNode()` clones the node in the context of the calling document, whereas `cloneNode()` uses the document of the node being cloned. The document context determines the {{domxref("CustomElementRegistry")}} for constructing any custom elements. For this reason, to clone nodes to be used in another document, use `importNode()` on the target document. The {{domxref("HTMLTemplateElement.content")}} is owned by a separate document, so it should also be cloned using `document.importNode()` so that custom element descendants are constructed using the definitions in the current document. See the {{domxref("Node.cloneNode()")}} page's examples for more details. ## Syntax @@ -50,6 +46,8 @@ The copied `importedNode` in the scope of the importing document. ## Examples +### Using importNode() + ```js const iframe = document.querySelector("iframe"); const oldNode = iframe.contentWindow.document.getElementById("myNode"); diff --git a/files/en-us/web/api/documentfragment/getelementbyid/index.md b/files/en-us/web/api/documentfragment/getelementbyid/index.md index 56155f048ac231f..52aff4b716116f8 100644 --- a/files/en-us/web/api/documentfragment/getelementbyid/index.md +++ b/files/en-us/web/api/documentfragment/getelementbyid/index.md @@ -102,7 +102,7 @@ function displayStatus() { while (fragmentViewer.hasChildNodes()) { fragmentViewer.removeChild(fragmentViewer.lastChild); } - for (entry of fragment.children) { + for (const entry of fragment.children) { fragmentViewer.appendChild(entry.cloneNode(true)); } } diff --git a/files/en-us/web/api/htmltemplateelement/content/index.md b/files/en-us/web/api/htmltemplateelement/content/index.md index 0ad4c38a622126c..bf376c92eb8f23e 100644 --- a/files/en-us/web/api/htmltemplateelement/content/index.md +++ b/files/en-us/web/api/htmltemplateelement/content/index.md @@ -8,9 +8,9 @@ browser-compat: api.HTMLTemplateElement.content {{APIRef("Web Components")}} -The **`HTMLTemplateElement.content`** property returns a -`