[
  {
    "path": ".all-contributorsrc",
    "content": "{\n  \"projectName\": \"razzle\",\n  \"projectOwner\": \"jaredpalmer\",\n  \"files\": [\n    \"README.md\"\n  ],\n  \"imageSize\": 100,\n  \"commit\": true,\n  \"contributors\": [\n    {\n      \"login\": \"jaredpalmer\",\n      \"name\": \"Jared Palmer\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/4060187?v=4\",\n      \"profile\": \"http://jaredpalmer.com\",\n      \"contributions\": [\n        \"question\",\n        \"code\",\n        \"design\",\n        \"doc\",\n        \"example\",\n        \"ideas\",\n        \"review\",\n        \"test\",\n        \"tool\"\n      ]\n    },\n    {\n      \"login\": \"Nimaa77\",\n      \"name\": \"Nima Arefi\",\n      \"avatar_url\": \"https://avatars1.githubusercontent.com/u/49443619?v=4\",\n      \"profile\": \"https://github.com/Nimaa77\",\n      \"contributions\": [\n        \"question\",\n        \"code\",\n        \"doc\",\n        \"example\",\n        \"ideas\",\n        \"review\",\n        \"test\",\n        \"tool\"\n      ]\n    },\n    {\n      \"login\": \"fivethreeo\",\n      \"name\": \"Øyvind Saltvik\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/410?v=4\",\n      \"profile\": \"https://github.com/fivethreeo/\",\n      \"contributions\": [\n        \"question\",\n        \"code\",\n        \"example\",\n        \"ideas\",\n        \"review\",\n        \"test\",\n        \"tool\"\n      ]\n    },\n    {\n      \"login\": \"jariz\",\n      \"name\": \"Jari Zwarts\",\n      \"avatar_url\": \"https://avatars3.githubusercontent.com/u/1415847?v=4\",\n      \"profile\": \"https://jari.io\",\n      \"contributions\": [\n        \"question\",\n        \"code\",\n        \"ideas\",\n        \"plugin\",\n        \"review\"\n      ]\n    },\n    {\n      \"login\": \"gaearon\",\n      \"name\": \"Dan Abramov\",\n      \"avatar_url\": \"https://avatars0.githubusercontent.com/u/810438?v=4\",\n      \"profile\": \"http://twitter.com/dan_abramov\",\n      \"contributions\": [\n        \"code\",\n        \"ideas\"\n      ]\n    },\n    {\n      \"login\": \"ericclemmons\",\n      \"name\": \"Eric Clemmons\",\n      \"avatar_url\": \"https://avatars0.githubusercontent.com/u/15182?v=4\",\n      \"profile\": \"http://ericclemmons.github.com/\",\n      \"contributions\": [\n        \"code\",\n        \"ideas\"\n      ]\n    },\n    {\n      \"login\": \"HofmannZ\",\n      \"name\": \"Zino Hofmann\",\n      \"avatar_url\": \"https://avatars3.githubusercontent.com/u/17142193?v=4\",\n      \"profile\": \"https://www.linkedin.com/in/zinohofmann/\",\n      \"contributions\": [\n        \"example\"\n      ]\n    },\n    {\n      \"login\": \"lucasterra\",\n      \"name\": \"Lucas Terra\",\n      \"avatar_url\": \"https://avatars2.githubusercontent.com/u/441058?v=4\",\n      \"profile\": \"https://www.linkedin.com/in/lucasterra7/\",\n      \"contributions\": [\n        \"code\",\n        \"example\",\n        \"plugin\"\n      ]\n    },\n    {\n      \"login\": \"rayandrews\",\n      \"name\": \"Ray Andrew\",\n      \"avatar_url\": \"https://avatars1.githubusercontent.com/u/4437323?v=4\",\n      \"profile\": \"https://www.linkedin.com/in/ray-andrew/\",\n      \"contributions\": [\n        \"code\",\n        \"example\",\n        \"plugin\"\n      ]\n    },\n    {\n      \"login\": \"heithemmoumni\",\n      \"name\": \"Heithem Moumni\",\n      \"avatar_url\": \"https://avatars0.githubusercontent.com/u/18581851?v=4\",\n      \"profile\": \"https://www.linkedin.com/in/heithemmoumni/\",\n      \"contributions\": [\n        \"code\",\n        \"example\",\n        \"plugin\"\n      ]\n    },\n    {\n      \"login\": \"silviubogan\",\n      \"name\": \"Silviu Bogan\",\n      \"avatar_url\": \"https://avatars.githubusercontent.com/u/198924?v=4\",\n      \"profile\": \"https://silviubogan.ro/\",\n      \"contributions\": [\n        \"code\",\n        \"example\"\n      ]\n    }\n  ],\n  \"repoType\": \"github\",\n  \"commitConvention\": \"none\"\n}\n"
  },
  {
    "path": ".changeset/config.json",
    "content": "{\n    \"commit\": false,\n    \"updateInternalDependencies\": \"minor\",\n    \"linked\": [],\n    \"fixed\": [[\"babel-preset-razzle\",\"create-razzle-app\",\"razzle\", \"razzle-*\"]],\n    \"access\": \"public\",\n    \"baseBranch\": \"master\",\n    \"ignore\": [],\n    \"changelog\": [\"@changesets/changelog-github\", { \"repo\": \"jaredpalmer/razzle\" }]\n  }"
  },
  {
    "path": ".eslintignore",
    "content": "node_modules/\nbuild\nmy-app*\ntest/fixtures\ntest/tests\npackages/create-razzle-app/templates\nexamples"
  },
  {
    "path": ".eslintrc",
    "content": "{\n  \"extends\": \"eslint:recommended\",\n  \"env\": {\n    \"browser\": true,\n    \"commonjs\": true,\n    \"node\": true,\n    \"es6\": false\n  },\n  \"parserOptions\": {\n    \"ecmaVersion\": 6\n  },\n  \"rules\": {\n    \"no-console\": \"off\",\n    \"strict\": [\"error\", \"global\"],\n    \"curly\": \"warn\"\n  }\n}\n"
  },
  {
    "path": ".github/CODE_OF_CONDUCT.md",
    "content": "\n# Contributor Covenant Code of Conduct\n\n<!-- INSERT doctoc generated TOC please keep comment here to allow auto update -->\n<!-- START doctoc generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->\n- [Contributor Covenant Code of Conduct](#contributor-covenant-code-of-conduct)\n  - [Our Pledge](#our-pledge)\n  - [Our Standards](#our-standards)\n  - [Our Responsibilities](#our-responsibilities)\n  - [Scope](#scope)\n  - [Enforcement](#enforcement)\n  - [Attribution](#attribution)\n<!-- END doctoc generated instructions please keep comment here to allow auto update -->\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, gender identity and expression, level of experience,\nnationality, personal appearance, race, religion, or sexual identity and\norientation.\n\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n* Using welcoming and inclusive language\n* Being respectful of differing viewpoints and experiences\n* Gracefully accepting constructive criticism\n* Focusing on what is best for the community\n* Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n* The use of sexualized language or imagery and unwelcome sexual attention or\nadvances\n* Trolling, insulting/derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or electronic\n  address, without explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n  professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at [info@palmer.net](mailto:info@palmer.net). All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at [http://contributor-covenant.org/version/1/4][version]\n\n[homepage]: http://contributor-covenant.org\n[version]: http://contributor-covenant.org/version/1/4/\n"
  },
  {
    "path": ".github/CONTRIBUTING.md",
    "content": "\n# Contributing to Razzle\n\nHi there! Thanks for your interest in Razzle. This guide will help you get started contributing.\n\n<!-- INSERT doctoc generated TOC please keep comment here to allow auto update -->\n<!-- START doctoc generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->\n- [Contributing to Razzle](#contributing-to-razzle)\n  - [Developing locally](#developing-locally)\n- [optionally install add-dependencies](#optionally-install-add-dependencies)\n    - [Commands](#commands)\n    - [Workflow for working on razzle core with examples](#workflow-for-working-on-razzle-core-with-examples)\n- [or](#or)\n- [git checkout -b my-feature-branch master](#git-checkout--b-my-feature-branch-master)\n- [git checkout -b my-feature-branch three](#git-checkout--b-my-feature-branch-three)\n- [/home/oyvind/Documents/GitHub/razzle/](#homeoyvinddocumentsgithubrazzle)\n- [to make sure tests pass](#to-make-sure-tests-pass)\n- [to add a new example](#to-add-a-new-example)\n- [to work on a example](#to-work-on-a-example)\n- [if it is a example with webpack5 you need to do](#if-it-is-a-example-with-webpack5-you-need-to-do)\n- [switch back to webpack4 later to work with webpack4](#switch-back-to-webpack4-later-to-work-with-webpack4)\n- [then](#then)\n- [if you want to add dependencies to the example](#if-you-want-to-add-dependencies-to-the-example)\n- [if you make changes to startserver plugin](#if-you-make-changes-to-startserver-plugin)\n- [to run example tests with unreleased razzle packages with specific webpack and specific tests](#to-run-example-tests-with-unreleased-razzle-packages-with-specific-webpack-and-specific-tests)\n- [Commands being run during testing puts output and puppeteer screenshots in test-artifacts/](#commands-being-run-during-testing-puts-output-and-puppeteer-screenshots-in-test-artifacts)\n- [Trouble with puppeteer?](#trouble-with-puppeteer)\n    - [Updating your fork](#updating-your-fork)\n  - [Adding examples](#adding-examples)\n    - [Use examples/basic as template](#use-examplesbasic-as-template)\n    - [Naming examples](#naming-examples)\n    - [How to get your example merged](#how-to-get-your-example-merged)\n    - [Guidelines](#guidelines)\n  - [Why wasn't my PR merged?](#why-wasnt-my-pr-merged)\n  - [Getting recognition](#getting-recognition)\n  - [Getting help](#getting-help)\n<!-- END doctoc generated instructions please keep comment here to allow auto update -->\n\nRazzle is monorepo made up of a several npm packages powered by Lerna.\n\n- `examples`: All examples go in here.\n- `packages`: This is where the magic happens\n  - `babel-preset-razzle`: Razzle's default Babel preset.\n  - `create-razzle-app`: Razzle's CLI tool responsible for initialization of new projects\n  - `razzle`: The core library\n  - `razzle-dev-utils`: Utilities and helpers\n- `scripts`: Utility scripts related to cleaning and bootstrapping the repo\n- `test`: End-to-end tests\n\n## Developing locally\n\nFirst, fork the repo to your GitHub account. Then clone your fork to your local\nmachine and make a new branch for your feature/bug/patch etc. It's a good idea to not develop directly on master so you can get updates.\n\n```\ngit clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git\ncd razzle\ngit checkout -B <my-branch>\nNODE_ENV=development yarn install ---ignore-engines\n# optionally install add-dependencies\nsudo npm install add-dependencies -g\n```\n\nThis will install all `node_modules` in all the packages and symlink\ninter-dependencies. Thus when you make local changes in any of the packages you can try them\nimmediately in all the examples. `add-dependencies` can be used to just add packages to `package.json`.\n\n### Commands\n\n- `yarn clean`: Clean up all `node_modules` and remove all symlinks from packages and examples.\n- `yarn test --runInBand`: Runs all tests\n- `yarn test:packages`: Runs tests for packages\n- `yarn test:e2e`: Runs end-to-end tests\n- `yarn build-docs`: Builds docs/ updates doc TOC\n- `yarn publish-all-canary`: Does a `razzle@canary` release.\n- `yarn publish-all-stable`: Does a a stable release(uses the npm version released of the packages)\n- `yarn new-example`: Creates a new example from another example. `yarn new-example basic new-example`.\n- `yarn bootstrap-examples`: Run `yarn` with specific examples as workspaces. Automatically symlinks inter-dependent modules. Run `yarn restrap` in the example to reinstall.\n- `yarn test:examples:simple`: Runs tests for all simple examples (uses the npm version released of the packages)\n- `yarn test:examples:complex`: Runs tests for all complex examples (uses the npm version released of the packages)\n- `yarn test:examples`: Runs tests for all examples (uses the npm version released of the packages)\n\n### Workflow for working on razzle core with examples\n\n```bash\n\ngit clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git\ncd razzle\ngit checkout -b my-feature-branch canary\n\n# or\n# git checkout -b my-feature-branch master\n# git checkout -b my-feature-branch three\n\nsudo npm install add-dependencies yalc -g\n\npwd\n# /home/oyvind/Documents/GitHub/razzle/\n\nNODE_ENV=development yarn install ---ignore-engines\n\n# to make sure tests pass\nyarn test --runInBand\n\n# to add a new example\nyarn new-example existingexample with-somefeature\n\n# to work on a example\ncd examples/basic\nexample=\"$(basename $PWD)\"\npushd ../..\n\n# if it is a example with webpack5 you need to do\nyarn add -W webpack@5.24.0 html-webpack-plugin@5.2.0\n\n# switch back to webpack4 later to work with webpack4\nyarn add -W webpack@4.46.0 html-webpack-plugin@4.5.2\n\n# then\nyarn bootstrap-examples $example\npopd\nyarn build\n\n# if you want to add dependencies to the example\nadd-dependencies somedependency\nyarn restrap\n\n# if you make changes to startserver plugin\npushd ../..\ncd packages/razzle-start-server-webpack-plugin\nyarn build\npopd\n\n# to run example tests with unreleased razzle packages with specific webpack and specific tests\n\nWEBPACK_DEPS=\"webpack@5.24.0 html-webpack-plugin@5.2.0\" PACKAGE_MANAGER=\"yalc\" NPM_TAG=\"development\" yarn test:examples --runInBand -t with-tailwindcss\nWEBPACK_DEPS=\"webpack@4.46.0 html-webpack-plugin@4.5.2\" PACKAGE_MANAGER=\"yalc\" NPM_TAG=\"development\" yarn test:examples --runInBand -t with-tailwindcss\n\n# Commands being run during testing puts output and puppeteer screenshots in test-artifacts/\n# Trouble with puppeteer?\n\nsudo sysctl -w kernel.unprivileged_userns_clone=1\n```\n\n### Updating your fork\n\nWhen you want to pull down changes to your fork enter the following into your terminal:\n\n```bash\ngit checkout master\ngit pull origin master\n```\n\n## Adding examples\n\n### Use examples/basic as template\nIf you'd like to add an example, I suggest you duplicate the `examples/basic` folder `yarn new-example basic your-example`and use that as kind of base template. Before you start adding stuff, go ahead and change the name of the package in the your new example's `package.json`. Then go back to the project root and run `yarn bootstrap-examples your-example`. This will make sure that your new example is using your local version of all the `packages`.\n\n### Naming examples\n\nAll example folders should be named `with-<thing-you-are-demonstrating>`. Each example's npm package name (found in it's `package.json`) should look like `razzle-examples-with-<thing-you-are-demonstrating>`.\n\n### How to get your example merged\n\n- Make sure to comment the important parts of your code and include a **well-written**\n\"Idea behind the example\" section. This is more important to me than your actual code.\n- Keep your example limited to one idea / library / feature (e.g. don't submit `with-styled-components-and-material-ui`). That being said, there are times when this rule will be relaxed such as if you are showing how to use Apollo and Redux or \\<Flux Library\\> + React Router.\n- Your example **MUST** implement Hot Module Replacement. If it does not update when you make edits, you have broken something.\n- Your example should be minimalistic and concise, or a direct copy of another prominent example from the original library (like copying an example directly from react-redux).\n\n### Guidelines\n\n[Commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-guidelines)\n\n## Why wasn't my PR merged?\n\nI will do my best to write out my reasoning before closing a PR, but 80% of the time it falls under one of these...\n\n- You did not read this document\n- Your code breaks an internal application (I will be transparent about this)\n- Your code conflicts with some future plans (I will be transparent about this too)\n- You've said something inappropriate or have broken the Code of Conduct\n\n## Getting recognition\n\nWe use the project README to recognize the contributions of members of the project community.\n\nTo add a contributor: `all-contributors add github_username doc,code`\n\n[Valid contributing keys](https://allcontributors.org/docs/en/emoji-key)\n\n## Getting help\n\nTweet / DM [@jaredpalmer](https://twitter.com/jaredpalmer)\nTweet / DM [@nima_arf](https://twitter.com/nima_arf)\nTweet / DM [@fivethreeo](https://twitter.com/fivethreeo)\n"
  },
  {
    "path": ".github/FUNDING.yml",
    "content": "# These are supported funding model platforms\n\nopen_collective: razzle\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Bug_report.md",
    "content": "---\r\nname: \"\\U0001F41B Bug report\"\r\nabout: Create a report to help make Razzle better\r\n---\r\n\r\n## 🐛 Bug report\r\n\r\n### Current Behavior\r\n\r\n<!-- If applicable, add screenshots to help explain your problem. -->\r\n\r\n### Expected behavior\r\n\r\n<!-- A clear and concise description of what you expected to happen. -->\r\n\r\n### Reproducible example\r\n\r\n<!-- Create A github repo and Send a link here -->\r\n\r\n\r\n### Suggested solution(s)\r\n\r\n<!-- How could we solve this bug? What changes would need to made to Razzle? -->\r\n\r\n### Additional context\r\n\r\n<!-- Add any other context about the problem here.  -->\r\n\r\n### Your environment\r\n\r\n<!-- PLEASE FILL THIS OUT -->\r\n\r\n| Software         | Version(s) |\r\n| ---------------- | ---------- |\r\n| Razzle           |\r\n| Razzle Plugins   |\r\n| Node             |\r\n| Browser          |\r\n| npm/Yarn         |\r\n| Operating System |\r\n| TypeScript       |\r\n| React            |\r\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Documentation.md",
    "content": "---\nname: \"\\U0001F41B Documentation\"\nabout: Imrovements or suggestions of Razzle documentation\n---\n\n## 📖 Documentation\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Feature_request.md",
    "content": "---\r\nname: \"\\U0001F680Feature request\"\r\nabout: Suggest an idea for Razzle\r\n---\r\n\r\n## 🚀 Feature request\r\n\r\n### Current Behavior\r\n\r\n<!-- A clear and concise description of what is the current behavior / use.  -->\r\n\r\n### Desired Behavior\r\n\r\n<!-- A clear and concise description of what you want to happen.  -->\r\n\r\n### Suggested Solution\r\n\r\n<!-- Suggest a solution that the community/maintainers/you may take to enable the desired behavior  -->\r\n\r\n<!-- NOTE: Feature Requests without suggested solutions may not be addressed or treated with the same level of urgency as those that have suggested solutions. -->\r\n\r\n### Who does this impact? Who is this for?\r\n\r\n<!-- Who is this for? All users? TypeScript users? Beginners? Advanced? Yourself? People using X, Y, X, etc.? -->\r\n\r\n### Describe alternatives you've considered\r\n\r\n<!-- A clear and concise description of any alternative solutions or features you've considered.  -->\r\n\r\n### Additional context\r\n\r\n<!-- Add any other context or links about the feature request here. -->\r\n"
  },
  {
    "path": ".github/ISSUE_TEMPLATE/Question.md",
    "content": "---\r\nname: \"❓Question\"\r\nabout: 'Ask a Question!'\r\n---\r\n\r\n## ❓Question\r\n\r\n\r\n"
  },
  {
    "path": ".github/labels.yml",
    "content": "examples:\n  - examples/*\n  - examples/**/*\n\nrazzle: \n  - packages/razzle/*\n  - packages/razzle/**/*\n\nwebpack: \n  - packages/razzle/*\n  - packages/razzle/**/*\n\nplugins: \n  - packages/razzle-plugin-*/*\n  - packages/razzle-plugin-*/**/*\n\nrepo:\n  - ./*"
  },
  {
    "path": ".github/stale.yml",
    "content": "# Number of days of inactivity before an issue becomes stale\ndaysUntilStale: 60\n# Number of days of inactivity before a stale issue is closed\ndaysUntilClose: 14\n# Issues with these labels will never be considered stale\nexemptLabels:\n  - pinned\n  - security\n# Label to use when marking an issue as stale\nstaleLabel: stale\n# Comment to post when marking an issue as stale. Set to `false` to disable\nmarkComment: false\n# Comment to post when closing a stale issue. Set to `false` to disable\ncloseComment: Hi everyone, in an effort to clean up the issue list, this issue was closed due to inactivity. If this is still related / important to you please tag me: @ elliottjro. Thanks for understanding!\n"
  },
  {
    "path": ".github/workflows/examples.yml",
    "content": "name: Test examples on trigger\n\non:\n  workflow_dispatch:\n    inputs:\n      npm_tag:\n        description: 'The npm tag for create razzle app'\n        default: 'development'\n      jest_filter:\n        description: 'The filter for jest tests'\n        default: 'simple'\n      package_manager:\n        description: 'The package manager to use, yalc with yarn default'\n        default: 'yalc'\n\n\njobs:\n  build:\n\n    runs-on: ${{ matrix.os }}\n\n    strategy:\n      fail-fast: false\n      matrix:\n        node-version: [10.x, 12.x, 13.x, 14.x]\n        os: [ubuntu-latest, windows-latest, macOS-latest]\n        webpack: [\"webpack@4.46.0 html-webpack-plugin@4.5.2\" , \"webpack@5.24.0 html-webpack-plugin@5.2.0\"]\n\n    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}\n\n    steps:\n\n    - name: Get current date\n      id: date\n      run: echo \"::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')\"\n\n    - name: Log date\n      run: echo \"${{ steps.date.outputs.date }}\"\n\n    - name: Set default run status\n      run: echo \"::set-output name=last_run_status::default\" > last_run_status\n\n    - name: Restore last run status\n      id: last_run\n      uses: actions/cache@v2\n      with:\n        path: |\n          last_run_status\n        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}\n        restore-keys: |\n          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-\n\n    - name: Set last run status\n      id: last_run_status\n      run: cat last_run_status\n\n    - name: Checkout ref\n      uses: actions/checkout@v2\n      with:\n        ref: ${{ github.event.workflow_dispatch.ref }}\n\n    - name: Use Node.js ${{ matrix.node-version }}\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      uses: actions/setup-node@v1\n      with:\n        node-version: ${{ matrix.node-version }}\n\n    - name: Install yalc globally\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: npm install -g yalc\n\n    - name: Install elm globally\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn global add elm\n\n    - name: Restore lerna\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      id: cache\n      uses: actions/cache@v2\n      with:\n        path: |\n          node_modules\n          */*/node_modules\n        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}\n\n    - name: Install and bootstrap packages\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000\n\n    - name: Install ${{ matrix.webpack }}\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000\n\n    - name: Run tests\n      id: test_run\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn test:examples -t ${{ github.event.inputs.jest_filter }} --runInBand\n      env:\n        WEBPACK_DEPS: \"${{ matrix.webpack }}\"\n        NPM_TAG: \"${{ github.event.inputs.npm_tag }}\"\n        PACKAGE_MANAGER: \"${{ github.event.inputs.package_manager }}\"\n        WARNINGS_ERRORS_DISABLE: true\n\n    - name: Upload test artifacts\n      uses: actions/upload-artifact@v2\n      if: ${{ always() && steps.last_run_status.outputs.last_run_status != 'success' }}\n      with:\n        name: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ github.event.inputs.npm_tag }}-${{ github.event.inputs.jest_filter }}-${{ github.event.inputs.package_manager }}\n        path: test-artifacts/\n\n    - name: Save run status\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: echo \"::set-output name=last_run_status::${{ steps.test_run.outcome }}\" > last_run_status\n"
  },
  {
    "path": ".github/workflows/examples_node14.yml",
    "content": "name: Test examples on trigger using node 14.x\n\n\non:\n  workflow_dispatch:\n    inputs:\n      npm_tag:\n        description: 'The npm tag for create razzle app'\n        default: 'development'\n      jest_filter:\n        description: 'The filter for jest tests'\n        default: 'simple'\n      package_manager:\n        description: 'The package manager to use, yalc with yarn default'\n        default: 'yalc'\n\n\n\njobs:\n  build:\n\n    runs-on: ${{ matrix.os }}\n\n    strategy:\n      fail-fast: false\n      matrix:\n        node-version: [14.x]\n        os: [ubuntu-latest, windows-latest, macOS-latest]\n        webpack: [\"webpack@4.46.0 html-webpack-plugin@4.5.2\" , \"webpack@5.24.0 html-webpack-plugin@5.2.0\"]\n\n    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}\n\n    steps:\n\n    - name: Get current date\n      id: date\n      run: echo \"::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')\"\n\n    - name: Log date\n      run: echo \"${{ steps.date.outputs.date }}\"\n\n    - name: Set default run status\n      run: echo \"::set-output name=last_run_status::default\" > last_run_status\n\n    - name: Restore last run status\n      id: last_run\n      uses: actions/cache@v2\n      with:\n        path: |\n          last_run_status\n        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}\n        restore-keys: |\n          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-\n\n    - name: Set last run status\n      id: last_run_status\n      run: cat last_run_status\n\n    - name: Checkout ref\n      uses: actions/checkout@v2\n      with:\n        ref: ${{ github.event.workflow_dispatch.ref }}\n\n    - name: Use Node.js ${{ matrix.node-version }}\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      uses: actions/setup-node@v1\n      with:\n        node-version: ${{ matrix.node-version }}\n\n    - name: Install yalc globally\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: npm install -g yalc\n\n    - name: Install elm globally\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn global add elm\n\n    - name: Restore lerna\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      id: cache\n      uses: actions/cache@v2\n      with:\n        path: |\n          node_modules\n          */*/node_modules\n        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}\n\n    - name: Install and bootstrap packages\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000\n\n    - name: Install ${{ matrix.webpack }}\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000\n\n    - name: Run tests\n      id: test_run\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn test:examples -t ${{ github.event.inputs.jest_filter }} --runInBand\n      env:\n        WEBPACK_DEPS: \"${{ matrix.webpack }}\"\n        NPM_TAG: \"${{ github.event.inputs.npm_tag }}\"\n        PACKAGE_MANAGER: \"${{ github.event.inputs.package_manager }}\"\n        WARNINGS_ERRORS_DISABLE: true\n\n    - name: Upload test artifacts\n      uses: actions/upload-artifact@v2\n      if: ${{ always() && steps.last_run_status.outputs.last_run_status != 'success' }}\n      with:\n        name: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ github.event.inputs.npm_tag }}-${{ github.event.inputs.jest_filter }}-${{ github.event.inputs.package_manager }}\n        path: test-artifacts/\n\n    - name: Save run status\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: echo \"::set-output name=last_run_status::${{ steps.test_run.outcome }}\" > last_run_status\n"
  },
  {
    "path": ".github/workflows/label.yml",
    "content": "# Automatically label PRs every hour based on your .github/labels.yaml:\n#\n# This workflow will triage pull requests and apply a label based on the\n# paths that are modified in the pull request.\n#\n# To use this workflow, you will need to set up a .github/labeler.yml\n# file with configuration.  For more information, see:\n# https://github.com/actions/labeler/blob/master/README.md\n\nname: \"Label PRs from globs\"\non:\n  schedule:\n  - cron: \"0 1 * * *\"\n\njobs:\n  execute:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Label PRs\n        uses: jpmcb/prow-github-actions@v1.0.0\n        with:\n          jobs: 'pr-labeler'\n          github-token: \"${{ secrets.GITHUB_TOKEN }}\"\n"
  },
  {
    "path": ".github/workflows/nodejs.yml",
    "content": "name: Run tests on push\n\non: [push]\n\njobs:\n  build:\n\n    runs-on: ${{ matrix.os }}\n\n    strategy:\n      fail-fast: false\n      matrix:\n        node-version: [10.x, 12.x, 13.x, 14.x]\n        os: [ubuntu-latest, windows-latest, macOS-latest]\n        webpack: [\"webpack@4.46.0 html-webpack-plugin@4.5.2\" , \"webpack@5.24.0 html-webpack-plugin@5.2.0\"]\n\n    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}\n\n    steps:\n\n    - name: Get current date\n      id: date\n      run: echo \"::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')\"\n\n    - name: Log date\n      run: echo \"${{ steps.date.outputs.date }}\"\n\n    - name: Set default run status\n      run: echo \"::set-output name=last_run_status::default\" > last_run_status\n\n    - name: Restore last run status\n      id: last_run\n      uses: actions/cache@v2\n      with:\n        path: |\n          last_run_status\n        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}\n        restore-keys: |\n          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-\n\n    - name: Set last run status\n      id: last_run_status\n      run: cat last_run_status\n\n    - name: Log last run status\n      run: echo \"${{ steps.last_run_status.outputs.last_run_status }}\"\n\n    - uses: actions/checkout@v1\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n\n    - name: Use Node.js ${{ matrix.node-version }}\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      uses: actions/setup-node@v1\n      with:\n        node-version: ${{ matrix.node-version }}\n\n    - name: Install elm globally\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn global add elm\n\n    - name: Restore lerna\n      id: cache\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      uses: actions/cache@v2\n      with:\n        path: |\n          node_modules\n          */*/node_modules\n        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}\n\n    - name: Install and bootstrap packages\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000\n\n    - name: Install ${{ matrix.webpack }}\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000\n\n    - name: Run tests\n      id: test_run\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn test --runInBand --coverage\n      env:\n        CI: true\n        WARNINGS_ERRORS_DISABLE: true\n\n    - name: Save run status\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: echo \"::set-output name=last_run_status::${{ steps.test_run.outcome }}\" > last_run_status\n"
  },
  {
    "path": ".github/workflows/release.yml",
    "content": "name: Release\n\non:\n  push:\n    branches:\n      - master\n\njobs:\n  release:\n    name: Release\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout Repo\n        uses: actions/checkout@v2\n        with:\n          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits\n          fetch-depth: 0\n\n      - name: Setup Node.js 12.x\n        uses: actions/setup-node@v2\n        with:\n          node-version: 12.x\n\n      - name: Install Dependencies\n        run: yarn --frozen-lockfile\n\n      - name: Create Release Pull Request or Publish\n        uses: changesets/action@master\n        with:\n          publish: yarn changeset publish\n        env:\n          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}"
  },
  {
    "path": ".github/workflows/test-examples.yml",
    "content": "name: Test examples on trigger\n\n\non:\n  workflow_dispatch:\n    inputs:\n      logLevel:\n        description: 'Log level'\n        required: true\n        default: 'warning'\n      tags:\n        description: 'Test scenario tags'\n\njobs:\n  build:\n\n    runs-on: ${{ matrix.os }}\n\n    strategy:\n      fail-fast: false\n      matrix:\n        node-version: [8.x, 10.x, 12.x, 13.x, 14.x]\n        os: [ubuntu-latest, windows-latest, macOS-latest]\n        webpack: [\"webpack@4.46.0 html-webpack-plugin@4.5.2\" , \"webpack@5.24.0 html-webpack-plugin@5.2.0\"]\n\n    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}\n\n    steps:\n\n    - name: Get current date\n      id: date\n      run: echo \"::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')\"\n\n    - name: Log date\n      run: echo \"${{ steps.date.outputs.date }}\"\n\n    - name: Set default run status\n      run: echo \"::set-output name=last_run_status::default\" > last_run_status\n\n    - name: Restore last run status\n      id: last_run\n      uses: actions/cache@v2\n      with:\n        path: |\n          last_run_status\n        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}\n        restore-keys: |\n          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-\n    - name: Set last run status\n      id: last_run_status\n      run: cat last_run_status\n\n    - name: Log last run status\n      run: echo \"${{ steps.last_run_status.outputs.last_run_status }}\"\n\n    - uses: actions/checkout@v1\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n\n    - name: Use Node.js ${{ matrix.node-version }}\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      uses: actions/setup-node@v1\n      with:\n        node-version: ${{ matrix.node-version }}\n\n    - name: Install elm globally\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn global add elm\n\n    - name: Restore lerna\n      id: cache\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      uses: actions/cache@v2\n      with:\n        path: |\n          node_modules\n          */*/node_modules\n        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}\n\n    - name: Install and bootstrap packages\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000\n\n    - name: Install ${{ matrix.webpack }}\n      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000\n\n    - name: Run tests\n      id: test_run\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: yarn test --runInBand --coverage\n      env:\n        CI: true\n        WARNINGS_ERRORS_DISABLE: true\n\n    - name: Save run status\n      if: steps.last_run_status.outputs.last_run_status != 'success'\n      run: echo \"::set-output name=last_run_status::${{ steps.test_run.outcome }}\" > last_run_status\n"
  },
  {
    "path": ".gitignore",
    "content": "\n# Logs\nlogs\n*.log\nnpm-debug.log*\n.DS_Store\nstage-*\nexample/\n# Runtime data\npids\n*.pid\n*.seed\n\ntest-artifacts\nexamples/*/cache\nexamples/*/build\n*.sqlite3\n\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n.yarn\n\n# node-waf configuration\n.lock-wscript\n\n\n# Dependency directory\nnode_modules\n\n# Optional npm cache directory\n.npm\n\n# Optional REPL history\n.node_repl_history\n\n# Build Output\nbuild\n.vscode\n\n# Editors\n**/.idea\n\n.vercel\n"
  },
  {
    "path": ".prettierrc",
    "content": "{\n  \"trailingComma\": \"es5\",\n  \"singleQuote\": true,\n  \"semi\": true\n}\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2016 Jared Palmer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "examples/.gitignore",
    "content": "yarn.lock\npackage-lock.json\n"
  },
  {
    "path": "examples/basic/README.md",
    "content": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example basic basic\n\ncd basic\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/basic/gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/basic/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/basic/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/basic/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/basic/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/basic/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/basic/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/basic/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/basic/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/basic/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/basic-server/README.md",
    "content": "# Razzle Basic Server Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example basic-server basic-server\n\ncd basic-server\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry point\n`src/index.js` for the server.\n"
  },
  {
    "path": "examples/basic-server/gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/basic-server/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-server\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/basic-server/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/basic-server/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  options: {\n    buildType: 'server-only',\n  }\n};\n"
  },
  {
    "path": "examples/basic-server/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/basic-server/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/basic-server/src/App.js",
    "content": "\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/basic-server/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/basic-server/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/basic-server/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/basic-serverless/README.md",
    "content": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example basic basic\n\ncd basic\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/basic-serverless/gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/basic-serverless/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-serverless\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"ejs\": \"^3.1.6\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/basic-serverless/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/basic-serverless/razzle.config.js",
    "content": "'use strict';\n\nconst path = require('path');\n\nmodule.exports = {\n  options: {\n    buildType: 'iso-serverless'\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    if (opts.env.target === 'node') {\n      config.plugins.push(\n        new opts.webpackObject.ContextReplacementPlugin(\n                                             // we want to replace context\n          /express\\/lib/,                    // and replace all searches in\n                                             // express/lib/*\n          path.resolve('node_modules'),      // to look in folder 'node_modules'\n          {                                  // and return a map\n            'ejs': 'ejs'                     // which resolves request for 'ejs'\n          }                                  // to module 'ejs'\n        )                                    // __webpack_require__(...)(mod)\n        // we set `mod = 'ejs'`\n      )\n    }\n    return config;\n  }\n};\n"
  },
  {
    "path": "examples/basic-serverless/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/basic-serverless/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/basic-serverless/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/basic-serverless/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/basic-serverless/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/basic-serverless/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/basic-serverless/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/basic-spa/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/basic-spa/README.md",
    "content": "# Razzle Single Page App Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example basic-spa basic-spa\n\ncd basic-spa\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is a basic, bare-bones example of how to use razzle to build a single page application (instead of a universal/isomorphic application). It satisfies the entry point `src/client.js` for the browser and includes a template HTML file in `public/index.html`.\n"
  },
  {
    "path": "examples/basic-spa/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-spa\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"serve -s build/public\"\n  },\n  \"dependencies\": {\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"html-webpack-plugin\": \"5.2.0\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"serve\": \"^11.3.2\",\n    \"webpack\": \"5.24.0\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/basic-spa/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"<%= process.env.PUBLIC_PATH %>favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <%= htmlWebpackPlugin.tags.headTags %>\n    <!--\n        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.\n        It will be replaced with the URL of the `public` folder during the build.\n        Only files inside the `public` folder can be referenced from the HTML.\n        Unlike \"/favicon.ico\" or \"favicon.ico\", \"<%= process.env.PUBLIC_PATH %>/favicon.ico\" will\n        work correctly both with client-side routing and a non-root public URL.\n        Learn how to configure a non-root public URL by running `npm run build`.\n      -->\n    <title>React App</title>\n  </head>\n\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n        This HTML file is a template.\n        If you open it directly in the browser, you will see an empty page.\n        You can add webfonts, meta tags, or analytics to this file.\n        The build step will place the bundled scripts into the <body> tag.\n        To begin the development, run `npm start` or `yarn start`.\n        To create a production bundle, use `npm run build` or `yarn build`.\n      -->\n      <%= htmlWebpackPlugin.tags.bodyTags %>\n  </body>\n\n</html>\n"
  },
  {
    "path": "examples/basic-spa/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/basic-spa/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  options: {\n    buildType: 'single-page-application',\n  }\n};\n"
  },
  {
    "path": "examples/basic-spa/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/basic-spa/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/basic-spa/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/basic-spa/src/client.js",
    "content": "import React from 'react';\nimport { render } from 'react-dom';\nimport App from './App';\n\nrender(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-afterjs/README.md",
    "content": "# with-afterjs example\n\nThis example have been moved here: [jaredpalmer/after.js](https://github.com/jaredpalmer/after.js/blob/master/examples/basic)\n"
  },
  {
    "path": "examples/with-custom-babel-config/.babelrc",
    "content": "{\n  \"presets\": [\n    \"razzle/babel\"\n  ],\n  \"plugins\": [\n    \"@babel/plugin-proposal-do-expressions\"\n  ]\n}"
  },
  {
    "path": "examples/with-custom-babel-config/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-custom-babel-config/README.md",
    "content": "# Razzle Custom Babel Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-custom-babel-config with-custom-babel-config\n\ncd with-custom-babel-config\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is an example of how to extend Razzle with a custom `.babelrc` file.\n"
  },
  {
    "path": "examples/with-custom-babel-config/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-custom-babel-config\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\",\n    \"serialize-javascript\": \"^3.0.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.12.10\",\n    \"@babel/plugin-proposal-do-expressions\": \"^7.8.3\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-babel-config/razzle.config.js",
    "content": "module.exports = {\n  options: {\n    verbose: true\n  },\n}\n"
  },
  {
    "path": "examples/with-custom-babel-config/src/App.js",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nconst App = () => (\n  <Switch>\n    <Route exact path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-custom-babel-config/src/Home.js",
    "content": "import React from \"react\";\n\nexport default class MyLuckNo extends React.Component {\n  state = { randomNo: null };\n\n  componentDidMount() {\n    this.recalculate();\n  }\n\n  recalculate() {\n    this.setState({\n      randomNo: Math.ceil(Math.random() * 100),\n    });\n  }\n\n  render() {\n    const { randomNo } = this.state;\n\n    if (randomNo === null) {\n      return <p>Please wait..</p>;\n    }\n\n    // This is an experimental JavaScript feature where we can get with\n    // using babel-preset-stage-0\n    const message = do {\n      if (randomNo < 30) {\n        // eslint-disable-next-line no-unused-expressions\n        (\"Do not give up. Try again.\");\n      } else if (randomNo < 60) {\n        // eslint-disable-next-line no-unused-expressions\n        (\"You are a lucky guy\");\n      } else {\n        // eslint-disable-next-line no-unused-expressions\n        (\"You are soooo lucky!\");\n      }\n    };\n\n    return (\n      <div>\n        <h3>Your Lucky number is: \"{randomNo}\"</h3>\n        <p>{message}</p>\n        <button onClick={() => this.recalculate()}>Try Again</button>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-babel-config/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-custom-babel-config/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-custom-babel-config/src/server.js",
    "content": "import { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const context = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    return { html };\n  }\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html = '', redirect = false } = renderApp(req, res);\n    if (redirect) {\n      res.redirect(redirect);\n    } else {\n      res.send(html);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-custom-devserver-options/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-custom-devserver-options/README.md",
    "content": "# Razzle Custom Webpack Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-custom-devserver-options with-custom-devserver-options\n\ncd with-custom-devserver-options\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis example demonstrates how to use a `razzle.config.js` file to modify Razzle's\nunderlying webpack devServer configuration. It modifies the port of the devServer\nin dev (`razzle start`).\n\nNote that this file is not transpiled, and so you must write it with vanilla\nNode.js-compatible JavaScript.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.port = 3002;\n      // If behind a proxy on a public domain\n      // config.devServer.public = 'example.com:8080';\n    }\n\n    return config;\n  },\n};\n```\n"
  },
  {
    "path": "examples/with-custom-devserver-options/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-custom-devserver-options\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"cross-env CLIENT_PUBLIC_PATH=http://localhost:3002/ razzle start\",\n    \"start:proxied\": \"cross-env CLIENT_PUBLIC_PATH=http://example.com:8080/ razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"cross-env\": \"^7.0.3\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-devserver-options/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-custom-devserver-options/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.port = 3002;\n      // If behind a proxy on a public domain\n      // config.devServer.public = 'example.com:8080';\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-custom-devserver-options/src/App.js",
    "content": "import React from 'react';\n\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-custom-devserver-options/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-custom-devserver-options/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-custom-devserver-options/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-custom-environment-variables/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-custom-environment-variables/README.md",
    "content": "# Razzle Custom Environment Variables Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-custom-environment-variables with-custom-environment-variables\n\ncd with-custom-environment-variables\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis example shows how you can use `.env` files to set environment-specific\n**build-time** variables.\n\n> Note: Razzle's `.env` setup is alsmost identically to [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables).\n\n```bash\n# .env\nHOST=10.69.107.189  # HOST sets the host IP address\nPORT=4000 # Serve on :4000\nVERBOSE=true # Show verbose logging output (will not clear console between compiles)\n\nRAZZLE_MY_CUSTOM_VARIABLE=XXXXXX  # Will be available on server and client as process.env.RAZZLE_MY_CUSTOM_VARIABLE\n```\n"
  },
  {
    "path": "examples/with-custom-environment-variables/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-custom-environment-variables\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n  \"razzle_meta\": {\n    \"port\": \"4000\"\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-environment-variables/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-custom-environment-variables/src/App.js",
    "content": "import React from 'react';\n\nconst App = () => <div>{process.env.RAZZLE_CUSTOM_VAR}</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-custom-environment-variables/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-custom-environment-variables/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-custom-environment-variables/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/.babelrc.node",
    "content": "{\n  \"presets\": [\n    \"razzle/babel\"\n  ],\n  \"plugins\": [\n    \"@babel/plugin-proposal-do-expressions\"\n  ]\n}"
  },
  {
    "path": "examples/with-custom-target-babel-config/.babelrc.web",
    "content": "{\n  \"presets\": [\n    \"razzle/babel\"\n  ],\n  \"plugins\": [\n    \"@babel/plugin-proposal-do-expressions\"\n  ]\n}"
  },
  {
    "path": "examples/with-custom-target-babel-config/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-custom-target-babel-config/README.md",
    "content": "# Razzle Custom Target Babel Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-custom-target-babel-config with-custom-target-babel-config\n\ncd with-custom-target-babel-config\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is an example of how to extend Razzle with a custom `.babelrc.node` and a `.babelrc.web` file.\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-custom-target-babel-config\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\",\n    \"serialize-javascript\": \"^3.0.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.12.10\",\n    \"@babel/plugin-proposal-do-expressions\": \"^7.8.3\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/razzle.config.js",
    "content": "module.exports = {\n  options: {\n    verbose: true,\n    enableTargetBabelrc: true\n  },\n}\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/src/App.js",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nconst App = () => (\n  <Switch>\n    <Route exact path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/src/Home.js",
    "content": "import React from \"react\";\n\nexport default class MyLuckNo extends React.Component {\n  state = { randomNo: null };\n\n  componentDidMount() {\n    this.recalculate();\n  }\n\n  recalculate() {\n    this.setState({\n      randomNo: Math.ceil(Math.random() * 100),\n    });\n  }\n\n  render() {\n    const { randomNo } = this.state;\n\n    if (randomNo === null) {\n      return <p>Please wait..</p>;\n    }\n\n    // This is an experimental JavaScript feature where we can get with\n    // using babel-preset-stage-0\n    const message = do {\n      if (randomNo < 30) {\n        // eslint-disable-next-line no-unused-expressions\n        (\"Do not give up. Try again.\");\n      } else if (randomNo < 60) {\n        // eslint-disable-next-line no-unused-expressions\n        (\"You are a lucky guy\");\n      } else {\n        // eslint-disable-next-line no-unused-expressions\n        (\"You are soooo lucky!\");\n      }\n    };\n\n    return (\n      <div>\n        <h3>Your Lucky number is: \"{randomNo}\"</h3>\n        <p>{message}</p>\n        <button onClick={() => this.recalculate()}>Try Again</button>\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-custom-target-babel-config/src/server.js",
    "content": "import { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  \n  const context = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-custom-webpack-config/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-custom-webpack-config/README.md",
    "content": "# Razzle Custom Webpack Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-custom-webpack-config with-custom-webpack-config\n\ncd with-custom-webpack-config\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis example demonstrates how to use a `razzle.config.js` file to modify Razzle's\nunderlying webpack configuration. It modifies the name of the server's output file\nin production (`razzle build`).\n\nNote that this file is not transpiled, and so you must write it with vanilla\nNode.js-compatible JavaScript.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    // Change the name of the server output file in production\n    if (opts.env.target === 'node' && !opts.env.dev) {\n      config.output.filename = 'custom.js';\n    }\n\n    return config;\n  },\n};\n```\n"
  },
  {
    "path": "examples/with-custom-webpack-config/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-custom-webpack-config\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/custom.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-custom-webpack-config/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-custom-webpack-config/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    // Change the name of the server output file in production\n    if (opts.env.target === 'node' && !opts.env.dev) {\n      config.output.filename = 'custom.js';\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-custom-webpack-config/src/App.js",
    "content": "import React from 'react';\n\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-custom-webpack-config/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-custom-webpack-config/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-custom-webpack-config/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-devcert-https/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-devcert-https/README.md",
    "content": "# Razzle Devcert Https Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-devcert-https with-devcert-https\n\ncd with-devcert-https\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis example demonstrates how to use a `razzle.config.js` file to modify Razzle's\nunderlying configuration using a promise. It modifies the name of the server's output file\nin production (`razzle build`).\n\nNote that this file is not transpiled, and so you must write it with vanilla\nNode.js-compatible JavaScript.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackOptions(opts) {\n    const options = opts.webpackOptions;\n    return new Promise(async (resolve) => {\n      const httpsCredentials = await devcert.certificateFor('localhost');\n      const stringHttpsCredentials = {\n        key: httpsCredentials.key.toString(),\n        cert: httpsCredentials.cert.toString()\n      };\n      if (opts.env.target === 'node' && opts.env.dev) {\n        options.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(stringHttpsCredentials);\n      }\n      if (opts.env.target === 'web' && opts.env.dev) {\n        options.HTTPS_CREDENTIALS = httpsCredentials;\n      }\n      resolve(options);\n    });\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    const options = opts.webpackOptions;\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.https = options.HTTPS_CREDENTIALS;\n    }\n    return config;\n  },\n};\n\n```\n"
  },
  {
    "path": "examples/with-devcert-https/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-devcert-https\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/custom.js\"\n  },\n  \"dependencies\": {\n    \"cors\": \"^2.8.5\",\n    \"express\": \"^4.17.1\",\n    \"https\": \"^1.0.0\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"devcert\": \"^1.1.3\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-devcert-https/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-devcert-https/razzle.config.js",
    "content": "'use strict';\n\nconst devcert = require('devcert');\n\nconst cors = require('cors');\n\nconst whitelist = ['https://localhost:3000', 'https://localhost:3001']; //white list consumers\nconst corsOptions = {\n  origin: '*',\n  // function (origin, callback) {\n  //   console.log(origin);\n  //   if (whitelist.indexOf(origin) !== -1) {\n  //     callback(null, true);\n  //   } else {\n  //     callback(null, false);\n  //   }\n  // },\n  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],\n  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204\n  credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.\n  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']\n};\n\nmodule.exports = {\n  modifyOptions(opts) { // use modifyOptions so certificateFor is called once\n    const options = opts.options.razzleOptions;\n    return new Promise(async (resolve) => {\n      const httpsCredentials = await devcert.certificateFor('localhost');\n      const stringHttpsCredentials = {\n        key: httpsCredentials.key.toString(),\n        cert: httpsCredentials.cert.toString()\n      };\n      options.HTTPS_CREDENTIALS = stringHttpsCredentials;\n      resolve(options);\n    });\n  },\n  modifyWebpackOptions(opts) {\n    const razzleOptions = opts.options.razzleOptions;\n    const webpackOptions = opts.options.webpackOptions;\n    if (opts.env.target === 'node' && opts.env.dev) {\n      webpackOptions.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(razzleOptions.HTTPS_CREDENTIALS);\n    }\n    return webpackOptions;\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    const options = opts.options.razzleOptions;\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.https = options.HTTPS_CREDENTIALS;\n      // config.devServer.before = function (app, server, compiler) {\n      //   app.use(cors('*'));    console.log('web');\n      //\n      // }\n      config.devServer.headers = {\n        \"Access-Control-Allow-Origin\": \"*\",\n        https: true\n      }\n    }\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-devcert-https/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-devcert-https/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-devcert-https/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-devcert-https/src/index.js",
    "content": "import express from 'express';\nimport https from 'https';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nconst credentials = HTTPS_CREDENTIALS || {};\n\nexport default https.createServer(credentials,app)\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-devcert-https/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport cors from 'cors';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\n\nconst whitelist = ['https://localhost:3000', 'https://localhost:3001']; //white list consumers\nconst corsOptions = {\n  origin: function (origin, callback) {\n    if (whitelist.indexOf(origin) !== -1) {\n      callback(null, true);\n    } else {\n      callback(null, false);\n    }\n  },\n  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],\n  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204\n  credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.\n  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(cors(corsOptions))\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-development-build/README.md",
    "content": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->\nThis is the canary release documentation for this example\n\nCreate and start the example:\n\n```bash\nnpx create-razzle-app@canary --example basic basic\n\ncd basic\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle to produce a development build. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n\nThe only differences between this example and the `basic` example are that the `razzle build` command is replaced with `razzle build --node-env=development` and that there is a new `start:dev` command for running the development build.\n\nYou can use this command separately in a new script inside the `scripts` section of the project's `package.json` file, if you find it useful.\n"
  },
  {
    "path": "examples/with-development-build/gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-development-build/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-development-build\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build --node-env=development\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\",\n    \"start:dev\": \"NODE_ENV=development node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-development-build/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-development-build/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-development-build/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-development-build/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-development-build/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-development-build/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-development-build/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-development-build/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-elm/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\ncoverage\nnode_modules\nbuild\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n.elm-static-html\nbuild\n\n# Optional npm cache directory\n.npm\nyarn.lock\n\n# Optional REPL history\n.node_repl_history\n\n# elm-package generated files\nelm-stuff/\n# elm-repl generated files\nrepl-temp-*\n\nignore\ndist"
  },
  {
    "path": "examples/with-elm/README.md",
    "content": "# Razzle Elm Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-elm with-elm\n\ncd with-elm\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is a basic example of how to use Razzle and Elm, it uses:\n\n* [elm-static-html](https://github.com/eeue56/elm-static-html-lib) to convert Elm views into raw html\n* [elm-webpack-loader](https://github.com/elm-community/elm-webpack-loader) load elm files and import them into javascript\n* [elm-hot-loader](https://github.com/fluxxu/elm-hot-loader) hot reload all Elm files while dev\n\n`src/client.js` contains all the js code required to load Elm, you can configure Elm ports here\n`src/server.js` the server side, here call `elm-static-html-lib` with the respective module to render the view\n\n---\n\nIf you want to activate the Elm debug mode or other tooling and debug utilites of Elm edit `razzle.config.js`:\n\n```js\n{\n    loader: 'elm-webpack-loader',\n    options: { //Edit here\n        verbose: true,\n        warn: true,\n        pathToMake: require('elm/platform').executablePaths['elm-make'],\n        forceWatch: true\n    }\n}\n```\n\nAs of Razzle 2.0, you can now use [razzle-plugin-elm](../../packages/razzle-plugin-elm/README.md) instead of adding the webpack loaders on your own.\n"
  },
  {
    "path": "examples/with-elm/elm-package.json",
    "content": "{\n    \"version\": \"1.0.0\",\n    \"summary\": \"helpful summary of your project, less than 80 characters\",\n    \"repository\": \"https://github.com/user/project.git\",\n    \"license\": \"BSD3\",\n    \"source-directories\": [\n        \"src\"\n    ],\n    \"exposed-modules\": [],\n    \"dependencies\": {\n        \"elm-lang/core\": \"5.1.1 <= v < 6.0.0\",\n        \"elm-lang/html\": \"2.0.0 <= v < 3.0.0\",\n        \"eeue56/elm-html-in-elm\":\"2.0.0 <= v < 3.0.0\"\n    },\n    \"elm-version\": \"0.18.0 <= v < 0.19.0\"\n}\n"
  },
  {
    "path": "examples/with-elm/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-elm\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"postinstall\": \"elm-package install -y\",\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"set NODE_ENV=production&&node build/server.js\"\n  },\n  \"dependencies\": {\n    \"elm-static-html-lib\": \"^0.1.0\",\n    \"express\": \"^4.17.1\"\n  },\n  \"devDependencies\": {\n    \"elm-hot-loader\": \"^0.5.4\",\n    \"elm-webpack-loader\": \"4.5.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-elm/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-elm/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackOptions({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackObject, // the imported webpack node module\n    options: {\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    webpackOptions.fileLoaderExclude.push(/\\.(elm)$/);\n    return webpackOptions;\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n\n    config.module.noParse = [/.elm$/];\n    config.resolve.extensions.push('.elm');\n\n    if (opts.env.dev) {\n      config.module.rules.push({\n        test: /\\.elm$/,\n        exclude: [/elm-stuff/, /node_modules/],\n        use: [\n          {\n            loader: 'elm-webpack-loader',\n            options: {\n              verbose: true,\n              warn: true,\n              pathToMake: require('elm/platform').executablePaths['elm-make'],\n              forceWatch: true,\n            },\n          },\n        ],\n      });\n    } else {\n      // Production\n      config.module.rules.push({\n        test: /\\.elm$/,\n        exclude: [/elm-stuff/, /node_modules/],\n        use: [\n          {\n            loader: 'elm-webpack-loader',\n            options: {\n              pathToMake: require('elm/platform').executablePaths['elm-make'],\n            },\n          },\n        ],\n      });\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-elm/src/App.elm",
    "content": "module App exposing (..)\n\nimport Html exposing (..)\nimport Html.Attributes exposing (..)\nimport Html.Events exposing (..)\nimport Json.Decode\n\n\ntype alias Model =\n    {counter: Int}\n\n\ninit : ( Model, Cmd Msg )\ninit =\n    ( Model 0, Cmd.none )\n\ndecodeModel : Json.Decode.Decoder Model\ndecodeModel =\n    Json.Decode.map Model\n        (Json.Decode.field \"counter\" Json.Decode.int)\n\n-- UPDATE\n\n\ntype Msg\n    = Inc\n\n\nupdate : Msg -> Model -> ( Model, Cmd Msg )\nupdate message model =\n    case message of\n        Inc ->\n            {model | counter = model.counter + 1} ! []\n\n\n\n-- VIEW\n\n\nview : Model -> Html Msg\nview model =\n    div [ class \"container\" ]\n        [ h1 []\n            [ text \"Elm SSR example\"\n            ]\n        , p [] [ text \"Click on the button below to increment the state.\" ]\n        , div []\n            [ button\n                [ class \"btn btn-primary\"\n                , onClick Inc\n                ]\n                [ text \"+ 1\" ]\n            , text <| toString model\n            ]\n        , p [] [ text \"A simple example of how to make Razzle and Elm work together!\" ]\n        ]\n"
  },
  {
    "path": "examples/with-elm/src/Main.elm",
    "content": "module Main exposing (main)\n\nimport Html\nimport App exposing (init, update, view)\n \nmain : Program Never App.Model App.Msg\nmain =\n    Html.program\n        { init = init\n        , update = update\n        , view = view\n        , subscriptions = always Sub.none\n        }\n"
  },
  {
    "path": "examples/with-elm/src/client.js",
    "content": "import Elm from './Main';\n\n// We need embed the Elm app to the div, if we call fullscreen we will have duplicated html\nElm.Main.embed(document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-elm/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-elm/src/server.js",
    "content": "import elmStaticHtml from \"elm-static-html-lib\";\nimport express from 'express';\nrequire('./Main');\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst model = { counter: 5 };\nconst options = { model : model, decoder: \"App.decodeModel\" };\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  return new Promise((resolve, reject) {\n    elmStaticHtml(process.cwd(), \"App.view\", options)\n    .then((markup) => {\n      const html =\n        // prettier-ignore\n        `<!doctype html>\n      <html lang=\"\">\n      <head>\n          <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n          <meta charSet='utf-8' />\n          <title>Welcome to Razzle</title>\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n          ${cssLinksFromAssets(assets, 'client')}\n      </head>\n      <body>\n          <div id=\"root\">${markup}</div>\n          ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n      </body>\n    </html>`;\n\n\n      resolve({ html, status: 200 });\n    }).catch((error) => {\n      resolve({ html: `<h1>An error ocurred on server, please try later, or contact support</h1>`, status: 500 });\n    });\n  })\n};\n\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', async (req, res) => {\n    const { html, status } = await renderApp(req, res);\n    res.status(status).send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-esbuild-loader/.eslintrc.js",
    "content": "module.exports =\n{\n  \"env\": {\n    \"node\": true,\n    \"browser\": true,\n    \"es6\": true\n  },\n  \"globals\": {\n    \"Atomics\": \"readonly\",\n    \"SharedArrayBuffer\": \"readonly\"\n  },\n  \"parser\": \"@typescript-eslint/parser\",\n  \"parserOptions\": {\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    },\n    \"ecmaVersion\": 2018,\n    \"sourceType\": \"module\"\n  },\n  \"plugins\": [\"react\", \"@typescript-eslint\", \"prettier\"],\n  \"extends\": [\n    \"plugin:react/recommended\",\n    \"airbnb\",\n    \"plugin:prettier/recommended\",\n    \"no-use-before-define\": \"off\",\n    \"@typescript-eslint/no-use-before-define\": [\"error\"],\n    \"plugin:@typescript-eslint/eslint-recommended\",\n    \"plugin:@typescript-eslint/recommended\"\n  ],\n  \"rules\": {\n    \"import/extensions\": [\n      \"error\",\n      \"ignorePackages\",\n      {\n        \"js\": \"never\",\n        \"jsx\": \"never\",\n        \"ts\": \"never\",\n        \"tsx\": \"never\"\n      }\n    ],\n    \"prettier/prettier\": \"error\",\n    \"@typescript-eslint/explicit-function-return-type\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": \"off\",\n    \"react/jsx-filename-extension\": [\n      1,\n      { \"extensions\": [\".js\", \".jsx\", \".ts\", \".tsx\"] }\n    ]\n  },\n  \"settings\": {\n    \"import/resolver\": {\n      \"node\": {\n        \"extensions\": [\".js\", \".jsx\", \".ts\", \".tsx\"]\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "examples/with-esbuild-loader/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-esbuild-loader/README.md",
    "content": "# Razzle Esbuild Loader Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-esbuild-loader with-esbuild-loader\n\ncd with-esbuild-loader\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).\nIn `razzle.config.js`, we locate the part of the webpack configuration\nthat is running `babel-loader` and swap it out for `ts-loader`.\nAdditionally, we make sure Razzle knows how to resolve `.ts` and `.tsx` files.\n\nLastly, we also need to modify our Jest configuration to handle typescript files.\nThus we add `ts-jest` and `@types/jest` to our dev dependencies. Then we augment Razzle's default jest setup by adding a field in our `package.json`.\n\n```json\n// package.json\n\n{\n  ...\n  \"jest\": {\n    \"transform\": {\n      \"\\\\.(ts|tsx)$\": \"<rootDir>/node_modules/ts-jest/preprocessor.js\",\n      \"\\\\.css$\": \"<rootDir>/node_modules/razzle/config/jest/cssTransform.js\",\n      \"^(?!.*\\\\.(js|jsx|css|json)$)\": \"<rootDir>/node_modules/razzle/config/jest/fileTransform.js\"\n    },\n    \"testMatch\": [\n      \"<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)\",\n      \"<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)\"\n    ],\n    \"moduleFileExtensions\": [\n      \"ts\",\n      \"tsx\",\n      \"js\",\n      \"json\"\n    ],\n    \"collectCoverageFrom\": [\n      \"src/**/*.{js,jsx,ts,tsx}\"\n    ]\n  }\n}\n```\n\nThe `tslint.json` and `tsconfig.json` are taken from Microsoft's official\n[TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter).\n\nNote: You do not techincally _need_ to fully replace `babel-loader` with\n`ts-loader` to use TypeScript. Both TS and Babel transpile ES6 code,\nso when you run both webpack loaders you are making Razzle do twice the work. From our testing,\nthis can make HMR extremely slow on larger apps. Thus, this example overwrites\n`babel-loader` with `ts-loader`. However, if you are incrementally moving to typescript you may want to run both loaders side by side. If you are running both, add this to your `jest.transform` setup in `package.json`:\n\n```\n\"^.+\\\\.(js|jsx)$\": \"<rootDir>/node_modules/razzle/config/jest/babelTransform.js\",\n```\nThis will continue to transform .js files through babel.\n"
  },
  {
    "path": "examples/with-esbuild-loader/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-typescript\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.0.1\"\n  },\n  \"devDependencies\": {\n    \"@types/express\": \"^4.17.0\",\n    \"@types/jest\": \"^26.0.20\",\n    \"@types/node\": \"^14.14.22\",\n    \"@types/react\": \"^17.0.0\",\n    \"@types/react-dom\": \"^17.0.0\",\n    \"@types/react-router-dom\": \"^5.1.7\",\n    \"@types/webpack-env\": \"^1.14.0\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.14.1\",\n    \"@typescript-eslint/parser\": \"^4.14.1\",\n    \"esbuild-loader\": \"^2.11.1\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-config-airbnb\": \"^18.2.1\",\n    \"eslint-config-prettier\": \"^7.2.0\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-node\": \"^11.1.0\",\n    \"eslint-plugin-prettier\": \"^3.3.1\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"prettier\": \"^2.2.1\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-typescript\": \"4.2.15\",\n    \"ts-jest\": \"^26.5.0\",\n    \"typescript\": \"^4.1.3\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n  \"jest\": {\n    \"transform\": {\n      \"\\\\.(ts|tsx)$\": \"ts-jest\",\n      \"\\\\.css$\": \"<rootDir>/node_modules/razzle/config/jest/cssTransform.js\",\n      \"^(?!.*\\\\.(js|jsx|css|json)$)\": \"<rootDir>/node_modules/razzle/config/jest/fileTransform.js\"\n    },\n    \"testMatch\": [\n      \"<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)\",\n      \"<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)\"\n    ],\n    \"moduleFileExtensions\": [\n      \"ts\",\n      \"tsx\",\n      \"js\",\n      \"json\"\n    ],\n    \"collectCoverageFrom\": [\n      \"src/**/*.{js,jsx,ts,tsx}\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/with-esbuild-loader/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-esbuild-loader/razzle.config.js",
    "content": "'use strict';\n\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];\n\n    // Safely locate Babel-Loader in Razzle's webpack internals\n    const babelLoaderFinder = makeLoaderFinder('babel-loader');\n    const babelLoader = config.module.rules.find(babelLoaderFinder);\n\n    // Get the correct `include` option, since that hasn't changed.\n    // This tells Razzle which directories to transform.\n    const { include } = babelLoader;\n\n    // Configure esbuild-loader\n    const esbuildLoader = {\n      include,\n      test: /\\.tsx?$/,\n      use: [\n        {\n          loader: require.resolve('esbuild-loader'),\n          options: {\n            loader: 'tsx',\n            target: opts.env.target === 'web' ? 'es6' : 'node12',\n            tsconfigRaw: require('./tsconfig.json'),\n          },\n        },\n      ],\n    };\n\n    // Remove babel\n    config.module.rules = config.module.rules.filter(\n      (rule) => !babelLoaderFinder(rule)\n    );\n\n    config.module.rules.push(esbuildLoader);\n\n    // Do typechecking in a separate process,\n    // We can run it only in client builds.\n    if (opts.env.target === 'web') {\n      config.plugins.push(\n        new ForkTsCheckerWebpackPlugin({\n          typescript: {\n            build: true,\n            configFile: './tsconfig.json',\n          },\n        })\n      );\n      if (opts.env.dev) {\n        // As suggested by Microsoft's Outlook team, these optimizations\n        // crank up Webpack x TypeScript perf.\n        // @see https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15\n        config.output.pathinfo = false;\n        config.optimization = {\n          removeAvailableModules: false,\n          removeEmptyChunks: false,\n          splitChunks: false,\n        };\n      }\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-esbuild-loader/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}"
  },
  {
    "path": "examples/with-esbuild-loader/src/App.test.tsx",
    "content": "import React from 'react';\nimport { render } from 'react-dom';\n\nimport App from './App';\n\nimport { MemoryRouter } from 'react-router-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    render(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>,\n      div\n    );\n  });\n});\n"
  },
  {
    "path": "examples/with-esbuild-loader/src/App.tsx",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nimport './App.css';\n\nconst App = () => (\n  <Switch>\n    <Route exact={true} path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-esbuild-loader/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  animation: Home-logo-spin infinite 20s linear;\n  height: 80px;\n}\n\n.Home-header {\n  background-color: #222;\n  height: 150px;\n  padding: 20px;\n  color: white;\n}\n\n.Home-intro {\n  font-size: large;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n@keyframes Home-logo-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}"
  },
  {
    "path": "examples/with-esbuild-loader/src/Home.tsx",
    "content": "import React from 'react';\nimport logo from './react.svg';\n\nimport './Home.css';\n\nclass Home extends React.Component<{}, {}> {\n  public render() {\n    return (\n      <div className=\"Home\">\n        <div className=\"Home-header\">\n          <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n          <h2>Welcome to Razzle</h2>\n        </div>\n        <p className=\"Home-intro\">\n          To get started, edit <code>src/App.tsx</code> or{' '}\n          <code>src/Home.tsx</code> and save to reload.\n        </p>\n        <ul className=\"Home-resources\">\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n          </li>\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n          </li>\n          <li>\n            <a href=\"https://palmer.chat\">Community Slack</a>\n          </li>\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-esbuild-loader/src/client.tsx",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport App from './App';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-esbuild-loader/src/index.ts",
    "content": "import express from 'express';\n\n// this require is necessary for server HMR to recover from error\n// tslint:disable-next-line:no-var-requires\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, (err: Error) => {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-esbuild-loader/src/server.tsx",
    "content": "import express from 'express';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\n\nlet assets: any;\n\nconst syncLoadAssets = () => {\n  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);\n};\nsyncLoadAssets();\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req: express.Request, res: express.Response) => {\n  const context: any = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    return { html };\n  }\n};\n\nconst server = express()\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))\n  .get('/*', (req: express.Request, res: express.Response) => {\n    const { html = '', redirect = false } = renderApp(req, res);\n    if (redirect) {\n      res.redirect(redirect);\n    } else {\n      res.send(html);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-esbuild-loader/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"allowUnreachableCode\": false,\n    \"noFallthroughCasesInSwitch\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"downlevelIteration\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"jsx\": \"react\",\n    \"lib\": [\"es6\", \"es2015\", \"es2017\", \"dom\"],\n    \"module\": \"commonjs\",\n    \"moduleResolution\": \"Node\",\n    \"noImplicitAny\": true,\n    \"noImplicitReturns\": true,\n    \"noImplicitThis\": true,\n    \"noUnusedLocals\": false,\n    \"sourceMap\": true,\n    \"strictNullChecks\": true,\n    \"strict\": false,\n    \"pretty\": true,\n    \"suppressImplicitAnyIndexErrors\": true,\n    \"target\": \"esnext\"\n  },\n  \"exclude\": [\n    \"node_modules\",\n    \"build\",\n    \"scripts\",\n    \"acceptance-tests\",\n    \"webpack\",\n    \"jest\",\n    \"razzle.config.js\"\n  ],\n  \"types\": [\"typePatches\", \"node\", \"webpack-env\"]\n}\n"
  },
  {
    "path": "examples/with-esbuild-loader/typings/index.d.ts",
    "content": "declare module '*.svg' {\n    const content: any;\n    export default content;\n}"
  },
  {
    "path": "examples/with-eslint/.eslintrc.json",
    "content": "{\n  \"extends\": \"eslint:recommended\",\n  \"env\": {\n    \"browser\": true,\n    \"commonjs\": true,\n    \"node\": true,\n    \"es6\": false\n  },\n  \"parserOptions\": {\n    \"ecmaVersion\": 6\n  },\n  \"rules\": {\n    \"no-console\": \"off\",\n    \"strict\": [\"error\", \"global\"],\n    \"curly\": \"warn\"\n  }\n}\n"
  },
  {
    "path": "examples/with-eslint/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-eslint/README.md",
    "content": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-eslint with-eslint\n\ncd with-eslint\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/with-eslint/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-eslint\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"@typescript-eslint/eslint-plugin\": \"^4.0.0\",\n    \"@typescript-eslint/parser\": \"^4.14.1\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-config-react-app\": \"^6.0.0\",\n    \"eslint-plugin-flowtype\": \"^5.2.0\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"eslint-plugin-react-hooks\": \"^4.2.0\",\n    \"eslint-webpack-plugin\": \"^2.1.0\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-eslint\": \"4.2.15\",\n    \"react-dev-utils\": \"^11.0.1\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-eslint/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-eslint/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  options: { verbose: true },\n  plugins: ['eslint'],\n};\n"
  },
  {
    "path": "examples/with-eslint/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-eslint/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-eslint/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-eslint/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-eslint/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-eslint/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-eslint/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-experimental-refresh/README.md",
    "content": "# Razzle Experimental React Refresh Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-experimental-refresh with-experimental-refresh\n\ncd with-experimental-refresh\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n\nThis is an **experimental** demo of React Fast Refresh.\nPlease do not use these features in your application or project (yet).\n"
  },
  {
    "path": "examples/with-experimental-refresh/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-experimental-refresh\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start --verbose\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/razzle.config.js",
    "content": "module.exports = {\n  options: {\n    enableReactRefresh: true,\n  },\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/App.js",
    "content": "import * as React from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport ClickCount from './components/ClickCount'\nimport './global.css'\nimport styles from './components/ClickCount.module.css'\n\nfunction a() {\n  console.log(\n    // hello\n    document.body()\n  )\n}\n\nfunction foo() {\n  a()\n}\n\nfunction App() {\n  const [count, setCount] = useState(0)\n  const increment = useCallback(() => {\n    setCount(v => v + 1)\n  }, [setCount])\n\n  useEffect(() => {\n    const r = setInterval(() => {\n      increment()\n    }, 250)\n    return () => {\n      clearInterval(r)\n    }\n  }, [increment])\n\n  return (\n    <main>\n      <h1>Home</h1>\n      <div>\n        <p>Auto Incrementing Value</p>\n        <p>Current value: {count}</p>\n      </div>\n      <hr />\n      <div>\n        <p>Component with State</p>\n        <ClickCount />\n      </div>\n      <hr />\n      <div>\n        <button\n          className={styles.btn}\n          type=\"button\"\n          onClick={e => {\n            setTimeout(() => document.parentNode(), 0)\n            foo()\n          }}\n        >\n          Throw an Error\n        </button>\n      </div>\n    </main>\n  )\n}\n\nexport default App;\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/client.js",
    "content": "import * as React from 'react'\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/components/ClickCount.js",
    "content": "import * as React from 'react'\nimport { useCallback, useState } from 'react'\nimport styles from './ClickCount.module.css'\n\nexport default function ClickCount() {\n  const [count, setCount] = useState(0)\n  const increment = useCallback(() => {\n    setCount(v => v + 1)\n  }, [setCount])\n\n  return (\n    <button className={styles.btn} type=\"button\" onClick={increment}>\n      Clicks: {count}\n    </button>\n  )\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/components/ClickCount.module.css",
    "content": "button.btn {\n  margin: 0;\n  border: 1px solid #d1d1d1;\n  border-radius: 5px;\n  padding: 0.5em;\n  vertical-align: middle;\n  white-space: normal;\n  background: none;\n  line-height: 1;\n  font-size: 1rem;\n  font-family: inherit;\n  transition: all 0.2s ease;\n}\n\nbutton.btn {\n  padding: 0.65em 1em;\n  background: #0076ff;\n  color: #fff;\n  border: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\nbutton.btn:focus {\n  outline: 0;\n  border-color: #0076ff;\n}\nbutton.btn:hover {\n  background: rgba(0, 118, 255, 0.8);\n}\nbutton.btn:focus {\n  box-shadow: 0 0 0 2px rgba(0, 118, 255, 0.5);\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/global.css",
    "content": "body {\n  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',\n    'Arial', sans-serif;\n  padding: 20px 20px 60px;\n  max-width: 680px;\n  margin: 0 auto;\n  font-size: 16px;\n  line-height: 1.65;\n  word-break: break-word;\n  font-kerning: auto;\n  font-variant: normal;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-rendering: optimizeLegibility;\n  hyphens: auto;\n}\n\nh2,\nh3,\nh4 {\n  margin-top: 1.5em;\n}\n\ncode,\npre {\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace, serif;\n  font-size: 0.92em;\n  color: #d400ff;\n}\n\ncode:before,\ncode:after {\n  content: '`';\n}\n\nhr {\n  border: none;\n  border-bottom: 1px solid #efefef;\n  margin: 5em auto;\n}\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-experimental-refresh/src/server.js",
    "content": "import App from './App';\nimport * as React from 'react'\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-fastify/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-fastify/README.md",
    "content": "# Razzle Fastify Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-fastify with-fastify\n\ncd with-fastify\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is an example of how to use Razzle with [Fastify](https://www.fastify.io/) and includes [TypeScript](https://github.com/Microsoft/TypeScript).\n\nIt is a very similar implementation to `with-koa` but with help from that example itself (found [here](https://github.com/jaredpalmer/razzle/blob/master/examples/with-koa/src/index.js)) and from the Fastify docs for serverless application [Serverless](https://www.fastify.io/docs/latest/Serverless/#should-you-use-fastify-in-a-serverless-platform#Vercel).\n\n### TypeScript\n\nBasic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.\n\nRazzle knows how to resolve `.ts` and `.tsx` files out of the box.\n"
  },
  {
    "path": "examples/with-fastify/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-fastify\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"fastify\": \"^3.20.2\",\n    \"fastify-static\": \"^4.2.3\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\"\n  },\n  \"devDependencies\": {\n    \"@testing-library/dom\": \"^7.29.4\",\n    \"@testing-library/jest-dom\": \"^5.5.0\",\n    \"@testing-library/react\": \"^10.0.3\",\n    \"@testing-library/user-event\": \"^10.1.0\",\n    \"@types/express\": \"^4.17.6\",\n    \"@types/jest\": \"^25.2.1\",\n    \"@types/node\": \"^13.13.2\",\n    \"@types/react\": \"^16.9.34\",\n    \"@types/react-dom\": \"^16.9.6\",\n    \"@types/react-router-dom\": \"^5.1.4\",\n    \"@types/webpack-env\": \"^1.15.2\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"cross-env\": \"^7.0.3\",\n    \"express\": \"^4.17.1\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"typescript\": \"^4.0.3\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-fastify/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-fastify/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}\n"
  },
  {
    "path": "examples/with-fastify/src/App.test.tsx",
    "content": "import { render } from '@testing-library/react';\nimport React from 'react';\nimport { MemoryRouter } from 'react-router-dom';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  const { getByText } = render(\n    <MemoryRouter>\n      <App />\n    </MemoryRouter>\n  );\n  const linkElement = getByText(/welcome to razzles/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "examples/with-fastify/src/App.tsx",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport './App.css';\nimport Home from './Home';\n\n\nconst App = () => (\n  <Switch>\n    <Route exact={true} path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-fastify/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  animation: Home-logo-spin infinite 20s linear;\n  height: 80px;\n}\n\n.Home-header {\n  background-color: #222;\n  height: 150px;\n  padding: 20px;\n  color: white;\n}\n\n.Home-intro {\n  font-size: large;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n@keyframes Home-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n"
  },
  {
    "path": "examples/with-fastify/src/Home.tsx",
    "content": "import React from 'react';\nimport './Home.css';\nimport logo from './react.svg';\n\n\nclass Home extends React.Component<{}, {}> {\n  public render() {\n    return (\n      <div className=\"Home\">\n        <div className=\"Home-header\">\n          <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n          <h2>Welcome to Razzle</h2>\n        </div>\n        <p className=\"Home-intro\">\n          To get started, edit <code>src/App.tsx</code> or{' '}\n          <code>src/Home.tsx</code> and save to reload.\n        </p>\n        <ul className=\"Home-resources\">\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n          </li>\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n          </li>\n          <li>\n            <a href=\"https://palmer.chat\">Community Slack</a>\n          </li>\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-fastify/src/client.tsx",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\nimport App from './App';\n\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-fastify/src/index.ts",
    "content": "import http from 'http';\n\n/**\n * This implementation is similar to the `with-koa` example,\n * but Fastify does not have a `app#callback()` method.\n * Thus, this import implements a similar implementation.\n * See `./server.tsx` for more information.\n */\nlet currentHandler: http.RequestListener = require('./server').default;\n\nconst server = http.createServer(currentHandler);\n\nconst port = process.env.PORT || 3000;\n\nserver.listen(port, () => {\n  console.log(`🚀 Server Started on Port ${port}`);\n});\n\nif (module.hot) {\n  module.hot.accept('./server', async function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      const newHandler: http.RequestListener = require('./server').default;\n      server.removeListener('request', currentHandler);\n      server.on('request', newHandler);\n      currentHandler = newHandler;\n    } catch (error) {\n      console.error('ERROR', error);\n    }\n    console.log('🚀 Server-side HMR Complete');\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n"
  },
  {
    "path": "examples/with-fastify/src/server.tsx",
    "content": "import fastify from \"fastify\";\nimport fastifyStatic from \"fastify-static\";\nimport type { IncomingMessage, ServerResponse } from \"http\";\nimport React from \"react\";\nimport { renderToString } from \"react-dom/server\";\nimport { StaticRouter } from \"react-router-dom\";\nimport App from \"./App\";\n\nlet assetsImport: Record<string, any>;\nimport(process.env.RAZZLE_ASSETS_MANIFEST!).then((res) => {\n  assetsImport = res.default;\n});\n\nconst cssLinksFromAssets = (assets: Record<string, any>, entryPoint: string) =>\n  (assets && assets[entryPoint]?.css?.map((asset: string) => `<link rel=\"stylesheet\" href=\"${asset}\">`).join(\"\")) || \"\";\n\nconst jsScriptTagsFromAssets = (assets: Record<string, any>, entryPoint: string, extra = \"\") =>\n  (assets && assets[entryPoint]?.js.map((asset: string) => `<script src=\"${asset}\"${extra}></script>`).join(\"\")) || \"\";\n\nconst app = fastify()\n  .register(fastifyStatic, { root: process.env.RAZZLE_PUBLIC_DIR!, prefix: \"/public\" })\n  .get(\"/*\", async (req, res) => {\n    const context: { url?: string } = {};\n    const markup = renderToString(\n      <StaticRouter context={context} location={req.url}>\n        <App />\n      </StaticRouter>,\n    );\n\n    if (context.url) {\n      return res.redirect(context.url);\n    }\n    res\n      .status(200)\n      .type(\"text/html\")\n      .send(\n        `\n        <!doctype html>\n        <html lang=\"en-GB\">\n          <head>\n              <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n              <meta charset=\"utf-8\" />\n              <title>Welcome to Razzle</title>\n              <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n              ${cssLinksFromAssets(assetsImport, \"client\")}\n          </head>\n          <body>\n              <div id=\"root\">${markup}</div>\n              ${jsScriptTagsFromAssets(assetsImport, \"client\", \" defer crossorigin\")}\n          </body>\n        </html>\n`,\n      );\n  });\n\n/**\n * This is a similar implementation to the one found in the Fastify docs,\n * which can be found [here]{@link https://www.fastify.io/docs/latest/Serverless/#should-you-use-fastify-in-a-serverless-platform#Vercel}.\n * The `app#ready()` is to indicate that all plugins have been loaded and the server is ready,\n * then the `app#server#emit()` method is called to handle the incoming request and Fastify handles it from there.\n */\nexport default async (req: IncomingMessage, res: ServerResponse): Promise<void> => {\n  await app.ready();\n  app.server.emit(\"request\", req, res);\n};\n"
  },
  {
    "path": "examples/with-fastify/src/setupTests.ts",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n"
  },
  {
    "path": "examples/with-fastify/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"module\": \"commonjs\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react\",\n    \"typeRoots\": [\"node_modules/@types\", \"typings\"]\n  },\n  \"include\": [\"src\", \"typings/*\"]\n}\n"
  },
  {
    "path": "examples/with-fastify/typings/svg.d.ts",
    "content": "// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules\n\ndeclare module '*.svg' {\n  const src: string;\n  export default src;\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/.firebaserc",
    "content": "{\n  \"projects\": {\n    \"default\": \"<firebase-project-id>\"\n  }\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-firebase-functions/README.md",
    "content": "# Razzle with Cloud Functions for Firebase example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-firebase-functions with-firebase-functions\n\ncd with-firebase-functions\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\nBuild client and server\n\n```bash\nyarn build\n```\n\nDeploy to firebase\n\n```bash\nyarn deploy\n```\n\nAccess your app at `<firebase-project-id>.firebaseapp.com`\n\n## Idea behind the example\nThis is a basic example of how to use razzle with firebase functions and firebase hosting.\n"
  },
  {
    "path": "examples/with-firebase-functions/firebase.json",
    "content": "{\n  \"hosting\": {\n    \"public\": \"build/public\",\n    \"ignore\": [\n      \"firebase.json\",\n      \"**/.*\",\n      \"**/node_modules/**\"\n    ],\n    \"rewrites\": [\n      {\n        \"source\": \"**/**\",\n        \"function\": \"app\"\n      }\n    ]\n  },\n  \"functions\": {\n    \"source\": \".\"\n  }\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/index.js",
    "content": "'use strict'\nconst functions = require('firebase-functions');\nconst app = require('./server/build/server.bundle.js').default;\n\nexports.app = functions.https.onRequest(app)\n"
  },
  {
    "path": "examples/with-firebase-functions/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-firebase-functions\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"predeploy\": \"npm run build\",\n    \"deploy\": \"firebase deploy\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"firebase-admin\": \"^8.11.0\",\n    \"firebase-functions\": \"^3.6.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-firebase-functions/razzle.config.js",
    "content": "'use strict';\nconst path = require('path');\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    if (opts.env.target === 'node' && !opts.env.dev) {\n      config.entry = path.resolve(__dirname, './src/server.js');\n      config.output.filename = 'server.bundle.js';\n      config.output.path = path.resolve(__dirname, './server/build');\n      config.output.libraryTarget = 'commonjs2';\n    }\n\n    return config;\n  },\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-firebase-functions/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-firebase-functions/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-firebase-functions/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-firebase-functions/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-heroku/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-heroku/Procfile",
    "content": "web: yarn start:prod\n"
  },
  {
    "path": "examples/with-heroku/README.md",
    "content": "# Razzle Heroku Deployment example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-heroku with-heroku\n\ncd with-heroku\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n### Deploy to Heroku:\n\n[Heroku](https://www.heroku.com/) manages app deployments with [Git](https://devcenter.heroku.com/articles/git) so:\n\n#### Setup Git:\n\n```bash\ngit init\ngit add\ngit commit -m \"Heroku deployment, first commit\"\n```\n\n#### Setup Heroku:\n\n* Create a Heroku [account](https://signup.heroku.com/)\n* Install Heroku [CLI](https://devcenter.heroku.com/articles/heroku-cli) and [authenticate](https://devcenter.heroku.com/articles/authentication)\n* Create Heroku app: `heroku create`\n  * or `heroku create <appname>` if you want to specify an app name (checks for unique app name)\n  * or `heroku git:remote -a <appname>` if you already created an App in the [dashboard](https://dashboard.heroku.com/apps)\n* Verify with `git remote -v`:\n\n```\nheroku\thttps://git.heroku.com/<appname>.git (fetch)\nheroku\thttps://git.heroku.com/<appname>.git (push)\n```\n\n#### Deployment\n\n* `yarn deploy` or `git push heroku master`\n  * or from another branch, other than **master**: `git push heroku <feature-branch>:master`\n* Console should complete with: **_https://appname.herokuapp.com/ deployed to Heroku_**\n* Verify app by opening **_https://appname.herokuapp.com/_**\n\n#### 👉 Please note\n\n* Heroku expects a `yarn.lock` file to be able to recognise _yarn_ as your package manager and process the `yarn` commands - so make sure to run `yarn install` before deployment, and to commit the `yarn.lock` file.\n\n## Idea behind the example\n\nThis is a basic example of how to use razzle and deploy to [Heroku](https://www.heroku.com/) with [Git](https://devcenter.heroku.com/articles/git).\n"
  },
  {
    "path": "examples/with-heroku/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-heroku\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build --noninteractive\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\",\n    \"deploy\": \"git push heroku master\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-heroku/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-heroku/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  options: {\n    forceRuntimeEnvVars: ['HOST', 'PORT']\n  }\n};\n"
  },
  {
    "path": "examples/with-heroku/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-heroku/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-heroku/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-heroku/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-heroku/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-heroku/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-hyperapp/.babelrc",
    "content": "{\n  \"presets\": [\n    \"razzle/babel\"\n  ],\n  \"plugins\": [\n    [\n      \"transform-react-jsx\",\n      {\n        \"pragma\": \"h\"\n      }\n    ]\n  ]\n}"
  },
  {
    "path": "examples/with-hyperapp/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-hyperapp/README.md",
    "content": "# Razzle Hyperapp Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-hyperapp with-hyperapp\n\ncd with-hyperapp\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis shows how to setup [Hyperapp](https://github.com/hyperapp/hyperapp/) with Razzle.\n\nHere is a list of changes from Razzle's base template:\n\n1.  Install `babel-plugin-transform-react-jsx` as a devDependency.\n2.  Extend Razzle's babel config with a custom `.babelrc`\n3.  Install `hyperapp` and `\"@hyperapp/render`\n4.  Remove `react`, `react-dom`, `react-router-dom` entirely\n5.  Update `server.js` to use `@hyperapp/render`'s `withRender` function. Also remove the `<div id=\"root\">` element from our html template since Hyperapp can render to the body.\n6.  Add a `main.js` file which exports the essential pieces of Hyperapp, which are the `state`, `actions`, and `view`. These are to be shared between the `server.js` and `client.js` files.\n"
  },
  {
    "path": "examples/with-hyperapp/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-hyperapp\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"@hyperapp/render\": \"^2.1.0\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"hyperapp\": \"^1.2.5\"\n  },\n  \"devDependencies\": {\n    \"babel-plugin-transform-react-jsx\": \"^6.24.1\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-hyperapp/public/robots.txt",
    "content": "User-agent: *\nDisallow: /api/\nDisallow: /publicapi/\nDisallow: /query/\n"
  },
  {
    "path": "examples/with-hyperapp/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,\n    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';\n}\n"
  },
  {
    "path": "examples/with-hyperapp/src/App.js",
    "content": "/** @jsx h */\nimport { h } from 'hyperapp';\n\nimport HyperappLogo from './hyperapp.svg';\nimport './App.css';\n\nconst App = ({ state, actions }) => (\n  <div class=\"App\">\n    <img src={HyperappLogo} alt=\"Hyperapp Logo\" />\n    <p>Hello Hyperapp!</p>\n\n    <h3>Count is {state.count}</h3>\n\n    <button onclick={() => actions.up(1)}>up</button>\n    <button onclick={() => actions.down(1)}>down</button>\n  </div>\n);\nexport default App;\n"
  },
  {
    "path": "examples/with-hyperapp/src/App.test.js",
    "content": "/** @jsx h */\nimport { h } from 'hyperapp';\nimport { renderToString } from '@hyperapp/render';\nimport App from './App';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const body = document.createElement('body');\n    const markup = renderToString(<App state={{}} actions={{}} />);\n\n    expect(markup).toContain('App');\n  });\n});\n"
  },
  {
    "path": "examples/with-hyperapp/src/client.js",
    "content": "/** @jsx h */\nimport { app } from 'hyperapp';\n\nimport { state, actions, view } from './main';\n\napp(state, actions, view, document.body);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-hyperapp/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-hyperapp/src/main.js",
    "content": "/** @jsx h */\nimport { h } from 'hyperapp';\nimport App from './App';\n\n/* MODEL */\nconst state = { count: 0 };\n\n/* UPDATE */\nconst actions = {\n  down: value => state => ({ count: state.count - value }),\n  up: value => state => ({ count: state.count + value }),\n};\n\n/* VIEW */\nconst view = (state, actions) => <App state={state} actions={actions} />;\n\nexport { state, actions, view };\n"
  },
  {
    "path": "examples/with-hyperapp/src/main.test.js",
    "content": "import { app } from 'hyperapp';\nimport { withRender } from '@hyperapp/render';\nimport { state, actions, view } from './main';\n\ndescribe('main app', () => {\n  test('renders without exploding', () => {\n    const body = document.createElement('body');\n    const markup = withRender(app)(state, actions, view, body).toString();\n\n    expect(markup).toContain('Hello Hyperapp');\n  });\n});\n"
  },
  {
    "path": "examples/with-hyperapp/src/server.js",
    "content": "/** @jsx h */\nimport express from 'express';\nimport { app } from 'hyperapp';\n\nimport { withRender } from '@hyperapp/render';\n\nimport { state, actions, view } from './main';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = withRender(app)(state, actions, view).toString();\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-inferno/.babelrc",
    "content": "{\n  \"presets\": [\n    \"razzle/babel\"\n  ],\n  \"plugins\": [\n    \"inferno\"\n  ]\n}"
  },
  {
    "path": "examples/with-inferno/.eslintrc",
    "content": "{\n  \"extends\": [\"plugin:inferno/recommended\"],\n  \"plugins\": [\"inferno\"],\n  \"parserOptions\": {\n    \"sourceType\": \"module\"\n  },\n  \"rules\": {\n    \"no-unused-vars\": 0\n  }\n}\n"
  },
  {
    "path": "examples/with-inferno/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-inferno/README.md",
    "content": "# Razzle Inferno Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-inferno with-inferno\n\ncd with-inferno\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis shows how to use [Inferno](https://github.com/infernojs) instead of React in a Razzle project.\n\nHere is a list of changes from Razzle's base template:\n  1. Install `babel-plugin-inferno` as a devDependency.\n  2. Extend Razzle's babel config with a custom `.babelrc`\n  3. Install `inferno`, `inferno-server`, `inferno-devtools`, `inferno-component` as dependencies\n  4. Remove `react`, `react-dom`, `react-router-dom` entirely\n  5. Update `server/server.js` to use `inferno-server`'s `renderToString` function.\n  6. Update `client.js` to configure Inferno for HMR.\n"
  },
  {
    "path": "examples/with-inferno/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-inferno\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"inferno\": \"7.4.2\",\n    \"inferno-component\": \"7.4.2\",\n    \"inferno-hydrate\": \"^7.4.2\",\n    \"inferno-server\": \"7.4.2\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.12.10\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-plugin-inferno\": \"^7.20.1\",\n    \"babel-plugin-inferno\": \"6.1.0\",\n    \"inferno-devtools\": \"7.4.2\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-inferno/public/robots.txt",
    "content": "User-agent: *\nDisallow: /api/\nDisallow: /publicapi/\nDisallow: /query/\n"
  },
  {
    "path": "examples/with-inferno/src/App.js",
    "content": "import Inferno from \"inferno\";\nimport Component from \"inferno-component\";\nimport InfernoLogo from \"./inferno.svg\";\n\nclass App extends Component {\n  render() {\n    return (\n      <div class=\"inferno\">\n        <img src={InfernoLogo} alt=\"Inferno Logo\" />\n        Hello Inferno!\n      </div>\n    );\n  }\n}\n\nexport default App;\n"
  },
  {
    "path": "examples/with-inferno/src/client.js",
    "content": "import { hydrate } from \"inferno-hydrate\";\nimport App from \"./App\";\n\nif (module.hot) {\n  require(\"inferno-devtools\");\n}\n\nhydrate(<App />, document.getElementById(\"root\"));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-inferno/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-inferno/src/server.js",
    "content": "import App from './App';\nimport Inferno from 'inferno';\nimport { renderToString } from 'inferno-server';\nimport express from 'express';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-jest-snapshots/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-jest-snapshots/README.md",
    "content": "# Using Razzle and Jest Snapshots\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-jest-snapshots with-jest-snapshots\n\ncd with-jest-snapshots\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is an example of how to use [Jest Snapshots](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) with a Razzle project.\n\n> Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.\n> A typical snapshot test case for a mobile app renders a UI component, takes a screenshot, then compares it to a reference image stored alongside the test. The test will fail if the two images do not match: either the change is unexpected, or the screenshot needs to be updated to the new version of the UI component.\n\n\n```js\n// src/__tests__/Home.test.js\n\nimport React from 'react';\nimport renderer from 'react-test-renderer';\nimport Home from '../Home';\n\nit('renders Home correctly', () => {\n  const tree = renderer.create(<Home />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n```\n\nWhen you run `yarn test`, a snapshot file is generated that looks like:\n\n```\n// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders Home correctly 1`] = `\n<div>\n  Hello World!\n</div>\n`;\n```\n\nRefer to the [Jest documentation](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) for more information.\n"
  },
  {
    "path": "examples/with-jest-snapshots/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-jest\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"build\": \"razzle build\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"react-test-renderer\": \"^16.13.1\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-jest-snapshots/public/robots.txt",
    "content": "User-agent: *\nDisallow: /api/\nDisallow: /publicapi/\nDisallow: /query/\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/App.js",
    "content": "import React from \"react\";\nimport { Route, Switch } from \"react-router-dom\";\nimport Home from \"./Home\";\n\nconst App = () => (\n  <Switch>\n    <Route exact path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/Home.js",
    "content": "import React from 'react';\n\nconst Home = () => {\n  return (\n    <div>\n      Hello World!\n    </div>\n  );\n};\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/__tests__/App.test.js",
    "content": "import React from \"react\";\nimport renderer from \"react-test-renderer\";\nimport { MemoryRouter } from \"react-router-dom\";\nimport App from \"../App\";\n\nit(\"renders App correctly\", () => {\n  const tree = renderer\n    .create(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>\n    )\n    .toJSON();\n  expect(tree).toMatchSnapshot();\n});\n\ntest(\"hello\", async () => {\n  const yo = await Promise.resolve(\"hello\");\n  expect(yo).toEqual(\"hello\");\n});\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/__tests__/Home.test.js",
    "content": "import React from 'react';\nimport renderer from 'react-test-renderer';\nimport Home from '../Home';\n\nit('renders Home correctly', () => {\n  const tree = renderer.create(<Home />).toJSON();\n  expect(tree).toMatchSnapshot();\n});\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/__tests__/__snapshots__/App.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders App correctly 1`] = `\n<div>\n  Hello World!\n</div>\n`;\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/__tests__/__snapshots__/Home.test.js.snap",
    "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`renders Home correctly 1`] = `\n<div>\n  Hello World!\n</div>\n`;\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/client.js",
    "content": "import React from \"react\";\nimport { hydrate } from \"react-dom\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport App from \"./App\";\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById(\"root\")\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-jest-snapshots/src/server.js",
    "content": "import { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-jsconfig-paths/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-jsconfig-paths/README.md",
    "content": "# Razzle With Jsconfig Paths Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-jsconfig-paths with-jsconfig-paths\n\ncd with-jsconfig-paths\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle with jsconfig paths, this also works with tsconfig.\nIt satisfies the entry points `src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/with-jsconfig-paths/here-is-extra/extra.js",
    "content": "import React from 'react';\nconst Extra = () => <div>Something Extra.</div>;\n\nexport default Extra;\n"
  },
  {
    "path": "examples/with-jsconfig-paths/jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"paths\": {\n      \"extra/*\": [\"../here-is-extra/*\"]\n    }\n  }\n}\n"
  },
  {
    "path": "examples/with-jsconfig-paths/package.json",
    "content": "{\n  \"name\": \"razzle-with-jsconfig-paths\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-jsconfig-paths/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-jsconfig-paths/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-jsconfig-paths/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-jsconfig-paths/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nimport Extra from 'extra/extra';\n\nconst App = () => <div>Welcome to Razzle.<Extra /></div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-jsconfig-paths/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-jsconfig-paths/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-jsconfig-paths/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-jsconfig-paths/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-jsxstyle/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-jsxstyle/README.md",
    "content": "# Razzle JSXStyle Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-jsxstyle with-jsxstyle\n\ncd with-jsxstyle\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is demo shows how to use [JSXXtyle](https://github.com/smyte/jsxstyle) and the new server rendering API\nwith Razzle. On each request, JSXStyle will extract out styles into a variable called `styles` will all the critical CSS in the render\ntree that we can then just drop into our `<head>`\n\n```js\nimport { injectAddRule, resetCache } from 'jsxstyle/lib/styleCache';\n\n// ..\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    resetCache();\n    let styles = '';\n    const context = {};\n    injectAddRule(rule => (styles += rule + '\\n'));\n\n    const markup = renderToString(\n      <StaticRouter context={context} location={req.url}>\n        <App />\n      </StaticRouter>\n    );\n\n    if (context.url) {\n      res.redirect(context.url);\n    } else {\n      res.send(\n        `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        <style type=\"text/css\">${styles || ''}</style>\n        ${assets.client.css\n          ? `<link rel=\"stylesheet\" href=\"${assets.client.css}\">`\n          : ''}\n        <script src=\"${assets.client.js}\" defer></script>\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n    </body>\n</html>`\n      );\n    }\n  });\n```\n"
  },
  {
    "path": "examples/with-jsxstyle/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-jsxstyle\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"jsxstyle\": \"^2.3.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-jsxstyle/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-jsxstyle/src/About.js",
    "content": "import { Block, InlineBlock } from 'jsxstyle';\nimport React, { Component } from 'react';\n\nclass About extends Component {\n  render() {\n    return (\n      <Block textAlign=\"center\">\n        <Block margin=\"4rem auto\">\n          <Block>\n            To get started, edit <code>src/App.js</code> or{' '}\n            <code>src/About.js</code> and save to reload.\n          </Block>\n\n          <Block component=\"ul\" margin=\"2rem auto\">\n            <InlineBlock component=\"li\" marginRight=\"1rem\">\n              <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n            </InlineBlock>\n            <InlineBlock component=\"li\" marginRight=\"1rem\">\n              <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n            </InlineBlock>\n            <InlineBlock component=\"li\">\n              <a href=\"https://palmer.chat\">Community Slack</a>\n            </InlineBlock>\n          </Block>\n        </Block>\n      </Block>\n    );\n  }\n}\n\nexport default About;\n"
  },
  {
    "path": "examples/with-jsxstyle/src/App.css",
    "content": "* {\n  box-sizing: border-box;\n}\n\nhtml,\nbody,\n#root {\n  height: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial,\n    sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\ndiv {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  min-width: 0;\n  align-items: stretch;\n}\n"
  },
  {
    "path": "examples/with-jsxstyle/src/App.js",
    "content": "import \"./App.css\";\n\nimport { Block, InlineBlock } from \"jsxstyle\";\n\nimport About from \"./About\";\nimport Home from \"./Home\";\nimport { Link, Route, Switch } from \"react-router-dom\";\nimport React from \"react\";\n\nconst App = () => (\n  <Block>\n    <Block component=\"ul\" margin=\"2rem auto\">\n      <InlineBlock component={Link} props={{ to: \"/about\" }}>\n        About\n      </InlineBlock>\n      <InlineBlock component={Link} props={{ to: \"/\" }}>\n        Home\n      </InlineBlock>\n    </Block>\n    <Switch>\n      <Route exact path=\"/\" component={Home} />\n      <Route exact path=\"/about\" component={About} />\n    </Switch>\n  </Block>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-jsxstyle/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { MemoryRouter } from 'react-router-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>,\n      div\n    );\n  });\n});\n"
  },
  {
    "path": "examples/with-jsxstyle/src/Home.js",
    "content": "import { Block, InlineBlock } from 'jsxstyle';\nimport React, { Component } from 'react';\n\nclass Home extends Component {\n  render() {\n    return (\n      <Block textAlign=\"center\">\n        <Block backgroundColor=\"#222\">\n          <Block fontSize=\"3rem\" color=\"#fff\" padding=\"6rem 0\" fontWeight=\"800\">\n            Razzle x JSXStyle\n          </Block>\n        </Block>\n        <Block margin=\"4rem auto\">\n          <Block>\n            To get started, edit <code>src/App.js</code> or{' '}\n            <code>src/Home.js</code> and save to reload.\n          </Block>\n\n          <Block component=\"ul\" margin=\"2rem auto\">\n            <InlineBlock component=\"li\" marginRight=\"1rem\">\n              <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n            </InlineBlock>\n            <InlineBlock component=\"li\" marginRight=\"1rem\">\n              <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n            </InlineBlock>\n            <InlineBlock component=\"li\">\n              <a href=\"https://palmer.chat\">Community Slack</a>\n            </InlineBlock>\n          </Block>\n        </Block>\n      </Block>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-jsxstyle/src/client.js",
    "content": "import App from \"./App\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport React from \"react\";\nimport { hydrate } from \"react-dom\";\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById(\"root\")\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-jsxstyle/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-jsxstyle/src/server.js",
    "content": "import { cache } from 'jsxstyle';\nimport App from './App';\nimport React from 'react';\nimport { StaticRouter } from 'react-router-dom';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  cache.reset();\n  let styles = '';\n  cache.injectOptions({\n    onInsertRule(css) {\n      styles += css;\n    },\n  });\n\n  const context = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n        ${styles ? `<style type=\"text/css\">${styles}</style>` : ''}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    return { html };\n  }\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html = '', redirect = false } = renderApp(req, res);\n    if (redirect) {\n      res.redirect(redirect);\n    } else {\n      res.send(html);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-koa/README.md",
    "content": "# Using Razzle and Koa\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-koa with-koa\n\ncd with-koa\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is an example of how to use [Koa][koa], a popular web application framework, with a Razzle project, as an alternative to the default [Express][express] `server.js` setup.\n\nBeing minimalistic in its philosophy, [Koa][koa] doesn't include most required dependencies to mimic its [Express][express] counterpart, so this example relies on some additional packages.\n\n- `koa-static` ([docs][koa-static])\n\nStatic file serving middleware. Used to serve resources under `process.env.RAZZLE_PUBLIC_DIR`.\n\n- `koa-router` ([docs][koa-router])\n\nExpress-styling router middleware for [Koa][koa]. Will direct `HTTP GET` requests to your React client.\n\n- `koa-helmet` ([docs][koa-helmet])\n\nProvides important security headers to make your app more secure by default. Among other things, it prevents the `X-Powered-By` header from [being sent to requesting clients][hide-powered-by].\n\n---\n\nFor additional information, refer to [Koa offical documentation][koa-docs].\n\n[razzle-repo]: https://github.com/jaredpalmer/razzle.git\n[koa]: http://koajs.com\n[express]: https://expressjs.com/\n[koa-static]: https://github.com/koajs/static\n[koa-router]: https://github.com/alexmingoia/koa-router\n[koa-helmet]: https://github.com/venables/koa-helmet\n[hide-powered-by]: https://helmetjs.github.io/docs/hide-powered-by/\n[koa-docs]: https://github.com/koajs/koa/tree/master/docs\n"
  },
  {
    "path": "examples/with-koa/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-koa\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"build\": \"razzle build\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"koa\": \"^2.13.1\",\n    \"koa-helmet\": \"^6.1.0\",\n    \"koa-router\": \"^10.0.0\",\n    \"koa-static\": \"^5.0.0\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.2.0\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-koa/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-koa/src/App.css",
    "content": "body, html {\n  margin: 0;\n  padding: 0;\n  height: 100%;\n}\n\nbody {\n  font: 17px/1.5 \"Lucida Grande\", \"Lucida Sans Unicode\", Helvetica, Arial, Verdana, sans-serif;\n  background: white;\n  color: #33333d;\n  overflow-y: scroll;\n  overflow-x: hidden;\n}\n\na {\n  color: #33a0c0;\n}"
  },
  {
    "path": "examples/with-koa/src/App.js",
    "content": "import React from \"react\";\nimport { Route, Switch } from \"react-router-dom\";\nimport Home from \"./Home\";\nimport \"./App.css\";\n\nconst App = () => (\n  <Switch>\n    <Route exact path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-koa/src/App.test.js",
    "content": "import App from \"./App\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { MemoryRouter } from \"react-router-dom\";\n\ndescribe(\"<App />\", () => {\n  test(\"renders without exploding\", () => {\n    const div = document.createElement(\"div\");\n    ReactDOM.render(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>,\n      div\n    );\n  });\n});\n"
  },
  {
    "path": "examples/with-koa/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  height: 80px;\n}\n\n.Home-header {\n  height: 150px;\n  padding: 20px;\n}\n\n.Home-header h2 {\n  font-size: 1.2em;\n}\n\n.Home-intro {\n  border-top: 1px solid #eee;\n  border-bottom: 1px solid #eee;\n  padding: 25px;\n  overflow-x: auto;\n  font-size: .9em;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n"
  },
  {
    "path": "examples/with-koa/src/Home.js",
    "content": "import React from 'react';\nimport logo from './koajs-logo.png';\nimport './Home.css';\n\nclass Home extends React.Component {\n  render() {\n    return (\n      <div className=\"Home\">\n        <div className=\"Home-header\">\n          <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n          <h2>Welcome to Razzle + Koa</h2>\n        </div>\n        <pre className=\"Home-intro\">\n          To get started, edit <b>src/App.js</b> or{' '}\n          <b>src/Home.js</b> and save to reload.\n        </pre>\n        <ul className=\"Home-resources\">\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n          </li>\n          <li>\n            <a href=\"http://koajs.com\">Koa official site</a>\n          </li>\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n          </li>\n          <li>\n            <a href=\"https://palmer.chat\">Community Slack</a>\n          </li>\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-koa/src/client.js",
    "content": "import App from \"./App\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport React from \"react\";\nimport { hydrate } from \"react-dom\";\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById(\"root\")\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-koa/src/index.js",
    "content": "import http from 'http';\n\nlet app = require('./server').default;\n\n// Use `app#callback()` method here instead of directly\n// passing `app` as an argument to `createServer` (or use `app#listen()` instead)\n// @see https://github.com/koajs/koa/blob/master/docs/api/index.md#appcallback\nlet currentHandler = app.callback();\nconst server = http.createServer(currentHandler);\n\nserver.listen(process.env.PORT || 3000, error => {\n  if (error) {\n    console.log(error);\n  }\n\n  console.log('🚀 started');\n});\n\nif (module.hot) {\n  console.log('✅  Server-side HMR Enabled!');\n\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n\n    try {\n      const newHandler = require('./server').default.callback();\n      server.removeListener('request', currentHandler);\n      server.on('request', newHandler);\n      currentHandler = newHandler;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n}\n"
  },
  {
    "path": "examples/with-koa/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport { StaticRouter } from 'react-router-dom';\nimport Koa from 'koa';\nimport serve from 'koa-static';\nimport helmet from 'koa-helmet';\nimport Router from 'koa-router';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (ctx) => {\n\n  const context = {};\n  const markup = renderToString(\n    <StaticRouter context={context} location={ctx.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n    return { html };\n  }\n\n};\n\n// Initialize `koa-router` and setup a route listening on `GET /*`\n// Logic has been splitted into two chained middleware functions\n// @see https://github.com/alexmingoia/koa-router#multiple-middleware\nconst router = new Router();\nrouter.get(\n  '(.*)',\n  (ctx, next) => {\n    const { html = '', redirect = false } = renderApp(ctx);\n    ctx.state.markup = html;\n    return redirect ? ctx.redirect(redirect) : next();\n  },\n  ctx => {\n    ctx.status = 200;\n    ctx.body = ctx.state.markup;\n  }\n);\n\n// Intialize and configure Koa application\nconst server = new Koa();\nserver\n  // `koa-helmet` provides security headers to help prevent common, well known attacks\n  // @see https://helmetjs.github.io/\n  .use(helmet())\n  // Serve static files located under `process.env.RAZZLE_PUBLIC_DIR`\n  .use(serve(process.env.RAZZLE_PUBLIC_DIR))\n  .use(router.routes())\n  .use(router.allowedMethods());\n\nexport default server;\n"
  },
  {
    "path": "examples/with-less/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-less/README.md",
    "content": "# Razzle With LESS Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-less with-less\n\ncd with-less\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use less as styling language\nYou can import anything from node_modules or other less files, like Ant Design, etc.\n`src/index.js` for the server, `src/client.js` for the browser, and `src/App.less` for LESS style.\n"
  },
  {
    "path": "examples/with-less/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-less\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"resolutions\": {\n    \"postcss\": \"8.2.4\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"less\": \"^4.1.0\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"postcss\": \"^8.2.4\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-less\": \"4.2.15\",\n    \"style-loader\": \"^2.0.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-less/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-less/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  plugins: ['less'],\n};\n"
  },
  {
    "path": "examples/with-less/src/App.js",
    "content": "import './App.less';\n\nimport React from 'react';\n\nconst App = () => (\n  <div>\n    <div>Welcome to Razzle.</div>\n    <div className=\"info\">Hot reload enabled!!</div>\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-less/src/App.less",
    "content": "@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans');\n@import './other';\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: 'Open Sans', sans-serif;\n}\n"
  },
  {
    "path": "examples/with-less/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-less/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-less/src/index.js",
    "content": "import express from 'express';\nimport app from './server';\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-less/src/other.less",
    "content": "@info-color: darkmagenta;\n\n.info {\n  color: @info-color;\n  font-size: 14pt;\n}\n"
  },
  {
    "path": "examples/with-less/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-loadable-components/.babelrc",
    "content": "{\n  \"presets\": [\"razzle/babel\"],\n  \"plugins\": [\"@loadable/babel-plugin\"]\n}\n"
  },
  {
    "path": "examples/with-loadable-components/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-loadable-components/README.md",
    "content": "# Razzle loadable-components Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-loadable-components with-loadable-components\n\ncd with-loadable-components\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis sample has the full SSR setup as described in the [loadable-components docs](https://github.com/smooth-code/loadable-components#server-side-rendering).\nIt demonstrates simple dynamic imports using [loadable-components](https://github.com/smooth-code/loadable-components) on top of SSR with razzle.\n"
  },
  {
    "path": "examples/with-loadable-components/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-loadable-components\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"export\": \"razzle export\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"@loadable/component\": \"^5.15.0\",\n    \"@loadable/server\": \"^5.15.0\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.12.10\",\n    \"@loadable/babel-plugin\": \"^5.13.2\",\n    \"@loadable/webpack-plugin\": \"^5.15.0\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-loadable-components/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-loadable-components/razzle.config.js",
    "content": "const LoadableWebpackPlugin = require(\"@loadable/webpack-plugin\");\nconst path = require(\"path\");\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    // add loadable webpack plugin only\n    // when we are building the client bundle\n    if (opts.env.target === \"web\") {\n      const filename = path.resolve(__dirname, \"build\");\n\n      // saving stats file to build folder\n      // without this, stats files will go into\n      // build/public folder\n      config.plugins.push(\n        new LoadableWebpackPlugin({\n          outputAsset: false,\n          writeToDisk: { filename },\n        })\n      );\n    }\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-loadable-components/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-loadable-components/src/App.js",
    "content": "import \"./App.css\";\nimport React from \"react\";\nimport loadable from \"@loadable/component\";\n\nconst Header = loadable(() => import(\"./Header\"));\nconst Body = loadable(() => import(\"./Body\"));\nconst Footer = loadable(() => import(\"./Footer\"));\n\nconst App = () => (\n  <div>\n    <h3>Welcome to the Razzle</h3>\n    <Header />\n    <Body />\n    <Footer />\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-loadable-components/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-loadable-components/src/Body.js",
    "content": "import React from \"react\";\nimport loadable from \"@loadable/component\";\n\nconst BodyPart = loadable(() => import(\"./BodyPart\"));\n\nconst Body = () => (\n  <div>\n    This is my Body <BodyPart />\n  </div>\n);\n\nexport default Body;\n"
  },
  {
    "path": "examples/with-loadable-components/src/BodyPart.js",
    "content": "import React from 'react';\n\nconst BodyPart = () => <span>This is an inner BodyPart</span>;\n\nexport default BodyPart;\n"
  },
  {
    "path": "examples/with-loadable-components/src/Footer.js",
    "content": "import React from 'react';\n\nconst Footer = () => <div>This is my Footer</div>;\n\nexport default Footer;\n"
  },
  {
    "path": "examples/with-loadable-components/src/Header.js",
    "content": "import React from 'react';\n\nconst Header = () => <div>This is my Header</div>;\n\nexport default Header;\n"
  },
  {
    "path": "examples/with-loadable-components/src/client.js",
    "content": "import React from \"react\";\nimport { hydrate } from \"react-dom\";\nimport { loadableReady } from \"@loadable/component\";\nimport App from \"./App\";\n\n// Load all components needed before rendering\nloadableReady().then(() => {\n  hydrate(<App />, document.getElementById(\"root\"));\n});\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-loadable-components/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-loadable-components/src/server.js",
    "content": "import App from \"./App\";\nimport React from \"react\";\nimport express from \"express\";\nimport { renderToString } from \"react-dom/server\";\nimport { ChunkExtractor, ChunkExtractorManager } from \"@loadable/server\";\nimport path from \"path\";\n\nconst server = express();\n\nexport const renderApp = async (req) => {\n  // We create an extractor from the statsFile\n  const extractor = new ChunkExtractor({\n    statsFile: path.resolve(\"build/loadable-stats.json\"),\n    // razzle client bundle entrypoint is client.js\n    entrypoints: [\"client\"],\n  });\n\n  const markup = renderToString(\n    <ChunkExtractorManager extractor={extractor}>\n      <App />\n    </ChunkExtractorManager>\n  );\n\n  // collect script tags\n  const scriptTags = extractor.getScriptTags();\n\n  // collect \"preload/prefetch\" links\n  const linkTags = extractor.getLinkTags();\n\n  // collect style tags\n  const styleTags = extractor.getStyleTags();\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n<html lang=\"\">\n<head>\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta charSet='utf-8' />\n    <title>Welcome to Razzle</title>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    ${linkTags}\n    ${styleTags}\n</head>\n<body>\n    <div id=\"root\">${markup}</div>\n    ${scriptTags}\n</body>\n</html>`;\n\n  return { html };\n}\n\nserver\n  .disable(\"x-powered-by\")\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get(\"/*\", async (req, res, next) => {\n    try {\n      const { html } = await renderApp(req);\n      res.send(html);\n    } catch (error) {\n      next(error);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-loadable-components/src/static_export.js",
    "content": "import { renderApp } from './server';\n\nexport const render = async (req, res) => {\n  const { html } = await renderApp(req);\n\n  res.json({ html });\n};\n\nexport const routes = () => {\n  return ['/'];\n};\n"
  },
  {
    "path": "examples/with-material-ui/README.md",
    "content": "# Razzle and Material UI Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-material-ui with-material-ui\n\ncd with-material-ui\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is a basic example of how to use Material UI with razzle.\n"
  },
  {
    "path": "examples/with-material-ui/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-material-ui\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"@material-ui/core\": \"^4.9.11\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"@material-ui/styles\": \"^4.11.3\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"prop-types\": \"^15.7.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-material-ui/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-material-ui/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-material-ui/src/App.js",
    "content": "import \"./App.css\";\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Typography from \"@material-ui/core/Typography\";\nimport { makeStyles } from \"@material-ui/core/styles\";\n\nconst useStyles = makeStyles((theme) => ({\n  root: theme.mixins.gutters({\n    paddingTop: 16,\n    paddingBottom: 16,\n    margin: theme.spacing(3),\n  }),\n}));\n\nconst App = () => {\n  const classes = useStyles();\n  return (\n    <Paper className={classes.root} elevation={4}>\n      <Typography type=\"headline\" component=\"h3\">\n        This is a sheet of paper.\n      </Typography>\n      <Typography type=\"body1\" component=\"p\">\n        Paper can be used to build surface or other elements for your\n        application.\n      </Typography>\n    </Paper>\n  );\n};\n\nexport default App;\n"
  },
  {
    "path": "examples/with-material-ui/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-material-ui/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport theme from './theme';\nimport { ThemeProvider } from '@material-ui/styles';\nimport App from './App';\n\nhydrate(\n  <ThemeProvider theme={theme}>\n    <App />\n  </ThemeProvider>,\n  document.getElementById('root'),\n  () => {\n    // [ReHydratation](https://github.com/cssinjs/jss/blob/master/docs/ssr.md)\n    const jssStyles = document.getElementById('jss-ssr');\n    if (jssStyles && jssStyles.parentNode)\n      jssStyles.parentNode.removeChild(jssStyles);\n  }\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-material-ui/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-material-ui/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport theme from './theme';\nimport { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n\n  const sheets = new ServerStyleSheets();\n  const markup = renderToString(\n    sheets.collect(\n      <ThemeProvider theme={theme}>\n        <App />\n      </ThemeProvider>\n    )\n  );\n\n  const css = sheets.toString();\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      <link rel=\"stylesheet\" href=\"//fonts.googleapis.com/css?family=Roboto:300,400,500\">\n      ${cssLinksFromAssets(assets, 'client')}\n      ${css ? `<style id='jss-ssr'>${css}</style>` : ''}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-material-ui/src/theme.js",
    "content": "import { createMuiTheme } from '@material-ui/core/styles';\nimport { indigo, orange } from '@material-ui/core/colors';\n\n// Configure Material UI theme\nconst theme = createMuiTheme({\n  palette: {\n    primary: indigo,\n    accent: orange,\n    type: 'light',\n  },\n});\n\nexport default theme;\n"
  },
  {
    "path": "examples/with-mdx/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-mdx/README.md",
    "content": "# MDX + Razzle\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-mdx with-mdx\n\ncd with-mdx\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points and uses the mdxjs to load markdown files as react components.\n\n[See documentation](https://mdxjs.com/getting-started/razzle)\n"
  },
  {
    "path": "examples/with-mdx/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-mdx\",\n  \"version\": \"4.2.15\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"remark-emoji\": \"^2.1.0\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-mdx\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-mdx/razzle.config.js",
    "content": "'use strict';\n\nconst emoji = require('remark-emoji');\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'mdx',\n      options: {\n        mdPlugins: [emoji],\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "examples/with-mdx/src/App.js",
    "content": "import React from 'react';\nimport Doc from './example.md';\n\nexport default () => <Doc />;\n"
  },
  {
    "path": "examples/with-mdx/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-mdx/src/example.md",
    "content": "An h1 header\n============\n\nParagraphs are separated by a blank line.\n\n2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists\nlook like:\n\n  * this one\n  * that one\n  * the other one\n\nNote that --- not considering the asterisk --- the actual text\ncontent starts at 4-columns in.\n\n> Block quotes are\n> written like so.\n>\n> They can span multiple paragraphs,\n> if you like.\n\nUse 3 dashes for an em-dash. Use 2 dashes for ranges (ex., \"it's all\nin chapters 12--14\"). Three dots ... will be converted to an ellipsis.\nUnicode is supported. ☺\n\n\n\nAn h2 header\n------------\n\nHere's a numbered list:\n\n 1. first item\n 2. second item\n 3. third item\n\nNote again how the actual text starts at 4 columns in (4 characters\nfrom the left side). Here's a code sample:\n\n    # Let me re-iterate ...\n    for i in 1 .. 10 { do-something(i) }\n\nAs you probably guessed, indented 4 spaces. By the way, instead of\nindenting the block, you can use delimited blocks, if you like:\n\n~~~\ndefine foobar() {\n    print \"Welcome to flavor country!\";\n}\n~~~\n\n(which makes copying & pasting easier). You can optionally mark the\ndelimited block for Pandoc to syntax highlight it:\n\n~~~python\nimport time\n# Quick, count to ten!\nfor i in range(10):\n    # (but not *too* quick)\n    time.sleep(0.5)\n    print(i)\n~~~\n\n\n\n### An h3 header ###\n\nNow a nested list:\n\n 1. First, get these ingredients:\n\n      * carrots\n      * celery\n      * lentils\n\n 2. Boil some water.\n\n 3. Dump everything in the pot and follow\n    this algorithm:\n\n        find wooden spoon\n        uncover pot\n        stir\n        cover pot\n        balance wooden spoon precariously on pot handle\n        wait 10 minutes\n        goto first step (or shut off burner when done)\n\n    Do not bump wooden spoon or it will fall.\n\nNotice again how text always lines up on 4-space indents (including\nthat last line which continues item 3 above).\n\nHere's a link to [a website](http://foo.bar), to a [local\ndoc](local-doc.html), and to a [section heading in the current\ndoc](#an-h2-header). Here's a footnote [^1].\n\n[^1]: Some footnote text.\n\nTables can look like this:\n\nName           Size  Material      Color\n------------- -----  ------------  ------------\nAll Business      9  leather       brown\nRoundabout       10  hemp canvas   natural\nCinderella       11  glass         transparent\n\nTable: Shoes sizes, materials, and colors.\n\n(The above is the caption for the table.) Pandoc also supports\nmulti-line tables:\n\n--------  -----------------------\nKeyword   Text\n--------  -----------------------\nred       Sunsets, apples, and\n          other red or reddish\n          things.\n\ngreen     Leaves, grass, frogs\n          and other things it's\n          not easy being.\n--------  -----------------------\n\nA horizontal rule follows.\n\n***\n\nHere's a definition list:\n\napples\n  : Good for making applesauce.\n\noranges\n  : Citrus!\n\ntomatoes\n  : There's no \"e\" in tomatoe.\n\nAgain, text is indented 4 spaces. (Put a blank line between each\nterm and  its definition to spread things out more.)\n\nHere's a \"line block\" (note how whitespace is honored):\n\n| Line one\n|   Line too\n| Line tree\n\n\nInline math equation: $\\omega = d\\phi / dt$. Display\nmath should get its own line like so:\n\n$$I = \\int \\rho R^{2} dV$$\n\nAnd note that you can backslash-escape any punctuation characters\nwhich you wish to be displayed literally, ex.: \\`foo\\`, \\*bar\\*, etc.\n"
  },
  {
    "path": "examples/with-mdx/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-mdx/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-module-federation/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-module-federation/README.md",
    "content": "# Razzle Module Federation Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-module-federation with-module-federation\n\ncd with-module-federation\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle with-module-federation. It satisfies the entry point\n `src/client.js` for the browser in both apps..\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-1\",\n  \"version\": \"4.0.0-canary.25\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  }\n}\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"<%= process.env.PUBLIC_PATH %>favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <%= htmlWebpackPlugin.tags.headTags %>\n    <!--\n        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.\n        It will be replaced with the URL of the `public` folder during the build.\n        Only files inside the `public` folder can be referenced from the HTML.\n        Unlike \"/favicon.ico\" or \"favicon.ico\", \"<%= process.env.PUBLIC_PATH %>/favicon.ico\" will\n        work correctly both with client-side routing and a non-root public URL.\n        Learn how to configure a non-root public URL by running `npm run build`.\n      -->\n    <title>React App</title>\n  </head>\n\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n        This HTML file is a template.\n        If you open it directly in the browser, you will see an empty page.\n        You can add webfonts, meta tags, or analytics to this file.\n        The build step will place the bundled scripts into the <body> tag.\n        To begin the development, run `npm start` or `yarn start`.\n        To create a production bundle, use `npm run build` or `yarn build`.\n      -->\n      <%= htmlWebpackPlugin.tags.bodyTags %>\n  </body>\n\n</html>\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/razzle.config.js",
    "content": "'use strict';\n\nconst { ModuleFederationPlugin } = require(\"webpack\").container;\nconst path = require(\"path\");\nconst deps = require(\"./package.json\").dependencies;\n\nmodule.exports = {\n  options: {\n    buildType: 'spa',\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    const url = opts.env.dev ?\n      process.env.FEDERATED_URL_DEV : process.env.FEDERATED_URL;\n\n    config.plugins.push(\n      new ModuleFederationPlugin({\n        name: \"app1\",\n        filename: \"remoteEntry.js\",\n        remotes: {\n          app2: `app2@${url}remoteEntry.js`,\n        },\n        exposes: {\n          \"./Button\": \"./src/Button\",\n        },\n        shared: [\n          {\n            ...deps,\n            react: {\n              // eager: true,\n              singleton: true,\n              requiredVersion: deps.react,\n            },\n            \"react-dom\": {\n              // eager: true,\n              singleton: true,\n              requiredVersion: deps[\"react-dom\"],\n            },\n          },\n        ],\n      })\n    )\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/src/App.js",
    "content": "import LocalButton from \"./Button\";\nimport React from \"react\";\n\nconst RemoteButton = React.lazy(() => import(\"app2/Button\"));\n\nconst App = () => (\n  <div>\n    <h1>Bi-Directional</h1>\n    <h2>App 1</h2>\n    <LocalButton />\n    <React.Suspense fallback=\"Loading Button\">\n      <RemoteButton />\n    </React.Suspense>\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/src/Button.js",
    "content": "import React from \"react\";\n\nconst style = {\n  background: \"#800\",\n  color: \"#fff\",\n  padding: 12,\n};\n\nconst Button = () => <button style={style}>App 1 Button</button>;\n\nexport default Button;\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/src/bootstrap.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-module-federation/basic-1/src/client.js",
    "content": "import(\"./bootstrap\");\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-2\",\n  \"version\": \"4.0.0-canary.25\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  }\n}\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"<%= process.env.PUBLIC_PATH %>favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <%= htmlWebpackPlugin.tags.headTags %>\n    <!--\n        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.\n        It will be replaced with the URL of the `public` folder during the build.\n        Only files inside the `public` folder can be referenced from the HTML.\n        Unlike \"/favicon.ico\" or \"favicon.ico\", \"<%= process.env.PUBLIC_PATH %>/favicon.ico\" will\n        work correctly both with client-side routing and a non-root public URL.\n        Learn how to configure a non-root public URL by running `npm run build`.\n      -->\n    <title>React App</title>\n  </head>\n\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n        This HTML file is a template.\n        If you open it directly in the browser, you will see an empty page.\n        You can add webfonts, meta tags, or analytics to this file.\n        The build step will place the bundled scripts into the <body> tag.\n        To begin the development, run `npm start` or `yarn start`.\n        To create a production bundle, use `npm run build` or `yarn build`.\n      -->\n      <%= htmlWebpackPlugin.tags.bodyTags %>\n  </body>\n\n</html>\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/razzle.config.js",
    "content": "'use strict';\n\nconst { ModuleFederationPlugin } = require(\"webpack\").container;\nconst path = require(\"path\");\nconst deps = require(\"./package.json\").dependencies;\n\nmodule.exports = {\n  options: {\n    buildType: 'spa',\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    const url = opts.env.dev ?\n      process.env.FEDERATED_URL_DEV : process.env.FEDERATED_URL;\n\n    config.plugins.push(\n      new ModuleFederationPlugin({\n        name: \"app2\",\n        filename: \"remoteEntry.js\",\n        remotes: {\n          app1: `app1@${url}remoteEntry.js`,\n        },\n        exposes: {\n          \"./Button\": \"./src/Button\",\n        },\n        shared: [\n          {\n            ...deps,\n            react: {\n              // eager: true,\n              singleton: true,\n              requiredVersion: deps.react,\n            },\n            \"react-dom\": {\n              // eager: true,\n              singleton: true,\n              requiredVersion: deps[\"react-dom\"],\n            },\n          },\n        ],\n      })\n    )\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/src/App.js",
    "content": "import LocalButton from \"./Button\";\nimport React from \"react\";\n\nconst RemoteButton = React.lazy(() => import(\"app1/Button\"));\n\nconst App = () => (\n  <div>\n    <h1>Bi-Directional</h1>\n    <h2>App 2</h2>\n    <LocalButton />\n    <React.Suspense fallback=\"Loading Button\">\n      <RemoteButton />\n    </React.Suspense>\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/src/Button.js",
    "content": "import React from \"react\";\n\nconst style = {\n  background: \"#00c\",\n  color: \"#fff\",\n  padding: 12,\n};\n\nconst Button = () => <button style={style}>App 2 Button</button>;\n\nexport default Button;\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/src/bootstrap.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-module-federation/basic-2/src/client.js",
    "content": "import(\"./bootstrap\");\n"
  },
  {
    "path": "examples/with-module-federation/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"razzle-examples-with-module-federation\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle start\",\n    \"build-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle build\",\n    \"test-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle test --env=jsdom\",\n    \"start:prod-1\": \"cross-env RAZZLE_APP_PATH=basic-1 PORT=3000 NODE_ENV=production serve -s basic-1/build/public\",\n    \"start-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle start\",\n    \"build-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle build\",\n    \"test-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle test --env=jsdom\",\n    \"start:prod-2\": \"cross-env RAZZLE_APP_PATH=basic-2 PORT=3001 NODE_ENV=production serve -s basic-2/build/public\",\n    \"start\": \"concurrently \\\"yarn start-1\\\" \\\"yarn start-2\\\"\",\n    \"start:prod\": \"concurrently \\\"yarn start:prod-1\\\" \\\"yarn start:prod-2\\\"\",\n    \"build\": \"concurrently \\\"yarn build-1 --noninteractive\\\" \\\"yarn build-2 --noninteractive\\\"\"\n  },\n  \"workspaces\": [\n    \"basic-1\",\n    \"basic-2\"\n  ],\n  \"devDependencies\": {\n    \"concurrently\": \"^5.3.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^5.2.0\",\n    \"webpack\": \"^5.24.0\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n  \"razzle_meta\": {\n    \"forceWebpack\": true\n  }\n}\n"
  },
  {
    "path": "examples/with-monorepo/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-monorepo/README.md",
    "content": "# Razzle Monorepo Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-monorepo with-monorepo\n\ncd with-monorepo\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle in a monorepo. It satisfies the entry points\n`src/index.js` for the server and `src/client.js` for the browser in both apps.\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-1\",\n  \"version\": \"4.0.0-canary.25\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  }\n}\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-monorepo/basic-1/src/server.js",
    "content": "import path from 'path';\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic-2\",\n  \"version\": \"4.0.0-canary.25\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  }\n}\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-monorepo/basic-2/src/server.js",
    "content": "import path from 'path';\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-monorepo/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"razzle-examples-with-monorepo\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle start\",\n    \"build-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle build\",\n    \"test-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle test --env=jsdom\",\n    \"start:prod-1\": \"cross-env RAZZLE_APP_PATH=basic-1 NODE_ENV=production node basic-1/build/server.js\",\n    \"start-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle start\",\n    \"build-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle build\",\n    \"test-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle test --env=jsdom\",\n    \"start:prod-2\": \"cross-env RAZZLE_APP_PATH=basic-2 NODE_ENV=production node basic-2/build/server.js\",\n    \"start\": \"concurrently \\\"yarn start-1\\\" \\\"yarn start-2\\\"\",\n    \"start:prod\": \"concurrently \\\"yarn start:prod-1\\\" \\\"yarn start:prod-2\\\"\",\n    \"build\": \"concurrently \\\"yarn build-1 --noninteractive\\\" \\\"yarn build-2 --noninteractive\\\"\"\n  },\n  \"workspaces\": [\n    \"basic-1\",\n    \"basic-2\"\n  ],\n  \"devDependencies\": {\n    \"concurrently\": \"^5.3.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/README.md",
    "content": "# Razzle Monorepo without workspaces Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-monorepo-without-workspaces with-monorepo-without-workspaces\n\ncd with-monorepo-without-workspaces\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\n\nThis is similar to the monorepo example, but adapted for the case where you want\nto build multiple separate applications that share the same dependencies (and\ntherefore share the same package.json in the root)."
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-1/src/server.js",
    "content": "import path from 'path';\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/basic-2/src/server.js",
    "content": "import path from 'path';\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-monorepo-without-workspaces/package.json",
    "content": "{\n  \"private\": true,\n  \"name\": \"razzle-examples-with-monorepo-without-workspaces\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle start\",\n    \"build-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle build\",\n    \"test-1\": \"cross-env RAZZLE_APP_PATH=basic-1 razzle test --env=jsdom\",\n    \"start:prod-1\": \"cross-env RAZZLE_APP_PATH=basic-1 NODE_ENV=production node basic-1/build/server.js\",\n    \"start-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle start\",\n    \"build-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle build\",\n    \"test-2\": \"cross-env RAZZLE_APP_PATH=basic-2 razzle test --env=jsdom\",\n    \"start:prod-2\": \"cross-env RAZZLE_APP_PATH=basic-2 NODE_ENV=production node basic-2/build/server.js\",\n    \"start\": \"concurrently \\\"yarn start-1\\\" \\\"yarn start-2\\\"\",\n    \"start:prod\": \"concurrently \\\"yarn start:prod-1\\\" \\\"yarn start:prod-2\\\"\",\n    \"build\": \"concurrently \\\"yarn build-1 --noninteractive\\\" \\\"yarn build-2 --noninteractive\\\"\"\n  },\n  \"devDependencies\": {\n    \"concurrently\": \"^5.3.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  }\n}\n"
  },
  {
    "path": "examples/with-now/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-now/README.md",
    "content": "# Razzle Now Deployment example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-now with-now\n\ncd with-now\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n### Setup Now:\n\n[Now](https://zeit.co/now) manages app deployments with a [desktop](https://zeit.co/download) app or [CLI](https://zeit.co/download#now-cli).\n\n* You can download either the [desktop](https://zeit.co/download) (ships and installs the CLI as well) or just the [CLI](https://zeit.co/download#now-cli)\n  * Or install only the CLI directly using: `npm install -g now`\n* Create a Now [account](https://zeit.co/signup)\n* Authenticate in the desktop app or CLI with `now login`\n\n### Deploy:\n\n* Deploy using `now` in the root of your app.\n* Open your [Dashboard](https://zeit.co/dashboard/deployments) and test your deployment\n  * Note: on the free plan your deployment and logs will be **_publicly visible_**\n\n#### Additional Configuration:\n\n* Additional build, deployment, and config steps available: [Zeit/Now](https://zeit.co/now#frequently-asked-questions)\n\n## Idea behind the example\n\nThis is a basic example of how to use razzle and deploy to [Now](https://zeit.co/now).\n"
  },
  {
    "path": "examples/with-now/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-now\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\",\n    \"now-start\": \"yarn start:prod\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-now/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-now/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-now/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-now/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-now/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-now/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-now/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-now-v2/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-now-v2/README.md",
    "content": "# Razzle Now v2 Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-now-v2 with-now-v2\n\ncd with-now-v2\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\nInstall now:\n\n```\nnpm i -g now\n```\n\nBuild and deploy:\n\n```bash\nyarn build\nnow\n```\n\nOpen the link written in the console.\n\n## Idea behind the example\n\nTake a look at `now.json`. We are uploading the result of the razzle build, and setting up the routes for the app entry point and all static resources.\n\n```json\n{\n    \"version\": 2,\n    \"name\": \"example\",\n    \"builds\": [\n        {\n            \"src\": \"build/public/**\",\n            \"use\": \"@now/static\"\n        },\n        {\n            \"src\": \"build/server.js\",\n            \"use\": \"@now/node-server\"\n        }\n    ],\n    \"routes\": [\n        { \"src\": \"/assets.json\", \"dest\": \"build/assets.json\" },\n        { \"src\": \"/favicon.ico\", \"dest\": \"build/public/favicon.ico\" },\n        { \"src\": \"/robots.txt\", \"dest\": \"build/public/robots.txt\" },\n        { \"src\": \"/static/(.*)\", \"dest\": \"build/public/static/$1\" },\n        { \"src\": \"/(.*)\", \"dest\": \"build/server.js\" }\n\n    ],\n    \"env\": {\n      \"NODE_ENV\": \"production\"\n    }\n}\n```\n\nWe are also setting the `NODE_ENV` environment variable. Most likely, your app will use other environment variables, beware you should not commit secrets like api keys and others into your repository. Take a look at now's documentation to understand what you should do in such cases.\n\n## Documentation\n\n* [Zeit Now v2 Documentation](https://zeit.co/docs/v2/)\n  * [@now/node-server](https://zeit.co/docs/v2/deployments/official-builders/node-js-server-now-node-server/)\n  * [Environment Variables and Secrets](https://zeit.co/docs/v2/deployments/environment-variables-and-secrets/)\n"
  },
  {
    "path": "examples/with-now-v2/now.json",
    "content": "{\n  \"version\": 2,\n  \"builds\": [{\n      \"src\": \"build/server.js\",\n      \"use\": \"@now/node\"\n    },\n    {\n      \"src\": \"build/public/**/*\",\n      \"use\": \"@now/static\"\n    }\n  ],\n  \"routes\": [{\n      \"src\": \"/static/(.*)\",\n      \"dest\": \"build/public/static/$1\"\n    },\n    {\n      \"src\": \"/favicon.ico\",\n      \"dest\": \"favicon.ico\"\n    },\n    {\n      \"src\": \"/robots.txt\",\n      \"dest\": \"robots.txt\"\n    },\n    {\n      \"src\": \"/(.*)\",\n      \"dest\": \"build/server.js\"\n    }\n  ],\n  \"env\": {\n    \"NODE_ENV\": \"production\"\n  }\n}"
  },
  {
    "path": "examples/with-now-v2/package.json",
    "content": "{\n  \"name\": \"razzle-examples-now-v2\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"now-build\": \"razzle build\",\n    \"now-start\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-now-v2/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-now-v2/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-now-v2/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-now-v2/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-now-v2/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-now-v2/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-now-v2/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-polka/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-polka/README.md",
    "content": "# Razzle Polka Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-polka with-polka\n\ncd with-polka\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nAn example of how to use a custom, express middleware-compatible server like [polka](https://github.com/lukeed/polka) with razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser. HMR works for server-side changes too by creating new instances of the polka server handler.\n"
  },
  {
    "path": "examples/with-polka/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-polka\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"polka\": \"^0.5.2\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"serve-static\": \"^1.14.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-polka/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-polka/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-polka/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-polka/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-polka/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-polka/src/index.js",
    "content": "import http from \"http\";\n\nlet app = require(\"./server\").default;\n\nconst server = http.createServer(app);\n\nlet currentApp = app;\n\nserver.listen(process.env.PORT || 3000, (error) => {\n  if (error) {\n    console.log(error);\n  }\n\n  console.log(\"🚀 started\");\n});\n\nif (module.hot) {\n  console.log(\"✅  Server-side HMR Enabled!\");\n\n  module.hot.accept(\"./server\", () => {\n    console.log(\"🔁  HMR Reloading `./server`...\");\n\n    try {\n      app = require(\"./server\").default;\n      server.removeListener(\"request\", currentApp);\n      server.on(\"request\", app);\n      currentApp = app;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n}\n"
  },
  {
    "path": "examples/with-polka/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport polka from 'polka';\nimport serve from 'serve-static';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\n\nexport default polka()\n  .use(serve(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.end(html);\n  }).handler;\n"
  },
  {
    "path": "examples/with-preact/.babelrc",
    "content": "{\n  \"presets\": [\n    \"razzle/babel\"\n  ],\n  \"plugins\": [\n    [\n      \"@babel/plugin-transform-react-jsx\",\n      {\n        \"pragma\": \"h\"\n      }\n    ]\n  ]\n}"
  },
  {
    "path": "examples/with-preact/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\ncache\n"
  },
  {
    "path": "examples/with-preact/README.md",
    "content": "# Razzle Preact Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-preact with-preact\n\ncd with-preact\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis shows how to setup [Preact](https://github.com/developit/preact) with Razzle.\n\nHere is a list of changes from Razzle's base template:\n\n  1. Install `babel-plugin-transform-react-jsx` as a devDependency.\n  2. Extend Razzle's babel config with a custom `.babelrc`\n  3. Install `preact` and `preact-render-to-string`\n  4. Remove `react`, `react-dom`, `react-router-dom` entirely\n  5. Update `server.js` to use `preact-render-to-string`'s `render` function. Also remove the `<div id=\"root\">` element from our html template since Preact can render to the body.\n"
  },
  {
    "path": "examples/with-preact/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-preact\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"preact\": \"^10.4.1\",\n    \"preact-render-to-string\": \"^5.1.6\",\n    \"react\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"@prefresh/babel-plugin\": \"^0.2.0\",\n    \"@prefresh/webpack\": \"^2.0.0\",\n    \"@babel/core\": \"^7.12.10\",\n    \"@babel/plugin-transform-react-jsx\": \"^7.9.4\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"webpack\": \"^5.19.0\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-preact/public/robots.txt",
    "content": "User-agent: *\nDisallow: /api/\nDisallow: /publicapi/\nDisallow: /query/\n"
  },
  {
    "path": "examples/with-preact/razzle.config.js",
    "content": "'use strict';\n\nconst Prefresh = require('@prefresh/webpack');\n\nmodule.exports = {\n  experimental: {\n    reactRefresh: false,\n  },\n  modifyWebpackConfig(opts) {\n    const { target, dev } = opts.env;\n    const { webpackConfig: config } = opts;\n    if (target !== 'node' && dev) {\n      const jsRule = config.module.rules.find(loaderEntry =>\n        String(loaderEntry.test).includes('(js|jsx|mjs|ts|tsx)')\n      );\n\n      const babelLoader = jsRule.use.find(useEntry =>\n        useEntry.loader.includes('babel-loader')\n      );\n\n      if (babelLoader.options.plugins) {\n        babelLoader.options.plugins.unshift('@prefresh/babel-plugin');\n      } else {\n        babelLoader.options.plugins = ['@prefresh/babel-plugin'];\n      }\n\n      config.plugins.unshift(new Prefresh());\n    }\n\n    return config;\n  },\n};"
  },
  {
    "path": "examples/with-preact/src/App.js",
    "content": "import { h } from 'preact';\nimport { useState } from 'preact/hooks';\nimport PreactLogo from './preact.svg';\n/** @jsx h */\n\nconst App = () => {\n  const [count, setCount] = useState(0);\n  return (\n    <main class=\"Preact\">\n      <img src={PreactLogo} alt=\"Preact Logo\" />\n      Hello Preact!\n      <p>Count: {count}</p>\n      <button onClick={() => setCount(count - 1)}>-</button>\n      <button onClick={() => setCount(count + 1)}>+</button>\n    </main>\n  );\n};\n\nexport default App;\n"
  },
  {
    "path": "examples/with-preact/src/client.js",
    "content": "import { h, hydrate } from \"preact\";\nimport App from \"./App\";\n/** @jsx h */\n\nhydrate(<App />, document.body, document.body.firstElementChild);\n"
  },
  {
    "path": "examples/with-preact/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-preact/src/server.js",
    "content": "import App from './App';\nimport express from 'express';\nimport { h } from 'preact'; // eslint-disable-line\nimport render from 'preact-render-to-string';\n/** @jsx h */\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = render(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-promise-config/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-promise-config/README.md",
    "content": "# Razzle Custom Promise Configuration Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-promise-config with-promise-config\n\ncd with-promise-config\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis example demonstrates how to use a `razzle.config.js` file to modify Razzle's\nunderlying configuration using a promise. It modifies the name of the server's output file\nin production (`razzle build`).\n\nNote that this file is not transpiled, and so you must write it with vanilla\nNode.js-compatible JavaScript.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        // Change the name of the server output file in production\n        if (opts.env.target === 'node' && !opts.env.dev) {\n          config.output.filename = 'custom.js';\n        }\n        resolve(config);\n      }, 10);\n    });\n  },\n};\n\n```\n"
  },
  {
    "path": "examples/with-promise-config/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-promise-config\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/custom.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-promise-config/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-promise-config/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    return new Promise((resolve) => {\n      setTimeout(() => {\n        // Change the name of the server output file in production\n        if (opts.env.target === 'node' && !opts.env.dev) {\n          config.output.filename = 'custom.js';\n        }\n        resolve(config);\n      }, 10);\n    });\n  },\n};\n"
  },
  {
    "path": "examples/with-promise-config/src/App.js",
    "content": "import React from 'react';\n\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-promise-config/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-promise-config/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-promise-config/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-react-native-web/.babelrc",
    "content": "{\n  \"presets\": [\"razzle/babel\"],\n  \"plugins\": [[\"react-native-web\", { \"commonjs\": true }]]\n}\n"
  },
  {
    "path": "examples/with-react-native-web/README.md",
    "content": "# Razzle React Native Web Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-react-native-web with-react-native-web\n\ncd with-react-native-web\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis example demonstrates how to use [React Native Web](https://github.com/necolas/react-native-web) with Razzle. Relative to the basic Razzle example, there are some noteworthy modifications. First, we add `react-native-web` to dependencies and `babel-plugin-react-native-web` to dev dependencies.\n\n```\nyarn add react-native-web\nyarn add babel-plugin-react-native-web --dev\n```\n\nNext we add a custom `.babelrc` file to the root our of project as follows. As described in the documentation, we include Razzle's default babel plugin AND the custom react-native-web plugin.\n\n```json\n{\n  \"presets\": [\"razzle/babel\"],\n  \"plugins\": [\"react-native-web\"]\n}\n```\n\nIn our code, we modify our `src/client.js` as per the RN Web docs. Notice how we are _not_ calling `ReactDOM.hydrate()` ourselves, as this is done by RN Web.\n\n```js\n// ./src/client.js\nimport React from 'react';\nimport App from './App';\nimport { AppRegistry } from 'react-native';\n\n// register the app\nAppRegistry.registerComponent('App', () => App);\n\nAppRegistry.runApplication('App', {\n  initialProps: {},\n  rootTag: document.getElementById('root'),\n});\n\n// Allow HMR to work\nif (module.hot) {\n  module.hot.accept();\n}\n```\n\nIn `src/server.js`, we also can basically copy and paste from the RN Web docs. Important note: RN Web handles CSS-in-js for us, so we remove `assets.client.css` `<link>` tag from our HTML string template and replace it with just the `css` variable we get from RN Web.\n\n```js\n// ./src/server.js\n\nimport App from './App';\nimport express from 'express';\nimport ReactDOMServer from 'react-dom/server';\nimport { AppRegistry } from 'react-native';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    // register the app\n    AppRegistry.registerComponent('App', () => App);\n\n    // prerender the app\n    const { element, getStyleElement } = AppRegistry.getApplication('App', {});\n    // first the element\n    const html = ReactDOMServer.renderToString(element);\n    // then the styles\n    const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());\n\n    res.send(\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${css}\n        ${\n          process.env.NODE_ENV === 'production'\n            ? `<script src=\"${assets.client.js}\" defer></script>`\n            : `<script src=\"${assets.client.js}\" defer crossorigin></script>`\n        }\n    </head>\n    <body>\n        <div id=\"root\">${html}</div>\n    </body>\n</html>`\n    );\n  });\n\nexport default server;\n```\n\n### Webpack setup\n\nLike [create-react-app](https://github.com/facebook/create-react-app), Razzle already takes care of aliasing `react-native` to `react-native-web` with webpack for you. So we don't need to mess with that.\n\nHowever, since we are using RN Web for all our CSS, we can get a significant Webpack #perf boost during development and build tasks if we **remove all the built-in CSS loaders from Razzle**. To do this, we create a file called `razzle.config.js` in our root directory and use the `modify` function. Notice that we are using regex tests to sniff which Webpack module rules we should filter out. This approach is _significantly_ better than just removing a rule at a specific index of the rules array, which could change between Razzle releases.\n\n```js\n'use strict';\n\nmodule.exports = {\n  modify(config, { target, dev }, webpack) {\n    // Since RN web takes care of CSS, we should remove it for a #perf boost\n    config.module.rules = config.module.rules\n      .filter(\n        rule =>\n          !(rule.test && rule.test.exec && rule.test.exec('./something.css'))\n      )\n      .filter(\n        rule =>\n          !(\n            rule.test &&\n            rule.test.exec &&\n            rule.test.exec('./something.module.css')\n          )\n      );\n\n    return config;\n  },\n};\n```\n"
  },
  {
    "path": "examples/with-react-native-web/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-react-native-web\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-native-web\": \"0.15.0\"\n  },\n  \"devDependencies\": {\n    \"babel-plugin-react-native-web\": \"0.15.0\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"extract-text-webpack-plugin\": \"^3.0.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"react-native\": \"^0.63.4\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-react-native-web/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-react-native-web/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    // Since RN web takes care of CSS, we should remove it for a #perf boost\n    config.module.rules = config.module.rules\n      .filter(\n        rule =>\n          !(rule.test && rule.test.exec && rule.test.exec('./something.css'))\n      )\n      .filter(\n        rule =>\n          !(\n            rule.test &&\n            rule.test.exec &&\n            rule.test.exec('./something.module.css')\n          )\n      );\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-react-native-web/src/App.js",
    "content": "import React from 'react';\nimport { StyleSheet, Text, View } from 'react-native';\n\nclass App extends React.Component {\n  render() {\n    return (\n      <View style={styles.box}>\n        <Text style={styles.text}>Hello, world!</Text>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  box: { padding: 10 },\n  text: { fontWeight: 'bold' },\n});\n\nexport default App;\n"
  },
  {
    "path": "examples/with-react-native-web/src/client.js",
    "content": "/* eslint-disable */\nimport React from 'react';\nimport App from './App';\nimport { AppRegistry } from 'react-native';\n\n// register the app\nAppRegistry.registerComponent('App', () => App);\n\nAppRegistry.runApplication('App', {\n  initialProps: {},\n  rootTag: document.getElementById('root'),\n});\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-react-native-web/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-react-native-web/src/server.js",
    "content": "import App from './App';\n\nimport express from 'express';\nimport ReactDOMServer from 'react-dom/server';\nimport { AppRegistry } from 'react-native';\n\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n\n  // register the app\n  AppRegistry.registerComponent('App', () => App);\n\n  // prerender the app\n  const { element, getStyleElement } = AppRegistry.getApplication('App', {});\n  // first the element\n  const markup = ReactDOMServer.renderToString(element);\n  // then the styles\n  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${css}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-react-router/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-react-router/README.md",
    "content": "# Razzle x React Router\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-react-router with-react-router\n\ncd with-react-router\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\nThis example can also be exported as a static website.\n\nTo try it out:\n\n```bash\nyarn build\nyarn export\nyarn start:static\n```\n\nThen open up http://localhost:5000/ in your browser.\n\n## Idea behind the example\n\nThis is a basic, bare-bones example of how to use Razzle and React Router.\n"
  },
  {
    "path": "examples/with-react-router/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-react-router\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"export\": \"razzle export\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:static\": \"serve -s build/public\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"serve\": \"^11.3.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-react-router/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-react-router/src/About.js",
    "content": "import React from \"react\";\n\nconst About = () => <p>about</p>;\n\nexport default About;\n"
  },
  {
    "path": "examples/with-react-router/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-react-router/src/App.js",
    "content": "import { Route, Switch } from \"react-router-dom\";\nimport Home from \"./Home\";\nimport About from \"./About\";\nimport \"./App.css\";\n\nimport React from \"react\";\nconst App = () => {\n  return (\n    <>\n      <Switch>\n        <Route path=\"/\" exact component={Home} />\n        <Route path=\"/about\" component={About} />\n      </Switch>\n    </>\n  );\n};\n\nexport default App;\n"
  },
  {
    "path": "examples/with-react-router/src/App.test.js",
    "content": "import App from \"./App\";\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { BrowserRouter } from \"react-router-dom\";\n\ndescribe(\"<App />\", () => {\n  test(\"renders without exploding\", () => {\n    const div = document.createElement(\"div\");\n    ReactDOM.render(\n      <BrowserRouter>\n        <App />\n      </BrowserRouter>,\n      div\n    );\n  });\n});\n"
  },
  {
    "path": "examples/with-react-router/src/Home.js",
    "content": "import React from \"react\";\nimport { Link } from \"react-router-dom\";\n\nconst Home = () => {\n  return (\n    <>\n      <p>Welcome to Razzle.</p>\n      <Link to=\"about\">About</Link>\n    </>\n  );\n};\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-react-router/src/client.js",
    "content": "import React from \"react\";\nimport { hydrate } from \"react-dom\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport App from \"./App\";\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById(\"root\")\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-react-router/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-react-router/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\nimport { StaticRouter } from 'react-router-dom';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst server = express();\n\nexport const renderApp = (req, res) => {\n  const context = {};\n  const markup = renderToString(\n    <StaticRouter location={req.url} context={context}>\n      <App />\n    </StaticRouter>\n  );\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${\n      assets.client.css\n        ? `<link rel=\"stylesheet\" href=\"${assets.client.css}\">`\n        : ''\n      }\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      <!-- razzle_static_js -->\n      <script src=\"${assets.client.js}\" defer crossorigin></script>\n  </body>\n</html>`;\n\n  return { html, context };\n};\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html, context } = renderApp(req, res);\n\n    if (context.url) {\n      // Somewhere a `<Redirect>` was rendered\n      return res.redirect(301, context.url);\n    }\n\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-react-router/src/static_export.js",
    "content": "import { renderApp } from './server';\n\nexport const render = (req, res) => {\n  const { html } = renderApp(req, res);\n\n  res.json({ html });\n};\n\nexport const routes = () => {\n  return ['/', '/about'];\n};\n"
  },
  {
    "path": "examples/with-react-server-components/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-react-server-components/README.md",
    "content": "# Razzle With React Server Components Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-react-server-components with-react-server-components\n\ncd with-react-server-components\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle With react server components. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/with-react-server-components/babel.config.js",
    "content": "module.exports = (api) => {\n  api.cache.using(() => process.env.NODE_ENV);\n\n  // const enableFastRefresh = !api.env('production') && !api.env('test');\n  const enableFastRefresh = false;\n\n  return {\n    presets: [\n      [\n        '@babel/preset-react',\n        {\n          runtime: 'automatic',\n        },\n      ],\n      [\n        '@babel/preset-env',\n        {\n          targets: {\n            node: 'current',\n          },\n        },\n      ],\n      '@babel/preset-typescript',\n    ],\n    plugins: [\n      '@babel/plugin-proposal-class-properties',\n      '@babel/plugin-proposal-export-default-from',\n      '@babel/plugin-proposal-export-namespace-from',\n      '@babel/plugin-proposal-nullish-coalescing-operator',\n      '@babel/plugin-proposal-optional-chaining',\n    ],\n  };\n};\n"
  },
  {
    "path": "examples/with-react-server-components/notes/.gitkeep",
    "content": ""
  },
  {
    "path": "examples/with-react-server-components/notes/1.md",
    "content": "This is an example note. It contains **Markdown**!"
  },
  {
    "path": "examples/with-react-server-components/notes/2.md",
    "content": "It's very easy to make some words **bold** and other words *italic* with\nMarkdown. You can even [link to React's website!](https://www.reactjs.org)."
  },
  {
    "path": "examples/with-react-server-components/notes/3.md",
    "content": "You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)\nnotes in this app! These note live on the server in the `notes` folder.\n![This app is powered by React](https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png)"
  },
  {
    "path": "examples/with-react-server-components/notes/4.md",
    "content": "It was an excellent note.54545"
  },
  {
    "path": "examples/with-react-server-components/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-react-server-components\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production babel-node --extensions \\\\\\\".es6,.js,.es,.jsx,.mjs,.ts,.tsx\\\\\\\" --conditions=react-server build/server.server\",\n    \"plugin\": \"babel --extensions \\\\\\\".es6,.js,.es,.jsx,.mjs,.ts,.tsx\\\\\\\" --watch plugin/**.ts --out-dir ./plugin\",\n    \"seed\": \"node ./scripts/seed.js\"\n  },\n  \"dependencies\": {\n    \"babel-preset-react-app\": \"10.0.0\",\n    \"better-sqlite3\": \"^7.1.2\",\n    \"date-fns\": \"^2.16.1\",\n    \"excerpts\": \"^0.0.3\",\n    \"express\": \"^4.17.1\",\n    \"marked\": \"^1.2.5\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-error-boundary\": \"^3.1.0\",\n    \"react-fetch\": \"0.0.0-experimental-3310209d0\",\n    \"react-fs\": \"0.0.0-experimental-3310209d0\",\n    \"react-server-dom-webpack\": \"0.0.0-experimental-3310209d0\",\n    \"resolve\": \"1.12.0\",\n    \"rimraf\": \"^3.0.2\",\n    \"sanitize-html\": \"^2.2.0\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"7.12.10\",\n    \"@babel/node\": \"7.12.10\",\n    \"@babel/core\": \"7.12.3\",\n    \"cross-env\": \"^7.0.3\",\n    \"webpack-stats-plugin\": \"^1.0.3\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"@babel/plugin-proposal-class-properties\": \"7.12.1\",\n    \"@babel/plugin-proposal-export-default-from\": \"7.12.1\",\n    \"@babel/plugin-proposal-export-namespace-from\": \"7.12.1\",\n    \"@babel/plugin-proposal-nullish-coalescing-operator\": \"7.12.1\",\n    \"@babel/plugin-proposal-optional-chaining\": \"7.12.7\",\n    \"@babel/plugin-transform-flow-strip-types\": \"7.12.10\",\n    \"@babel/plugin-transform-react-jsx-source\": \"7.12.1\",\n    \"@babel/preset-react\": \"7.12.10\",\n    \"@babel/preset-typescript\": \"7.12.7\",\n    \"@types/babel__core\": \"7.1.12\",\n    \"@types/compression\": \"^1.7.0\",\n    \"@types/concurrently\": \"5.2.1\",\n    \"@types/express\": \"^4.17.9\",\n    \"@types/jest\": \"26.0.19\",\n    \"@types/marked\": \"^1.2.1\",\n    \"@types/prettier\": \"2.1.6\",\n    \"@types/react\": \"17.0.0\",\n    \"@types/react-dom\": \"17.0.0\",\n    \"@types/rimraf\": \"3.0.0\",\n    \"@types/sanitize-html\": \"^1.27.0\",\n    \"@types/webpack\": \"4.41.25\",\n    \"@types/webpack-node-externals\": \"2.5.0\",\n    \"prettier\": \"2.2.1\",\n    \"rimraf\": \"3.0.2\",\n    \"typescript\": \"4.1.3\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n  \"razzle_meta\": {\n    \"forceWebpack\": true,\n    \"nohoist\": [\n      \"react\",\n      \"react-dom\",\n      \"react-fetch\",\n      \"react-fs\",\n      \"react-server-dom-webpack\",\n      \"webpack\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackLoader.js",
    "content": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = _default;\n\n// eslint-disable-next-line\nfunction _default(source) {\n  let newSrc = \"const MODULE_REFERENCE = Symbol.for('react.module.reference');\\n\"; // TODO - extract names (export names) using acorn, check ReactFlightWebpackNodeLoader\n\n  const names = ['default'];\n\n  for (let i = 0; i < names.length; i++) {\n    const name = names[i];\n\n    if (name === 'default') {\n      newSrc += 'export default ';\n    } else {\n      newSrc += 'export const ' + name + ' = ';\n    }\n\n    newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';\n    newSrc += `'file://${this.resourcePath}'`;\n    newSrc += ', name: ';\n    newSrc += JSON.stringify(name);\n    newSrc += '};\\n';\n  }\n\n  console.log({\n    newSrc\n  });\n  return newSrc;\n}"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackLoader.ts",
    "content": "// eslint-disable-next-line\nexport default function (source) {\n  let newSrc =\n    \"const MODULE_REFERENCE = Symbol.for('react.module.reference');\\n\";\n\n  // TODO - extract names (export names) using acorn, check ReactFlightWebpackNodeLoader\n  const names = ['default'];\n\n  for (let i = 0; i < names.length; i++) {\n    const name = names[i];\n    if (name === 'default') {\n      newSrc += 'export default ';\n    } else {\n      newSrc += 'export const ' + name + ' = ';\n    }\n    newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';\n    newSrc += `'file://${this.resourcePath}'`;\n    newSrc += ', name: ';\n    newSrc += JSON.stringify(name);\n    newSrc += '};\\n';\n  }\n\n  console.log({\n    newSrc,\n  });\n\n  return newSrc;\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackNodeLoader.js",
    "content": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.resolve = resolve;\nexports.getSource = getSource;\nexports.transformSource = transformSource;\n\nvar _acorn = _interopRequireDefault(require(\"acorn\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nlet warnedAboutConditionsFlag = false;\nlet stashedGetSource = null;\nlet stashedResolve = null;\n\nasync function resolve(specifier, context, defaultResolve) {\n  // We stash this in case we end up needing to resolve export * statements later.\n  stashedResolve = defaultResolve;\n\n  if (!context.conditions.includes('react-server')) {\n    context = { ...context,\n      conditions: [...context.conditions, 'react-server']\n    };\n\n    if (!warnedAboutConditionsFlag) {\n      warnedAboutConditionsFlag = true; // eslint-disable-next-line react-internal/no-production-logging\n\n      console.warn('You did not run Node.js with the `--conditions react-server` flag. ' + 'Any \"react-server\" override will only work with ESM imports.');\n    }\n  }\n\n  const resolved = await defaultResolve(specifier, context, defaultResolve);\n\n  if (resolved.url.endsWith('.server.js')) {\n    const parentURL = context.parentURL;\n\n    if (parentURL && !parentURL.endsWith('.server.js')) {\n      let reason;\n\n      if (specifier.endsWith('.server.js')) {\n        reason = `\"${specifier}\"`;\n      } else {\n        reason = `\"${specifier}\" (which expands to \"${resolved.url}\")`;\n      }\n\n      throw new Error(`Cannot import ${reason} from \"${parentURL}\". ` + 'By react-server convention, .server.js files can only be imported from other .server.js files. ' + 'That way nobody accidentally sends these to the client by indirectly importing it.');\n    }\n  }\n\n  return resolved;\n}\n\nasync function getSource(url, context, defaultGetSource) {\n  // We stash this in case we end up needing to resolve export * statements later.\n  stashedGetSource = defaultGetSource;\n  return defaultGetSource(url, context, defaultGetSource);\n}\n\nfunction addExportNames(names, node) {\n  switch (node.type) {\n    case 'Identifier':\n      names.push(node.name);\n      return;\n\n    case 'ObjectPattern':\n      for (let i = 0; i < node.properties.length; i++) addExportNames(names, node.properties[i]);\n\n      return;\n\n    case 'ArrayPattern':\n      for (let i = 0; i < node.elements.length; i++) {\n        const element = node.elements[i];\n        if (element) addExportNames(names, element);\n      }\n\n      return;\n\n    case 'Property':\n      addExportNames(names, node.value);\n      return;\n\n    case 'AssignmentPattern':\n      addExportNames(names, node.left);\n      return;\n\n    case 'RestElement':\n      addExportNames(names, node.argument);\n      return;\n\n    case 'ParenthesizedExpression':\n      addExportNames(names, node.expression);\n      return;\n  }\n}\n\nfunction resolveClientImport(specifier, parentURL) {\n  // Resolve an import specifier as if it was loaded by the client. This doesn't use\n  // the overrides that this loader does but instead reverts to the default.\n  // This resolution algorithm will not necessarily have the same configuration\n  // as the actual client loader. It should mostly work and if it doesn't you can\n  // always convert to explicit exported names instead.\n  const conditions = ['node', 'import'];\n\n  if (stashedResolve === null) {\n    throw new Error('Expected resolve to have been called before transformSource');\n  }\n\n  return stashedResolve(specifier, {\n    conditions,\n    parentURL\n  }, stashedResolve);\n}\n\nasync function loadClientImport(url, defaultTransformSource) {\n  if (stashedGetSource === null) {\n    throw new Error('Expected getSource to have been called before transformSource');\n  } // TODO: Validate that this is another module by calling getFormat.\n\n\n  const {\n    source\n  } = await stashedGetSource(url, {\n    format: 'module'\n  }, stashedGetSource);\n  return defaultTransformSource(source, {\n    format: 'module',\n    url\n  }, defaultTransformSource);\n}\n\nasync function parseExportNamesInto(transformedSource, names, parentURL, defaultTransformSource) {\n  const {\n    body\n  } = _acorn.default.parse(transformedSource, {\n    ecmaVersion: '2019',\n    sourceType: 'module'\n  });\n\n  for (let i = 0; i < body.length; i++) {\n    const node = body[i];\n\n    switch (node.type) {\n      case 'ExportAllDeclaration':\n        if (node.exported) {\n          addExportNames(names, node.exported);\n          continue;\n        } else {\n          const {\n            url\n          } = await resolveClientImport(node.source.value, parentURL);\n          const {\n            source\n          } = await loadClientImport(url, defaultTransformSource);\n\n          if (typeof source !== 'string') {\n            throw new Error('Expected the transformed source to be a string.');\n          }\n\n          parseExportNamesInto(source, names, url, defaultTransformSource);\n          continue;\n        }\n\n      case 'ExportDefaultDeclaration':\n        names.push('default');\n        continue;\n\n      case 'ExportNamedDeclaration':\n        if (node.declaration) {\n          if (node.declaration.type === 'VariableDeclaration') {\n            const declarations = node.declaration.declarations;\n\n            for (let j = 0; j < declarations.length; j++) {\n              addExportNames(names, declarations[j].id);\n            }\n          } else {\n            addExportNames(names, node.declaration.id);\n          }\n        }\n\n        if (node.specificers) {\n          const specificers = node.specificers;\n\n          for (let j = 0; j < specificers.length; j++) {\n            addExportNames(names, specificers[j].exported);\n          }\n        }\n\n        continue;\n    }\n  }\n}\n\nasync function transformSource(source, context, defaultTransformSource) {\n  const transformed = await defaultTransformSource(source, context, defaultTransformSource);\n\n  if (context.format === 'module' && context.url.endsWith('.client.js')) {\n    const transformedSource = transformed.source;\n\n    if (typeof transformedSource !== 'string') {\n      throw new Error('Expected source to have been transformed to a string.');\n    }\n\n    const names = [];\n    await parseExportNamesInto(transformedSource, names, context.url, defaultTransformSource);\n    let newSrc = \"const MODULE_REFERENCE = Symbol.for('react.module.reference');\\n\";\n\n    for (let i = 0; i < names.length; i++) {\n      const name = names[i];\n\n      if (name === 'default') {\n        newSrc += 'export default ';\n      } else {\n        newSrc += 'export const ' + name + ' = ';\n      }\n\n      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';\n      newSrc += JSON.stringify(context.url);\n      newSrc += ', name: ';\n      newSrc += JSON.stringify(name);\n      newSrc += '};\\n';\n    }\n\n    return {\n      source: newSrc\n    };\n  }\n\n  return transformed;\n}"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackNodeLoader.ts",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport acorn from 'acorn';\n\ntype ResolveContext = {\n  conditions: Array<string>;\n  parentURL: string | void;\n};\n\ntype ResolveFunction = (\n  string,\n  ResolveContext,\n  ResolveFunction,\n) => { url: string } | Promise<{ url: string }>;\n\ntype GetSourceContext = {\n  format: string;\n};\n\ntype GetSourceFunction = (\n  string,\n  GetSourceContext,\n  GetSourceFunction,\n) => Promise<{ source: Source }>;\n\ntype TransformSourceContext = {\n  format: string;\n  url: string;\n};\n\ntype TransformSourceFunction = (\n  Source,\n  TransformSourceContext,\n  TransformSourceFunction,\n) => Promise<{ source: Source }>;\n\ntype Source = string | ArrayBuffer | Uint8Array;\n\nlet warnedAboutConditionsFlag = false;\n\nlet stashedGetSource: null | GetSourceFunction = null;\nlet stashedResolve: null | ResolveFunction = null;\n\nexport async function resolve(\n  specifier: string,\n  context: ResolveContext,\n  defaultResolve: ResolveFunction,\n): Promise<{ url: string }> {\n  // We stash this in case we end up needing to resolve export * statements later.\n  stashedResolve = defaultResolve;\n\n  if (!context.conditions.includes('react-server')) {\n    context = {\n      ...context,\n      conditions: [...context.conditions, 'react-server'],\n    };\n    if (!warnedAboutConditionsFlag) {\n      warnedAboutConditionsFlag = true;\n      // eslint-disable-next-line react-internal/no-production-logging\n      console.warn(\n        'You did not run Node.js with the `--conditions react-server` flag. ' +\n          'Any \"react-server\" override will only work with ESM imports.',\n      );\n    }\n  }\n  const resolved = await defaultResolve(specifier, context, defaultResolve);\n  if (resolved.url.endsWith('.server.js')) {\n    const parentURL = context.parentURL;\n    if (parentURL && !parentURL.endsWith('.server.js')) {\n      let reason;\n      if (specifier.endsWith('.server.js')) {\n        reason = `\"${specifier}\"`;\n      } else {\n        reason = `\"${specifier}\" (which expands to \"${resolved.url}\")`;\n      }\n      throw new Error(\n        `Cannot import ${reason} from \"${parentURL}\". ` +\n          'By react-server convention, .server.js files can only be imported from other .server.js files. ' +\n          'That way nobody accidentally sends these to the client by indirectly importing it.',\n      );\n    }\n  }\n  return resolved;\n}\n\nexport async function getSource(\n  url: string,\n  context: GetSourceContext,\n  defaultGetSource: GetSourceFunction,\n) {\n  // We stash this in case we end up needing to resolve export * statements later.\n  stashedGetSource = defaultGetSource;\n  return defaultGetSource(url, context, defaultGetSource);\n}\n\nfunction addExportNames(names, node) {\n  switch (node.type) {\n    case 'Identifier':\n      names.push(node.name);\n      return;\n    case 'ObjectPattern':\n      for (let i = 0; i < node.properties.length; i++)\n        addExportNames(names, node.properties[i]);\n      return;\n    case 'ArrayPattern':\n      for (let i = 0; i < node.elements.length; i++) {\n        const element = node.elements[i];\n        if (element) addExportNames(names, element);\n      }\n      return;\n    case 'Property':\n      addExportNames(names, node.value);\n      return;\n    case 'AssignmentPattern':\n      addExportNames(names, node.left);\n      return;\n    case 'RestElement':\n      addExportNames(names, node.argument);\n      return;\n    case 'ParenthesizedExpression':\n      addExportNames(names, node.expression);\n      return;\n  }\n}\n\nfunction resolveClientImport(\n  specifier: string,\n  parentURL: string,\n): { url: string } | Promise<{ url: string }> {\n  // Resolve an import specifier as if it was loaded by the client. This doesn't use\n  // the overrides that this loader does but instead reverts to the default.\n  // This resolution algorithm will not necessarily have the same configuration\n  // as the actual client loader. It should mostly work and if it doesn't you can\n  // always convert to explicit exported names instead.\n  const conditions = ['node', 'import'];\n  if (stashedResolve === null) {\n    throw new Error(\n      'Expected resolve to have been called before transformSource',\n    );\n  }\n  return stashedResolve(specifier, { conditions, parentURL }, stashedResolve);\n}\n\nasync function loadClientImport(\n  url: string,\n  defaultTransformSource: TransformSourceFunction,\n): Promise<{ source: Source }> {\n  if (stashedGetSource === null) {\n    throw new Error(\n      'Expected getSource to have been called before transformSource',\n    );\n  }\n  // TODO: Validate that this is another module by calling getFormat.\n  const { source } = await stashedGetSource(\n    url,\n    { format: 'module' },\n    stashedGetSource,\n  );\n  return defaultTransformSource(\n    source,\n    { format: 'module', url },\n    defaultTransformSource,\n  );\n}\n\nasync function parseExportNamesInto(\n  transformedSource: string,\n  names: Array<string>,\n  parentURL: string,\n  defaultTransformSource,\n): Promise<void> {\n  const { body } = acorn.parse(transformedSource, {\n    ecmaVersion: '2019',\n    sourceType: 'module',\n  });\n  for (let i = 0; i < body.length; i++) {\n    const node = body[i];\n    switch (node.type) {\n      case 'ExportAllDeclaration':\n        if (node.exported) {\n          addExportNames(names, node.exported);\n          continue;\n        } else {\n          const { url } = await resolveClientImport(\n            node.source.value,\n            parentURL,\n          );\n          const { source } = await loadClientImport(\n            url,\n            defaultTransformSource,\n          );\n          if (typeof source !== 'string') {\n            throw new Error('Expected the transformed source to be a string.');\n          }\n          parseExportNamesInto(source, names, url, defaultTransformSource);\n          continue;\n        }\n      case 'ExportDefaultDeclaration':\n        names.push('default');\n        continue;\n      case 'ExportNamedDeclaration':\n        if (node.declaration) {\n          if (node.declaration.type === 'VariableDeclaration') {\n            const declarations = node.declaration.declarations;\n            for (let j = 0; j < declarations.length; j++) {\n              addExportNames(names, declarations[j].id);\n            }\n          } else {\n            addExportNames(names, node.declaration.id);\n          }\n        }\n        if (node.specificers) {\n          const specificers = node.specificers;\n          for (let j = 0; j < specificers.length; j++) {\n            addExportNames(names, specificers[j].exported);\n          }\n        }\n        continue;\n    }\n  }\n}\n\nexport async function transformSource(\n  source: Source,\n  context: TransformSourceContext,\n  defaultTransformSource: TransformSourceFunction,\n): Promise<{ source: Source }> {\n  const transformed = await defaultTransformSource(\n    source,\n    context,\n    defaultTransformSource,\n  );\n  if (context.format === 'module' && context.url.endsWith('.client.js')) {\n    const transformedSource = transformed.source;\n    if (typeof transformedSource !== 'string') {\n      throw new Error('Expected source to have been transformed to a string.');\n    }\n\n    const names = [];\n    await parseExportNamesInto(\n      transformedSource,\n      names,\n      context.url,\n      defaultTransformSource,\n    );\n\n    let newSrc =\n      \"const MODULE_REFERENCE = Symbol.for('react.module.reference');\\n\";\n    for (let i = 0; i < names.length; i++) {\n      const name = names[i];\n      if (name === 'default') {\n        newSrc += 'export default ';\n      } else {\n        newSrc += 'export const ' + name + ' = ';\n      }\n      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';\n      newSrc += JSON.stringify(context.url);\n      newSrc += ', name: ';\n      newSrc += JSON.stringify(name);\n      newSrc += '};\\n';\n    }\n\n    return { source: newSrc };\n  }\n  return transformed;\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackNodeRegister.js",
    "content": "\"use strict\";\n\n/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\nconst url = require('url'); // $FlowFixMe\n\n\nconst Module = require('module');\n\nmodule.exports = function register() {\n  const MODULE_REFERENCE = Symbol.for('react.module.reference');\n  const proxyHandlers = {\n    get: function (target, name, receiver) {\n      switch (name) {\n        // These names are read by the Flight runtime if you end up using the exports object.\n        case '$$typeof':\n          // These names are a little too common. We should probably have a way to\n          // have the Flight runtime extract the inner target instead.\n          return target.$$typeof;\n\n        case 'filepath':\n          return target.filepath;\n\n        case 'name':\n          return target.name;\n        // We need to special case this because createElement reads it if we pass this\n        // reference.\n\n        case 'defaultProps':\n          return undefined;\n\n        case '__esModule':\n          // Something is conditionally checking which export to use. We'll pretend to be\n          // an ESM compat module but then we'll check again on the client.\n          target.default = {\n            $$typeof: MODULE_REFERENCE,\n            filepath: target.filepath,\n            // This a placeholder value that tells the client to conditionally use the\n            // whole object or just the default export.\n            name: ''\n          };\n          return true;\n      }\n\n      let cachedReference = target[name];\n\n      if (!cachedReference) {\n        cachedReference = target[name] = {\n          $$typeof: MODULE_REFERENCE,\n          filepath: target.filepath,\n          name: name\n        };\n      }\n\n      return cachedReference;\n    },\n    set: function () {\n      throw new Error('Cannot assign to a client module from a server module.');\n    }\n  };\n\n  require.extensions['.client.js'] = function (module, path) {\n    const moduleId = url.pathToFileURL(path).href;\n    const moduleReference = {\n      $$typeof: MODULE_REFERENCE,\n      filepath: moduleId,\n      name: '*' // Represents the whole object instead of a particular import.\n\n    };\n    module.exports = new Proxy(moduleReference, proxyHandlers);\n  };\n\n  const originalResolveFilename = Module._resolveFilename;\n\n  Module._resolveFilename = function (request, parent, isMain, options) {\n    const resolved = originalResolveFilename.apply(this, arguments);\n\n    if (resolved.endsWith('.server.js')) {\n      if (parent && parent.filename && !parent.filename.endsWith('.server.js')) {\n        let reason;\n\n        if (request.endsWith('.server.js')) {\n          reason = `\"${request}\"`;\n        } else {\n          reason = `\"${request}\" (which expands to \"${resolved}\")`;\n        }\n\n        throw new Error(`Cannot import ${reason} from \"${parent.filename}\". ` + 'By react-server convention, .server.js files can only be imported from other .server.js files. ' + 'That way nobody accidentally sends these to the client by indirectly importing it.');\n      }\n    }\n\n    return resolved;\n  };\n};"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackNodeRegister.ts",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nconst url = require('url');\n\n// $FlowFixMe\nconst Module = require('module');\n\nmodule.exports = function register() {\n  const MODULE_REFERENCE = Symbol.for('react.module.reference');\n  const proxyHandlers = {\n    get: function (target, name, receiver) {\n      switch (name) {\n        // These names are read by the Flight runtime if you end up using the exports object.\n        case '$$typeof':\n          // These names are a little too common. We should probably have a way to\n          // have the Flight runtime extract the inner target instead.\n          return target.$$typeof;\n        case 'filepath':\n          return target.filepath;\n        case 'name':\n          return target.name;\n        // We need to special case this because createElement reads it if we pass this\n        // reference.\n        case 'defaultProps':\n          return undefined;\n        case '__esModule':\n          // Something is conditionally checking which export to use. We'll pretend to be\n          // an ESM compat module but then we'll check again on the client.\n          target.default = {\n            $$typeof: MODULE_REFERENCE,\n            filepath: target.filepath,\n            // This a placeholder value that tells the client to conditionally use the\n            // whole object or just the default export.\n            name: '',\n          };\n          return true;\n      }\n      let cachedReference = target[name];\n      if (!cachedReference) {\n        cachedReference = target[name] = {\n          $$typeof: MODULE_REFERENCE,\n          filepath: target.filepath,\n          name: name,\n        };\n      }\n      return cachedReference;\n    },\n    set: function () {\n      throw new Error('Cannot assign to a client module from a server module.');\n    },\n  };\n\n  require.extensions['.client.js'] = function (module, path) {\n    const moduleId = url.pathToFileURL(path).href;\n    const moduleReference: { [string]: any } = {\n      $$typeof: MODULE_REFERENCE,\n      filepath: moduleId,\n      name: '*', // Represents the whole object instead of a particular import.\n    };\n    module.exports = new Proxy(moduleReference, proxyHandlers);\n  };\n\n  const originalResolveFilename = Module._resolveFilename;\n\n  Module._resolveFilename = function (request, parent, isMain, options) {\n    const resolved = originalResolveFilename.apply(this, arguments);\n    if (resolved.endsWith('.server.js')) {\n      if (\n        parent &&\n        parent.filename &&\n        !parent.filename.endsWith('.server.js')\n      ) {\n        let reason;\n        if (request.endsWith('.server.js')) {\n          reason = `\"${request}\"`;\n        } else {\n          reason = `\"${request}\" (which expands to \"${resolved}\")`;\n        }\n        throw new Error(\n          `Cannot import ${reason} from \"${parent.filename}\". ` +\n            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +\n            'That way nobody accidentally sends these to the client by indirectly importing it.',\n        );\n      }\n    }\n    return resolved;\n  };\n};\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackPlugin.js",
    "content": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _path = require(\"path\");\n\nvar _url = require(\"url\");\n\nvar _neoAsync = _interopRequireDefault(require(\"neo-async\"));\n\nvar _ModuleDependency = _interopRequireDefault(require(\"webpack/lib/dependencies/ModuleDependency\"));\n\nvar _NullDependency = _interopRequireDefault(require(\"webpack/lib/dependencies/NullDependency\"));\n\nvar _AsyncDependenciesBlock = _interopRequireDefault(require(\"webpack/lib/AsyncDependenciesBlock\"));\n\nvar _Template = _interopRequireDefault(require(\"webpack/lib/Template\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nclass ClientReferenceDependency extends _ModuleDependency.default {\n  constructor(request) {\n    super(request);\n  }\n\n  get type() {\n    return 'client-reference';\n  }\n\n} // This is the module that will be used to anchor all client references to.\n// I.e. it will have all the client files as async deps from this point on.\n// We use the Flight client implementation because you can't get to these\n// without the client runtime so it's the first time in the loading sequence\n// you might want them.\n// TODO - fix this;\n// const clientFileName = require.resolve('../');\n\n\nconst clientFileName = (0, _path.join)(__dirname, '../node_modules/react-server-dom-webpack/index.js');\nconst PLUGIN_NAME = 'React Server Plugin';\n\nclass ReactFlightWebpackPlugin {\n  constructor(options) {\n    _defineProperty(this, \"clientReferences\", void 0);\n\n    _defineProperty(this, \"chunkName\", void 0);\n\n    _defineProperty(this, \"manifestFilename\", void 0);\n\n    if (!options || typeof options.isServer !== 'boolean') {\n      throw new Error(PLUGIN_NAME + ': You must specify the isServer option as a boolean.');\n    }\n\n    if (options.isServer) {\n      throw new Error('TODO: Implement the server compiler.');\n    }\n\n    if (!options.clientReferences) {\n      this.clientReferences = [{\n        directory: '.',\n        recursive: true,\n        include: /\\.client\\.(js|ts|jsx|tsx)$/\n      }];\n    } else if (typeof options.clientReferences === 'string' || !Array.isArray(options.clientReferences)) {\n      this.clientReferences = options.clientReferences;\n    } else {\n      this.clientReferences = options.clientReferences;\n    }\n\n    if (typeof options.chunkName === 'string') {\n      this.chunkName = options.chunkName;\n\n      if (!/\\[(index|request)\\]/.test(this.chunkName)) {\n        this.chunkName += '[index]';\n      }\n    } else {\n      this.chunkName = 'client[index]';\n    }\n\n    this.manifestFilename = options.manifestFilename || 'react-client-manifest.json';\n  }\n\n  apply(compiler) {\n    let resolvedClientReferences;\n\n    const run = (params, callback) => {\n      // First we need to find all client files on the file system. We do this early so\n      // that we have them synchronously available later when we need them. This might\n      // not be needed anymore since we no longer need to compile the module itself in\n      // a special way. So it's probably better to do this lazily and in parallel with\n      // other compilation.\n      const contextResolver = compiler.resolverFactory.get('context', {});\n      this.resolveAllClientFiles(compiler.context, contextResolver, compiler.inputFileSystem, compiler.createContextModuleFactory(), (err, resolvedClientRefs) => {\n        if (err) {\n          callback(err);\n          return;\n        }\n\n        resolvedClientReferences = resolvedClientRefs;\n        callback();\n      });\n    };\n\n    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);\n    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);\n    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, {\n      normalModuleFactory\n    }) => {\n      compilation.dependencyFactories.set(ClientReferenceDependency, normalModuleFactory);\n      compilation.dependencyTemplates.set(ClientReferenceDependency, new _NullDependency.default.Template());\n      compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {\n        // We need to add all client references as dependency of something in the graph so\n        // Webpack knows which entries need to know about the relevant chunks and include the\n        // map in their runtime. The things that actually resolves the dependency is the Flight\n        // client runtime. So we add them as a dependency of the Flight client runtime.\n        // Anything that imports the runtime will be made aware of these chunks.\n        // TODO: Warn if we don't find this file anywhere in the compilation.\n        if (module.resource !== clientFileName) {\n          return;\n        }\n\n        if (resolvedClientReferences) {\n          for (let i = 0; i < resolvedClientReferences.length; i++) {\n            const dep = resolvedClientReferences[i];\n            const chunkName = this.chunkName.replace(/\\[index\\]/g, '' + i).replace(/\\[request\\]/g, _Template.default.toPath(dep.userRequest));\n            const block = new _AsyncDependenciesBlock.default({\n              name: chunkName\n            }, module, null, dep.require);\n            block.addDependency(dep);\n            module.addBlock(block);\n          }\n        }\n      });\n    });\n    compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {\n      const json = {};\n      compilation.chunkGroups.forEach(chunkGroup => {\n        const chunkIds = chunkGroup.chunks.map(c => c.id);\n\n        function recordModule(id, mod) {\n          // TODO: Hook into deps instead of the target module.\n          // That way we know by the type of dep whether to include.\n          // It also resolves conflicts when the same module is in multiple chunks.\n          if (!/\\.client\\.(js|jsx|ts|tsx)$/.test(mod.resource)) {\n            return;\n          }\n\n          const moduleExports = {};\n          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {\n            moduleExports[name] = {\n              id: id,\n              chunks: chunkIds,\n              name: name\n            };\n          });\n          const href = (0, _url.pathToFileURL)(mod.resource).href;\n\n          if (href !== undefined) {\n            json[href] = moduleExports;\n          }\n        }\n\n        chunkGroup.chunks.forEach(chunk => {\n          chunk.getModules().forEach(mod => {\n            recordModule(mod.id, mod); // If this is a concatenation, register each child to the parent ID.\n\n            if (mod.modules) {\n              mod.modules.forEach(concatenatedMod => {\n                recordModule(mod.id, concatenatedMod);\n              });\n            }\n          });\n        });\n      });\n      const output = JSON.stringify(json, null, 2);\n      compilation.assets[this.manifestFilename] = {\n        source() {\n          return output;\n        },\n\n        size() {\n          return output.length;\n        }\n\n      };\n    });\n  } // This attempts to replicate the dynamic file path resolution used for other wildcard\n  // resolution in Webpack is using.\n\n\n  resolveAllClientFiles(context, contextResolver, fs, contextModuleFactory, callback) {\n    _neoAsync.default.map(this.clientReferences, (clientReferencePath, cb) => {\n      if (typeof clientReferencePath === 'string') {\n        cb(null, [new ClientReferenceDependency(clientReferencePath)]);\n        return;\n      }\n\n      const clientReferenceSearch = clientReferencePath;\n      contextResolver.resolve({}, context, clientReferencePath.directory, {}, (err, resolvedDirectory) => {\n        if (err) return cb(err);\n        const options = {\n          resource: resolvedDirectory,\n          resourceQuery: '',\n          recursive: clientReferenceSearch.recursive === undefined ? true : clientReferenceSearch.recursive,\n          regExp: clientReferenceSearch.include,\n          include: undefined,\n          exclude: clientReferenceSearch.exclude\n        };\n        contextModuleFactory.resolveDependencies(fs, options, (err2, deps) => {\n          if (err2) return cb(err2);\n          const clientRefDeps = deps.map(dep => {\n            const request = (0, _path.join)(resolvedDirectory, dep.request);\n            const clientRefDep = new ClientReferenceDependency(request);\n            clientRefDep.userRequest = dep.userRequest;\n            return clientRefDep;\n          });\n          cb(null, clientRefDeps);\n        });\n      });\n    }, (err, result) => {\n      if (err) return callback(err);\n      const flat = [];\n\n      for (let i = 0; i < result.length; i++) {\n        flat.push.apply(flat, result[i]);\n      }\n\n      callback(null, flat);\n    });\n  }\n\n}\n\nexports.default = ReactFlightWebpackPlugin;"
  },
  {
    "path": "examples/with-react-server-components/plugin/ReactFlightWebpackPlugin.ts",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n * @flow\n */\n\nimport { join } from 'path';\nimport { pathToFileURL } from 'url';\n\nimport asyncLib from 'neo-async';\n\nimport ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';\nimport NullDependency from 'webpack/lib/dependencies/NullDependency';\nimport AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';\nimport Template from 'webpack/lib/Template';\n\nclass ClientReferenceDependency extends ModuleDependency {\n  constructor(request) {\n    super(request);\n  }\n\n  get type() {\n    return 'client-reference';\n  }\n}\n\n// This is the module that will be used to anchor all client references to.\n// I.e. it will have all the client files as async deps from this point on.\n// We use the Flight client implementation because you can't get to these\n// without the client runtime so it's the first time in the loading sequence\n// you might want them.\n// TODO - fix this;\n// const clientFileName = require.resolve('../');\nconst clientFileName = join(\n  __dirname,\n  '../node_modules/react-server-dom-webpack/index.js',\n);\n\ntype ClientReferenceSearchPath = {\n  directory: string;\n  recursive?: boolean;\n  include: RegExp;\n  exclude?: RegExp;\n};\n\ntype ClientReferencePath = string | ClientReferenceSearchPath;\n\ntype Options = {\n  isServer: boolean;\n  clientReferences?: ClientReferencePath | ReadonlyArray<ClientReferencePath>;\n  chunkName?: string;\n  manifestFilename?: string;\n};\n\nconst PLUGIN_NAME = 'React Server Plugin';\n\nexport default class ReactFlightWebpackPlugin {\n  clientReferences: ReadonlyArray<ClientReferencePath>;\n  chunkName: string;\n  manifestFilename: string;\n\n  constructor(options: Options) {\n    if (!options || typeof options.isServer !== 'boolean') {\n      throw new Error(\n        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',\n      );\n    }\n    if (options.isServer) {\n      throw new Error('TODO: Implement the server compiler.');\n    }\n    if (!options.clientReferences) {\n      this.clientReferences = [\n        {\n          directory: '.',\n          recursive: true,\n          include: /\\.client\\.(js|ts|jsx|tsx)$/,\n        },\n      ];\n    } else if (\n      typeof options.clientReferences === 'string' ||\n      !Array.isArray(options.clientReferences)\n    ) {\n      this.clientReferences = options.clientReferences;\n    } else {\n      this.clientReferences = options.clientReferences;\n    }\n    if (typeof options.chunkName === 'string') {\n      this.chunkName = options.chunkName;\n      if (!/\\[(index|request)\\]/.test(this.chunkName)) {\n        this.chunkName += '[index]';\n      }\n    } else {\n      this.chunkName = 'client[index]';\n    }\n    this.manifestFilename =\n      options.manifestFilename || 'react-client-manifest.json';\n  }\n\n  apply(compiler: any) {\n    let resolvedClientReferences;\n    const run = (params, callback) => {\n      // First we need to find all client files on the file system. We do this early so\n      // that we have them synchronously available later when we need them. This might\n      // not be needed anymore since we no longer need to compile the module itself in\n      // a special way. So it's probably better to do this lazily and in parallel with\n      // other compilation.\n      const contextResolver = compiler.resolverFactory.get('context', {});\n      this.resolveAllClientFiles(\n        compiler.context,\n        contextResolver,\n        compiler.inputFileSystem,\n        compiler.createContextModuleFactory(),\n        (err, resolvedClientRefs) => {\n          if (err) {\n            callback(err);\n            return;\n          }\n          resolvedClientReferences = resolvedClientRefs;\n          callback();\n        },\n      );\n    };\n\n    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);\n    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);\n    compiler.hooks.compilation.tap(\n      PLUGIN_NAME,\n      (compilation, { normalModuleFactory }) => {\n        compilation.dependencyFactories.set(\n          ClientReferenceDependency,\n          normalModuleFactory,\n        );\n        compilation.dependencyTemplates.set(\n          ClientReferenceDependency,\n          new NullDependency.Template(),\n        );\n\n        compilation.hooks.buildModule.tap(PLUGIN_NAME, (module) => {\n          // We need to add all client references as dependency of something in the graph so\n          // Webpack knows which entries need to know about the relevant chunks and include the\n          // map in their runtime. The things that actually resolves the dependency is the Flight\n          // client runtime. So we add them as a dependency of the Flight client runtime.\n          // Anything that imports the runtime will be made aware of these chunks.\n          // TODO: Warn if we don't find this file anywhere in the compilation.\n          if (module.resource !== clientFileName) {\n            return;\n          }\n          if (resolvedClientReferences) {\n            for (let i = 0; i < resolvedClientReferences.length; i++) {\n              const dep = resolvedClientReferences[i];\n              const chunkName = this.chunkName\n                .replace(/\\[index\\]/g, '' + i)\n                .replace(/\\[request\\]/g, Template.toPath(dep.userRequest));\n\n              const block = new AsyncDependenciesBlock(\n                {\n                  name: chunkName,\n                },\n                module,\n                null,\n                dep.require,\n              );\n              block.addDependency(dep);\n              module.addBlock(block);\n            }\n          }\n        });\n      },\n    );\n\n    compiler.hooks.emit.tap(PLUGIN_NAME, (compilation) => {\n      const json = {};\n      compilation.chunkGroups.forEach((chunkGroup) => {\n        const chunkIds = chunkGroup.chunks.map((c) => c.id);\n\n        function recordModule(id, mod) {\n          // TODO: Hook into deps instead of the target module.\n          // That way we know by the type of dep whether to include.\n          // It also resolves conflicts when the same module is in multiple chunks.\n          if (!/\\.client\\.(js|jsx|ts|tsx)$/.test(mod.resource)) {\n            return;\n          }\n\n          const moduleExports = {};\n          ['', '*'].concat(mod.buildMeta.providedExports).forEach((name) => {\n            moduleExports[name] = {\n              id: id,\n              chunks: chunkIds,\n              name: name,\n            };\n          });\n          const href = pathToFileURL(mod.resource).href;\n          if (href !== undefined) {\n            json[href] = moduleExports;\n          }\n        }\n\n        chunkGroup.chunks.forEach((chunk) => {\n          chunk.getModules().forEach((mod) => {\n            recordModule(mod.id, mod);\n            // If this is a concatenation, register each child to the parent ID.\n            if (mod.modules) {\n              mod.modules.forEach((concatenatedMod) => {\n                recordModule(mod.id, concatenatedMod);\n              });\n            }\n          });\n        });\n      });\n      const output = JSON.stringify(json, null, 2);\n      compilation.assets[this.manifestFilename] = {\n        source() {\n          return output;\n        },\n        size() {\n          return output.length;\n        },\n      };\n    });\n  }\n\n  // This attempts to replicate the dynamic file path resolution used for other wildcard\n  // resolution in Webpack is using.\n  resolveAllClientFiles(\n    context: string,\n    contextResolver: any,\n    fs: any,\n    contextModuleFactory: any,\n    callback: (\n      err: null | Error,\n      result?: ReadonlyArray<ClientReferenceDependency>,\n    ) => void,\n  ) {\n    asyncLib.map(\n      this.clientReferences,\n      (\n        clientReferencePath: string | ClientReferenceSearchPath,\n        cb: (\n          err: null | Error,\n          result?: ReadonlyArray<ClientReferenceDependency>,\n        ) => void,\n      ): void => {\n        if (typeof clientReferencePath === 'string') {\n          cb(null, [new ClientReferenceDependency(clientReferencePath)]);\n          return;\n        }\n        const clientReferenceSearch: ClientReferenceSearchPath = clientReferencePath;\n        contextResolver.resolve(\n          {},\n          context,\n          clientReferencePath.directory,\n          {},\n          (err, resolvedDirectory) => {\n            if (err) return cb(err);\n            const options = {\n              resource: resolvedDirectory,\n              resourceQuery: '',\n              recursive:\n                clientReferenceSearch.recursive === undefined\n                  ? true\n                  : clientReferenceSearch.recursive,\n              regExp: clientReferenceSearch.include,\n              include: undefined,\n              exclude: clientReferenceSearch.exclude,\n            };\n\n            contextModuleFactory.resolveDependencies(\n              fs,\n              options,\n              (err2: null | Error, deps: Array<ModuleDependency>) => {\n                if (err2) return cb(err2);\n\n                const clientRefDeps = deps.map((dep) => {\n                  const request = join(resolvedDirectory, dep.request);\n                  const clientRefDep = new ClientReferenceDependency(request);\n                  clientRefDep.userRequest = dep.userRequest;\n                  return clientRefDep;\n                });\n                cb(null, clientRefDeps);\n              },\n            );\n          },\n        );\n      },\n      (\n        err: null | Error,\n        result: ReadonlyArray<ReadonlyArray<ClientReferenceDependency>>,\n      ): void => {\n        if (err) return callback(err);\n        const flat = [];\n        for (let i = 0; i < result.length; i++) {\n          flat.push.apply(flat, result[i]);\n        }\n        callback(null, flat);\n      },\n    );\n  }\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/__tests__/ReactFlightWebpackPlugin.spec.ts",
    "content": "const path = require('path');\nconst os = require('os');\n\nfunction getDependencies(mode) {\n  jest.resetModuleRegistry();\n  let webpack;\n  if (mode === 'wp5') {\n    webpack = jest.requireActual('webpack5');\n    // The code we are testing (ReactFlightWebpackPlugin) directly imports `webpack`. It cannot depend upon `webpack5` as\n    // consumers of `ReactFlightWebpackPlugin` are more likely to have installed wp5 just as `webpack`. So we fix this by mocking the\n    // `webpack` module, and return the webpack 5 instance that we required.\n    jest.mock('webpack', () => {\n      return webpack;\n    });\n    // Sanity-check. If the webpack in package.json changes, this should catch that\n    expect(webpack.version).toMatch(/5\\.[0-9]*\\.[0-9]*/);\n  } else {\n    webpack = jest.requireActual('webpack');\n    // Sanity-check. If the webpack in package.json changes, this should catch that\n    expect(webpack.version).toMatch(/4\\.[0-9]*\\.[0-9]*/);\n  }\n\n  const FlightPlugin = require('../ReactFlightWebpackPlugin').default;\n\n  console.log({\n    FlightPlugin,\n  });\n  return {\n    FlightPlugin,\n    webpack,\n  };\n}\n\n// const fixturePath = './packages/react-server-dom-webpack/src/__tests__/fixture';\nconst fixturePath = './plugin/__tests__/fixture';\n\ndescribe('ReactFlightWebpackPlugin', () => {\n  // Running webpack can be slow, so we increase Jest's default timeout. These values are\n  // \"magic\", and not backed by any kind of logic or reasoning.\n  jest.setTimeout(5000 * 5);\n\n  test('produces manifest - webpack v4', (done) => {\n    const { webpack, FlightPlugin } = getDependencies('wp4');\n\n    const entry = path.resolve(path.join(__dirname, 'fixture', 'entry.js'));\n\n    const plugin = new FlightPlugin({ isServer: false });\n\n    const output = webpack({\n      entry: {\n        main: entry,\n        client: path.resolve(path.join(__dirname, 'fixture', 'Form.client.js')),\n      },\n      plugins: [plugin],\n      output: {\n        path: path.resolve(path.join(os.tmpdir(), 'output')),\n      },\n      mode: 'development',\n    });\n\n    output.run((err, stats) => {\n      expect(err).toBeNull();\n      // in webpack 4, we can read the assets of the compilation object. This doesn't work in webpack 5\n      // as webpack 5 removes the source from the assets object, to prevent memory leaks.\n      const fileName = plugin.manifestFilename;\n      const pluginOutput = stats.compilation.assets[fileName];\n      const producedManifest = pluginOutput.source();\n      assert(producedManifest);\n\n      done();\n    });\n  });\n\n  test.only('produces manifest - webpack v4 using real code', (done) => {\n    const { webpack, FlightPlugin } = getDependencies('wp4');\n\n    const entry = path.resolve(\n      path.join(__dirname, '../../src/', 'index.client.tsx'),\n    );\n\n    console.log('entry: ', entry);\n\n    const plugin = new FlightPlugin({ isServer: false });\n\n    const output = webpack({\n      entry: [entry],\n      plugins: [plugin],\n      output: {\n        path: path.resolve(path.join(os.tmpdir(), 'output')),\n      },\n      resolve: {\n        extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'],\n      },\n      mode: 'development',\n      module: {\n        rules: [\n          {\n            test: /\\.(js|jsx|ts|tsx)?$/,\n            // use: 'babel-loader',\n            use: ['babel-loader?cacheDirectory'],\n            exclude: /node_modules/,\n          },\n        ],\n      },\n    });\n\n    output.run((err, stats) => {\n      expect(err).toBeNull();\n      // in webpack 4, we can read the assets of the compilation object. This doesn't work in webpack 5\n      // as webpack 5 removes the source from the assets object, to prevent memory leaks.\n      const fileName = plugin.manifestFilename;\n      const pluginOutput = stats.compilation.assets[fileName];\n      const producedManifest = pluginOutput.source();\n\n      const key =\n        'file://' +\n        path.resolve(path.join(__dirname, '../../src', 'index.client.tsx'));\n      const manifestObj = JSON.parse(producedManifest);\n\n      console.log({\n        key,\n        manifestObj,\n        m: manifestObj[key],\n      });\n      // file:///Users/sibelius/Dev/entria/feedback/rsc/server-components-boilerplate/src/index.client.tsx\n      //   file:///Users/sibelius/Dev/entria/feedback/rsc/server-components-boilerplate/plugin/src/index.client.ts\n\n      const clientPath = './src';\n\n      expect(manifestObj[key]).toStrictEqual(\n        expect.objectContaining({\n          '': {\n            chunks: ['main'],\n            id: `${clientPath}/index.client.tsx`,\n            name: '',\n          },\n          '*': {\n            chunks: ['main'],\n            id: `${clientPath}/index.client.tsx`,\n            name: '*',\n          },\n        }),\n      );\n\n      done();\n    });\n  });\n\n  test.skip('produces manifest - webpack v5', (done) => {\n    const entry = path.resolve(path.join(__dirname, 'fixture', 'entry.js'));\n    const { webpack, FlightPlugin } = getDependencies('wp5');\n\n    const plugin = new FlightPlugin({ isServer: false });\n    const fileName = plugin.manifestFilename;\n\n    const output = webpack({\n      entry: {\n        main: entry,\n        client: path.resolve(path.join(__dirname, 'fixture', 'Form.client.js')),\n      },\n      plugins: [plugin],\n      cache: undefined,\n      output: {\n        // Output\n        path: path.resolve(path.join(os.tmpdir(), 'output+2')),\n        // Make webpack always want to emit files, regardless if they exist or not\n        // This aids in development of the tests, as webpack 5 will not emit fi the file is already existing.\n        compareBeforeEmit: false,\n      },\n      mode: 'development',\n    });\n\n    const originalFileSystem = output.outputFileSystem;\n\n    output.outputFileSystem = {\n      ...originalFileSystem,\n      writeFile: jest.fn((dest, contents, cb) => {\n        // Call the callback, but don't actually write anything.\n        cb(null);\n      }),\n    };\n\n    output.run((err, stats) => {\n      expect(err).toBeNull();\n\n      expect(output.outputFileSystem.writeFile).toHaveBeenCalledWith(\n        expect.stringContaining(fileName),\n        expect.anything(),\n        expect.anything(),\n      );\n      const calls = output.outputFileSystem.writeFile.mock.calls;\n      // Get the idx that was called with the fileName,\n      const idx = calls.findIndex((val) => {\n        return val[0].includes(fileName);\n      });\n\n      const contents = output.outputFileSystem.writeFile.mock.calls[\n        idx\n      ][1].toString();\n\n      // Check that the contents match with what we expect\n      assert(contents);\n      done();\n    });\n  });\n});\n\nfunction assert(manifestContents) {\n  const key =\n    'file://' + path.resolve(path.join(__dirname, 'fixture', 'Form.client.js'));\n  const manifestObj = JSON.parse(manifestContents);\n\n  expect(manifestObj[key]).toStrictEqual(\n    expect.objectContaining({\n      '': {\n        chunks: ['client'],\n        id: `${fixturePath}/Form.client.js`,\n        name: '',\n      },\n      '*': {\n        chunks: ['client'],\n        id: `${fixturePath}/Form.client.js`,\n        name: '*',\n      },\n      Form: {\n        chunks: ['client'],\n        id: `${fixturePath}/Form.client.js`,\n        name: 'Form',\n      },\n    }),\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/__tests__/fixture/Form.client.js",
    "content": "export function Form() {\n  console.log('Form Rendered!');\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/__tests__/fixture/FormServer.server.js",
    "content": "export default function Foo() {\n  console.log('Form!');\n}\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/__tests__/fixture/entry.js",
    "content": "const ClientComponent = require('./Form.client').Form;\nconst ServerComponent = require('./FormServer.server.js');\n\nconsole.log(ClientComponent, ServerComponent);\n"
  },
  {
    "path": "examples/with-react-server-components/plugin/__tests__/fixture/package.json",
    "content": "{\n\"name\": \"fixture\"\n}\n"
  },
  {
    "path": "examples/with-react-server-components/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n  <head>\n    <meta charset=\"utf-8\" />\n    <link rel=\"icon\" href=\"<%= process.env.PUBLIC_PATH %>favicon.ico\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n    <meta name=\"theme-color\" content=\"#000000\" />\n    <link rel=\"stylesheet\" href=\"<%= process.env.PUBLIC_PATH %>style.css\" />\n    <%= htmlWebpackPlugin.tags.headTags %>\n    <!--\n        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.\n        It will be replaced with the URL of the `public` folder during the build.\n        Only files inside the `public` folder can be referenced from the HTML.\n        Unlike \"/favicon.ico\" or \"favicon.ico\", \"<%= process.env.PUBLIC_PATH %>/favicon.ico\" will\n        work correctly both with client-side routing and a non-root public URL.\n        Learn how to configure a non-root public URL by running `npm run build`.\n      -->\n    <title>React App</title>\n  </head>\n\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id=\"root\"></div>\n    <!--\n        This HTML file is a template.\n        If you open it directly in the browser, you will see an empty page.\n        You can add webfonts, meta tags, or analytics to this file.\n        The build step will place the bundled scripts into the <body> tag.\n        To begin the development, run `npm start` or `yarn start`.\n        To create a production bundle, use `npm run build` or `yarn build`.\n      -->\n      <%= htmlWebpackPlugin.tags.bodyTags %>\n  </body>\n\n</html>\n"
  },
  {
    "path": "examples/with-react-server-components/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-react-server-components/public/style.css",
    "content": "/* -------------------------------- CSSRESET --------------------------------*/\n/* CSS Reset adapted from https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Remove default padding */\nul[class],\nol[class] {\n  padding: 0;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np,\nul[class],\nol[class],\nli,\nfigure,\nfigcaption,\nblockquote,\ndl,\ndd {\n  margin: 0;\n}\n\n/* Set core body defaults */\nbody {\n  min-height: 100vh;\n  scroll-behavior: smooth;\n  text-rendering: optimizeSpeed;\n  line-height: 1.5;\n}\n\n/* Remove list styles on ul, ol elements with a class attribute */\nul[class],\nol[class] {\n  list-style: none;\n}\n\n/* A elements that don't have a class get default styles */\na:not([class]) {\n  text-decoration-skip-ink: auto;\n}\n\n/* Make images easier to work with */\nimg {\n  max-width: 100%;\n  display: block;\n}\n\n/* Natural flow and rhythm in articles by default */\narticle > * + * {\n  margin-block-start: 1em;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n  font: inherit;\n}\n\n/* Remove all animations and transitions for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n  * {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n/* -------------------------------- /CSSRESET --------------------------------*/\n\n:root {\n  /* Colors */\n  --main-border-color: #ddd;\n  --primary-border: #037dba;\n  --gray-20: #404346;\n  --gray-60: #8a8d91;\n  --gray-70: #bcc0c4;\n  --gray-80: #c9ccd1;\n  --gray-90: #e4e6eb;\n  --gray-95: #f0f2f5;\n  --gray-100: #f5f7fa;\n  --primary-blue: #037dba;\n  --secondary-blue: #0396df;\n  --tertiary-blue: #c6efff;\n  --flash-blue: #4cf7ff;\n  --outline-blue: rgba(4, 164, 244, 0.6);\n  --navy-blue: #035e8c;\n  --red-25: #bd0d2a;\n  --secondary-text: #65676b;\n  --white: #fff;\n  --yellow: #fffae1;\n\n  --outline-box-shadow: 0 0 0 2px var(--outline-blue);\n  --outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);\n\n  /* Fonts */\n  --sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,\n    Ubuntu, Helvetica, sans-serif;\n  --monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,\n    monospace;\n}\n\nhtml {\n  font-size: 100%;\n}\n\nbody {\n  font-family: var(--sans-serif);\n  background: var(--gray-100);\n  font-weight: 400;\n  line-height: 1.75;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5 {\n  margin: 0;\n  font-weight: 700;\n  line-height: 1.3;\n}\n\nh1 {\n  font-size: 3.052rem;\n}\nh2 {\n  font-size: 2.441rem;\n}\nh3 {\n  font-size: 1.953rem;\n}\nh4 {\n  font-size: 1.563rem;\n}\nh5 {\n  font-size: 1.25rem;\n}\nsmall,\n.text_small {\n  font-size: 0.8rem;\n}\npre,\ncode {\n  font-family: var(--monospace);\n  border-radius: 6px;\n}\npre {\n  background: var(--gray-95);\n  padding: 12px;\n  line-height: 1.5;\n}\ncode {\n  background: var(--yellow);\n  padding: 0 3px;\n  font-size: 0.94rem;\n  word-break: break-word;\n}\npre code {\n  background: none;\n}\na {\n  color: var(--primary-blue);\n}\n\n.text-with-markdown h1,\n.text-with-markdown h2,\n.text-with-markdown h3,\n.text-with-markdown h4,\n.text-with-markdown h5 {\n  margin-block: 2rem 0.7rem;\n  margin-inline: 0;\n}\n\n.text-with-markdown blockquote {\n  font-style: italic;\n  color: var(--gray-20);\n  border-left: 3px solid var(--gray-80);\n  padding-left: 10px;\n}\n\nhr {\n  border: 0;\n  height: 0;\n  border-top: 1px solid rgba(0, 0, 0, 0.1);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n}\n\n/* ---------------------------------------------------------------------------*/\n.main {\n  display: flex;\n  height: 100vh;\n  width: 100%;\n  overflow: hidden;\n}\n\n.col {\n  height: 100%;\n}\n.col:last-child {\n  flex-grow: 1;\n}\n\n.logo {\n  height: 20px;\n  width: 22px;\n  margin-inline-end: 10px;\n}\n\n.edit-button {\n  border-radius: 100px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  padding: 6px 20px 8px;\n  cursor: pointer;\n  font-weight: 700;\n  outline-style: none;\n}\n.edit-button--solid {\n  background: var(--primary-blue);\n  color: var(--white);\n  border: none;\n  margin-inline-start: 6px;\n  transition: all 0.2s ease-in-out;\n}\n.edit-button--solid:hover {\n  background: var(--secondary-blue);\n}\n.edit-button--solid:focus {\n  box-shadow: var(--outline-box-shadow-contrast);\n}\n.edit-button--outline {\n  background: var(--white);\n  color: var(--primary-blue);\n  border: 1px solid var(--primary-blue);\n  margin-inline-start: 12px;\n  transition: all 0.1s ease-in-out;\n}\n.edit-button--outline:disabled {\n  opacity: 0.5;\n}\n.edit-button--outline:hover:not([disabled]) {\n  background: var(--primary-blue);\n  color: var(--white);\n}\n.edit-button--outline:focus {\n  box-shadow: var(--outline-box-shadow);\n}\n\nul.notes-list {\n  padding: 16px 0;\n}\n.notes-list > li {\n  padding: 0 16px;\n}\n.notes-empty {\n  padding: 16px;\n}\n\n.sidebar {\n  background: var(--white);\n  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);\n  overflow-y: scroll;\n  z-index: 1000;\n  flex-shrink: 0;\n  max-width: 350px;\n  min-width: 250px;\n  width: 30%;\n}\n.sidebar-header {\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  padding: 36px 16px 16px;\n  display: flex;\n  align-items: center;\n}\n.sidebar-menu {\n  padding: 0 16px 16px;\n  display: flex;\n  justify-content: space-between;\n}\n.sidebar-menu > .search {\n  position: relative;\n  flex-grow: 1;\n}\n.sidebar-note-list-item {\n  position: relative;\n  margin-bottom: 12px;\n  padding: 16px;\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  max-height: 100px;\n  transition: max-height 250ms ease-out;\n  transform: scale(1);\n}\n.sidebar-note-list-item.note-expanded {\n  max-height: 300px;\n  transition: max-height 0.5s ease;\n}\n.sidebar-note-list-item.flash {\n  animation-name: flash;\n  animation-duration: 0.6s;\n}\n\n.sidebar-note-open {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 0;\n  border: none;\n  border-radius: 6px;\n  text-align: start;\n  background: var(--gray-95);\n  cursor: pointer;\n  outline-style: none;\n  color: transparent;\n  font-size: 0px;\n}\n.sidebar-note-open:focus {\n  box-shadow: var(--outline-box-shadow);\n}\n.sidebar-note-open:hover {\n  background: var(--gray-90);\n}\n.sidebar-note-header {\n  z-index: 1;\n  max-width: 85%;\n  pointer-events: none;\n}\n.sidebar-note-header > strong {\n  display: block;\n  font-size: 1.25rem;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.sidebar-note-toggle-expand {\n  z-index: 2;\n  border-radius: 50%;\n  height: 24px;\n  border: 1px solid var(--gray-60);\n  cursor: pointer;\n  flex-shrink: 0;\n  visibility: hidden;\n  opacity: 0;\n  cursor: default;\n  transition: visibility 0s linear 20ms, opacity 300ms;\n  outline-style: none;\n}\n.sidebar-note-toggle-expand:focus {\n  box-shadow: var(--outline-box-shadow);\n}\n.sidebar-note-open:hover + .sidebar-note-toggle-expand,\n.sidebar-note-open:focus + .sidebar-note-toggle-expand,\n.sidebar-note-toggle-expand:hover,\n.sidebar-note-toggle-expand:focus {\n  visibility: visible;\n  opacity: 1;\n  transition: visibility 0s linear 0s, opacity 300ms;\n}\n.sidebar-note-toggle-expand img {\n  width: 10px;\n  height: 10px;\n}\n\n.sidebar-note-excerpt {\n  pointer-events: none;\n  z-index: 2;\n  flex: 1 1 250px;\n  color: var(--secondary-text);\n  position: relative;\n  animation: slideIn 100ms;\n}\n\n.search input {\n  padding: 0 16px;\n  border-radius: 100px;\n  border: 1px solid var(--gray-90);\n  width: 100%;\n  height: 100%;\n  outline-style: none;\n}\n.search input:focus {\n  box-shadow: var(--outline-box-shadow);\n}\n.search .spinner {\n  position: absolute;\n  right: 10px;\n  top: 10px;\n}\n\n.note-viewer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.note {\n  background: var(--white);\n  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  height: 95%;\n  width: 95%;\n  min-width: 400px;\n  padding: 8%;\n  overflow-y: auto;\n}\n.note--empty-state {\n  margin-inline: 20px 20px;\n}\n.note-text--empty-state {\n  font-size: 1.5rem;\n}\n.note-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-wrap: wrap-reverse;\n  margin-inline-start: -12px;\n}\n.note-menu {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-grow: 1;\n}\n.note-title {\n  line-height: 1.3;\n  flex-grow: 1;\n  overflow-wrap: break-word;\n  margin-inline-start: 12px;\n}\n.note-updated-at {\n  color: var(--secondary-text);\n  white-space: nowrap;\n  margin-inline-start: 12px;\n}\n.note-preview {\n  margin-block-start: 50px;\n}\n\n.note-editor {\n  background: var(--white);\n  display: flex;\n  height: 100%;\n  width: 100%;\n  padding: 58px;\n  overflow-y: auto;\n}\n.note-editor .label {\n  margin-bottom: 20px;\n}\n.note-editor-form {\n  display: flex;\n  flex-direction: column;\n  width: 400px;\n  flex-shrink: 0;\n  position: sticky;\n  top: 0;\n}\n.note-editor-form input,\n.note-editor-form textarea {\n  background: none;\n  border: 1px solid var(--gray-70);\n  border-radius: 2px;\n  font-family: var(--monospace);\n  font-size: 0.8rem;\n  padding: 12px;\n  outline-style: none;\n}\n.note-editor-form input:focus,\n.note-editor-form textarea:focus {\n  box-shadow: var(--outline-box-shadow);\n}\n.note-editor-form input {\n  height: 44px;\n  margin-bottom: 16px;\n}\n.note-editor-form textarea {\n  height: 100%;\n  max-width: 400px;\n}\n.note-editor-menu {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: 12px;\n}\n.note-editor-preview {\n  margin-inline-start: 40px;\n  width: 100%;\n}\n.note-editor-done,\n.note-editor-delete {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-radius: 100px;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  padding: 6px 20px 8px;\n  cursor: pointer;\n  font-weight: 700;\n  margin-inline-start: 12px;\n  outline-style: none;\n  transition: all 0.2s ease-in-out;\n}\n.note-editor-done:disabled,\n.note-editor-delete:disabled {\n  opacity: 0.5;\n}\n.note-editor-done {\n  border: none;\n  background: var(--primary-blue);\n  color: var(--white);\n}\n.note-editor-done:focus {\n  box-shadow: var(--outline-box-shadow-contrast);\n}\n.note-editor-done:hover:not([disabled]) {\n  background: var(--secondary-blue);\n}\n.note-editor-delete {\n  border: 1px solid var(--red-25);\n  background: var(--white);\n  color: var(--red-25);\n}\n.note-editor-delete:focus {\n  box-shadow: var(--outline-box-shadow);\n}\n.note-editor-delete:hover:not([disabled]) {\n  background: var(--red-25);\n  color: var(--white);\n}\n/* Hack to color our svg */\n.note-editor-delete:hover:not([disabled]) img {\n  filter: grayscale(1) invert(1) brightness(2);\n}\n.note-editor-done > img {\n  width: 14px;\n}\n.note-editor-delete > img {\n  width: 10px;\n}\n.note-editor-done > img,\n.note-editor-delete > img {\n  margin-inline-end: 12px;\n}\n.note-editor-done[disabled],\n.note-editor-delete[disabled] {\n  opacity: 0.5;\n}\n\n.label {\n  display: inline-block;\n  border-radius: 100px;\n  letter-spacing: 0.05em;\n  text-transform: uppercase;\n  font-weight: 700;\n  padding: 4px 14px;\n}\n.label--preview {\n  background: rgba(38, 183, 255, 0.15);\n  color: var(--primary-blue);\n}\n\n.text-with-markdown p {\n  margin-bottom: 16px;\n}\n.text-with-markdown img {\n  width: 100%;\n}\n\n/* https://codepen.io/mandelid/pen/vwKoe */\n.spinner {\n  display: inline-block;\n  transition: opacity linear 0.1s;\n  width: 20px;\n  height: 20px;\n  border: 3px solid rgba(80, 80, 80, 0.5);\n  border-radius: 50%;\n  border-top-color: #fff;\n  animation: spin 1s ease-in-out infinite;\n  opacity: 0;\n}\n.spinner--active {\n  opacity: 1;\n}\n\n.skeleton::after {\n  content: 'Loading...';\n}\n.skeleton {\n  height: 100%;\n  background-color: #eee;\n  background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);\n  background-size: 200px 100%;\n  background-repeat: no-repeat;\n  border-radius: 4px;\n  display: block;\n  line-height: 1;\n  width: 100%;\n  animation: shimmer 1.2s ease-in-out infinite;\n  color: transparent;\n}\n.skeleton:first-of-type {\n  margin: 0;\n}\n.skeleton--button {\n  border-radius: 100px;\n  padding: 6px 20px 8px;\n  width: auto;\n}\n.v-stack + .v-stack {\n  margin-block-start: 0.8em;\n}\n\n.offscreen {\n  border: 0;\n  clip: rect(0, 0, 0, 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  width: 1px;\n  position: absolute;\n}\n\n/* ---------------------------------------------------------------------------*/\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: -200px 0;\n  }\n  100% {\n    background-position: calc(200px + 100%) 0;\n  }\n}\n\n@keyframes slideIn {\n  0% {\n    top: -10px;\n    opacity: 0;\n  }\n  100% {\n    top: 0;\n    opacity: 1;\n  }\n}\n\n@keyframes flash {\n  0% {\n    transform: scale(1);\n    opacity: 1;\n  }\n  50% {\n    transform: scale(1.05);\n    opacity: 0.9;\n  }\n  100% {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n"
  },
  {
    "path": "examples/with-react-server-components/razzle.config.js",
    "content": "'use strict';\n\nconst path = require('path');\nconst { StatsWriterPlugin } = require(\"webpack-stats-plugin\")\nconst ReactServerWebpackPlugin = require('./plugin/ReactFlightWebpackPlugin')\n  .default;\n\nmodule.exports = {\n  options: {\n    verbose: true,\n    enableBabelCache: false,\n  },\n  modifyPaths(opts) {\n    const paths = opts.paths;\n    paths.appServerIndexJs = path.join(paths.appPath, 'src/cli.server');\n    paths.appClientIndexJs = path.join(paths.appPath, 'src/index.client');\n    return paths;\n  },\n  modifyWebpackOptions(opts) {\n    const options = opts.options.webpackOptions;\n\n    // Enable HtmlWebpackPlugin in iso app\n    if (opts.env.target === 'web') {\n      options.enableHtmlWebpackPlugin = true;\n    }\n    if (opts.env.target === 'node' && opts.env.dev) {\n      options.startServerOptions.nodeArgs.push('--conditions=react-server');\n    }\n    if (opts.env.target === 'node') {\n      options.jsOutputFilename = `[name].server.js`;\n      options.jsOutputChunkFilename = `[name].chunk.server.js`;\n    }\n    return options;\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    const options = opts.options.webpackOptions;\n\n    config.output.futureEmitAssets = true;\n\n    // Enable StatsWriterPlugin\n    if (opts.env.target === 'web') {\n      config.plugins = config.plugins.concat([\n        new ReactServerWebpackPlugin({isServer: false})\n      ]);\n    }\n\n    if (opts.env.target === 'node') {\n      config.module.rules.unshift({\n        ...options.babelRule,\n        test: /\\.client.(js|jsx|ts|tsx)?$/,\n        use: [...[\n          {\n            loader: require.resolve('./plugin/ReactFlightWebpackLoader'),\n          }],...options.babelRule.use]\n      })\n    }\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.writeToDisk = true;\n    }\n\n    if (!opts.env.dev) {\n      config.optimization = {...config.optimization, ...{minimize: false}};\n    }\n    return config;\n  },\n}\n"
  },
  {
    "path": "examples/with-react-server-components/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-react-server-components/scripts/seed.js",
    "content": "\n/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\n'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\nconst {readdir, unlink, writeFile} = require('fs/promises');\nconst startOfYear = require('date-fns/startOfYear');\nconst sqlite  =   require('better-sqlite3');\n\nconst NOTES_PATH = './notes';\n\nconst db = sqlite(path.join(process.cwd(), 'db.sqlite3'))\n\nconst now = new Date();\nconst startOfThisYear = startOfYear(now);\n// Thanks, https://stackoverflow.com/a/9035732\nfunction randomDateBetween(start, end) {\n  return new Date(\n    start.getTime() + Math.random() * (end.getTime() - start.getTime())\n  );\n}\n\nconst dropTableStatement = 'DROP TABLE IF EXISTS notes;';\nconst createTableStatement = `CREATE TABLE notes (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  created_at TIMESTAMP NOT NULL,\n  updated_at TIMESTAMP NOT NULL,\n  title TEXT,\n  body TEXT\n);`;\nconst insertNoteStatement = `INSERT INTO notes(title, body, created_at, updated_at)\n  VALUES (?, ?, ?, ?)`;\n\nconst selectTable = 'SELECT * FROM notes';\n\nconst seedData = [\n  [\n    'Meeting Notes',\n    'This is an example note. It contains **Markdown**!',\n    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],\n    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],\n  ],\n  [\n    'Make a thing',\n    `It's very easy to make some words **bold** and other words *italic* with\nMarkdown. You can even [link to React's website!](https://www.reactjs.org).`,\n    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],\n    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],\n  ],\n  [\n    'A note with a very long title because sometimes you need more words',\n    `You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)\nnotes in this app! These note live on the server in the \\`notes\\` folder.\n![This app is powered by React](https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png)`,\n    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],\n    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],\n  ],\n  ['I wrote this note today', 'It was an excellent note.', now.toISOString().split('T')[0], now.toISOString().split('T')[0]],\n];\n\nasync function seed() {\n  db.exec(dropTableStatement);\n  db.exec(createTableStatement);\n  seedData.map((row) => db.prepare(insertNoteStatement).run(row))\n\n  const res = db.prepare(selectTable).all();\n  console.log(res)\n  const oldNotes = await readdir(path.resolve(NOTES_PATH));\n  await Promise.all(\n    oldNotes\n      .filter((filename) => filename.endsWith('.md'))\n      .map((filename) => unlink(path.resolve(NOTES_PATH, filename)))\n  );\n\n  await Promise.all(\n    res.map((row) => {\n      const id = row.id;\n      const content = row.body;\n      const data = new Uint8Array(Buffer.from(content));\n      return writeFile(path.resolve(NOTES_PATH, `${id}.md`), data, (err) => {\n        if (err) {\n          throw err;\n        }\n      });\n    })\n  );\n}\n\nseed();\n"
  },
  {
    "path": "examples/with-react-server-components/src/App.server.tsx",
    "content": "import { Suspense } from 'react';\n\nimport Note from './Note.server';\nimport NoteList from './NoteList.server';\nimport EditButton from './EditButton.client';\nimport SearchField from './SearchField.client';\nimport NoteSkeleton from './NoteSkeleton';\nimport NoteListSkeleton from './NoteListSkeleton';\n\nexport default function App({ selectedId, isEditing, searchText }) {\n  return (\n    <div className=\"main\">\n      <section className=\"col sidebar\">\n        <section className=\"sidebar-header\">\n          <img\n            className=\"logo\"\n            src=\"logo.svg\"\n            width=\"22px\"\n            height=\"20px\"\n            alt=\"\"\n            role=\"presentation\"\n          />\n          <strong>React Notes</strong>\n        </section>\n        <section className=\"sidebar-menu\" role=\"menubar\">\n          <SearchField />\n          <EditButton noteId={null}>New</EditButton>\n        </section>\n        <nav>\n          <Suspense fallback={<NoteListSkeleton />}>\n            <NoteList searchText={searchText} />\n          </Suspense>\n        </nav>\n      </section>\n      <section key={selectedId} className=\"col note-viewer\">\n        <Suspense fallback={<NoteSkeleton isEditing={isEditing} />}>\n          <Note selectedId={selectedId} isEditing={isEditing} />\n        </Suspense>\n      </section>\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/Cache.client.tsx",
    "content": "import { unstable_getCacheForType, unstable_useCacheRefresh } from 'react';\nimport { createFromFetch } from 'react-server-dom-webpack';\n\nfunction createResponseCache() {\n  return new Map();\n}\n\nexport function useRefresh() {\n  const refreshCache = unstable_useCacheRefresh();\n  return function refresh(key, seededResponse) {\n    refreshCache(createResponseCache, new Map([[key, seededResponse]]));\n  };\n}\n\nexport function useServerResponse(location) {\n  const key = JSON.stringify(location);\n  const cache = unstable_getCacheForType(createResponseCache);\n  let response = cache.get(key);\n  if (response) {\n    return response;\n  }\n  response = createFromFetch(\n    fetch('/react?location=' + encodeURIComponent(key)),\n  );\n  cache.set(key, response);\n  return response;\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/EditButton.client.tsx",
    "content": "import { unstable_useTransition } from 'react';\n\nimport { useLocation } from './LocationContext.client';\n\nexport default function EditButton({ noteId, children }) {\n  const [, setLocation] = useLocation();\n  const [startTransition, isPending] = unstable_useTransition();\n  const isDraft = noteId == null;\n  return (\n    <button\n      className={[\n        'edit-button',\n        isDraft ? 'edit-button--solid' : 'edit-button--outline',\n      ].join(' ')}\n      disabled={isPending}\n      onClick={() => {\n        startTransition(() => {\n          setLocation((loc) => ({\n            selectedId: noteId,\n            isEditing: true,\n            searchText: loc.searchText,\n          }));\n        });\n      }}\n      role=\"menuitem\"\n    >\n      {children}\n    </button>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/LocationContext.client.tsx",
    "content": "import { createContext, useContext } from 'react';\n\nconsole.log({\n  createContext,\n  useContext,\n});\n\nexport const LocationContext = createContext();\nexport function useLocation() {\n  return useContext(LocationContext);\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/Note.server.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { fetch } from 'react-fetch';\nimport { readFile } from 'react-fs';\nimport { format } from 'date-fns';\nimport path from 'path';\n\nimport { db } from './db.server';\nimport NotePreview from './NotePreview';\nimport EditButton from './EditButton.client';\nimport NoteEditor from './NoteEditor.client';\n\nexport default function Note({ selectedId, isEditing }) {\n  const note =\n    selectedId != null\n      ? fetch(`http://localhost:3000/notes/${selectedId}`).json()\n      : null;\n\n  if (note === null) {\n    if (isEditing) {\n      return (\n        <NoteEditor noteId={null} initialTitle=\"Untitled\" initialBody=\"\" />\n      );\n    } else {\n      return (\n        <div className=\"note--empty-state\">\n          <span className=\"note-text--empty-state\">\n            Click a note on the left to view something! 🥺\n          </span>\n        </div>\n      );\n    }\n  }\n\n  let { id, title, body, updated_at } = note;\n  const updatedAt = new Date(updated_at);\n\n  // We could also read from a file instead.\n  // body = readFile(path.resolve(`./notes/${note.id}.md`), 'utf8');\n\n  // Now let's see how the Suspense boundary above lets us not block on this.\n  // fetch('http://localhost:4000/sleep/3000');\n\n  if (isEditing) {\n    return <NoteEditor noteId={id} initialTitle={title} initialBody={body} />;\n  } else {\n    return (\n      <div className=\"note\">\n        <div className=\"note-header\">\n          <h1 className=\"note-title\">{title}</h1>\n          <div className=\"note-menu\" role=\"menubar\">\n            <small className=\"note-updated-at\" role=\"status\">\n              Last updated on {format(updatedAt, \"d MMM yyyy 'at' h:mm bb\")}\n            </small>\n            <EditButton noteId={id}>Edit</EditButton>\n          </div>\n        </div>\n        <NotePreview body={body} />\n      </div>\n    );\n  }\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/NoteEditor.client.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useState, unstable_useTransition } from 'react';\nimport { createFromReadableStream } from 'react-server-dom-webpack';\n\nimport NotePreview from './NotePreview';\nimport { useRefresh } from './Cache.client';\nimport { useLocation } from './LocationContext.client';\n\nexport default function NoteEditor({ noteId, initialTitle, initialBody }) {\n  const refresh = useRefresh();\n  const [title, setTitle] = useState(initialTitle);\n  const [body, setBody] = useState(initialBody);\n  const [location, setLocation] = useLocation();\n  const [startNavigating, isNavigating] = unstable_useTransition();\n  const [isSaving, saveNote] = useMutation({\n    endpoint: noteId !== null ? `/notes/${noteId}` : `/notes`,\n    method: noteId !== null ? 'PUT' : 'POST',\n  });\n  const [isDeleting, deleteNote] = useMutation({\n    endpoint: `/notes/${noteId}`,\n    method: 'DELETE',\n  });\n\n  async function handleSave() {\n    const payload = { title, body };\n    const requestedLocation = {\n      selectedId: noteId,\n      isEditing: false,\n      searchText: location.searchText,\n    };\n    const response = await saveNote(payload, requestedLocation);\n    navigate(response);\n  }\n\n  async function handleDelete() {\n    const payload = {};\n    const requestedLocation = {\n      selectedId: null,\n      isEditing: false,\n      searchText: location.searchText,\n    };\n    const response = await deleteNote(payload, requestedLocation);\n    navigate(response);\n  }\n\n  function navigate(response) {\n    const cacheKey = response.headers.get('X-Location');\n    const nextLocation = JSON.parse(cacheKey);\n    const seededResponse = createFromReadableStream(response.body);\n    startNavigating(() => {\n      refresh(cacheKey, seededResponse);\n      setLocation(nextLocation);\n    });\n  }\n\n  const isDraft = noteId === null;\n  return (\n    <div className=\"note-editor\">\n      <form\n        className=\"note-editor-form\"\n        autoComplete=\"off\"\n        onSubmit={(e) => e.preventDefault()}\n      >\n        <label className=\"offscreen\" htmlFor=\"note-title-input\">\n          Enter a title for your note\n        </label>\n        <input\n          id=\"note-title-input\"\n          type=\"text\"\n          value={title}\n          onChange={(e) => {\n            setTitle(e.target.value);\n          }}\n        />\n        <label className=\"offscreen\" htmlFor=\"note-body-input\">\n          Enter the body for your note\n        </label>\n        <textarea\n          id=\"note-body-input\"\n          value={body}\n          onChange={(e) => {\n            setBody(e.target.value);\n          }}\n        />\n      </form>\n      <div className=\"note-editor-preview\">\n        <div className=\"note-editor-menu\" role=\"menubar\">\n          <button\n            className=\"note-editor-done\"\n            disabled={isSaving || isNavigating}\n            onClick={() => handleSave()}\n            role=\"menuitem\"\n          >\n            <img\n              src=\"checkmark.svg\"\n              width=\"14px\"\n              height=\"10px\"\n              alt=\"\"\n              role=\"presentation\"\n            />\n            Done\n          </button>\n          {!isDraft && (\n            <button\n              className=\"note-editor-delete\"\n              disabled={isDeleting || isNavigating}\n              onClick={() => handleDelete()}\n              role=\"menuitem\"\n            >\n              <img\n                src=\"cross.svg\"\n                width=\"10px\"\n                height=\"10px\"\n                alt=\"\"\n                role=\"presentation\"\n              />\n              Delete\n            </button>\n          )}\n        </div>\n        <div className=\"label label--preview\" role=\"status\">\n          Preview\n        </div>\n        <h1 className=\"note-title\">{title}</h1>\n        <NotePreview title={title} body={body} />\n      </div>\n    </div>\n  );\n}\n\nfunction useMutation({ endpoint, method }) {\n  const [isSaving, setIsSaving] = useState(false);\n  const [didError, setDidError] = useState(false);\n  const [error, setError] = useState(null);\n  if (didError) {\n    // Let the nearest error boundary handle errors while saving.\n    throw error;\n  }\n\n  async function performMutation(payload, requestedLocation) {\n    setIsSaving(true);\n    try {\n      const response = await fetch(\n        `${endpoint}?location=${encodeURIComponent(\n          JSON.stringify(requestedLocation),\n        )}`,\n        {\n          method,\n          body: JSON.stringify(payload),\n          headers: {\n            'Content-Type': 'application/json',\n          },\n        },\n      );\n      if (!response.ok) {\n        throw new Error(await response.text());\n      }\n      return response;\n    } catch (e) {\n      setDidError(true);\n      setError(e);\n    } finally {\n      setIsSaving(false);\n    }\n  }\n\n  return [isSaving, performMutation];\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/NoteList.server.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { fetch } from 'react-fetch';\n\nimport SidebarNote from './SidebarNote';\n\nexport default function NoteList({ searchText }) {\n  const notes = fetch('http://localhost:3000/notes').json();\n\n  // Now let's see how the Suspense boundary above lets us not block on this.\n  // fetch('/sleep/3000');\n\n  return notes.length > 0 ? (\n    <ul className=\"notes-list\">\n      {notes.map((note) => (\n        <li key={note.id}>\n          <SidebarNote note={note} />\n        </li>\n      ))}\n    </ul>\n  ) : (\n    <div className=\"notes-empty\">\n      {searchText\n        ? `Couldn't find any notes titled \"${searchText}\".`\n        : 'No notes created yet!'}{' '}\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/NoteListSkeleton.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport default function NoteListSkeleton() {\n  return (\n    <div>\n      <ul className=\"notes-list skeleton-container\">\n        <li className=\"v-stack\">\n          <div\n            className=\"sidebar-note-list-item skeleton\"\n            style={{ height: '5em' }}\n          />\n        </li>\n        <li className=\"v-stack\">\n          <div\n            className=\"sidebar-note-list-item skeleton\"\n            style={{ height: '5em' }}\n          />\n        </li>\n        <li className=\"v-stack\">\n          <div\n            className=\"sidebar-note-list-item skeleton\"\n            style={{ height: '5em' }}\n          />\n        </li>\n      </ul>\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/NotePreview.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport TextWithMarkdown from './TextWithMarkdown';\n\nexport default function NotePreview({ body }) {\n  return (\n    <div className=\"note-preview\">\n      <TextWithMarkdown text={body} />\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/NoteSkeleton.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nfunction NoteEditorSkeleton() {\n  return (\n    <div\n      className=\"note-editor skeleton-container\"\n      role=\"progressbar\"\n      aria-busy=\"true\"\n    >\n      <div className=\"note-editor-form\">\n        <div className=\"skeleton v-stack\" style={{ height: '3rem' }} />\n        <div className=\"skeleton v-stack\" style={{ height: '100%' }} />\n      </div>\n      <div className=\"note-editor-preview\">\n        <div className=\"note-editor-menu\">\n          <div\n            className=\"skeleton skeleton--button\"\n            style={{ width: '8em', height: '2.5em' }}\n          />\n          <div\n            className=\"skeleton skeleton--button\"\n            style={{ width: '8em', height: '2.5em', marginInline: '12px 0' }}\n          />\n        </div>\n        <div\n          className=\"note-title skeleton\"\n          style={{ height: '3rem', width: '65%', marginInline: '12px 1em' }}\n        />\n        <div className=\"note-preview\">\n          <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n          <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n          <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n          <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n          <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction NotePreviewSkeleton() {\n  return (\n    <div\n      className=\"note skeleton-container\"\n      role=\"progressbar\"\n      aria-busy=\"true\"\n    >\n      <div className=\"note-header\">\n        <div\n          className=\"note-title skeleton\"\n          style={{ height: '3rem', width: '65%', marginInline: '12px 1em' }}\n        />\n        <div\n          className=\"skeleton skeleton--button\"\n          style={{ width: '8em', height: '2.5em' }}\n        />\n      </div>\n      <div className=\"note-preview\">\n        <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n        <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n        <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n        <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n        <div className=\"skeleton v-stack\" style={{ height: '1.5em' }} />\n      </div>\n    </div>\n  );\n}\n\nexport default function NoteSkeleton({ isEditing }) {\n  return isEditing ? <NoteEditorSkeleton /> : <NotePreviewSkeleton />;\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/Root.client.tsx",
    "content": "import { useState, Suspense } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nimport { useServerResponse } from './Cache.client';\nimport { LocationContext } from './LocationContext.client';\n\nexport default function Root({ initialCache }) {\n  return (\n    <Suspense fallback={null}>\n      <ErrorBoundary FallbackComponent={Error}>\n        <Content />\n      </ErrorBoundary>\n    </Suspense>\n  );\n}\n\nfunction Content() {\n  const [location, setLocation] = useState({\n    selectedId: null,\n    isEditing: false,\n    searchText: '',\n  });\n  const response = useServerResponse(location);\n  return (\n    <LocationContext.Provider value={[location, setLocation]}>\n      {response.readRoot()}\n    </LocationContext.Provider>\n  );\n}\n\nfunction Error({ error }) {\n  return (\n    <div>\n      <h1>Application Error</h1>\n      <pre style={{ whiteSpace: 'pre-wrap' }}>{error.stack}</pre>\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/SearchField.client.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useState, unstable_useTransition } from 'react';\n\nimport { useLocation } from './LocationContext.client';\nimport Spinner from './Spinner';\n\nexport default function SearchField() {\n  const [text, setText] = useState('');\n  const [startSearching, isSearching] = unstable_useTransition(false);\n  const [, setLocation] = useLocation();\n  return (\n    <form className=\"search\" role=\"search\" onSubmit={(e) => e.preventDefault()}>\n      <label className=\"offscreen\" htmlFor=\"sidebar-search-input\">\n        Search for a note by title\n      </label>\n      <input\n        id=\"sidebar-search-input\"\n        placeholder=\"Search\"\n        value={text}\n        onChange={(e) => {\n          const newText = e.target.value;\n          setText(newText);\n          startSearching(() => {\n            setLocation((loc) => ({\n              ...loc,\n              searchText: newText,\n            }));\n          });\n        }}\n      />\n      <Spinner active={isSearching} />\n    </form>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/SidebarNote.client.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useState, useRef, useEffect, unstable_useTransition } from 'react';\n\nimport { useLocation } from './LocationContext.client';\n\nexport default function SidebarNote({ id, title, children, expandedChildren }) {\n  const [location, setLocation] = useLocation();\n  const [startTransition, isPending] = unstable_useTransition();\n  const [isExpanded, setIsExpanded] = useState(false);\n  const isActive = id === location.selectedId;\n\n  // Animate after title is edited.\n  const itemRef = useRef(null);\n  const prevTitleRef = useRef(title);\n  useEffect(() => {\n    if (title !== prevTitleRef.current) {\n      prevTitleRef.current = title;\n      itemRef.current.classList.add('flash');\n    }\n  }, [title]);\n\n  return (\n    <div\n      ref={itemRef}\n      onAnimationEnd={() => {\n        itemRef.current.classList.remove('flash');\n      }}\n      className={[\n        'sidebar-note-list-item',\n        isExpanded ? 'note-expanded' : '',\n      ].join(' ')}\n    >\n      {children}\n      <button\n        className=\"sidebar-note-open\"\n        style={{\n          backgroundColor: isPending\n            ? 'var(--gray-80)'\n            : isActive\n            ? 'var(--tertiary-blue)'\n            : '',\n          border: isActive\n            ? '1px solid var(--primary-border)'\n            : '1px solid transparent',\n        }}\n        onClick={() => {\n          startTransition(() => {\n            setLocation((loc) => ({\n              selectedId: id,\n              isEditing: false,\n              searchText: loc.searchText,\n            }));\n          });\n        }}\n      >\n        Open note for preview\n      </button>\n      <button\n        className=\"sidebar-note-toggle-expand\"\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsExpanded(!isExpanded);\n        }}\n      >\n        {isExpanded ? (\n          <img\n            src=\"chevron-down.svg\"\n            width=\"10px\"\n            height=\"10px\"\n            alt=\"Collapse\"\n          />\n        ) : (\n          <img src=\"chevron-up.svg\" width=\"10px\" height=\"10px\" alt=\"Expand\" />\n        )}\n      </button>\n      {isExpanded && expandedChildren}\n    </div>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/SidebarNote.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { format, isToday } from 'date-fns';\nimport excerpts from 'excerpts';\nimport marked from 'marked';\n\nimport ClientSidebarNote from './SidebarNote.client';\n\nexport default function SidebarNote({ note }) {\n  const updatedAt = new Date(note.updated_at);\n  const lastUpdatedAt = isToday(updatedAt)\n    ? format(updatedAt, 'h:mm bb')\n    : format(updatedAt, 'M/d/yy');\n  const summary = excerpts(marked(note.body), { words: 20 });\n  return (\n    <ClientSidebarNote\n      id={note.id}\n      title={note.title}\n      expandedChildren={\n        <p className=\"sidebar-note-excerpt\">{summary || <i>(No content)</i>}</p>\n      }\n    >\n      <header className=\"sidebar-note-header\">\n        <strong>{note.title}</strong>\n        <small>{lastUpdatedAt}</small>\n      </header>\n    </ClientSidebarNote>\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/Spinner.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nexport default function Spinner({ active = true }) {\n  return (\n    <div\n      className={['spinner', active && 'spinner--active'].join(' ')}\n      role=\"progressbar\"\n      aria-busy={active ? 'true' : 'false'}\n    />\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/TextWithMarkdown.tsx",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport marked from 'marked';\nimport sanitizeHtml from 'sanitize-html';\n\nconst allowedTags = sanitizeHtml.defaults.allowedTags.concat([\n  'img',\n  'h1',\n  'h2',\n  'h3',\n]);\nconst allowedAttributes = Object.assign(\n  {},\n  sanitizeHtml.defaults.allowedAttributes,\n  {\n    img: ['alt', 'src'],\n  },\n);\n\nexport default function TextWithMarkdown({ text }) {\n  return (\n    <div\n      className=\"text-with-markdown\"\n      dangerouslySetInnerHTML={{\n        __html: sanitizeHtml(marked(text), {\n          allowedTags,\n          allowedAttributes,\n        }),\n      }}\n    />\n  );\n}\n"
  },
  {
    "path": "examples/with-react-server-components/src/cli.server.js",
    "content": "import express from 'express';\n\nlet app = require('./index.server').default;\n\nif (module.hot) {\n  module.hot.accept('./index.server', function() {\n    console.log('🔁  HMR Reloading `./index.server`...');\n    try {\n      app = require('./index.server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-react-server-components/src/db.server.ts",
    "content": "/**\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport path from 'path'\nimport sqlite from 'better-sqlite3'\n\nexport const db = sqlite(path.join(process.cwd(), 'db.sqlite3'))\n"
  },
  {
    "path": "examples/with-react-server-components/src/index.client.tsx",
    "content": "import { unstable_createRoot } from 'react-dom';\nimport Root from './Root.client';\n\nconst initialCache = new Map();\nconst root = unstable_createRoot(document.getElementById('root'));\nroot.render(<Root initialCache={initialCache} />);\n"
  },
  {
    "path": "examples/with-react-server-components/src/index.server.ts",
    "content": "import express from 'express';\nimport compress from 'compression';\nimport { readFileSync } from 'fs';\nimport fs from 'fs';\nimport { pipeToNodeWritable } from 'react-server-dom-webpack/writer';\nimport path from 'path';\nimport React from 'react';\nimport ReactApp from './App.server';\n\nconst { unlink, writeFile } = fs.promises;\n\nconst { db } = require('./db.server');\n\n\ndb.exec(`CREATE TABLE IF NOT EXISTS notes (\n  id SERIAL PRIMARY KEY,\n  created_at TIMESTAMP NOT NULL,\n  updated_at TIMESTAMP NOT NULL,\n  title TEXT,\n  body TEXT\n);`);\n\nconst app = express();\n\napp.use(compress());\napp.use(express.json());\n\nfunction handleErrors(fn) {\n  return async function (req, res, next) {\n    try {\n      return await fn(req, res);\n    } catch (x) {\n      next(x);\n    }\n  };\n}\n\napp.get(\n  '/',\n  handleErrors(async function (_req, res) {\n    await waitForWebpack();\n    const html = readFileSync(\n      path.resolve(__dirname, '../build/public/index.html'),\n      'utf8',\n    );\n\n    // Note: this is sending an empty HTML shell, like a client-side-only app.\n    // However, the intended solution (which isn't built out yet) is to read\n    // from the Server endpoint and turn its response into an HTML stream.\n    res.send(html);\n  }),\n);\n\nasync function renderReactTree(res, props) {\n  await waitForWebpack();\n  const manifest = readFileSync(\n    path.resolve(__dirname, '../build/public/react-client-manifest.json'),\n    'utf8',\n  );\n  const moduleMap = JSON.parse(manifest);\n  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);\n}\n\nfunction sendResponse(req, res, redirectToId) {\n  const location = JSON.parse(req.query.location);\n  if (redirectToId) {\n    location.selectedId = redirectToId;\n  }\n  res.set('X-Location', JSON.stringify(location));\n\n  renderReactTree(res, {\n    selectedId: location.selectedId,\n    isEditing: location.isEditing,\n    searchText: location.searchText,\n  });\n}\n\napp.get('/react', function (req, res) {\n  sendResponse(req, res, null);\n});\n\nconst NOTES_PATH = path.resolve(__dirname, '../notes');\n\napp.post(\n  '/notes',\n  handleErrors(async function(req, res) {\n    const now = new Date();\n    const insert = db.prepare(\n      'INSERT INTO notes (title, body, created_at, updated_at) VALUES (?, ?, ?, ?)').bind(\n        req.body.title, req.body.body, now.toISOString().split('T')[0], now.toISOString().split('T')[0]\n      )\n      const getid = db.prepare('SELECT last_insert_rowid()')\n      const insertGetId = db.transaction(() => {\n        insert.run();\n        return getid.pluck().get();\n      })\n      const insertedId = insertGetId();\n      await writeFile(\n        path.resolve(NOTES_PATH, `${insertedId}.md`),\n        req.body.body,\n        'utf8'\n      );\n      sendResponse(req, res, insertedId);\n    })\n  );\n\napp.put(\n  '/notes/:id',\n  handleErrors(async function(req, res) {\n    const now = new Date();\n    const updatedId = Number(req.params.id);\n    const update = db.prepare(\n      'UPDATE notes set title = ?, body = ?, updated_at = ? WHERE id = ?').bind(\n        req.body.title, req.body.body, now.toISOString().split('T')[0], updatedId\n      ).run();\n      await writeFile(\n        path.resolve(NOTES_PATH, `${updatedId}.md`),\n        req.body.body,\n        'utf8'\n      );\n      sendResponse(req, res, null);\n    })\n  );\n\napp.delete(\n  '/notes/:id',\n  handleErrors(async function(req, res) {\n    db.prepare('DELETE FROM notes where id = ?').bind(req.params.id).run();\n    await unlink(path.resolve(NOTES_PATH, `${req.params.id}.md`));\n    sendResponse(req, res, null);\n  })\n);\n\napp.get(\n  '/notes',\n  handleErrors(async function(_req, res) {\n    const rows = db.prepare('SELECT * FROM notes ORDER BY id DESC').all();\n    res.json(rows);\n  })\n);\n\napp.get(\n  '/notes/:id',\n  handleErrors(async function(req, res) {\n    const row = db.prepare('SELECT * FROM notes WHERE id = ?').bind(req.params.id).get();;\n    res.json(row);\n  })\n);\napp.get('/sleep/:ms', function (req, res) {\n  setTimeout(() => {\n    res.json({ ok: true });\n  }, req.params.ms);\n});\n\napp.use(express.static('build/public'));\napp.use(express.static('public'));\n\napp.on('error', function (error) {\n  if (error.syscall !== 'listen') {\n    throw error;\n  }\n  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;\n  switch (error.code) {\n    case 'EACCES':\n      console.error(bind + ' requires elevated privileges');\n      process.exit(1);\n      break;\n    case 'EADDRINUSE':\n      console.error(bind + ' is already in use');\n      process.exit(1);\n      break;\n    default:\n      throw error;\n  }\n});\n\nasync function waitForWebpack() {\n  while (true) {\n    try {\n      readFileSync(path.resolve(__dirname, '../build/public/index.html'));\n      return;\n    } catch (err) {\n      console.log(\n        'Could not find webpack build output. Will retry in a second...',\n      );\n      await new Promise((resolve) => setTimeout(resolve, 1000));\n    }\n  }\n}\n\nexport default app;\n"
  },
  {
    "path": "examples/with-reason-react/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n.bsb.lock\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\nlib\n.merlin\n"
  },
  {
    "path": "examples/with-reason-react/README.md",
    "content": "# Razzle Reason React\n\n## How to use\nFirst install the Reason toolchain ([reason-cli](https://github.com/reasonml/reason-cli)) globally\n\n```bash\nnpm install -g https://github.com/reasonml/reason-cli/archive/beta-v-1.13.6-bin-darwin.tar.gz\n```\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-reason-react with-reason-react\n\ncd with-reason-react\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n#### NOTE: This example takes a while to install. Stick with it.\n\nNow you can go and edit `src/App.re`. When you make changes, your **browser and server** will Hot Reload.\n\n\n## Idea behind the example\nThis is an example of how to use [Reason React](https://github.com/reasonml/reason-react) and Razzle together. Yes, you read that correctly. SSR, Reason, React, HMR.\n\n## Secret sauce\nThis example works by running BuckleScript Platform to compile Reason-React files (`.re`) and then importing that output back into the vanilla Razzle app using the JS-Reason-React interop.\n\nSince Reason compiles to (beautifully written) JS, we don't have to do anything else to get universal HMR going because Razzle already does that. We just need to import `<App />` a litte bit differently in `src/server.js` and `src/client.js`.\n\n```reason\n/* /src/App.re */\ntype state = {count: int};\n\ntype action =\n  | Increment\n  | Decrement;\n\nlet component = ReasonReact.reducerComponent \"App\";\n\n/* underscore before names indicate unused variables. We name them for clarity */\nlet make ::title _children => {\n  ...component,\n  initialState: fun () => {count: 0},\n  reducer: fun action state =>\n    switch action {\n    | Increment => ReasonReact.Update {...state, count: state.count + 1}\n    | Decrement => ReasonReact.Update {...state, count: state.count - 1}\n    },\n  render: fun self => {\n    let message = \"Count: \" ^ string_of_int self.state.count;\n    <div className=\"App\">\n      <div className=\"App-header\">\n        <div style=(ReactDOMRe.Style.make backgroundColor::\"#db4d3f\" cursor::\"pointer\" ())>\n          <svg className=\"App-logo\" viewBox=\"0 0 841.9 595.3\" alt=\"logo\">\n            <g fill=\"#fff\">\n              <path\n                d=\"M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z\"\n              />\n              <circle cx=\"420.9\" cy=\"296.5\" r=\"45.7\" />\n              <path d=\"M520.5 78.1z\" />\n            </g>\n          </svg>\n        </div>\n        <h2 style=(ReactDOMRe.Style.make marginLeft::\"30px\" fontSize::\"2em\" ())>\n          (ReasonReact.stringToElement title)\n        </h2>\n      </div>\n      <p className=\"App-intro\">\n        <code> (ReasonReact.stringToElement \"src/App.re\") </code>\n        (\n          ReasonReact.stringToElement \". When you make edits, both the server and broswer will hot reload.\"\n        )\n      </p>\n      <div className=\"App-intro\">\n        (ReasonReact.stringToElement message)\n        <button onClick=(self.reduce (fun _event => Increment))>\n          (ReasonReact.stringToElement \"+\")\n        </button>\n        <button onClick=(self.reduce (fun _event => Decrement))>\n          (ReasonReact.stringToElement \"-\")\n        </button>\n      </div>\n    </div>\n  }\n};\n\nlet comp =\n  ReasonReact.wrapReasonForJs ::component (fun jsProps => make title::jsProps##title [||]);\n\n```\n\n```js\n// src/client.js\n\n// We need to point this to our Reason-React output\nconst App = require('../lib/js/src/app').comp;\n\nimport './client.css';\n\nimport React from 'react';\nimport { render } from 'react-dom';\n\n// No JSX required, it's already in JS.\nrender(\n  React.createElement(App, {\n    title: 'Welcome to Razzle Reason React!',\n  }),\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n```\n\n\n```js\n// src/server.js\n// We need to point this to our Reason-React output, just like above\nconst App = require('../lib/js/src/app').comp;\n\nimport React from 'react';\nimport express from 'express';\nimport path from 'path';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    // Again, no JSX needed\n    const markup = renderToString(\n      React.createElement(App, {\n        title: 'Welcome to Razzle Reason React',\n      })\n    );\n    res.send(\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle Reason React</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${assets.client.css ? `<link rel=\"stylesheet\" href=\"${assets.client.css}\">` : ''}\n        <script src=\"${assets.client.js}\" defer></script>\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n    </body>\n</html>`\n    );\n  });\n\nexport default server;\n```\n"
  },
  {
    "path": "examples/with-reason-react/bsconfig.json",
    "content": "{\n  /* This is the BuckleScript configuration file. Note that this is a comment;\n  BuckleScript comes with a JSON parser that supports comments and trailing\n  comma. If this screws with your editor highlighting, please tell us by filing\n  an issue! */\n  \"name\": \"razzle-reason\",\n  \"bsc-flags\": [\"-bs-no-version-header\", \"-bs-super-errors\"],\n  \"refmt\": 3,\n  \"package-specs\": [\"commonjs\", \"es6\"],\n  \"reason\": {\n    \"react-jsx\": 3\n  },\n  \"bs-dependencies\": [\n    \"reason-react\",\n    \"bs-fetch\",\n    \"@glennsl/bs-json\",\n    \"bs-webapi\"\n  ],\n  \"sources\": [\n    {\n      \"dir\": \"src\",\n      \"subdirs\": true\n    }\n  ],\n  \"package-specs\": [\n    {\n      \"module\": \"es6-global\",\n      \"in-source\": false\n    }\n  ]\n}\n"
  },
  {
    "path": "examples/with-reason-react/jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"paths\": {\n      \"bs/*\": [\"../lib/es6_global/src/*\"]\n    }\n  }\n}\n"
  },
  {
    "path": "examples/with-reason-react/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-reason-react\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"concurrently \\\"npm run js-watch\\\" \\\"npm run bsb-watch\\\"\",\n    \"js-watch\": \"razzle start\",\n    \"bsb-watch\": \"bsb -make-world -w\",\n    \"clean\": \"bsb -clean-world && rm -rf build\",\n    \"build\": \"bsb -make-world && razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"reason-react\": \"^0.8.0\"\n  },\n  \"devDependencies\": {\n    \"bs-platform\": \"7.1.1\",\n    \"@glennsl/bs-json\": \"^4.0.0\",\n    \"bs-fetch\": \"^0.5.0\",\n    \"bs-webapi\": \"^0.15.2\",\n    \"concurrently\": \"^5.2.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-reason-react/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-reason-react/src/App.re",
    "content": "\n[@react.component]\nlet make = () => {\n  let url = ReasonReact.Router.useUrl();\n\n  switch (url.path) {\n  | [] => <TopStoriesPage />\n  | [\"comments\", id] => <CommentsPage id=int_of_string(id) />\n  | _ => <NotFound />\n  };\n};\n"
  },
  {
    "path": "examples/with-reason-react/src/CommentList.css",
    "content": ".CommentList_inline {\n  flex-direction: row;\n}\n\n.CommentList_muted {\n  opacity: 0.3;\n}\n\n.CommentList_error {\n  color: #ffbbbb;\n}\n\n.CommentList_textMuted {\n  color: #bbbbbb;\n}\n\n.CommentList_comment {\n  font-size: 14px;\n  margin: 4px;\n  padding: 4px;\n}\n\n.CommentList_commentBody {\n  padding-left: 10px;\n  border-left-color: #bbbbbb;\n  border-left-width: 1px;\n}\n\n.CommentList_disclosure {\n  vertical-align: middle;\n  width: 14px;\n  height: 14px;\n  margin-left: 2px;\n  margin-right: 8px;\n}\n\n.CommentList_disclosureRow {\n  cursor: pointer;\n  padding-left: 0px;\n  padding-top: 4px;\n  padding-bottom: 4px;\n}\n"
  },
  {
    "path": "examples/with-reason-react/src/CommentList.re",
    "content": "open Belt;\n\nopen Utils;\n\nrequireCSS(\"../../../src/CommentList.css\");\n\ntype action =\n  | Toggle(option(string));\n\ntype state = {collapsed_comments: Set.Int.t};\nlet initialState = {collapsed_comments: Set.Int.empty};\nlet toggleComment = (collapsed, idMaybe: option(string)) =>\n  switch (idMaybe) {\n  | Some(idString) =>\n    let id = int_of_string(idString);\n    if (Set.Int.has(collapsed, id)) {\n      Set.Int.remove(collapsed, id);\n    } else {\n      Set.Int.add(collapsed, id);\n    };\n  | None => collapsed\n  };\n[@react.component]\nlet make = (~story: StoryData.story_with_comments) => {\n  let (state, dispatch) =\n    React.useReducer(\n      (state, action) =>\n        switch (action) {\n        | Toggle(commentId) => {\n            collapsed_comments:\n              toggleComment(state.collapsed_comments, commentId),\n          }\n        },\n      initialState,\n    );\n\n  let getCommentIdFromEvent = (event: ReactEvent.Mouse.t) =>\n    getAttribute(ReactEvent.Mouse.currentTarget(event), \"name\");\n  let renderCommentText = (textMaybe: option(string)) =>\n    switch (textMaybe) {\n    | Some(text) => <div dangerouslySetInnerHTML={dangerousHtml(text)} />\n    | None => React.string(\"missing comment\")\n    };\n  let rec renderCommentKids = (comment: StoryData.comment_present) =>\n    renderCommentList(comment.kids)\n  and renderComment = (id: int) => {\n    let commentMaybe = Map.Int.get(story.comments, id);\n    <div key={string_of_int(id)}>\n      {switch (commentMaybe) {\n       | Some(commentPresentOrDeleted) =>\n         switch (commentPresentOrDeleted) {\n         | StoryData.CommentPresent(comment) =>\n           let openComment =\n             !Set.Int.has(state.collapsed_comments, comment.id);\n           <div className=\"CommentList_comment\">\n             <div\n               className=\"CommentList_disclosureRow CommentList_inline\"\n               name={string_of_int(comment.id)}\n               onClick={event =>\n                 dispatch(Toggle(getCommentIdFromEvent(event)))\n               }>\n               <img\n                 alt={openComment ? \"hide\" : \"show\"}\n                 src={\n                   openComment\n                     ? requireAssetURI(\"../../../src/disclosure90.png\")\n                     : requireAssetURI(\"../../../src/disclosure.png\")\n                 }\n                 className=\"CommentList_disclosure CommentList_muted\"\n               />\n               <span className=\"CommentList_muted\">\n                 {\n                   let time = fromNow(comment.time);\n                   let by = comment.by;\n                   React.string({j| $time by $by|j});\n                 }\n               </span>\n             </div>\n             {if (openComment) {\n                <div className=\"CommentList_commentBody\">\n                  {renderCommentText(comment.text)}\n                  {renderCommentKids(comment)}\n                </div>;\n              } else {\n                <noscript />;\n              }}\n           </div>;\n         | StoryData.CommentDeleted(_) =>\n           <div className=\"CommentList_error\">\n             {React.string(\n                \"[comment deleted (id=\" ++ string_of_int(id) ++ \")]\",\n              )}\n           </div>\n         }\n       | None =>\n         <div className=\"CommentList_error\">\n           {React.string(\n              \"[comment not loaded (id=\" ++ string_of_int(id) ++ \")]\",\n            )}\n         </div>\n       }}\n    </div>;\n  }\n  and renderCommentList = (commentIds: option(array(int))) =>\n    switch (commentIds) {\n    | Some(ids) =>\n      let commentList = Array.map(ids, id => renderComment(id));\n      <div> {React.array(commentList)} </div>;\n    | None => <div />\n    };\n  renderCommentList(story.kids);\n};\n"
  },
  {
    "path": "examples/with-reason-react/src/CommentsPage.css",
    "content": ".CommentsPage_container {\n  margin-left: 1em;\n  margin-right: 1em;\n}\n\n.CommentsPage_title {\n  color: #333;\n}\n\n.CommentsPage_titleLink {\n  color: #333;\n  text-decoration: none;\n}\n"
  },
  {
    "path": "examples/with-reason-react/src/CommentsPage.re",
    "content": "open Utils;\n\nrequireCSS(\"../../../src/CommentsPage.css\");\n\ntype state = {story_with_comments: option(StoryData.story_with_comments)};\n\ntype action =\n  | Loaded(StoryData.story_with_comments);\n\n[@react.component]\nlet make = (~id) => {\n    let (state, dispatch) = React.useReducer((_state, action) =>\n    switch (action) {\n      | Loaded(data) =>{story_with_comments: Some(data)}\n      },  {story_with_comments: None});\n\n  let renderTitle = (story: StoryData.story_with_comments) => {\n    let title =\n      <h2 className=\"CommentsPage_title\">\n        {React.string(story.title)}\n      </h2>;\n    <div>\n      {switch (story.url) {\n       | Some(url) =>\n         <a href=url className=\"CommentsPage_titleLink\"> title </a>\n       | None => title\n       }}\n    </div>;\n  };\n  let renderByline = (story: StoryData.story_with_comments) =>\n    <div>\n      <span> {React.string(string_of_int(story.score))} </span>\n      {React.string(\" points\")}\n      <span>\n        <span>\n          {let time = story.time\n           let by = story.by\n           React.string({j| submitted $time by $by|j})}\n        </span>\n      </span>\n    </div>;\n    React.useEffect0(() => {\n      StoryData.fetchStoryWithComments(id, data => dispatch(Loaded(data)))\n      |> ignore;\n      None;\n    });\n\n      <div className=\"CommentsPage_container\">\n        {switch (state.story_with_comments) {\n         | Some(story) =>\n           <div>\n             {renderTitle(story)}\n             {renderByline(story)}\n             <CommentList story />\n           </div>\n         | None => React.string(\"loading\")\n         }}\n      </div>;\n};\n"
  },
  {
    "path": "examples/with-reason-react/src/NotFound.css",
    "content": ".NotFound_container {\n    margin: 30px auto;\n    display: flex;\n    align-items: center;\n    flex-direction: column;\n}\n.NotFound_image {\n    margin-top: 60px;\n}\n.NotFound_text {\n    margin-top: 40px;\n}"
  },
  {
    "path": "examples/with-reason-react/src/NotFound.re",
    "content": "open Utils;\n\nrequireCSS(\"../../../src/NotFound.css\");\n\nlet notFoundImage = requireAssetURI(\"../../../src/notfound404.png\");\n\n[@react.component]\nlet make = () =>\n  <div className=\"NotFound_container\">\n    <div className=\"NotFound_image\">\n      <img alt=\"Page not found\" src=notFoundImage />\n    </div>\n    <div className=\"NotFound_text\">\n      <span>\n        {React.string(\n           \"The page you're looking for can't be found. Go home by \",\n         )}\n      </span>\n      <Link href=\"/\"> {React.string(\"clicking here!\")} </Link>\n    </div>\n  </div>;\n"
  },
  {
    "path": "examples/with-reason-react/src/StoryData.re",
    "content": "open Belt;\n\nlet apiBaseUrl = \"https://serverless-api.hackernewsmobile.com\";\n\nlet topStoriesUrl = page => {j|$apiBaseUrl/topstories-25-$page.json|j};\n\nlet storyUrl = id => {j|$apiBaseUrl/stories/$id.json|j};\n\ntype story = {\n  by: string,\n  descendants: int,\n  id: int,\n  score: int,\n  time: int,\n  title: string,\n  url: option(string),\n};\n\ntype comment_deleted = {id: int};\n\ntype comment_present = {\n  by: string,\n  id: int,\n  kids: option(array(int)),\n  parent: int,\n  text: option(string),\n  time: int,\n};\n\ntype comment =\n  | CommentPresent(comment_present)\n  | CommentDeleted(comment_deleted);\n\ntype comments_map = Map.Int.t(comment);\n\ntype story_with_comments = {\n  by: string,\n  descendants: int,\n  id: int,\n  kids: option(array(int)),\n  score: int,\n  time: int,\n  title: string,\n  url: option(string),\n  descendentIds: array(int),\n  comments: comments_map,\n};\n\ntype topstories = array(story);\n\nmodule Decode = {\n  let idsArray = (json): array(int) => Json.Decode.(json |> array(int));\n  let getCommentId = comment =>\n    switch (comment) {\n    | CommentDeleted(c) => c.id\n    | CommentPresent(c) => c.id\n    };\n  let comment = (json): comment => {\n    let deletedMaybe =\n      Json.Decode.(json |> optional(field(\"deleted\", bool)));\n    let deleted =\n      switch (deletedMaybe) {\n      | Some(v) => v == true\n      | None => false\n      };\n    if (deleted) {\n      CommentDeleted(Json.Decode.{id: json |> field(\"id\", int)});\n    } else {\n      CommentPresent(\n        Json.Decode.{\n          by: json |> field(\"by\", string),\n          id: json |> field(\"id\", int),\n          parent: json |> field(\"parent\", int),\n          kids: json |> optional(field(\"kids\", idsArray)),\n          text: json |> optional(field(\"text\", string)),\n          time: json |> field(\"time\", int),\n        },\n      );\n    };\n  };\n  let commentsArray = (json): comments_map =>\n    Json.Decode.array(comment, json)\n    ->(Array.map(comment => (getCommentId(comment), comment)))\n    ->Map.Int.fromArray;\n  let storyWithComments = (json): story_with_comments =>\n    Json.Decode.{\n      by: json |> field(\"by\", string),\n      descendants: json |> field(\"descendants\", int),\n      descendentIds: json |> field(\"descendentIds\", idsArray),\n      comments: json |> field(\"comments\", commentsArray),\n      id: json |> field(\"id\", int),\n      kids: json |> optional(field(\"kids\", idsArray)),\n      score: json |> field(\"score\", int),\n      time: json |> field(\"time\", int),\n      title: json |> field(\"title\", string),\n      url: json |> optional(field(\"url\", string)),\n    };\n  let story = (json): story =>\n    Json.Decode.{\n      by: json |> field(\"by\", string),\n      descendants: json |> field(\"descendants\", int),\n      id: json |> field(\"id\", int),\n      score: json |> field(\"score\", int),\n      time: json |> field(\"time\", int),\n      title: json |> field(\"title\", string),\n      url: json |> optional(field(\"url\", string)),\n    };\n  let stories = (json): array(story) => Json.Decode.(json |> array(story));\n};\n\nlet fetchTopStories = (page, callback) =>\n  Js.Promise.(\n    Fetch.fetch(topStoriesUrl(page))\n    |> then_(Fetch.Response.json)\n    |> then_(json =>\n         json\n         |> Decode.stories\n         |> (\n           stories => {\n             callback((page, stories));\n             resolve();\n           }\n         )\n       )\n    |> ignore\n  ); /* TODO: error handling */\n\nlet fetchStoryWithComments = (id, callback) =>\n  Js.Promise.(\n    Fetch.fetch(storyUrl(id))\n    |> then_(Fetch.Response.json)\n    |> then_(json =>\n         json\n         |> Decode.storyWithComments\n         |> (\n           stories => {\n             callback(stories);\n             resolve();\n           }\n         )\n       )\n    |> ignore\n  ); /* TODO: error handling */\n"
  },
  {
    "path": "examples/with-reason-react/src/StoryListItem.css",
    "content": ".StoryListItem_link {\n  color: black;\n  text-decoration: none;\n}\n\n.StoryListItem_flexRow {\n  display: flex;\n  flex: 1;\n  padding: 8px;\n}\n\n.StoryListItem_icon {\n  width: 32px;\n  height: 32px;\n}\n\n.StoryListItem_storyCell {\n  flex: 1;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: space-around;\n  align-items: stretch;\n}\n\n.StoryListItem_storyTitle {\n  display: flex;\n  flex: 0 0 auto;\n  margin-bottom: 4px;\n  font-size: 18px;\n  font-weight: 700;\n}\n\n.StoryListItem_storyIndex {\n  display: flex;\n  flex: 0 0 auto;\n  font-size: 18px;\n  line-height: 1.2;\n  margin-right: 12px;\n}\n.StoryListItem_storyIndex::after {\n  display: block;\n  content: '.';\n}\n\n.StoryListItem_row {\n  align-items: center;\n  flex-direction: row;\n}\n\n.StoryListItem_itemRow {\n  align-items: stretch;\n  border-bottom: solid 1px #eee;\n  display: flex;\n  margin-top: 6px;\n  margin-bottom: 6px;\n  cursor: default;\n}\n\n.StoryListItem_byline,\n.StoryListItem_commentsText {\n  color: #999999;\n}\n.StoryListItem_byline {\n  font-size: 12px;\n  padding: 0;\n}\n\n.StoryListItem_commentsCell {\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  padding: 8;\n  text-align: center;\n  width: 80px;\n}\n\n.StoryListItem_row .StoryListItem_number {\n  margin-right: 4px;\n  padding-right: 6px;\n  border-right: 1px solid currentColor;\n}\n.StoryListItem_number b {\n  font-weight: 700;\n}\n\n.StoryListItem_commentsText {\n  font-size: 10px;\n  text-align: center;\n}\n.StoryListItem_commentsCell a {\n  text-decoration: none;\n}\na:hover .StoryListItem_commentsText {\n  color: #000;\n}"
  },
  {
    "path": "examples/with-reason-react/src/StoryListItem.re",
    "content": "open Utils;\n\nrequireCSS(\"../../../src/StoryListItem.css\");\n\nlet commentIcon = requireAssetURI(\"../../../src/comment.png\");\n\n[@react.component]\nlet make = (~story: StoryData.story, ~index: int, ()) => {\n  let renderIndex = () =>\n    <aside className=\"StoryListItem_storyIndex\">\n      {React.string(string_of_int(index + 1))}\n    </aside>;\n  let renderTitle = () => {\n    let content = React.string(story.title);\n    <header className=\"StoryListItem_storyTitle\">\n      {switch (story.url) {\n       | Some(url) =>\n         <a href=url className=\"StoryListItem_link\" target=\"_blank\">\n           content\n         </a>\n       | None =>\n         <Link\n           href={\"/comments/\" ++ string_of_int(story.id)}\n           className=\"StoryListItem_link\">\n           content\n         </Link>\n       }}\n    </header>;\n  };\n  let renderByline = () =>\n    <div className=\"StoryListItem_row StoryListItem_byline\">\n      /* TODO: badge */\n\n        <span className=\"StoryListItem_number\">\n          <b> {React.string(string_of_int(story.score))} </b>\n          {React.string(\" points\")}\n        </span>\n        <span className=\"StoryListItem_storyTime\">\n          {let time = story.time\n           let by = story.by\n           React.string({j| submitted $time by $by|j})}\n        </span>\n      </div>;\n  let renderArticleButton = () =>\n    <div className=\"StoryListItem_flexRow\">\n      {renderIndex()}\n      <div className=\"StoryListItem_storyCell\">\n        {renderTitle()}\n        {renderByline()}\n      </div>\n    </div>;\n  let renderCommentsButton = () =>\n    <div className=\"StoryListItem_commentsCell\">\n      <Link\n        href={\"/comments/\" ++ string_of_int(story.id)}\n        className=\"StoryListItem_link\">\n        <div>\n          <img alt=\"comments\" className=\"StoryListItem_icon\" src=commentIcon />\n        </div>\n        <div>\n          <span className=\"StoryListItem_commentsText\">\n            <span className=\"StoryListItem_number\">\n              {React.string(string_of_int(story.descendants))}\n            </span>\n            {React.string(\" comments\")}\n          </span>\n        </div>\n      </Link>\n    </div>;\n      <div className=\"StoryListItem_itemRow\">\n        {renderArticleButton()}\n        {renderCommentsButton()}\n      </div>;\n};\n"
  },
  {
    "path": "examples/with-reason-react/src/TopStoriesPage.re",
    "content": "open Belt;\nopen Utils;\n\ntype state = {\n  topstories: StoryData.topstories,\n  page: int,\n  loading: bool,\n};\n\ntype action =\n  | Loaded((int, StoryData.topstories))\n  | Loading;\n\nlet initialState = {topstories: [||], page: 0, loading: false};\n\n[@react.component]\nlet make = () => {\n  let (state, dispatch) =\n    React.useReducer(\n      (state, action) =>\n        switch (action) {\n        | Loading => {...state, loading: true}\n        | Loaded((page, data)) =>\n          let updatedTopstories = Array.concat(state.topstories, data);\n          {topstories: updatedTopstories, page: page + 1, loading: false};\n        },\n      initialState,\n    );\n  // Using useEffect0 to run this effect one time and prevent multiple reloads of same data which crashes browser\n  React.useEffect0(() => {\n    StoryData.fetchTopStories(state.page, payload =>\n      dispatch(Loaded(payload))\n    )\n    |> ignore;\n    None;\n  });\n\n  React.useEffect(() => {\n    let nearTheBottom = () => distanceFromBottom() < 100;\n    let loadNextPage = () =>\n      if (state.page < 4) {\n        StoryData.fetchTopStories(state.page, payload =>\n          dispatch(Loaded(payload))\n        )\n        |> ignore;\n        dispatch(Loading);\n      };\n    let scrollHander = _e =>\n      if (nearTheBottom() && !state.loading) {\n        loadNextPage();\n      };\n    Webapi.Dom.window\n    |> Webapi.Dom.Window.addEventListener(\"scroll\", scrollHander);\n\n    Some(\n      () =>\n        Webapi.Dom.window\n        |> Webapi.Dom.Window.removeEventListener(\"scroll\", scrollHander),\n    );\n  });\n\n  <div>\n    {if (Array.length(state.topstories) > 0) {\n       state.topstories\n       ->(\n           Array.mapWithIndex((index, story)\n             /* key must be a unique string attached to the story, DO NOT use index. Using just the story.id get error in browser for duplicate keys*/\n             =>\n               <StoryListItem\n                 key={string_of_int(story.id + index)}\n                 index\n                 story\n               />\n             )\n         )\n       ->React.array;\n     } else {\n       ReasonReact.null;\n     }}\n  </div>;\n};\n"
  },
  {
    "path": "examples/with-reason-react/src/Utils.re",
    "content": "/* require css file for side effect only */\n[@bs.val] external requireCSS: string => unit = \"require\";\n\n/* require an asset (eg. an image) and return exported string value (image URI) */\n[@bs.val] external requireAssetURI: string => string = \"require\";\n\n[@bs.val] external currentTime: unit => int = \"Date.now\";\n\n/* format a timestamp in seconds as relative humanised time sentence */\nlet fromNow = unixtime => {\n  let delta = currentTime() / 1000 - unixtime;\n  if (delta < 3600) {\n    string_of_int(delta / 60) ++ \" minutes ago\";\n  } else if (delta < 86400) {\n    string_of_int(delta / 3600) ++ \" hours ago\";\n  } else {\n    string_of_int(delta / 86400) ++ \" days ago\";\n  };\n};\n\n[@bs.send] [@bs.return nullable]\nexternal getAttribute: (Js.t('a), string) => option(string) = \"getAttribute\";\n\nlet dangerousHtml: string => Js.t('a) = html => {\"__html\": html};\n\nlet distanceFromBottom: unit => int =\n  () => {\n    let bodyClientHeight = [%raw \"document.body.clientHeight\"];\n    let windowScrollY = [%raw \"window.scrollY\"];\n    let windowInnerHeight = [%raw \"window.innerHeight\"];\n    bodyClientHeight - (windowScrollY + windowInnerHeight);\n  };\n\n[@bs.module]\nexternal registerServiceWorker: unit => unit = \"src/registerServiceWorker\";\n"
  },
  {
    "path": "examples/with-reason-react/src/client.js",
    "content": "\nimport React from 'react';\nimport { render } from 'react-dom';\n\nimport { make } from 'bs/App'; // BuckleScript output directory\n\nconst App = make;\n\nrender(\n  <App title=\"Welcome to Razzle Reason React\" />,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-reason-react/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-reason-react/src/index.re",
    "content": "open Utils;\n\nregisterServiceWorker();\n\nReactDOMRe.renderToElementWithId(<App />, \"root\");\n\nReasonReact.Router.push(\"\");\n"
  },
  {
    "path": "examples/with-reason-react/src/link.re",
    "content": "let handleClick = (href, event) =>\n  if (!ReactEvent.Mouse.defaultPrevented(event)) {\n    ReactEvent.Mouse.preventDefault(event);\n    ReasonReact.Router.push(href);\n  };\n[@react.component]\nlet make = (~href, ~className=\"\", ~children) =>\n  <a href className onClick={event => handleClick(href, event)}>\n    children\n  </a>;\n"
  },
  {
    "path": "examples/with-reason-react/src/registerServiceWorker.js",
    "content": "// In production, we register a service worker to serve assets from local cache.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on the \"N+1\" visit to a page, since previously\n// cached resources are updated in the background.\n\n// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.\n// This link also includes instructions on opting out of this behavior.\n\nmodule.exports = function register() {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    window.addEventListener('load', function() {\n      var swUrl = process.env.PUBLIC_URL + '/service-worker.js';\n      navigator.serviceWorker\n        .register(swUrl)\n        .then(function(registration) {\n          registration.onupdatefound = function() {\n            var installingWorker = registration.installing;\n            installingWorker.onstatechange = function() {\n              if (installingWorker.state === 'installed') {\n                if (navigator.serviceWorker.controller) {\n                  // At this point, the old content will have been purged and\n                  // the fresh content will have been added to the cache.\n                  // It's the perfect time to display a \"New content is\n                  // available; please refresh.\" message in your web app.\n                  console.log('New content is available; please refresh.');\n                } else {\n                  // At this point, everything has been precached.\n                  // It's the perfect time to display a\n                  // \"Content is cached for offline use.\" message.\n                  console.log('Content is cached for offline use.');\n                }\n              }\n            };\n          };\n        })\n        .catch(function(error) {\n          console.error('Error during service worker registration:', error);\n        });\n    });\n  }\n};\n\nmodule.exports.unregister = function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready.then(function(registration) {\n      registration.unregister();\n    });\n  }\n}\n"
  },
  {
    "path": "examples/with-reason-react/src/server.js",
    "content": "import React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nimport { make } from 'bs/App'; // BuckleScript output directory\n\nconst App = make;\n\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-redux/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-redux/README.md",
    "content": "# Razzle and Redux Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-redux with-redux\n\ncd with-redux\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nAlmost 100% of the code is taken from the [official Redux universal example](https://github.com/reactjs/redux/tree/master/examples/universal).\n"
  },
  {
    "path": "examples/with-redux/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-redux\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"prop-types\": \"^15.7.2\",\n    \"qs\": \"^6.9.3\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-redux\": \"^7.2.0\",\n    \"redux\": \"^4.0.5\",\n    \"redux-thunk\": \"^2.3.0\",\n    \"serialize-javascript\": \"^3.0.0\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-redux/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-redux/src/client/index.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { Provider } from 'react-redux';\nimport configureStore from '../common/store/configureStore';\nimport App from '../common/containers/App';\n\nconst store = configureStore(window.__PRELOADED_STATE__);\n\nhydrate(\n  <Provider store={store}>\n    <App />\n  </Provider>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept('../common/containers/App', () => {\n    hydrate(\n      <Provider store={store}>\n        <App />\n      </Provider>,\n      document.getElementById('root')\n    );\n  });\n}\n"
  },
  {
    "path": "examples/with-redux/src/common/actions/index.js",
    "content": "export const SET_COUNTER = 'SET_COUNTER';\nexport const INCREMENT_COUNTER = 'INCREMENT_COUNTER';\nexport const DECREMENT_COUNTER = 'DECREMENT_COUNTER';\n\nexport const set = value => ({\n  type: SET_COUNTER,\n  payload: value,\n});\n\nexport const increment = () => ({\n  type: INCREMENT_COUNTER,\n});\n\nexport const decrement = () => ({\n  type: DECREMENT_COUNTER,\n});\n\nexport const incrementIfOdd = () => (dispatch, getState) => {\n  const { counter } = getState();\n\n  if (counter % 2 === 0) {\n    return;\n  }\n\n  dispatch(increment());\n};\n\nexport const incrementAsync = (delay = 1000) => dispatch => {\n  setTimeout(() => {\n    dispatch(increment());\n  }, delay);\n};\n"
  },
  {
    "path": "examples/with-redux/src/common/api/counter.js",
    "content": "const getRandomInt = (min, max) =>\n  Math.floor(Math.random() * (max - min)) + min;\n\nexport const fetchCounter = callback => {\n  // Rather than immediately returning, we delay our code with a timeout to simulate asynchronous behavior\n  setTimeout(() => {\n    callback(getRandomInt(1, 100));\n  }, 500);\n\n  // In the case of a real world API call, you'll normally run into a Promise like this:\n  // API.getUser().then(user => callback(user))\n};\n"
  },
  {
    "path": "examples/with-redux/src/common/components/Counter.js",
    "content": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Counter = ({\n  increment,\n  incrementIfOdd,\n  incrementAsync,\n  decrement,\n  counter,\n}) => (\n  <p>\n    Clicked: {counter} times\n    {' '}\n    <button onClick={increment}>+</button>\n    {' '}\n    <button onClick={decrement}>-</button>\n    {' '}\n    <button onClick={incrementIfOdd}>Increment if odd</button>\n    {' '}\n    <button onClick={() => incrementAsync()}>Increment async</button>\n  </p>\n);\n\nCounter.propTypes = {\n  increment: PropTypes.func.isRequired,\n  incrementIfOdd: PropTypes.func.isRequired,\n  incrementAsync: PropTypes.func.isRequired,\n  decrement: PropTypes.func.isRequired,\n  counter: PropTypes.number.isRequired,\n};\n\nexport default Counter;\n"
  },
  {
    "path": "examples/with-redux/src/common/containers/App.js",
    "content": "import { bindActionCreators } from 'redux';\nimport { connect } from 'react-redux';\nimport Counter from '../components/Counter';\nimport * as CounterActions from '../actions';\n\nconst mapStateToProps = state => ({\n  counter: state.counter,\n});\n\nfunction mapDispatchToProps(dispatch) {\n  return bindActionCreators(CounterActions, dispatch);\n}\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);\n"
  },
  {
    "path": "examples/with-redux/src/common/reducers/counter.js",
    "content": "import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions';\n\nconst counter = (state = 0, action) => {\n  switch (action.type) {\n    case SET_COUNTER:\n      return action.payload;\n    case INCREMENT_COUNTER:\n      return state + 1;\n    case DECREMENT_COUNTER:\n      return state - 1;\n    default:\n      return state;\n  }\n};\n\nexport default counter;\n"
  },
  {
    "path": "examples/with-redux/src/common/reducers/index.js",
    "content": "import { combineReducers } from 'redux';\nimport counter from './counter';\n\nconst rootReducer = combineReducers({\n  counter,\n});\n\nexport default rootReducer;\n"
  },
  {
    "path": "examples/with-redux/src/common/store/configureStore.js",
    "content": "import { createStore, applyMiddleware } from 'redux';\nimport thunk from 'redux-thunk';\nimport rootReducer from '../reducers';\n\nconst configureStore = preloadedState => {\n  const store = createStore(\n    rootReducer,\n    preloadedState,\n    applyMiddleware(thunk)\n  );\n\n  if (module.hot) {\n    // Enable Webpack hot module replacement for reducers\n    module.hot.accept('../reducers', () => {\n      const nextRootReducer = require('../reducers').default;\n      store.replaceReducer(nextRootReducer);\n    });\n  }\n\n  return store;\n};\n\nexport default configureStore;\n"
  },
  {
    "path": "examples/with-redux/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-redux/src/server/index.js",
    "content": "import App from '../common/containers/App';\nimport { Provider } from 'react-redux';\nimport React from 'react';\nimport configureStore from '../common/store/configureStore';\nimport express from 'express';\nimport { fetchCounter } from '../common/api/counter';\nimport qs from 'qs';\nimport { renderToString } from 'react-dom/server';\nimport serialize from 'serialize-javascript';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  return new Promise((resolve)=>{\n\n    fetchCounter(apiResult => {\n\n      // Read the counter from the request, if provided\n      const params = qs.parse(req.query);\n      const counter = parseInt(params.counter, 10) || apiResult || 0;\n\n      // Compile an initial state\n      const preloadedState = { counter };\n\n      // Create a new Redux store instance\n      const store = configureStore(preloadedState);\n\n      // Render the component to a string\n      const markup = renderToString(\n        <Provider store={store}>\n          <App />\n        </Provider>\n      );\n\n      // Grab the initial state from our Redux store\n      const finalState = store.getState();\n\n      const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        <script>\n          window.__PRELOADED_STATE__ = ${serialize(finalState)}\n        </script>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    resolve({ html });\n    })\n  })\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', async (req, res) => {\n    const { html } = await renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-scss/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-scss/README.md",
    "content": "# Razzle With SCSS Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-scss with-scss\n\ncd with-scss\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use scss as styling language\nYou can import anything from node_modules or other scss files, like Bootstrap, etc.\n`src/index.js` for the server, `src/client.js` for the browser, and `src/App.scss` for SCSS style.\n"
  },
  {
    "path": "examples/with-scss/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-scss\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"resolutions\": {\n    \"postcss\": \"8.2.4\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-scss\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"postcss\": \"^8.2.4\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-scss/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-scss/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  plugins: ['scss'],\n};\n"
  },
  {
    "path": "examples/with-scss/src/App.js",
    "content": "import \"./App.scss\";\nimport styles from \"./app.module.scss\";\n\nimport React from \"react\";\n\nconst App = () => (\n  <div>\n    <div className={styles.hello}>Welcome to Razzle.</div>\n    <div className=\"info\">Hot reload enabled!!</div>\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-scss/src/App.scss",
    "content": "@import url('https://fonts.googleapis.com/css?family=Open+Sans');\n@import './other';\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: 'Open Sans', sans-serif;\n}"
  },
  {
    "path": "examples/with-scss/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-scss/src/app.module.scss",
    "content": ".hello {\n  font-size: 2rem;\n}\n"
  },
  {
    "path": "examples/with-scss/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-scss/src/index.js",
    "content": "import express from 'express';\nimport app from './server';\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-scss/src/other.scss",
    "content": ".info {\n  color: darkmagenta;\n  font-size: 14;\n}"
  },
  {
    "path": "examples/with-scss/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-scss-options/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-scss-options/README.md",
    "content": "# Razzle With SCSS Options Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-scss-options with-scss-options\n\ncd with-scss-options\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\n\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use scss as styling language\nYou can import anything from node_modules or other scss files, like Bootstrap, etc.\n`src/index.js` for the server, `src/client.js` for the browser, and `src/App.scss` for SCSS style.\n"
  },
  {
    "path": "examples/with-scss-options/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-scss-options\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"resolutions\": {\n    \"postcss\": \"8.2.4\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-scss\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"postcss\": \"^8.2.4\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-scss-options/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-scss-options/razzle.config.js",
    "content": "'use strict';\n\nconst path = require('path');\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'scss',\n      options: {\n        sass: {\n          dev: {\n            additionalData: `@import \"${path.resolve(__dirname, './src/prepend.scss').replace(/\\\\/g, '/')}\";`,\n          },\n          prod: {\n            additionalData: `@import \"${path.resolve(__dirname, './src/prepend.scss').replace(/\\\\/g, '/')}\";`,\n          },\n        },\n      },\n    },\n  ],\n};\n"
  },
  {
    "path": "examples/with-scss-options/src/App.js",
    "content": "import \"./App.scss\";\nimport styles from \"./app.module.scss\";\n\nimport React from \"react\";\n\nconst App = () => (\n  <div>\n    <div className={styles.hello}>Welcome to Razzle.</div>\n    <div className=\"info\">Hot reload enabled!!</div>\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-scss-options/src/App.scss",
    "content": "@import url('https://fonts.googleapis.com/css?family=Open+Sans');\n@import './other';\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: 'Open Sans', sans-serif;\n}"
  },
  {
    "path": "examples/with-scss-options/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-scss-options/src/app.module.scss",
    "content": ".hello {\n  font-size: 2rem;\n}\n"
  },
  {
    "path": "examples/with-scss-options/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-scss-options/src/index.js",
    "content": "import express from 'express';\nimport app from './server';\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-scss-options/src/other.scss",
    "content": ".info {\n  color: darkmagenta;\n  font-size: 14;\n}"
  },
  {
    "path": "examples/with-scss-options/src/prepend.scss",
    "content": ".prepend {\n  content: \"razzle-scss-prepend\";\n}\n"
  },
  {
    "path": "examples/with-scss-options/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-single-exposed-port/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-single-exposed-port/README.md",
    "content": "# Razzle Single Exposed Port Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-single-exposed-port with-single-exposed-port\n\ncd with-single-exposed-port\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\nVisit http://localhost:3001/ in the browser.\n\n## Idea behind the example\nThis example demonstrates how to use a `razzle.config.js` file to modify Razzle's\nunderlying webpack devServer configuration to proxy the devServer to the express server.\nIt modifies the proxy of the devServer in dev (`razzle start`).\n\nNote that this file is not transpiled, and so you must write it with vanilla\nNode.js-compatible JavaScript.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.proxy = {\n        context: () => true,\n        target: 'http://localhost:3000'\n      };\n      config.devServer.index = '';\n    }\n\n    return config;\n  },\n};\n```\n\nA bit more complex on a subpath behind a reverse nginx proxy:\n\n\n```js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n\n    if (target === 'web' && dev) {\n      config.devServer.public = 'localhost:8080' // or 80 or 443\n      config.devServer.proxy = {\n        context: () => true,\n        target: 'http://localhost:3000'\n      };\n      config.devServer.sockPath = '/razzle-dev/sockjs-node';\n    }\n\n    return config;\n  },\n};\n```\n\n```bash\nCLIENT_PUBLIC_PATH=http://localhost:8080/razzle-dev/ yarn start\n```\n\n```nginxconf\nhttp {\n\n    server {\n        listen       8080; # or 80 or 443\n        server_name  _;\n        location /razzle-dev { # no /, no regex\n            return 302 /razzle-dev/; # a /\n        }\n        location /razzle-dev/ { # no regex\n            proxy_pass   http://127.0.0.1:3001/; # a /\n            proxy_http_version 1.1;\n            proxy_set_header Upgrade \\$http_upgrade;\n            proxy_set_header Connection \"upgrade\";\n        }\n        location /razzle-dev/sockjs-node/ { # no regex\n            proxy_pass   http://127.0.0.1:3001; # no /\n            proxy_http_version 1.1;\n            proxy_set_header Upgrade \\$http_upgrade;\n            proxy_set_header Connection \"upgrade\";\n        }\n    }\n}\n```\n"
  },
  {
    "path": "examples/with-single-exposed-port/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-single-exposed-port\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start --verbose\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-single-exposed-port/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-single-exposed-port/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    if (opts.env.target === 'web' && opts.env.dev) {\n      config.devServer.proxy = {\n        context: () => true,\n        target: 'http://localhost:3000'\n      };\n      config.devServer.index = '';\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-single-exposed-port/src/App.js",
    "content": "import React from 'react';\n\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-single-exposed-port/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-single-exposed-port/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-single-exposed-port/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-styled-components/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-styled-components/README.md",
    "content": "# Razzle with-styled-components Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-styled-components with-styled-components\n\ncd with-styled-components\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is a basic, bare-bones example that shows a very minimal implementation\nof [StyledComponents](https://github.com/styled-components/styled-components).\nIt satisfies the entry points `src/index.js` for the server and`src/client.js`\nfor the browser.\nThere are comments in `src/server.js` to show how the styles are gathered and\nrendered into to the DOM\n"
  },
  {
    "path": "examples/with-styled-components/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-styled-components\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-is\": \"^17.0.1\",\n    \"styled-components\": \"^5.1.0\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-styled-components/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-styled-components/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-styled-components/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nimport styled from 'styled-components';\n\nconst Button = styled.button`\n  border-radius: 3px;\n  padding: 0.25em 1em;\n  margin: 0 1em;\n  background: transparent;\n  color: palevioletred;\n  border: 2px solid palevioletred;\n`;\n\nconst App = () => (\n  <div>\n    Welcome to Razzle. <Button>StyledComponent button</Button>\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-styled-components/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-styled-components/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-styled-components/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-styled-components/src/server.js",
    "content": "import App from \"./App\";\nimport React from \"react\";\nimport express from \"express\";\nimport { renderToString } from \"react-dom/server\";\n// Import the StyledComponents SSR util\nimport { ServerStyleSheet } from \"styled-components\";\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  // Create the server side style sheet\n  const sheet = new ServerStyleSheet();\n  // When the app is rendered collect the styles that are used inside it\n  const markup = renderToString(sheet.collectStyles(<App />));\n  // Generate all the style tags so they can be rendered into the page\n  const styleTags = sheet.getStyleTags();\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n      <!-- Render the style tags gathered from the components into the DOM -->\n      ${styleTags}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-svelte/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-svelte/README.md",
    "content": "# Razzle Example With Svelte - Incomplete, needs some love\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-svelte with-svelte\n\ncd with-svelte\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/with-svelte/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-svelte\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle-plugin-svelte\": \"4.2.15\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-svelte/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-svelte/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  plugins: ['svelte'],\n};\n"
  },
  {
    "path": "examples/with-svelte/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-svelte/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-svelte/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-svelte/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-svelte/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-svelte/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-svelte/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-tailwindcss/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-tailwindcss/README.md",
    "content": "# Razzle With Tailwindcss Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-tailwindcss with-tailwindcss\n\ncd with-tailwindcss\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/with-tailwindcss/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-tailwindcss\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"resolutions\": {\n    \"postcss\": \"8.2.4\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\",\n    \"postcss\": \"^8.2.4\",\n    \"autoprefixer\": \"^10.2.3\",\n    \"tailwindcss\": \"^2.0.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-tailwindcss/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-tailwindcss/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackOptions(opts) {\n    const options = opts.options.webpackOptions;\n    options.postCssOptions.plugins.unshift(require(\"tailwindcss\"));\n    return options;\n  }\n}\n"
  },
  {
    "path": "examples/with-tailwindcss/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-tailwindcss/src/App.css",
    "content": "import \"tailwindcss/tailwind.css\"\n"
  },
  {
    "path": "examples/with-tailwindcss/src/App.js",
    "content": "import React from 'react';\nimport 'tailwindcss/tailwind.css';\n\nimport logo from './logo.png';\n\nfunction App() {\n  return (\n    <div className=\"h-screen flex justify-center items-center\">\n    <div className=\"max-w-sm rounded overflow-hidden shadow-lg p-4\">\n      <img className=\"w-full\" src={logo} alt=\"Sunset in the mountains\" />\n      <div className=\"px-6 py-4\">\n        <div className=\"font-bold text-xl mb-2\"> React-Tailwind </div>\n        <p className=\"text-gray-700 text-base\">\n          A React Starter with Tailwind CSS\n        </p>\n      </div>\n      <div className=\"px-6 py-4\">\n        {[\"React\", \"Tailwind\"].map(tag =>\n              <span\n                key={tag}\n                className=\"inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mt-2\">\n                {\"#\" + tag }\n              </span>\n        )}\n      </div>\n    </div>\n  </div>\n  );\n}\n\nexport default App;\n"
  },
  {
    "path": "examples/with-tailwindcss/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-tailwindcss/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-tailwindcss/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-tailwindcss/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-typeorm-graphql/.babelrc",
    "content": "{\n  \"plugins\": [\n    \"babel-plugin-transform-typescript-metadata\",\n    [\"@babel/plugin-proposal-decorators\", { \"legacy\": true }],\n    [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }],\n    \"babel-plugin-parameter-decorator\"\n  ],\n  \"presets\": [\n    [\n      \"razzle/babel\",\n      {\n        \"preset-env\": {},\n        \"preset-react\": { \"runtime\" : \"automatic\" },\n        \"transform-runtime\": {},\n        \"class-properties\": false\n      }\n    ]\n  ]\n}\n"
  },
  {
    "path": "examples/with-typeorm-graphql/.eslintrc.js",
    "content": "module.exports =\n{\n  \"env\": {\n    \"node\": true,\n    \"browser\": true,\n    \"es6\": true\n  },\n  \"globals\": {\n    \"Atomics\": \"readonly\",\n    \"SharedArrayBuffer\": \"readonly\"\n  },\n  \"parser\": \"@typescript-eslint/parser\",\n  \"parserOptions\": {\n    \"ecmaFeatures\": {\n      \"jsx\": true\n    },\n    \"ecmaVersion\": 2018,\n    \"sourceType\": \"module\"\n  },\n  \"plugins\": [\"react\", \"@typescript-eslint\", \"prettier\"],\n  \"extends\": [\n    \"plugin:react/recommended\",\n    \"airbnb\",\n    \"plugin:prettier/recommended\",\n    \"no-use-before-define\": \"off\",\n    \"@typescript-eslint/no-use-before-define\": [\"error\"],\n    \"plugin:@typescript-eslint/eslint-recommended\",\n    \"plugin:@typescript-eslint/recommended\"\n  ],\n  \"rules\": {\n    \"import/extensions\": [\n      \"error\",\n      \"ignorePackages\",\n      {\n        \"js\": \"never\",\n        \"jsx\": \"never\",\n        \"ts\": \"never\",\n        \"tsx\": \"never\"\n      }\n    ],\n    \"prettier/prettier\": \"error\",\n    \"@typescript-eslint/explicit-function-return-type\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": \"off\",\n    \"react/jsx-filename-extension\": [\n      1,\n      { \"extensions\": [\".js\", \".jsx\", \".ts\", \".tsx\"] }\n    ]\n  },\n  \"settings\": {\n    \"import/resolver\": {\n      \"node\": {\n        \"extensions\": [\".js\", \".jsx\", \".ts\", \".tsx\"]\n      }\n    }\n  }\n};\n"
  },
  {
    "path": "examples/with-typeorm-graphql/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-typeorm-graphql/.prettierrc",
    "content": "{\n  \"singleQuote\": true\n}\n"
  },
  {
    "path": "examples/with-typeorm-graphql/README.md",
    "content": "# Razzle TypeScript Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-typeorm-graphql with-typeorm-graphql\n\ncd with-typeorm-graphql\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).\n\nBasic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.\n\nRazzle knows how to resolve `.ts` and `.tsx` files out of the box.\n"
  },
  {
    "path": "examples/with-typeorm-graphql/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-typeorm-graphql\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start:tsc\": \"tsc -b -w --preserveWatchOutput\",\n    \"start\": \"concurrently \\\"yarn start:tsc\\\" \\\"razzle start\\\"\",\n    \"build\": \"tsc -b && razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js --config ormconfig.json\"\n  },\n  \"dependencies\": {\n    \"apollo-server-express\": \"^2.19.2\",\n    \"express\": \"^4.17.1\",\n    \"graphql\": \"^15.5.0\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\",\n    \"reflect-metadata\": \"^0.1.13\",\n    \"type-graphql\": \"^1.1.1\",\n    \"typeorm\": \"^0.2.30\"\n  },\n  \"peerDependencies\": {\n    \"@babel/core\": \"^7.0.0-0\"\n  },\n  \"devDependencies\": {\n    \"concurrently\": \"^5.3.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"@babel/cli\": \"^7.12.13\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.12.13\",\n    \"@babel/plugin-proposal-decorators\": \"^7.12.13\",\n    \"@babel/plugin-transform-typescript\": \"^7.12.1\",\n    \"@babel/preset-typescript\": \"^7.12.13\",\n    \"@testing-library/dom\": \"^7.29.4\",\n    \"@testing-library/jest-dom\": \"^5.5.0\",\n    \"@testing-library/react\": \"^10.0.3\",\n    \"@testing-library/user-event\": \"^10.1.0\",\n    \"@types/express\": \"^4.17.7\",\n    \"@types/jest\": \"^25.2.1\",\n    \"@types/node\": \"^13.13.2\",\n    \"@types/react\": \"^16.9.34\",\n    \"@types/react-dom\": \"^16.9.6\",\n    \"@types/react-router-dom\": \"^5.1.4\",\n    \"@types/webpack-env\": \"^1.15.2\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.14.1\",\n    \"@typescript-eslint/parser\": \"^4.14.1\",\n    \"babel-plugin-parameter-decorator\": \"^1.0.16\",\n    \"babel-plugin-transform-typescript-metadata\": \"^0.3.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-config-airbnb\": \"^18.2.1\",\n    \"eslint-config-prettier\": \"^7.2.0\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-node\": \"^11.1.0\",\n    \"eslint-plugin-prettier\": \"^3.3.1\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"prettier\": \"^2.2.1\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"renamer\": \"^2.0.1\",\n    \"sqlite3\": \"^5.0.1\",\n    \"typescript\": \"^4.0.3\",\n    \"html-webpack-plugin\": \"^5.2.0\",\n    \"webpack\": \"^5.24.0\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n  \"razzle_meta\": {\n    \"yarnStartDelay\": 5000,\n    \"forceWebpack\": true\n  }\n}\n"
  },
  {
    "path": "examples/with-typeorm-graphql/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-typeorm-graphql/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  options: {\n    // verbose: true,\n    enableSourceMaps: false\n  },\n  modifyWebpackConfig({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackConfig, // the created webpack config\n    webpackObject, // the imported webpack node module\n    options: {\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    if (target === 'node') {\n      if (!dev) {\n        webpackConfig.optimization.minimize = false;\n      }\n    }\n    return webpackConfig;\n  },\n  modifyWebpackOptions({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackObject, // the imported webpack node module\n    options: {\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n\n    return webpackOptions;\n  },\n  //plugins: [{name:'typescript'}]\n};\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}"
  },
  {
    "path": "examples/with-typeorm-graphql/src/App.test.tsx",
    "content": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport { MemoryRouter } from 'react-router-dom';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  const { getByText } = render(\n    <MemoryRouter>\n      <App />\n    </MemoryRouter>\n  );\n  const linkElement = getByText(/welcome to razzles/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/App.tsx",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nimport './App.css';\n\nconst App: React.FC = () => (\n  <Switch>\n    <Route exact path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  animation: Home-logo-spin infinite 20s linear;\n  height: 80px;\n}\n\n.Home-header {\n  background-color: #222;\n  height: 150px;\n  padding: 20px;\n  color: white;\n}\n\n.Home-intro {\n  font-size: large;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n@keyframes Home-logo-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}"
  },
  {
    "path": "examples/with-typeorm-graphql/src/Home.tsx",
    "content": "import * as React from 'react';\nimport logo from './react.svg';\n\nimport './Home.css';\n\nconst Home: React.FC = () => {\n  return (\n    <div className=\"Home\">\n      <div className=\"Home-header\">\n        <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n        <h2>Welcome to Razzle</h2>\n      </div>\n      <p className=\"Home-intro\">\n        To get started, edit\n        <code>src/App.tsx</code>\n        or\n        <code>src/Home.tsx</code>\n        and save to reload.\n      </p>\n      <ul className=\"Home-resources\">\n        <li>\n          <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n        </li>\n        <li>\n          <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n        </li>\n        <li>\n          <a href=\"https://palmer.chat\">Community Slack</a>\n        </li>\n      </ul>\n    </div>\n  );\n};\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/client.tsx",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport App from './App';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/database/init_db.ts",
    "content": "\nimport { Abilities, Pokemon, PokemonAbilities, Types } from '../models';\n\nexport const init_db = async(connection) => {\n  await connection.dropDatabase();\n  await connection.synchronize();\n\n  // Types\n  const electric = new Types();\n  electric.name = 'Electric';\n  await electric.save();\n\n  const fire = new Types();\n  fire.name = 'Fire';\n  await fire.save();\n\n  const water = new Types();\n  water.name = 'Water';\n  await water.save();\n\n  const grass = new Types();\n  grass.name = 'Grass';\n  await grass.save();\n\n  // Abilities\n  const razorLeaf = new Abilities();\n  razorLeaf.name = 'Razor Leaf';\n  await razorLeaf.save();\n\n  const flameCharge = new Abilities();\n  flameCharge.name = 'Flame Charge';\n  await flameCharge.save();\n\n  const flareBlitz = new Abilities();\n  flareBlitz.name = 'Flare Blitz';\n  await flareBlitz.save();\n\n  const soak = new Abilities();\n  soak.name = 'Soak';\n  await soak.save();\n\n  const electrify = new Abilities();\n  electrify.name = 'Electrify';\n  await electrify.save();\n\n  const spark = new Abilities();\n  spark.name = 'Spark';\n  await spark.save();\n\n\n  // Pokémon\n  const pikachu = new Pokemon(electric);\n  pikachu.name = 'Pikachu';\n  await pikachu.save();\n\n  const boltund = new Pokemon(electric);\n  boltund.name = 'Boltund';\n  await boltund.save();\n\n  const octillery = new Pokemon(water);\n  octillery.name = 'Octillery';\n  await octillery.save();\n\n  const ponyta = new Pokemon(fire);\n  ponyta.name = 'Ponyta';\n  await ponyta.save();\n\n  const raboot = new Pokemon(fire);\n  raboot.name = 'Raboot';\n  await raboot.save();\n\n  const grookey = new Pokemon(grass);\n  grookey.name = 'Grookey';\n  await grookey.save();\n\n  // Pokemon-Abilities\n  const grookeyRazorLeaf = new PokemonAbilities(grookey, razorLeaf);\n  await grookeyRazorLeaf.save();\n\n  const ponytaFlameCharge = new PokemonAbilities(ponyta, flameCharge);\n  await ponytaFlameCharge.save();\n\n  const rabootFlameCharge = new PokemonAbilities(raboot, flameCharge);\n  await rabootFlameCharge.save();\n\n  const ponytaFlareBlitz = new PokemonAbilities(ponyta, flareBlitz);\n  await ponytaFlareBlitz.save();\n\n  const octillerySoak = new PokemonAbilities(octillery, soak);\n  await octillerySoak.save();\n\n  const boltundElectrify = new PokemonAbilities(boltund, electrify);\n  await boltundElectrify.save();\n\n  const boltundSpark = new PokemonAbilities(boltund, spark);\n  await boltundSpark.save();\n\n  const pikachuSpark = new PokemonAbilities(pikachu, spark);\n  await pikachuSpark.save();\n};\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/declarations.d.ts",
    "content": "// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules\n\ndeclare module '*.svg' {\n  const src: string;\n  export default src;\n}\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/index.ts",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;\n\nexport default app.then(theapp=>{\n  express()\n  .use((req, res) => theapp.handle(req, res))\n  .listen(port, () => {\n    console.log(`> App started http://localhost:${port}`)\n    console.log(`> Graphql at http://localhost:${port}/graphql`)\n  });\n});\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/models/Abilities.ts",
    "content": "import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from 'typeorm';\nimport { Field, ID, ObjectType } from 'type-graphql';\n\n@Entity()\n@ObjectType()\nclass Abilities extends BaseEntity {\n\n  @Field(() => ID)\n  @PrimaryGeneratedColumn()\n  id: number | null = null;\n\n  @Field(() => String)\n  @Column()\n  name: string = '';\n}\n\nexport { Abilities };\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/models/Pokemon.ts",
    "content": "import {\n  BaseEntity,\n  Column,\n  Entity,\n  ManyToOne,\n  PrimaryGeneratedColumn,\n} from 'typeorm';\nimport { Types } from './Types';\nimport { Field, ID, ObjectType } from 'type-graphql';\n\n@Entity()\n@ObjectType()\nclass Pokemon extends BaseEntity {\n\n  @Field(() => ID)\n  @PrimaryGeneratedColumn()\n  id: number | null = null;\n\n  @Field(() => String)\n  @Column()\n  name: string = '';\n\n  @Field(() => Types)\n  @ManyToOne('Types', 'types',\n    { eager: true },\n  )\n  type!: Types;\n\n  constructor(type: Types) {\n    super();\n    this.type = type;\n  }\n}\n\nexport { Pokemon };\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/models/PokemonAbilities.ts",
    "content": "import { BaseEntity, Entity, Index, ManyToOne } from 'typeorm';\nimport { Field, ID, ObjectType } from 'type-graphql';\nimport { Abilities } from './Abilities';\nimport { Pokemon } from './Pokemon';\n\n@Entity()\n@Index([ 'pokemon', 'ability' ], { unique: true })\n@ObjectType()\nclass PokemonAbilities extends BaseEntity {\n  \n  @Field(() => Pokemon)\n  @ManyToOne('Pokemon', 'pokemon',\n    {\n      primary: true,\n      eager: true,\n    },\n  )\n  pokemon: Pokemon;\n\n  @Field(() => Abilities)\n  @ManyToOne('Abilities', 'abilities',\n    {\n      primary: true,\n      eager: true,\n    },\n  )\n  ability: Abilities;\n\n  constructor(pokemon: Pokemon, ability: Abilities) {\n    super();\n    this.pokemon = pokemon;\n    this.ability = ability;\n  }\n}\n\nexport { PokemonAbilities };\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/models/Types.ts",
    "content": "import { BaseEntity, Column, Entity, OneToMany, PrimaryGeneratedColumn } from 'typeorm';\nimport { Field, ID, ObjectType } from 'type-graphql';\n\n@Entity()\n@ObjectType()\nclass Types extends BaseEntity {\n\n  @Field(() => ID)\n  @PrimaryGeneratedColumn()\n  id: number | null = null;\n\n  @Field(() => String)\n  @Column()\n  name: string = '';\n}\n\nexport { Types };\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/models/index.ts",
    "content": "export * from './Abilities';\nexport * from './Pokemon';\nexport * from './PokemonAbilities';\nexport * from './Types';\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/schema/Resolvers.ts",
    "content": "import { Query, Resolver, Arg, Mutation, createUnionType } from 'type-graphql';\nimport { Abilities, Pokemon, PokemonAbilities, Types } from '../models';\n\nconst PokemonAbilitiesUnion = createUnionType({\n  name: 'PokemonAbilitiesUnion',\n  types: () => [ Pokemon, PokemonAbilities ] as const,\n});\n\n@Resolver()\nclass Resolvers {\n  @Query(() => [ Types ])\n  async allTypes(): Promise<Types[]> {\n    return await Types.find();\n  }\n\n  @Query(() => [ Abilities ])\n  async allAbilities(): Promise<Abilities[]> {\n    return await Abilities.find();\n  }\n\n  @Query(() => [ Pokemon ])\n  async allPokemon(): Promise<Pokemon[]> {\n    return await Pokemon.find();\n  }\n\n  @Query(() => [ PokemonAbilities ])\n  async allPokemonAbilities(): Promise<PokemonAbilities[]> {\n    return await PokemonAbilities.find();\n  }\n\n  @Query(() => Pokemon)\n  async getPokemonPerName(@Arg('name') name: string): Promise<Pokemon | undefined> {\n    return await Pokemon.findOne({ where: { name } });\n  }\n\n  @Query(() => [ PokemonAbilitiesUnion ])\n  async getPokemonAbilities(@Arg('name') name: string): Promise<Array<typeof PokemonAbilitiesUnion>> {\n    const pokemon: Pokemon = await Pokemon.findOne({ where: { name } });\n    const pokemonAbilities = await PokemonAbilities.find({ where: { pokemon } });\n\n    return [ pokemon, ...pokemonAbilities ];\n  }\n\n  @Mutation(() => Pokemon)\n  async createPokemon(@Arg('name') name: string): Promise<Pokemon> {\n    const pokemon = Pokemon.create({ name });\n    await pokemon.save();\n\n    return pokemon;\n  }\n}\nexport { Resolvers };\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/schema/index.ts",
    "content": "export * from './Resolvers';\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/server.tsx",
    "content": "import 'reflect-metadata';\nimport { ApolloServer } from 'apollo-server-express';\nimport express from 'express';\nimport path from 'path';\nimport { createConnection } from 'typeorm';\nimport { buildSchema } from 'type-graphql';\nimport { init_db } from './database/init_db';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { StaticRouter } from 'react-router-dom';\nimport { Abilities, Pokemon, PokemonAbilities, Types } from './models';\nimport { Resolvers } from './schema';\nimport App from './App';\n\nlet assets: any;\n\nconst syncLoadAssets = () => {\n  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);\n};\nsyncLoadAssets();\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req: express.Request, res: express.Response) => {\n  const context: any = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    return { html };\n  }\n};\n\nconst createserver = async() => {\n  const connection = await createConnection({\n    type: \"sqlite\",\n    database: path.join(process.cwd(), 'db.sqlite3'),\n    synchronize: true,\n    entities: [Abilities, Pokemon, PokemonAbilities, Types]\n  });\n  await init_db(connection);\n  console.log('Database created.');\n\n  const schema = await buildSchema({\n    resolvers: [ Resolvers ],\n  });\n\n  const apolloServer = new ApolloServer({ schema });\n  let server: express.Application = express()\n    .disable('x-powered-by')\n  apolloServer.applyMiddleware({ app: server});\n\n  server = server\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))\n  .get('/*', (req: express.Request, res: express.Response) => {\n    const { html = '', redirect = false } = renderApp(req, res);\n    if (redirect) {\n      res.redirect(redirect);\n    } else {\n      res.send(html);\n    }\n  });\n  return server;\n};\n\nexport default createserver();\n"
  },
  {
    "path": "examples/with-typeorm-graphql/src/setupTests.ts",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n"
  },
  {
    "path": "examples/with-typeorm-graphql/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"module\": \"commonjs\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": false,\n    \"experimentalDecorators\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react\"\n  },\n  \"include\": [\"src\"]\n}\n"
  },
  {
    "path": "examples/with-typescript/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\ncache\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n"
  },
  {
    "path": "examples/with-typescript/README.md",
    "content": "# Razzle TypeScript Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-typescript with-typescript\n\ncd with-typescript\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).\n\nBasic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.\n\nRazzle knows how to resolve `.ts` and `.tsx` files out of the box.\n"
  },
  {
    "path": "examples/with-typescript/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-typescript\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start:tsc\": \"tsc -b -w --preserveWatchOutput\",\n    \"start\": \"concurrently \\\"yarn start:tsc\\\" \\\"razzle start\\\"\",\n    \"build\": \"tsc -b && razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.1.2\"\n  },\n  \"devDependencies\": {\n    \"concurrently\": \"^5.3.0\",\n    \"cross-env\": \"^7.0.3\",\n    \"@testing-library/dom\": \"^7.29.4\",\n    \"@testing-library/jest-dom\": \"^5.5.0\",\n    \"@testing-library/react\": \"^10.0.3\",\n    \"@testing-library/user-event\": \"^10.1.0\",\n    \"@types/express\": \"^4.17.6\",\n    \"@types/jest\": \"^25.2.1\",\n    \"@types/node\": \"^13.13.2\",\n    \"@types/react\": \"^16.9.34\",\n    \"@types/react-dom\": \"^16.9.6\",\n    \"@types/react-router-dom\": \"^5.1.4\",\n    \"@types/webpack-env\": \"^1.15.2\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"typescript\": \"^4.0.3\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-typescript/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-typescript/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}"
  },
  {
    "path": "examples/with-typescript/src/App.test.tsx",
    "content": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport { MemoryRouter } from 'react-router-dom';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  const { getByText } = render(\n    <MemoryRouter>\n      <App />\n    </MemoryRouter>\n  );\n  const linkElement = getByText(/welcome to razzles/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "examples/with-typescript/src/App.tsx",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nimport './App.css';\n\nconst App = () => (\n  <Switch>\n    <Route exact={true} path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-typescript/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  animation: Home-logo-spin infinite 20s linear;\n  height: 80px;\n}\n\n.Home-header {\n  background-color: #222;\n  height: 150px;\n  padding: 20px;\n  color: white;\n}\n\n.Home-intro {\n  font-size: large;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n@keyframes Home-logo-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}"
  },
  {
    "path": "examples/with-typescript/src/Home.tsx",
    "content": "import React from 'react';\nimport logo from './react.svg';\n\nimport './Home.css';\n\nclass Home extends React.Component<{}, {}> {\n  public render() {\n    return (\n      <div className=\"Home\">\n        <div className=\"Home-header\">\n          <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n          <h2>Welcome to Razzle</h2>\n        </div>\n        <p className=\"Home-intro\">\n          To get started, edit <code>src/App.tsx</code> or{' '}\n          <code>src/Home.tsx</code> and save to reload.\n        </p>\n        <ul className=\"Home-resources\">\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n          </li>\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n          </li>\n          <li>\n            <a href=\"https://palmer.chat\">Community Slack</a>\n          </li>\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-typescript/src/client.tsx",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport App from './App';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-typescript/src/declarations.d.ts",
    "content": "// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules\n\ndeclare module '*.svg' {\n  const src: string;\n  export default src;\n}\n"
  },
  {
    "path": "examples/with-typescript/src/index.ts",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, () => {\n    console.log(`> App started http://localhost:${port}`)\n  });\n"
  },
  {
    "path": "examples/with-typescript/src/server.tsx",
    "content": "import express from 'express';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { StaticRouterContext } from \"react-router\";\nimport { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\n\nlet assets: any;\n\nconst syncLoadAssets = () => {\n  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);\n};\nsyncLoadAssets();\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req: express.Request, res: express.Response) => {\n  const context: StaticRouterContext = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    return { html };\n  }\n};\n\nconst server = express()\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))\n  .get('/*', (req: express.Request, res: express.Response) => {\n    const { html = '', redirect = false } = renderApp(req, res);\n    if (redirect) {\n      res.redirect(redirect);\n    } else {\n      res.send(html);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-typescript/src/setupTests.ts",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n"
  },
  {
    "path": "examples/with-typescript/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"target\": \"esnext\",\n    \"module\": \"commonjs\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"esModuleInterop\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"strict\": false,\n    \"forceConsistentCasingInFileNames\": true,\n    \"moduleResolution\": \"node\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"noEmit\": true,\n    \"jsx\": \"react\"\n  },\n  \"include\": [\"src\"]\n}\n"
  },
  {
    "path": "examples/with-typescript-plugin/.eslintrc.js",
    "content": "module.exports = {\n  env: {\n    node: true,\n    browser: true,\n    es6: true,\n  },\n  globals: {\n    Atomics: \"readonly\",\n    SharedArrayBuffer: \"readonly\",\n  },\n  parser: \"@typescript-eslint/parser\",\n  parserOptions: {\n    ecmaFeatures: {\n      jsx: true,\n    },\n    ecmaVersion: 2018,\n    sourceType: \"module\",\n  },\n  plugins: [\"react\", \"@typescript-eslint\", \"prettier\"],\n  extends: [\n    \"plugin:react/recommended\",\n    \"airbnb\",\n    \"plugin:prettier/recommended\",\n    \"plugin:@typescript-eslint/eslint-recommended\",\n    \"plugin:@typescript-eslint/recommended\",\n  ],\n  rules: {\n    \"import/extensions\": [\n      \"error\",\n      \"ignorePackages\",\n      {\n        js: \"never\",\n        jsx: \"never\",\n        ts: \"never\",\n        tsx: \"never\",\n      },\n    ],\n    \"prettier/prettier\": \"error\",\n    \"no-use-before-define\": \"off\",\n    \"@typescript-eslint/no-use-before-define\": [\"error\"],\n    \"@typescript-eslint/explicit-function-return-type\": \"off\",\n    \"@typescript-eslint/no-unused-vars\": \"off\",\n    \"react/jsx-filename-extension\": [\n      1,\n      { extensions: [\".js\", \".jsx\", \".ts\", \".tsx\"] },\n    ],\n  },\n  settings: {\n    \"import/resolver\": {\n      node: {\n        extensions: [\".js\", \".jsx\", \".ts\", \".tsx\"],\n      },\n    },\n  },\n};\n"
  },
  {
    "path": "examples/with-typescript-plugin/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-typescript-plugin/README.md",
    "content": "# Razzle TypeScript Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-typescript-plugin with-typescript-plugin\n\ncd with-typescript-plugin\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).\nIn `razzle.config.js`, we locate the part of the webpack configuration\nthat is running `babel-loader` and swap it out for `ts-loader`.\nAdditionally, we make sure Razzle knows how to resolve `.ts` and `.tsx` files.\n\nLastly, we also need to modify our Jest configuration to handle typescript files.\nThus we add `ts-jest` and `@types/jest` to our dev dependencies. Then we augment Razzle's default jest setup by adding a field in our `package.json`.\n\n```json\n// package.json\n\n{\n  ...\n  \"jest\": {\n    \"transform\": {\n      \"\\\\.(ts|tsx)$\": \"<rootDir>/node_modules/ts-jest/preprocessor.js\",\n      \"\\\\.css$\": \"<rootDir>/node_modules/razzle/config/jest/cssTransform.js\",\n      \"^(?!.*\\\\.(js|jsx|css|json)$)\": \"<rootDir>/node_modules/razzle/config/jest/fileTransform.js\"\n    },\n    \"testMatch\": [\n      \"<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)\",\n      \"<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)\"\n    ],\n    \"moduleFileExtensions\": [\n      \"ts\",\n      \"tsx\",\n      \"js\",\n      \"json\"\n    ],\n    \"collectCoverageFrom\": [\n      \"src/**/*.{js,jsx,ts,tsx}\"\n    ]\n  }\n}\n```\n\nThe `tslint.json` and `tsconfig.json` are taken from Microsoft's official\n[TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter).\n\nNote: You do not techincally _need_ to fully replace `babel-loader` with\n`ts-loader` to use TypeScript. Both TS and Babel transpile ES6 code,\nso when you run both webpack loaders you are making Razzle do twice the work. From our testing,\nthis can make HMR extremely slow on larger apps. Thus, this example overwrites\n`babel-loader` with `ts-loader`. However, if you are incrementally moving to typescript you may want to run both loaders side by side. If you are running both, add this to your `jest.transform` setup in `package.json`:\n\n```\n\"^.+\\\\.(js|jsx)$\": \"<rootDir>/node_modules/razzle/config/jest/babelTransform.js\",\n```\nThis will continue to transform .js files through babel.\n"
  },
  {
    "path": "examples/with-typescript-plugin/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-typescript\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.0.1\"\n  },\n  \"devDependencies\": {\n    \"@types/express\": \"^4.17.0\",\n    \"@types/jest\": \"^26.0.20\",\n    \"@types/node\": \"^14.14.22\",\n    \"@types/react\": \"^17.0.0\",\n    \"@types/react-dom\": \"^17.0.0\",\n    \"@types/react-router-dom\": \"^5.1.7\",\n    \"@types/webpack-env\": \"^1.14.0\",\n    \"@typescript-eslint/eslint-plugin\": \"^4.14.1\",\n    \"@typescript-eslint/parser\": \"^4.14.1\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-config-airbnb\": \"^18.2.1\",\n    \"eslint-config-prettier\": \"^7.2.0\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-node\": \"^11.1.0\",\n    \"eslint-plugin-prettier\": \"^3.3.1\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"prettier\": \"^2.2.1\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-typescript\": \"4.2.15\",\n    \"ts-jest\": \"^26.5.0\",\n    \"typescript\": \"^4.1.3\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  },\n  \"jest\": {\n    \"transform\": {\n      \"\\\\.(ts|tsx)$\": \"ts-jest\",\n      \"\\\\.css$\": \"<rootDir>/node_modules/razzle/config/jest/cssTransform.js\",\n      \"^(?!.*\\\\.(js|jsx|css|json)$)\": \"<rootDir>/node_modules/razzle/config/jest/fileTransform.js\"\n    },\n    \"testMatch\": [\n      \"<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)\",\n      \"<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)\"\n    ],\n    \"moduleFileExtensions\": [\n      \"ts\",\n      \"tsx\",\n      \"js\",\n      \"json\"\n    ],\n    \"collectCoverageFrom\": [\n      \"src/**/*.{js,jsx,ts,tsx}\"\n    ]\n  }\n}\n"
  },
  {
    "path": "examples/with-typescript-plugin/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-typescript-plugin/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  plugins: ['typescript'],\n};\n"
  },
  {
    "path": "examples/with-typescript-plugin/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}"
  },
  {
    "path": "examples/with-typescript-plugin/src/App.test.tsx",
    "content": "import React from 'react';\nimport { render } from 'react-dom';\n\nimport App from './App';\n\nimport { MemoryRouter } from 'react-router-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    render(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>,\n      div\n    );\n  });\n});\n"
  },
  {
    "path": "examples/with-typescript-plugin/src/App.tsx",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\n\nimport './App.css';\n\nconst App = () => (\n  <Switch>\n    <Route exact={true} path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-typescript-plugin/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  animation: Home-logo-spin infinite 20s linear;\n  height: 80px;\n}\n\n.Home-header {\n  background-color: #222;\n  height: 150px;\n  padding: 20px;\n  color: white;\n}\n\n.Home-intro {\n  font-size: large;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n@keyframes Home-logo-spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}"
  },
  {
    "path": "examples/with-typescript-plugin/src/Home.tsx",
    "content": "import React from 'react';\nimport logo from './react.svg';\n\nimport './Home.css';\n\nclass Home extends React.Component<{}, {}> {\n  public render() {\n    return (\n      <div className=\"Home\">\n        <div className=\"Home-header\">\n          <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n          <h2>Welcome to Razzle</h2>\n        </div>\n        <p className=\"Home-intro\">\n          To get started, edit <code>src/App.tsx</code> or{' '}\n          <code>src/Home.tsx</code> and save to reload.\n        </p>\n        <ul className=\"Home-resources\">\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n          </li>\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n          </li>\n          <li>\n            <a href=\"https://palmer.chat\">Community Slack</a>\n          </li>\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "examples/with-typescript-plugin/src/client.tsx",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport { BrowserRouter } from 'react-router-dom';\n\nimport App from './App';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-typescript-plugin/src/index.ts",
    "content": "import express from 'express';\n\n// this require is necessary for server HMR to recover from error\n// tslint:disable-next-line:no-var-requires\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, (err: Error) => {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-typescript-plugin/src/server.tsx",
    "content": "import express from 'express';\nimport React from 'react';\nimport { renderToString } from 'react-dom/server';\nimport { StaticRouter } from 'react-router-dom';\n\nimport App from './App';\n\nlet assets: any;\n\nconst syncLoadAssets = () => {\n  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);\n};\nsyncLoadAssets();\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req: express.Request, res: express.Response) => {\n  const context: any = {};\n\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  if (context.url) {\n    return { redirect: context.url };\n  } else {\n    const html =\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${cssLinksFromAssets(assets, 'client')}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n    </body>\n  </html>`;\n\n    return { html };\n  }\n};\n\nconst server = express()\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))\n  .get('/*', (req: express.Request, res: express.Response) => {\n    const { html = '', redirect = false } = renderApp(req, res);\n    if (redirect) {\n      res.redirect(redirect);\n    } else {\n      res.send(html);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-typescript-plugin/tsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"allowJs\": true,\n    \"allowUnreachableCode\": false,\n    \"noFallthroughCasesInSwitch\": true,\n    \"allowSyntheticDefaultImports\": true,\n    \"downlevelIteration\": true,\n    \"esModuleInterop\": true,\n    \"forceConsistentCasingInFileNames\": true,\n    \"jsx\": \"react\",\n    \"lib\": [\"es6\", \"es2015\", \"es2017\", \"dom\"],\n    \"module\": \"commonjs\",\n    \"moduleResolution\": \"Node\",\n    \"noImplicitAny\": true,\n    \"noImplicitReturns\": true,\n    \"noImplicitThis\": true,\n    \"noUnusedLocals\": false,\n    \"sourceMap\": true,\n    \"strictNullChecks\": true,\n    \"strict\": false,\n    \"pretty\": true,\n    \"suppressImplicitAnyIndexErrors\": true,\n    \"target\": \"esnext\"\n  },\n  \"exclude\": [\n    \"node_modules\",\n    \"build\",\n    \"scripts\",\n    \"acceptance-tests\",\n    \"webpack\",\n    \"jest\",\n    \"razzle.config.js\"\n  ],\n  \"types\": [\"typePatches\", \"node\", \"webpack-env\"]\n}\n"
  },
  {
    "path": "examples/with-typescript-plugin/typings/index.d.ts",
    "content": "declare module '*.svg' {\n    const content: any;\n    export default content;\n}"
  },
  {
    "path": "examples/with-vendor-bundle/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-vendor-bundle/README.md",
    "content": "# Razzle with Vendor Bundling\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-vendor-bundle with-vendor-bundle\n\ncd with-vendor-bundle\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis example demonstrates how to use a `razzle.config.js` file to modify Razzle's\nunderlying webpack configuration to add a vendor bundle using [Twitter Lite's approach](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3).\n\n\nFirst create a file called `razzle.config.js` in your root directory. I won't go into details about the plugins, because they are well document in this [medium article by Paul Armstrong](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), but read through the comments in the snippet to get your bearings.\n\n\n```js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    // Change the name of the server output file in production\n    if (opts.env.target === 'web') {\n      // modify filenaming to account for multiple entry files\n      config.output.filename = opts.env.dev\n        ? 'static/js/[name].js'\n        : 'static/js/[name].[hash:8].js';\n\n      // add another entry point called vendor\n      config.entry.vendor = [\n        require.resolve('react'),\n        require.resolve('react-dom'),\n        // ... add any other vendor packages with require.resolve('xxx')\n      ];\n\n      config.optimization = {\n        splitChunks: {\n          // Chunk splitting optimiztion\n          chunks: 'all',\n          // Switch off name generation, otherwise files would be invalidated\n          // when more chunks with the same vendors are added\n          name: false,\n        },\n      };\n    }\n\n    return config;\n  },\n};\n\n```\n\nIn `server.js`, we modify our HTML template with our extra js files.\n\n```jsx\n// server.js\n\n// ...\n\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const markup = renderToString(<App />);\n    res.send(\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${assets.client.css\n          ? `<link rel=\"stylesheet\" href=\"${assets.client.css}\">`\n          : ''}\n        ${process.env.NODE_ENV === 'production'\n          ? `<script src=\"${assets.manifest.js}\" defer></script>`\n          : `<script src=\"${assets.manifest.js}\" defer crossorigin></script>`}\n        ${process.env.NODE_ENV === 'production'\n          ? `<script src=\"${assets.vendor.js}\" defer></script>`\n          : `<script src=\"${assets.vendor.js}\" defer crossorigin></script>`}\n        ${process.env.NODE_ENV === 'production'\n          ? `<script src=\"${assets.client.js}\" defer></script>`\n          : `<script src=\"${assets.client.js}\" defer crossorigin></script>`}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n    </body>\n</html>`\n    );\n  });\n```\n\nAlmost done. For the best DX experience, we need to tell Razzle where our development bundle of react is\nnow located so it can pipe runtime errors into a fancy error overlay instead of to the console.\n\nCreate a `.env` file with the relative path to our vendor bundle during development:\n\n```\nREACT_DEV_BUNDLE_PATH=/static/js/vendor.js\n```\n\nThat's it.\n\n```\nyarn start\n```\n\nCongrats! Your website bundles its JS like m.twitter.com does. In fact, since m.twitter.com doesn't server render...you might even say this setup your build tooling is more advanced!\n"
  },
  {
    "path": "examples/with-vendor-bundle/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-vendor-bundle\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-vendor-bundle/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-vendor-bundle/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    // Change the name of the server output file in production\n    if (opts.env.target === 'web') {\n      // modify filenaming to account for multiple entry files\n      config.output.filename = opts.env.dev\n        ? 'static/js/[name].js'\n        : 'static/js/[name].[hash:8].js';\n\n      // add another entry point called vendor\n      config.entry.vendor = [\n        require.resolve('react'),\n        require.resolve('react-dom'),\n        // ... add any other vendor packages with require.resolve('xxx')\n      ];\n\n      config.optimization = {\n        splitChunks: {\n          // Chunk splitting optimiztion\n          chunks: 'all',\n          // Switch off name generation, otherwise files would be invalidated\n          // when more chunks with the same vendors are added\n          name: false,\n        },\n      };\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "examples/with-vendor-bundle/src/App.js",
    "content": "import React from 'react';\n\nconst App = () => (\n  <div\n    onClick={() => {\n      throw new Error('fuck');\n    }}\n  >\n    Welcome to Razzle.\n  </div>\n);\n\nexport default App;\n"
  },
  {
    "path": "examples/with-vendor-bundle/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-vendor-bundle/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-vendor-bundle/src/server.js",
    "content": "import App from \"./App\";\nimport React from \"react\";\nimport express from \"express\";\nimport { renderToString } from \"react-dom/server\";\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-vue/.eslintrc",
    "content": "{\n  \"extends\": [\"plugin:vue/recommended\"]\n}"
  },
  {
    "path": "examples/with-vue/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-vue/README.md",
    "content": "# Razzle Vue Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-vue with-vue\n\ncd with-vue\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis shows how to setup [Vue](https://vuejs.org/) with Razzle.\n\nHere is a list of changes from Razzle's base template:\n  1. Install `razzle-plugin-vue`, `eslint-plugin-vue` as devDependencies.\n  2. Add `vue` to the razzle plugins config\n  3. Install `vue`, `vue-server-renderer` as dependencies\n  4. Remove `react`, `react-dom`, `react-router-dom` entirely\n  5. Update `server/server.js` to use `vue-server-renderer`'s `renderToString` function.\n  6. Update `client.js` to mount Vue to `#app` and start HMR\n"
  },
  {
    "path": "examples/with-vue/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-vue\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\",\n    \"lint\": \"eslint --ext .js,.vue src\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"vue\": \"^2.6.12\",\n    \"vue-server-renderer\": \"^2.6.12\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-plugin-vue\": \"^6.2.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-vue\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-vue/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-vue/razzle.config.js",
    "content": "module.exports = {\n  plugins: ['vue'],\n};\n"
  },
  {
    "path": "examples/with-vue/src/App.js",
    "content": "import Vue from 'vue';\nimport VueApp from './App.vue';\n\n// Export a factory function for creating a fresh app\nexport function createVueApp() {\n  const app = new Vue({\n    render: h => h(VueApp),\n  });\n\n  return { app };\n}\n"
  },
  {
    "path": "examples/with-vue/src/App.vue",
    "content": "<template>\n  <div class=\"app\">\n    <section>\n      <img\n        src=\"./vue.svg\"\n        alt=\"Vue\"\n      >\n      <h1>{{ greeting }}</h1>\n    </section>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      greeting: 'Hello Vue!'\n    }\n  }\n}\n</script>\n\n<style>\n  h1 {\n    font-size: 2em;\n    color: #42b983;\n    text-align: center;\n  }\n\n  img {\n    height: 100px;\n    width: auto;\n    margin: 0 auto;\n    display: block;\n  }\n</style>\n"
  },
  {
    "path": "examples/with-vue/src/client.js",
    "content": "import { createVueApp } from './App';\n\nconst { app } = createVueApp();\napp.$mount('#app');\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-vue/src/index.js",
    "content": "import express from 'express';\nimport app from './server';\n\nif (module.hot) {\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, err => {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-vue/src/server.js",
    "content": "import express from 'express';\nimport { createVueApp } from './App';\n\nconst renderer = require('vue-server-renderer').createRenderer();\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n\n  const { app } = createVueApp();\n  const vueMarkup = renderer.renderToString(app);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n  <div id=\"app\">${vueMarkup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-vue-router/.eslintrc",
    "content": "{\n  \"extends\": [\"plugin:vue/recommended\"],\n  \"parserOptions\": {\n    \"parser\": \"babel-eslint\",\n    \"sourceType\": \"module\"\n  }\n}"
  },
  {
    "path": "examples/with-vue-router/.gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "examples/with-vue-router/README.md",
    "content": "# Razzle Vue Router Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-vue-router with-vue-router\n\ncd with-vue-router\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n## Idea behind the example\nThis shows how to setup [Vue Router](https://router.vuejs.org/) with Vue and Razzle.\n\nHere is a list of changes from Razzle's base template:\n  1. Install `connect-history-api-fallback`, `eslint-plugin-vue`, `razzle-plugin-vue`, `vue-template-compiler` as devDependencies\n      * `connect-history-api-fallback` is required for `vue-router`'s history mode.\n      * `vue-template-compiler` is required by `vue-router`\n  2. Add `vue` to the razzle plugins config\n  3. Add custom `.eslintrc` to follow `vue` recommended, and `babel-eslint`\n  4. Install `vue`, `vue-router`, `vue-server-renderer` as dependencies\n  4. Remove `react`, `react-dom`, `react-router-dom` entirely\n  5. Update `server/server.js` to use `vue-server-renderer`'s `renderToString` function, enable history mode, add server-side routing\n  6. Update `client.js` to wait till `vue-router` is ready, mount Vue to `#app` and start HMR\n  7. `App.vue` contains only a `<router-view>` component, which then renders every other page inside it\n  8. `Home.vue`, `About.vue` and `PageNotFound.vue` are added\n  9. `router.js` exports a `VueRouter` as well as setting up the page routes\n"
  },
  {
    "path": "examples/with-vue-router/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-vue-router\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\",\n    \"lint\": \"eslint --ext .js,.vue src\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"vue\": \"^2.6.11\",\n    \"vue-router\": \"^3.1.6\",\n    \"vue-server-renderer\": \"^2.6.11\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"connect-history-api-fallback\": \"^1.6.0\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-plugin-vue\": \"^6.2.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"razzle-plugin-vue\": \"4.2.15\",\n    \"vue-template-compiler\": \"^2.6.11\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-vue-router/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-vue-router/razzle.config.js",
    "content": "module.exports = {\n  plugins: ['vue'],\n};\n"
  },
  {
    "path": "examples/with-vue-router/src/About.vue",
    "content": "<template>\n  <div class=\"about-page\">\n    <h1>{{ title }}</h1>\n    <router-link to=\"/\">\n      Home\n    </router-link>\n  </div>\n</template>\n\n<script>\nexport default {\n  data () {\n    return {\n      title: 'About Page'\n    };\n  }\n};\n</script>\n\n<style>\n\n</style>\n"
  },
  {
    "path": "examples/with-vue-router/src/App.js",
    "content": "import Vue from 'vue';\nimport VueApp from './App.vue';\n\nimport router from './router';\n\n// Export a factory function for creating a fresh app\nexport function createVueApp() {\n  const app = new Vue({\n    router,\n    render: h => h(VueApp),\n  });\n\n  return { app, router };\n}\n"
  },
  {
    "path": "examples/with-vue-router/src/App.vue",
    "content": "<template>\n  <div class=\"app\">\n    <router-view />\n  </div>\n</template>\n\n<script>\nexport default {}\n</script>\n\n<style>\n</style>\n"
  },
  {
    "path": "examples/with-vue-router/src/Home.vue",
    "content": "<template>\n  <div class=\"home-page\">\n    <section>\n      <img\n        src=\"./vue.svg\"\n        alt=\"Vue\"\n      >\n      <h1>{{ greeting }}</h1>\n\n      <router-link to=\"/about\">\n        About\n      </router-link>\n    </section>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      greeting: 'Hello Vue!'\n    };\n  }\n}\n</script>\n\n<style>\n  h1 {\n    font-size: 2em;\n    color: #42b983;\n    text-align: center;\n  }\n\n  img {\n    height: 100px;\n    width: auto;\n    margin: 0 auto;\n    display: block;\n  }\n</style>\n"
  },
  {
    "path": "examples/with-vue-router/src/PageNotFound.vue",
    "content": "<template>\n  <div class=\"page-not-found\">\n    <h1>404: Page not found.</h1>\n    <router-link to=\"/\">\n      Home\n    </router-link>\n  </div>\n</template>\n\n<script>\nexport default {}\n</script>\n\n<style>\n\n</style>\n"
  },
  {
    "path": "examples/with-vue-router/src/client.js",
    "content": "import { createVueApp } from './App';\n\nconst { app, router } = createVueApp();\n\nrouter.onReady(() => {\n  app.$mount('#app');\n});\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-vue-router/src/index.js",
    "content": "import express from 'express';\nimport app from './server';\n\nif (module.hot) {\n  module.hot.accept('./server', () => {\n    console.log('🔁  HMR Reloading `./server`...');\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, err => {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-vue-router/src/router.js",
    "content": "import Vue from 'vue';\nimport VueRouter from 'vue-router';\n\nimport Home from './Home.vue';\n\n// The () => import() syntax is used for webpack's lazy loading and code splitting functionality\n// https://router.vuejs.org/guide/advanced/lazy-loading.html\nconst About = () => import(/* webpackChunkName: \"AboutPage\" */ './About.vue');\nconst PageNotFound = () =>\n  import(/* webpackChunkName: \"PageNotFound\" */ './PageNotFound.vue');\n\nVue.use(VueRouter);\n\n// Create a router in history mode\n// By default vue-router uses `hash mode` urls: localhost:3000/#/about\n// `History mode` allows regular urls: localhost:3000/about\nexport default new VueRouter({\n  mode: 'history',\n  routes: [\n    { path: '/', component: Home },\n    { path: '/about', component: About },\n    { path: '*', component: PageNotFound }, // wildcard route match, if haven't matched previous: 404\n  ],\n});\n"
  },
  {
    "path": "examples/with-vue-router/src/server.js",
    "content": "import express from 'express';\nimport history from 'connect-history-api-fallback';\n\nimport { createVueApp } from './App';\n\nconst renderer = require('vue-server-renderer').createRenderer();\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = async (req, res) => {\n  return new Promise((resolve)=>{\n\n    const { app, router } = createVueApp();\n\n    // Set server-side router's location\n    router.push(req.originalUrl).catch(err => {});\n\n    // wait until the router has resolved possible async components and hooks\n    router.onReady(async () => {\n      const vueMarkup = await renderer.renderToString(app);\n\n      const html =\n        // prettier-ignore\n        `<!doctype html>\n      <html lang=\"\">\n      <head>\n          <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n          <meta charSet='utf-8' />\n          <title>Welcome to Razzle</title>\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n          ${cssLinksFromAssets(assets, 'client')}\n      </head>\n      <body>\n      <div id=\"app\">${vueMarkup}</div>\n          ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n      </body>\n    </html>`;\n\n      resolve({ html });\n    });\n  });\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', async (req, res) => {\n    const { html } = await renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/README.md",
    "content": "# Razzle With Webpack Dev Server v4 Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-webpack-dev-server-v4 with-webpack-dev-server-v4\n\ncd with-webpack-dev-server-v4\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is an example of how to use razzle with the `webpack-dev-server` version 4.\nIt updates the `webpack-dev-server` in `package.json` to the current latest version 4.\nIt provides a custom `razzle.config.js` that throws if the `webpack-dev-server` < version 4 to ensure the example setup is correct.\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\npublic/static\n.env.*.local"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/package.json",
    "content": "{\n  \"name\": \"razzle-examples-with-webpack-dev-server-v4\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"webpack\": \"^4.44.1\",\n    \"webpack-dev-server\": \"^4.3.1\"\n  }\n}\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/razzle.config.js",
    "content": "module.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    // Use the same detection code from `createConfigAsync` to ensure that this example is using version 4\n    const devserverPkg = require('webpack-dev-server/package.json');\n    const devServerMajorVersion = parseInt(devserverPkg.version[0]);\n    if (devServerMajorVersion < 4) {\n      throw new Error(`This should be webpack-dev-server version 4, got ${devServerMajorVersion} instead`);\n    }\n\n    return config;\n  },\n}\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/src/client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-webpack-dev-server-v4/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-webpack-public-path/README.md",
    "content": "# Razzle Basic Example\n\n## How to use\n\n<!-- START install generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:\n\n```bash\nnpx create-razzle-app --example with-webpack-public-path with-webpack-public-path\n\ncd with-webpack-public-path\nyarn start\n```\n<!-- END install generated instructions please keep comment here to allow auto update -->\n\n\n## Idea behind the example\nThis is a basic, bare-bones example of how to use razzle. It satisfies the entry points\n`src/index.js` for the server and and `src/client.js` for the browser.\n"
  },
  {
    "path": "examples/with-webpack-public-path/package.json",
    "content": "{\n  \"name\": \"razzle-examples-basic\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "examples/with-webpack-public-path/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "examples/with-webpack-public-path/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: -apple-system,\n    BlinkMacSystemFont,\n    \"Segoe UI\",\n    Helvetica,\n    Arial,\n    sans-serif,\n    \"Apple Color Emoji\",\n    \"Segoe UI Emoji\",\n    \"Segoe UI Symbol\";\n}\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/App.js",
    "content": "import './App.css';\n\nimport React from 'react';\nconst App = () => <div>Welcome to Razzle.</div>;\n\nexport default App;\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(<App />, div);\n  });\n});\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/client.js",
    "content": "import './init.client';\nimport './real.client';"
  },
  {
    "path": "examples/with-webpack-public-path/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/init.client.js",
    "content": "__webpack_public_path__ = window.LOCAL_PUBLIC_PATH;\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/init.server.js",
    "content": "__webpack_public_path__ = process.env.LOCAL_PUBLIC_PATH||process.env.CLIENT_PUBLIC_PATH||process.env.PUBLIC_PATH;\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/real.client.js",
    "content": "import React from 'react';\nimport { hydrate } from 'react-dom';\nimport App from './App';\n\nhydrate(<App />, document.getElementById('root'));\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/real.server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst public_path = process.env.NODE_ENV === 'development' ? '' : process.env.LOCAL_PUBLIC_PATH||process.env.PUBLIC_PATH;;\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${public_path}${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${public_path}${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const markup = renderToString(<App />);\n\n  const html =\n    // prettier-ignore\n    `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charSet='utf-8' />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><script type=\"text/javascript\">\n          window.LOCAL_PUBLIC_PATH = '${__webpack_public_path__}';\n      </script>\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}\n  </body>\n</html>`;\n\n  return { html };\n};\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const { html } = renderApp(req, res);\n    res.send(html);\n  });\n\nexport default server;\n"
  },
  {
    "path": "examples/with-webpack-public-path/src/server.js",
    "content": "\nimport './init.server';\nimport server from './real.server';\n\nexport default server;\n\n"
  },
  {
    "path": "lerna.json",
    "content": "{\n  \"lerna\": \"3.20.2\",\n  \"packages\": [\n    \"packages/razzle\",\n    \"packages/razzle-start-server-webpack-plugin\",\n    \"packages/babel-preset-razzle\",\n    \"packages/create-razzle-app\",\n    \"packages/razzle-dev-utils\",\n    \"packages/razzle-plugin-*\"\n  ],\n  \"useWorkspaces\": true,\n  \"npmClient\": \"yarn\",\n  \"command\": {\n    \"bootstrap\": {\n      \"nohoist\": \"express\"\n    },\n    \"publish\": {\n      \"npmClient\": \"npm\",\n      \"allowBranch\": [\n        \"master\",\n        \"canary\",\n        \"finch\"\n      ],\n      \"registry\": \"https://registry.npmjs.org/\"\n    }\n  },\n  \"changelog\": {\n    \"repo\": \"jaredpalmer/razzle\",\n    \"labels\": {\n      \"tag: new feature\": \":rocket: New Feature\",\n      \"tag: breaking change\": \":boom: Breaking Change\",\n      \"tag: bug fix\": \":bug: Bug Fix\",\n      \"tag: enhancement\": \":nail_care: Enhancement\",\n      \"tag: documentation\": \":memo: Documentation\",\n      \"tag: internal\": \":house: Internal\"\n    },\n    \"cacheDir\": \".changelog\"\n  },\n  \"version\": \"4.2.15\"\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"private\": true,\n  \"homepage\": \"https://github.com/jaredpalmer/razzle#readme\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/jaredpalmer/razzle.git\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/jaredpalmer/razzle/issues\"\n  },\n  \"resolutions\": {\n    \"**/**/node-gyp\": \"7.0.0\"\n  },\n  \"devDependencies\": {\n    \"@changesets/changelog-github\": \"^0.4.4\",\n    \"@changesets/cli\": \"^2.21.0\",\n    \"all-contributors-cli\": \"^6.14.2\",\n    \"axios\": \"^0.21.2\",\n    \"doctoc\": \"^1.4.0\",\n    \"eslint\": \"^6.8.0\",\n    \"execa\": \"5.0.0\",\n    \"fs-extra\": \"^9.1.0\",\n    \"glob\": \"^7.1.6\",\n    \"got\": \"^11.0.2\",\n    \"html-webpack-plugin\": \"4.5.2\",\n    \"husky\": \"^4.2.3\",\n    \"inquirer\": \"^7.3.3\",\n    \"is-docker\": \"^2.1.1\",\n    \"jest\": \"^26.6.3\",\n    \"jest-html-reporters\": \"^2.1.2\",\n    \"leaked-handles\": \"^5.2.0\",\n    \"lerna\": \"^3.20.2\",\n    \"lerna-changelog\": \"^1.0.1\",\n    \"lint-staged\": \"^10.0.8\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"prettier\": \"^1.19.1\",\n    \"ps-tree\": \"1.2.0\",\n    \"puppeteer\": \"^7.0.4\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"recursive-copy\": \"^2.0.11\",\n    \"release\": \"^6.1.0\",\n    \"semver\": \"7.1.3\",\n    \"serve\": \"^11.3.2\",\n    \"shelljs\": \"^0.8.3\",\n    \"webpack\": \"4.46.0\",\n    \"webpack-dev-server\": \"^3.11.0\"\n  },\n  \"scripts\": {\n    \"test\": \"yarn test:e2e\",\n    \"test:packages\": \"lerna run test --stream --scope razzle-* --ignore razzle-examples-* -- --passWithNoTests --verbose --no-cache\",\n    \"test:e2e\": \"jest --config ./test/jest.e2e.config.json --verbose --no-cache\",\n    \"test:examples\": \"jest --config ./test/jest.examples.config.js --verbose --no-cache\",\n    \"test:examples:simple\": \"jest --config ./test/jest.examples.config.js --verbose --no-cache -t simple\",\n    \"test:examples:complex\": \"cross-env COMPLEX=true jest --config ./test/jest.examples.config.js --verbose --no-cache -t complex\",\n    \"clean\": \"lerna clean --yes\",\n    \"format\": \"prettier --write 'packages/*/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx)' 'packages/*/!(node_modules)/**/*.js'\",\n    \"publish-all\": \"node ./scripts/publish-all.js\",\n    \"publish-all-stable\": \"yarn publish-all -c -t --push && release && node ./scripts/release-notes.js\",\n    \"publish-all-canary\": \"yarn publish-all -p canary -c -t --push && release --pre\",\n    \"publish-all-alpha\": \"yarn publish-all -p alpha -c -t --push && release --pre\",\n    \"pre-publish-all\": \"yarn build-docs && yarn update-examples\",\n    \"publish-to-npm\": \"node ./scripts/publish-to-npm.js\",\n    \"build-docs\": \"node ./scripts/build-docs.js\",\n    \"update-examples\": \"node ./scripts/update-examples.js\",\n    \"git-reset\": \"git reset --hard HEAD\",\n    \"git-clean\": \"git clean -d -x -e node_modules -e packages -f\",\n    \"yalc-publish-all\": \"node ./scripts/yalc-publish-all.js\",\n    \"try-example\": \"node ./scripts/try-example.js\",\n    \"new-example\": \"node ./scripts/new-example.js\",\n    \"bootstrap-examples\": \"node ./scripts/bootstrap-examples.js\"\n  },\n  \"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"lint-staged\"\n    }\n  },\n  \"lint-staged\": {\n    \"*.{js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx}\": [\n      \"yarn format\"\n    ]\n  },\n  \"jest\": {\n    \"testPathIgnorePatterns\": [\n      \"<rootDir>/coverage/\",\n      \"<rootDir>/node_modules/\",\n      \"<rootDir>/examples/\"\n    ],\n    \"collectCoverageFrom\": [\n      \"**/*.js\"\n    ],\n    \"coveragePathIgnorePatterns\": [\n      \"<rootDir>/node_modules/\",\n      \"<rootDir>/packages/*/node_modules/\",\n      \"<rootDir>/examples/\",\n      \"<rootDir>/coverage/\"\n    ]\n  },\n  \"workspaces\": [\n    \"packages/razzle\",\n    \"packages/razzle-start-server-webpack-plugin\",\n    \"packages/babel-preset-razzle\",\n    \"packages/create-razzle-app\",\n    \"packages/razzle-dev-utils\",\n    \"packages/razzle-plugin-*\"\n  ],\n  \"version\": \"4.2.15\"\n}\n"
  },
  {
    "path": "package.meta.json",
    "content": "{\n  \"exampleDependencyVersions\": {\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"serve\": \"^11.3.2\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"webpack-dev-server\": \"^3.11.0\",\n    \"webpack\": \"^4.44.1\"\n  },\n  \"internalPeerDependencyVersions\": {\n    \"webpack-dev-server\": \"^3.11.0 || ^4.0.0\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"webpack\": \"^4.0.0 || ^5.0.0\"\n  },\n  \"workspaces\": [\n    \"packages/razzle\",\n    \"packages/razzle-start-server-webpack-plugin\",\n    \"packages/babel-preset-razzle\",\n    \"packages/create-razzle-app\",\n    \"packages/razzle-dev-utils\",\n    \"packages/razzle-plugin-*\"\n  ]\n}\n"
  },
  {
    "path": "packages/babel-preset-razzle/CHANGELOG.md",
    "content": "# babel-preset-razzle\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/babel-preset-razzle/LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2016 Jared Palmer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/babel-preset-razzle/README.md",
    "content": "# babel-preset-razzle\n\nThis package includes the [Babel](https://babeljs.io) preset used by [Razzle](https://github/com/palmerhq/razzle)\n\n## Usage in Razzle Projects\n\nThe easiest way to use this configuration is with Razzle, which includes it by default.\n\n## Usage Outside of Razzle\n\nIf you want to use this Babel preset in a project not built with razzle, you can install it with following steps.\n\nFirst, [install Babel](https://babeljs.io/docs/setup/).\n\nThen create a file named `.babelrc` with following contents in the root folder of your project:\n\n```js\n{\n  \"presets\": [\"razzle\"]\n}\n```\n\nThis preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/), which assumes that `Object.assign` is available or polyfilled.\n"
  },
  {
    "path": "packages/babel-preset-razzle/babel-plugins/commonjs.js",
    "content": "const commonjsPlugin = require('@babel/plugin-transform-modules-commonjs');\n\nmodule.exports = function(api, options, dirname) {\n  const commonjs = commonjsPlugin.default(api, options, dirname);\n  return {\n    visitor: {\n      Program: {\n        exit: function(path, state) {\n          let foundModuleExports = false;\n          path.traverse({\n            MemberExpression: function(expressionPath) {\n              if (expressionPath.node.object.name !== 'module') return;\n              if (expressionPath.node.property.name !== 'exports') return;\n              foundModuleExports = true;\n            },\n          });\n\n          if (!foundModuleExports) {\n            return;\n          }\n\n          commonjs.visitor.Program.exit.call(this, path, state);\n        },\n      },\n    },\n  };\n};\n"
  },
  {
    "path": "packages/babel-preset-razzle/babel-plugins/jsx-pragma.js",
    "content": "'use strict';\n\nmodule.exports = function(opts) {\n  const t = opts.types;\n  return {\n    inherits: require('babel-plugin-syntax-jsx'),\n    visitor: {\n      JSXElement: (_path, state) => {\n        state.set('jsx', true);\n      },\n\n      // Fragment syntax is still JSX since it compiles to createElement(),\n      // but JSXFragment is not a JSXElement\n      JSXFragment: (_path, state) => {\n        state.set('jsx', true);\n      },\n\n      Program: {\n        exit: (path, state) => {\n          if (state.get('jsx')) {\n            const pragma = t.identifier(state.opts.pragma);\n            let importAs = pragma;\n\n            // if there's already a React in scope, use that instead of adding an import\n            const existingBinding =\n              state.opts.reuseImport !== false &&\n              state.opts.importAs &&\n              path.scope.getBinding(state.opts.importAs);\n\n            // var _jsx = _pragma.createElement;\n            if (state.opts.property) {\n              if (state.opts.importAs) {\n                importAs = t.identifier(state.opts.importAs);\n              } else {\n                importAs = path.scope.generateUidIdentifier('pragma');\n              }\n\n              const mapping = t.variableDeclaration('var', [\n                t.variableDeclarator(\n                  pragma,\n                  t.memberExpression(\n                    importAs,\n                    t.identifier(state.opts.property)\n                  )\n                ),\n              ]);\n\n              // if the React binding came from a require('react'),\n              // make sure that our usage comes after it.\n              let newPath;\n              if (\n                existingBinding &&\n                t.isVariableDeclarator(existingBinding.path.node) &&\n                t.isCallExpression(existingBinding.path.node.init) &&\n                t.isIdentifier(existingBinding.path.node.init.callee) &&\n                existingBinding.path.node.init.callee.name === 'require'\n              ) {\n                [newPath] = existingBinding.path.parentPath.insertAfter(\n                  mapping\n                );\n              } else {\n                // @ts-ignore\n                [newPath] = path.unshiftContainer('body', mapping);\n              }\n\n              for (const declar of newPath.get('declarations')) {\n                path.scope.registerBinding(newPath.node.kind, declar);\n              }\n            }\n\n            if (!existingBinding) {\n              const importSpecifier = t.importDeclaration(\n                [\n                  state.opts.import\n                    ? // import { $import as _pragma } from '$module'\n                      t.importSpecifier(\n                        importAs,\n                        t.identifier(state.opts.import)\n                      )\n                    : state.opts.importNamespace\n                    ? t.importNamespaceSpecifier(importAs)\n                    : // import _pragma from '$module'\n                      t.importDefaultSpecifier(importAs),\n                ],\n                t.stringLiteral(state.opts.module || 'react')\n              );\n\n              const [newPath] = path.unshiftContainer('body', importSpecifier);\n              for (const specifier of newPath.get('specifiers')) {\n                path.scope.registerBinding('module', specifier);\n              }\n            }\n          }\n        },\n      },\n    },\n  };\n};\n"
  },
  {
    "path": "packages/babel-preset-razzle/babel-plugins/no-anonymous-default-export.js",
    "content": "const chalk = require('chalk');\n\nmodule.exports = function(opts) {\n  const t = opts.types;\n  let onWarning = null;\n  opts.caller(caller => {\n    onWarning = caller.onWarning;\n    return ''; // Intentionally empty to not invalidate cache\n  });\n\n  if (typeof onWarning !== 'function') {\n    return { visitor: {} };\n  }\n\n  const warn = onWarning;\n  return {\n    visitor: {\n      ExportDefaultDeclaration: function(path) {\n        const def = path.node.declaration;\n\n        if (\n          !(\n            def.type === 'ArrowFunctionExpression' ||\n            def.type === 'FunctionDeclaration'\n          )\n        ) {\n          return;\n        }\n\n        switch (def.type) {\n          case 'ArrowFunctionExpression': {\n            warn(\n              [\n                chalk.yellow.bold(\n                  'Anonymous arrow functions cause Fast Refresh to not preserve local component state.'\n                ),\n                'Please add a name to your function, for example:',\n                '',\n                chalk.bold('Before'),\n                chalk.cyan('export default () => <div />;'),\n                '',\n                chalk.bold('After'),\n                chalk.cyan('const Named = () => <div />;'),\n                chalk.cyan('export default Named;'),\n              ].join('\\n')\n            );\n            break;\n          }\n          case 'FunctionDeclaration': {\n            const isAnonymous = !Boolean(def.id);\n            if (isAnonymous) {\n              warn(\n                [\n                  chalk.yellow.bold(\n                    'Anonymous function declarations cause Fast Refresh to not preserve local component state.'\n                  ),\n                  'Please add a name to your function, for example:',\n                  '',\n                  chalk.bold('Before'),\n                  chalk.cyan('export default function () { /* ... */ }'),\n                  '',\n                  chalk.bold('After'),\n                  chalk.cyan('export default function Named() { /* ... */ }'),\n                ].join('\\n')\n              );\n            }\n            break;\n          }\n          default: {\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\n            const never = def;\n          }\n        }\n      },\n    },\n  };\n};\n"
  },
  {
    "path": "packages/babel-preset-razzle/babel-plugins/optimize-hook-destructuring.js",
    "content": "'use strict';\n\n// matches any hook-like (the default)\nconst isHook = /^use[A-Z]/;\n\n// matches only built-in hooks provided by React et al\nconst isBuiltInHook = /^use(Callback|Context|DebugValue|Effect|ImperativeHandle|LayoutEffect|Memo|Reducer|Ref|State)$/;\n\nmodule.exports = function(opts) {\n  const t = opts.types;\n  const visitor = {\n    CallExpression: function(path, state) {\n      const onlyBuiltIns = state.opts.onlyBuiltIns;\n\n      // if specified, options.lib is a list of libraries that provide hook functions\n      const libs =\n        state.opts.lib &&\n        (state.opts.lib === true\n          ? ['react', 'preact/hooks']\n          : [].concat(state.opts.lib));\n\n      // skip function calls that are not the init of a variable declaration:\n      if (!t.isVariableDeclarator(path.parent)) return;\n\n      // skip function calls where the return value is not Array-destructured:\n      if (!t.isArrayPattern(path.parent.id)) return;\n\n      // name of the (hook) function being called:\n      const hookName = path.node.callee.name;\n\n      if (libs) {\n        const binding = path.scope.getBinding(hookName);\n        // not an import\n        if (!binding || binding.kind !== 'module') return;\n\n        const specifier = binding.path.parent.source.value;\n        // not a match\n        if (!libs.some(lib => lib === specifier)) return;\n      }\n\n      // only match function calls with names that look like a hook\n      if (!(onlyBuiltIns ? isBuiltInHook : isHook).test(hookName)) return;\n\n      path.parent.id = t.objectPattern(\n        path.parent.id.elements.reduce((patterns, element, i) => {\n          if (element === null) {\n            return patterns;\n          }\n\n          return patterns.concat(\n            t.objectProperty(t.numericLiteral(i), element)\n          );\n        }, [])\n      );\n    },\n  };\n\n  return {\n    name: 'optimize-hook-destructuring',\n    visitor: {\n      // this is a workaround to run before preset-env destroys destructured assignments\n      Program: function(path, state) {\n        path.traverse(visitor, state);\n      },\n    },\n  };\n};\n"
  },
  {
    "path": "packages/babel-preset-razzle/index.js",
    "content": "'use strict';\n\nconst path = require('path');\nconst PluginItem = require('@babel/core').PluginItem;\nconst env = process.env.NODE_ENV;\nconst isProduction = env === 'production';\nconst isDevelopment = env === 'development';\nconst isTest = env === 'test';\n\n// Taken from https://github.com/babel/babel/commit/d60c5e1736543a6eac4b549553e107a9ba967051#diff-b4beead8ad9195361b4537601cc22532R158\nconst supportsStaticESM = function(caller) {\n  return !!caller && caller.supportsStaticESM;\n};\n\nmodule.exports = function(api, options) {\n  options = options || {};\n\n  const supportsESM = api.caller(supportsStaticESM);\n  const isServer = api.caller(function(caller) {\n    return !!caller && caller.isServer;\n  });\n  const isModern = api.caller(function(caller) {\n    return !!caller && caller.isModern;\n  });\n\n  const isLaxModern =\n    isModern ||\n    ((options['preset-env'] || {}).targets &&\n      options['preset-env'].targets.esmodules === true);\n\n  const presetEnvConfig = Object.assign(\n    {\n      // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option\n      // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking\n      modules: 'auto',\n      exclude: ['transform-typeof-symbol'],\n    },\n    options['preset-env'] || {}\n  );\n\n  // When transpiling for the server or tests, target the current Node version\n  // if not explicitly specified:\n  if (\n    (isServer || isTest) &&\n    (!presetEnvConfig.targets ||\n      !(\n        typeof presetEnvConfig.targets === 'object' &&\n        'node' in presetEnvConfig.targets\n      ))\n  ) {\n    presetEnvConfig.targets = {\n      // Targets the current process' version of Node. This requires apps be\n      // built and deployed on the same version of Node.\n      node: 'current',\n    };\n  }\n\n  // specify a preset to use instead of @babel/preset-env\n  const customModernPreset =\n    isLaxModern && options['experimental-modern-preset'];\n\n  return {\n    sourceType: 'unambiguous',\n    presets: [\n      customModernPreset || [\n        require('@babel/preset-env').default,\n        presetEnvConfig,\n      ],\n      [\n        require('@babel/preset-react'),\n        Object.assign(\n          {\n            // This adds @babel/plugin-transform-react-jsx-source and\n            // @babel/plugin-transform-react-jsx-self automatically in development\n            development: isDevelopment || isTest,\n          },\n          (options['preset-react'] || {}).runtime !== 'automatic' ? { pragma: '__jsx' } : {},\n          options['preset-react'] || {}\n        ),\n      ],\n      options['preset-typescript'] !== false && [\n        require('@babel/preset-typescript'),\n        Object.assign(\n          { allowNamespaces: true, allExtensions: true, isTSX: true },\n          options['preset-typescript'] || {}\n        ),\n      ],\n    ].filter(Boolean),\n    plugins: [\n      (options['preset-react'] || {}).runtime !== 'automatic' && [\n        require('./babel-plugins/jsx-pragma'),\n        {\n          // This produces the following injected import for modules containing JSX:\n          //   import React from 'react';\n          //   var __jsx = React.createElement;\n          module: 'react',\n          importAs: 'React',\n          pragma: '__jsx',\n          property: 'createElement',\n        },\n      ],\n      [\n        require('./babel-plugins/optimize-hook-destructuring'),\n        {\n          // only optimize hook functions imported from React/Preact\n          lib: true,\n        },\n      ],\n      require('@babel/plugin-syntax-dynamic-import'),\n      options['class-properties'] !== false && [\n        require('@babel/plugin-proposal-class-properties'),\n        options['class-properties'] || {},\n      ],\n      [\n        require('@babel/plugin-proposal-object-rest-spread'),\n        {\n          useBuiltIns: true,\n        },\n      ],\n      !isServer && [\n        require('@babel/plugin-transform-runtime'),\n        Object.assign(\n          {\n            corejs: false,\n            helpers: true,\n            regenerator: true,\n            useESModules: supportsESM && presetEnvConfig.modules !== 'commonjs',\n            absoluteRuntime: path.dirname(\n              require.resolve('@babel/runtime/package.json')\n            ),\n            version: require('@babel/runtime/package.json').version,\n          },\n          options['transform-runtime'] || {}\n        ),\n      ],\n      isProduction && [\n        require('babel-plugin-transform-react-remove-prop-types'),\n        {\n          removeImport: true,\n        },\n      ],\n      require('@babel/plugin-proposal-optional-chaining'),\n      require('@babel/plugin-proposal-nullish-coalescing-operator'),\n      isServer && require('@babel/plugin-syntax-bigint'),\n      [require('@babel/plugin-proposal-numeric-separator').default, false],\n    ].filter(Boolean)\n  };\n};\n"
  },
  {
    "path": "packages/babel-preset-razzle/package.json",
    "content": "{\n  \"name\": \"babel-preset-razzle\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Babel presets for Razzle\",\n  \"main\": \"index.js\",\n  \"author\": \"jaredpalmer\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/babel-preset-razzle\"\n  },\n  \"license\": \"MIT\",\n  \"files\": [\n    \"index.js\",\n    \"babel-plugins/amp-attributes.js\",\n    \"babel-plugins/commonjs.js\",\n    \"babel-plugins/jsx-pragma.js\",\n    \"babel-plugins/no-anonymous-default-export.js\",\n    \"babel-plugins/optimize-hook-destructuring.js\"\n  ],\n  \"dependencies\": {\n    \"@babel/core\": \"^7.11.1\",\n    \"@babel/plugin-proposal-class-properties\": \"^7.8.3\",\n    \"@babel/plugin-proposal-nullish-coalescing-operator\": \"^7.10.4\",\n    \"@babel/plugin-proposal-numeric-separator\": \"^7.10.4\",\n    \"@babel/plugin-proposal-object-rest-spread\": \"^7.9.5\",\n    \"@babel/plugin-proposal-optional-chaining\": \"^7.11.0\",\n    \"@babel/plugin-syntax-bigint\": \"^7.8.3\",\n    \"@babel/plugin-syntax-dynamic-import\": \"^7.8.3\",\n    \"@babel/plugin-transform-modules-commonjs\": \"^7.10.4\",\n    \"@babel/plugin-transform-runtime\": \"^7.9.0\",\n    \"@babel/preset-env\": \"^7.9.5\",\n    \"@babel/preset-react\": \"^7.9.4\",\n    \"@babel/preset-typescript\": \"^7.9.0\",\n    \"@babel/runtime\": \"^7.9.2\",\n    \"babel-plugin-syntax-jsx\": \"^6.18.0\",\n    \"babel-plugin-transform-react-remove-prop-types\": \"^0.4.24\",\n    \"chalk\": \"^4.1.0\"\n  }\n}\n"
  },
  {
    "path": "packages/create-razzle-app/.gitignore",
    "content": "node_modules\n*.log\n"
  },
  {
    "path": "packages/create-razzle-app/CHANGELOG.md",
    "content": "# create-razzle-app\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/create-razzle-app/README.md",
    "content": "# Create Razzle App\n\n## Create UNIVERSAL React, Preact, and Inferno apps in one command.\n\n```\nnpx create-razzle-app my-proj\ncd my-proj\nnpm start\n```\n\nor.... with the `yarn create` command:\n\n```\nyarn create razzle-app my-proj\ncd my-proj\nyarn start\n```\n\n## You can also initialize a project from one of the [official examples](https://github.com/jaredpalmer/razzle/tree/master/examples).\n\n```\nnpx create-razzle-app --example with-preact my-preact-app\ncd my-preact-app\nnpm start\n```\n\nor\n\n```\nyarn create razzle-app --example with-preact my-preact-app\ncd my-preact-app\n```\n\n### or initialize a project from npm/github/git/file examples.\n\nFrom npm:\n\n```\nnpx create-razzle-app --example razzle-example-basic@latest my-app\ncd my-app\nnpm start\n```\n\nFrom github repo:\n\n```\nnpx create-razzle-app --example https://github.com/fivethreeo/razzle-example-basic@master my-app\ncd my-app\nnpm start\n```\n\nFrom git repo:\n\n```\nnpx create-razzle-app --example git+git://github.com/fivethreeo/razzle-example-basic@master my-app\ncd my-app\nnpm start\n```\n\nFrom local path:\n\n```\nnpx create-razzle-app --example file:local/path/to/example my-app\ncd my-app\nnpm start\n```\n\nAll methods except official and file examples also supports examples at subpaths:\n\n```\nnpx create-razzle-app --example git+git://github.com/fivethreeo/razzle-example-basic@master:subexample my-app\ncd my-app\nnpm start\n```\n\n```\nnpx create-razzle-app --example razzle-example-basic@latest:subexample my-app\ncd my-app\nnpm start\n```\n"
  },
  {
    "path": "packages/create-razzle-app/bin/create-razzle-app",
    "content": "#! /usr/bin/env node\n\nconst chalk = require('chalk');\nconst program = require('commander');\nconst lib = require('..');\nconst pkg = require('../package.json');\n\nconst messages = lib.messages;\nconst createRazzleApp = lib.createRazzleApp;\n\nlet projectName;\n\nprogram\n  .version(pkg.version)\n  .arguments('<project-directory>')\n  .usage(`${chalk.green('<project-directory>')} [options]`)\n  .action(function(name) {\n    projectName = name;\n  })\n  .option('-e, --example <example-path>', messages.exampleHelp())\n  .allowUnknownOption()\n  .option('--no-install', 'Dont install packages')\n  .option('--yarn', 'Force yarn package manager')\n  .option('--npm', 'Force npm package manager')\n  .option('--verbose', 'Be verbose to debug')\n  .on('--help', messages.help)\n  .parse(process.argv);\n\nconst example = program.example;\n\ncreateRazzleApp({\n  projectName,\n  example,\n  install: program.install,\n  yarn: program.yarn,\n  npm: program.npm,\n  verbose: program.verbose\n});\n"
  },
  {
    "path": "packages/create-razzle-app/index.js",
    "content": "'use strict';\n\nconst createRazzle = require('./lib');\nconst messages = require('./lib/messages');\n\nmodule.exports = {\n  messages: messages,\n  createRazzleApp: createRazzle,\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/index.js",
    "content": "'use strict';\n\nconst path = require('path');\nconst fs = require('fs');\nconst Promise = require('promise');\nconst axios = require('axios');\nconst httpAdapter = require('axios/lib/adapters/http');\nconst copyDir = require('./utils/copy-dir');\nconst install = require('./utils/install');\nconst loadExample = require('./utils/load-example');\nconst loadGitHubExample = require('./utils/load-github-example');\nconst loadGitExample = require('./utils/load-git-example');\nconst loadNpmExample = require('./utils/load-npm-example');\nconst messages = require('./messages');\nconst officialExamples = require('./officialExamples');\n\nconst isFolder = ({ type }) => type === 'dir';\nconst prop = key => obj => obj[key];\n\nconst branch = 'master'; // this line auto updates when yarn update-examples is run\nconst razzlePkg = `razzle${branch == 'master' ? '' : '@' + branch}`;\nconst razzleDevUtilsPkg = `razzle-dev-utils${branch == 'master' ? '' : '@' + branch}`;\n\n\nmodule.exports = async function createRazzleApp(opts) {\n  const projectName = opts.projectName;\n\n  if (!projectName) {\n    console.log(messages.missingProjectName());\n    process.exit(1);\n  }\n\n  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);\n  \n  if ( fs.existsSync(projectName) && ! isSafeToCreateProjectIn(projectPath, projectName)) {\n    console.log(messages.folderNotEmpty(projectName));\n    process.exit(1);\n  }\n\n  if (opts.example) {\n    if (/^https:\\/\\/github/.test(opts.example)) {\n      if (opts.verbose) {\n        console.log(`Using github ${opts.example} example`)\n      }\n      loadGitHubExample({\n        projectName: projectName,\n        example: opts.example,\n      })\n      .then(installWithMessageFactory(opts, true))\n      .catch(function(err) {\n        console.error(`Failed loading github ${opts.example} example`);\n        if (opts.verbose) {\n          console.error(err);\n        }\n        process.exit(1)\n      });\n    } else if (/^git\\+/.test(opts.example)) {\n      if (opts.verbose) {\n        console.log(`Using git ${opts.example} example`)\n      }\n      loadGitExample({\n        projectName: projectName,\n        example: opts.example,\n      })\n      .then(installWithMessageFactory(opts, true))\n      .catch(function(err) {\n        console.error(`Failed loading git ${opts.example} example`);\n        if (opts.verbose) {\n          console.error(err);\n        }\n        process.exit(1)\n      });\n    } else if (/^file:/.test(opts.example)) {\n      if (opts.verbose) {\n        console.log(`Using file ${opts.example} example`)\n      }\n      const examplePath = opts.example.slice(5);\n      copyDir({\n        templatePath: examplePath,\n        projectPath: projectPath,\n        projectName: projectName,\n      })\n      .then(installWithMessageFactory(opts, true))\n      .catch(function(err) {\n        console.error(`Failed loading file ${opts.example} example`);\n        if (opts.verbose) {\n          console.error(err);\n        }\n        process.exit(1)\n      });\n    } else {\n      if (officialExamples.includes(opts.example)) {\n        if (opts.verbose) {\n          console.log(`Using official ${opts.example} example`)\n        }\n        loadExample({\n          projectName: projectName,\n          example: opts.example,\n          verbose: opts.verbose,\n        })\n        .then(installWithMessageFactory(opts, true))\n        .catch(function(err) {\n          console.error(`Failed loading official ${opts.example} example`);\n          if (opts.verbose) {\n            console.error(err);\n          }\n          process.exit(1)\n        });\n      } else {\n        if (opts.verbose) {\n          console.log(`Using npm ${opts.example} example`)\n        }\n        loadNpmExample({\n          projectName: projectName,\n          example: opts.example,\n        })\n        .then(installWithMessageFactory(opts, true))\n        .catch(function(err) {\n          console.error(`Failed loading npm ${opts.example} example`);\n          if (opts.verbose) {\n            console.error(err);\n          }\n          process.exit(1)\n        });\n      }\n    }\n  } else {\n    if (opts.verbose) {\n      console.log(`Using official default example`)\n    }\n    const templatePath = path.resolve(__dirname, '../templates/default');\n\n    copyDir({\n      templatePath: templatePath,\n      projectPath: projectPath,\n      projectName: projectName,\n    })\n    .then(installWithMessageFactory(opts, true))\n    .catch(function(err) {\n      console.error(`Failed loading official default example`);\n      if (opts.verbose) {\n        console.error(err);\n      }\n      process.exit(1)\n    });\n  }\n};\n\nfunction isSafeToCreateProjectIn(projectPath, projectName) {\n  // we allow this files\n  const validFiles = [\n    '.DS_Store',\n    '.git',\n    '.gitattributes',\n    '.gitignore',\n    '.gitlab-ci.yml',\n    '.hg',\n    '.hgcheck',\n    '.hgignore',\n    '.idea',\n    '.npmignore',\n    '.travis.yml',\n    'docs',\n    'LICENSE',\n    'README.md',\n    'mkdocs.yml',\n    'Thumbs.db',\n  ];\n  // error log files that may exist from a previous install\n  // we will remove these\n  const errorLogFilePatterns = [\n    'npm-debug.log',\n    'yarn-error.log',\n    'yarn-debug.log',\n  ];\n  // helper function to identify whether a file is an error log file\n  const isErrorLog = file => {\n    return errorLogFilePatterns.some(pattern => file.startsWith(pattern));\n  };\n\n  // find conflicting files\n  const conflicts = fs\n    .readdirSync(projectPath)\n    .filter(file => !validFiles.includes(file))\n    // IntelliJ IDEA creates module files before CRA is launched\n    .filter(file => !/\\.iml$/.test(file))\n    // Don't treat log files from previous installation as conflicts\n    .filter(file => !isErrorLog(file));\n\n  if (conflicts.length > 0) {\n    console.log(messages.folderNotEmpty(projectName));\n    for (const file of conflicts) {\n      try {\n        const stats = fs.lstatSync(path.join(projectPath, file));\n        if (stats.isDirectory()) {\n          console.log(messages.conflictingDirectory(file));\n        } else {\n          console.log(messages.conflictingFile(file));\n        }\n      } catch (e) {\n        console.log(messages.conflictingFileError(file));\n      }\n    }\n    console.log(messages.folderNotEmptySuggestions());\n\n    return false;\n  }\n\n  // Remove any log files from a previous installation.\n  fs.readdirSync(projectPath).forEach(file => {\n    if (isErrorLog(file)) {\n      fs.removeSync(path.join(projectPath, file));\n    }\n  });\n  return true;\n}\n\nfunction installWithMessageFactory(opts, isExample = false) {\n  const projectName = opts.projectName;\n  const projectPath = opts.projectPath;\n\n  if (!opts.install) {\n    return function() {\n      console.log(messages.start(projectName, opts));\n    };\n  }\n\n  return function installWithMessage() {\n    return install({\n      npm: opts.npm,\n      yarn: opts.yarn,\n      verbose: opts.verbose,\n      projectName: projectName,\n      projectPath: projectPath,\n      devPackages: [razzlePkg, razzleDevUtilsPkg],\n      packages: isExample ? [] : [\n        'react',\n        'react-dom',\n        'react-router-dom',\n        'express',\n      ],\n    })\n      .then(function() {\n        console.log(messages.start(projectName, opts));\n      })\n      .catch(function(err) {\n        throw err;\n      });\n  };\n}\n"
  },
  {
    "path": "packages/create-razzle-app/lib/messages.js",
    "content": "'use strict';\n\nconst chalk = require('chalk');\nconst getInstallCmd = require('./utils/get-install-cmd');\nconst output = require('./utils/output');\n\nconst program = {\n  name: 'create-razzle-app',\n};\n\nexports.help = function() {\n  return `\n    Only ${chalk.green('<project-directory>')} is required.\n    If you have any problems, do not hesitate to file an issue:\n      ${chalk.cyan('https://github.com/jaredpalmer/razzle/issues/new')}\n  `;\n};\n\nexports.exampleHelp = function() {\n  return `Example from https://github.com/jaredpalmer/razzle/tree/master/examples/ ${output.param(\n    'example-path'\n  )}`;\n};\n\nexports.missingProjectName = function() {\n  return `\nPlease specify the project directory:\n  ${chalk.cyan(program.name)} ${chalk.green('<project-directory>')}\nFor example:\n  ${chalk.cyan(program.name)} ${chalk.green('my-razzle-app')}\n  ${chalk.cyan(program.name)} ${chalk.cyan(\n    '--example with-preact'\n  )} ${chalk.green('my-preact-app')}\nRun ${chalk.cyan(`${program.name} --help`)} to see all options.\n`;\n};\n\nexports.folderNotEmpty = function(projectName) {\n  return `\nUh oh! Looks like the directory ${chalk.red(projectName)} is not empty. These files could conflict:`;\n};\nexports.conflictingDirectory = function(file) {\n    return `  ${chalk.blue('(dir) ' + file)}`;\n};\nexports.conflictingFile = function(file) {\n    return `  ${file}`;\n};\nexports.conflictingFileError = function(file) {\n    return `  ${file}`;\n};\nexports.folderNotEmptySuggestions = function() {\n    return `\nPlease remove these files, use an empty directory, or use a directory name that doesn't already exist to create a new one.`;\n};\n\nexports.installing = function(packages) {\n  const pkgText = packages\n    .map(function(pkg) {\n      return `    ${chalk.cyan(chalk.bold(pkg))}`;\n    })\n    .join('\\n');\n\n  return `\n  Installing npm modules:\n${pkgText}\n`;\n};\n\nexports.installError = function(packages) {\n  const pkgText = packages\n    .map(function(pkg) {\n      return `${chalk.cyan(chalk.bold(pkg))}`;\n    })\n    .join(', ');\n\n  output.error(`Failed to install ${pkgText}, try again.`);\n};\n\nexports.copying = function(projectName) {\n  return `\nCreating ${chalk.bold(chalk.green(projectName))}...\n`;\n};\n\nexports.start = function(projectName, opts) {\n  const cmd = getInstallCmd(opts);\n\n  const commands = {\n    install: cmd.cmd === 'npm' ? 'npm install' : 'yarn',\n    build: cmd.cmd === 'npm' ? 'npm run build' : 'yarn build',\n    start: cmd.cmd === 'npm' ? 'npm run start:prod' : 'yarn start:prod',\n    dev: cmd.cmd === 'npm' ? 'npm start' : 'yarn start',\n  };\n\n  return `\n  ${chalk.green('Awesome!')} You're now ready to start coding.\n\n  I already ran ${output.cmd(commands.install)} for you, so your next steps are:\n    ${output.cmd(`cd ${projectName}`)}\n\n  To start a local server for development:\n    ${output.cmd(commands.dev)}\n\n  To build a version for production:\n    ${output.cmd(commands.build)}\n\n  To run the server in production:\n    ${output.cmd(commands.start)}\n\n  Questions? Feedback? Please let me know!\n  ${chalk.green('https://github.com/jaredpalmer/razzle/issues')}\n`;\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/officialExamples.js",
    "content": "module.exports = [\n  \"basic-server\",\n  \"basic-serverless\",\n  \"basic-spa\",\n  \"basic\",\n  \"with-afterjs\",\n  \"with-custom-babel-config\",\n  \"with-custom-devserver-options\",\n  \"with-custom-environment-variables\",\n  \"with-custom-target-babel-config\",\n  \"with-custom-webpack-config\",\n  \"with-devcert-https\",\n  \"with-development-build\",\n  \"with-elm\",\n  \"with-esbuild-loader\",\n  \"with-eslint\",\n  \"with-experimental-refresh\",\n  \"with-fastify\",\n  \"with-firebase-functions\",\n  \"with-heroku\",\n  \"with-hyperapp\",\n  \"with-inferno\",\n  \"with-jest-snapshots\",\n  \"with-jsconfig-paths\",\n  \"with-jsxstyle\",\n  \"with-koa\",\n  \"with-less\",\n  \"with-loadable-components\",\n  \"with-material-ui\",\n  \"with-mdx\",\n  \"with-module-federation\",\n  \"with-monorepo-without-workspaces\",\n  \"with-monorepo\",\n  \"with-now-v2\",\n  \"with-now\",\n  \"with-polka\",\n  \"with-preact\",\n  \"with-promise-config\",\n  \"with-react-native-web\",\n  \"with-react-router\",\n  \"with-react-server-components\",\n  \"with-reason-react\",\n  \"with-redux\",\n  \"with-scss-options\",\n  \"with-scss\",\n  \"with-single-exposed-port\",\n  \"with-styled-components\",\n  \"with-svelte\",\n  \"with-tailwindcss\",\n  \"with-typeorm-graphql\",\n  \"with-typescript-plugin\",\n  \"with-typescript\",\n  \"with-vendor-bundle\",\n  \"with-vue-router\",\n  \"with-vue\",\n  \"with-webpack-dev-server-v4\",\n  \"with-webpack-public-path\"\n];\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/copy-dir.js",
    "content": "'use strict';\n\nconst path = require('path');\nconst Promise = require('promise');\nconst messages = require('../messages');\nconst output = require('./output');\nconst fs = require('fs-extra');\nconst copy = require('recursive-copy');\n\nmodule.exports = function copyDir(opts) {\n  const templatePath = opts.templatePath;\n  const projectPath = opts.projectPath;\n  const projectName = opts.projectName;\n\n\n  console.log(messages.copying(projectName));\n\n  return new Promise(function(resolve, reject) {\n    const stopCopySpinner = output.wait('Copying files');\n\n    copy(templatePath, projectPath, { dot: true })\n      .then(function() {\n        return fs\n          .pathExists(path.resolve(projectPath, './gitignore'))\n          .then(exists => {\n            if (exists) {\n              return fs.move(\n                path.resolve(projectPath, './gitignore'),\n                path.resolve(projectPath, './.gitignore')\n              );\n            }\n          });\n      })\n      .then(function() {\n        stopCopySpinner();\n        output.success(\n          `Created files for \"${output.cmd(projectName)}\" razzle app`\n        );\n        return this;\n      })\n      .then(resolve)\n      .catch(function(err) {\n        console.error(err);\n        stopCopySpinner();\n        output.error('Copy command failed, try again.');\n        reject(err);\n        process.exit(1);\n      });\n  });\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/get-install-cmd.js",
    "content": "'use strict';\n\nconst execa = require('execa');\n\nlet cmd;\n\nmodule.exports = function getInstallCmd(opts) {\n  if (cmd) {\n    return cmd;\n  }\n\n  let foundCmds = {};\n\n  try {\n    foundCmds.yarn = {\n      version: execa.sync('yarnpkg', ['--version']).stdout,\n      cmd: 'yarn'\n    }\n  } catch (e) {}\n\n  try {\n      foundCmds.npm = {\n        version: execa.sync('npm', ['--version']).stdout,\n        cmd: 'npm'\n      }\n  } catch (e) {}\n\n  if (opts.npm) {\n    cmd = foundCmds.npm;\n    if (!cmd) {\n      console.error(\"No npm found\");\n      process.exit(1);\n    }\n  } else if (opts.yarn) {\n    cmd = foundCmds.yarn;\n    if (!cmd) {\n      console.error(\"No yarn found\");\n      process.exit(1);\n    }\n  } else{\n    cmd = foundCmds.yarn || foundCmds.npm;\n    if (!cmd) {\n      console.error(\"No package manager found\");\n      process.exit(1);\n    }\n  }\n\n\n  return cmd;\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/install.js",
    "content": "'use strict';\n\nconst execa = require('execa');\nconst Promise = require('promise');\nconst messages = require('../messages');\nconst getInstallCmd = require('./get-install-cmd');\nconst output = require('./output');\n\nmodule.exports = function install(opts) {\n  const projectName = opts.projectName;\n  const projectPath = opts.projectPath;\n  const packages = opts.packages || [];\n  const devPackages = opts.devPackages || [];\n\n  // if (packages.length === 0) {\n  //   console.log('Missing packages in `install`, try running again.');\n  //   process.exit(1);\n  // }\n\n  const installCmd = getInstallCmd(opts);\n  const addDevArgs = getAddArgs(installCmd, devPackages, opts, true);\n  const addArgs = getAddArgs(installCmd, packages, opts, false);\n  const installArgs = getInstallArgs(installCmd, packages, opts);\n\n  console.log(messages.installing(packages));\n  process.chdir(projectPath);\n\n  const stdio = opts.verbose ? 'inherit' : 'pipe';\n\n  return new Promise(function(resolve, reject) {\n    const stopInstallSpinner = output.wait('Installing modules');\n    execa(installCmd.cmd, addDevArgs, { cwd: projectPath, stdio: stdio })\n      .then(function() {\n\n        return (packages.length === 0 ? Promise.resolve() : execa(\n          installCmd.cmd,\n          addArgs, { cwd: projectPath, stdio: stdio }\n        )).then(function() {\n          // Confirm that all dependencies were installed\n          // ignore-engines for node 13.x\n\n          return execa(\n            installCmd.cmd,\n            installArgs, { cwd: projectPath, stdio: stdio }\n          );\n        })\n      })\n      .then(function() {\n        stopInstallSpinner();\n        output.success(`Installed dependencies for ${projectName}`);\n        resolve();\n      })\n      .catch(function(res) {\n        stopInstallSpinner();\n        console.log(messages.installError(packages));\n        return reject(new Error(`${installCmd.cmd} installation failed`));\n      });\n  });\n};\n\nfunction getInstallArgs(cmd, packages, opts) {\n  if (cmd.cmd === 'npm') {\n    const args = ['install'];\n    return args.concat(packages, ['--verbose']);\n  } else if (cmd.cmd === 'yarn') {\n    const args = ['install'];\n    return args.concat(\n      parseInt(cmd.version[0]) !== 2 ? ['--ignore-engines'] : []);\n  }\n}\n\nfunction getAddArgs(cmd, packages, opts, dev) {\n  if (cmd.cmd === 'npm') {\n    const args = ['install', dev ? '--save-dev' : '--save', '--save-exact'];\n    return args.concat(packages, ['--verbose']);\n  } else if (cmd.cmd === 'yarn') {\n    const args = ['add', '-W', dev && '--dev'].filter(x=>x);\n    return args.concat(packages,\n      parseInt(cmd.version[0]) !== 2 ? ['--ignore-engines'] : []);\n  }\n}\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/load-example.js",
    "content": "'use strict';\n\nconst fs = require('fs-extra');\nconst tar = require('tar');\nconst axios = require('axios');\nconst httpAdapter = require('axios/lib/adapters/http');\nconst os = require('os');\nconst path = require('path');\nconst UUID = require('pure-uuid');\nconst output = require('./output');\nconst copyDir = require('./copy-dir');\nconst Promise = require('promise');\n\nmodule.exports = function loadExample(opts) {\n  const projectName = opts.projectName;\n  const example = opts.example;\n  const branch = 'master'; // this line auto updates when yarn update-examples is run\n  const url = 'https://codeload.github.com/jaredpalmer/razzle/tar.gz/' + branch;\n\n  if (opts.verbose) {\n    console.log(`Downloading razzle from ${url}`)\n  }\n  const id = new UUID(4).format();\n  const directory = path.join(os.tmpdir(), id);\n  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);\n\n  const stopExampleSpinner = output.wait(\n    `Downloading files for ${output.cmd(example)} example from ${branch} branch`\n  );\n  return fs\n    .ensureDir(directory)\n    .then(() => {\n      return axios.get(url, { responseType: 'stream', adapter: httpAdapter });\n    })\n    .then(response => {\n      return new Promise((resolve, reject) => {\n        const stream = response.data;\n        stream.on('end', () => resolve());\n        stream.pipe(tar.x({ C: directory }));\n      });\n    })\n    .then(function() {\n      stopExampleSpinner();\n      output.success(\n        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`\n      );\n      return copyDir({\n        templatePath: path.join(\n          directory,\n          'razzle-' + branch,\n          'examples',\n          example\n        ),\n        projectPath: projectPath,\n        projectName: projectName,\n      });\n    })\n    .catch(function(err) {\n      throw err;\n    });\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/load-git-example.js",
    "content": "'use strict';\n\nconst fs = require('fs-extra');\nconst os = require('os');\nconst path = require('path');\nconst UUID = require('pure-uuid');\nconst output = require('./output');\nconst copyDir = require('./copy-dir');\nconst exec = require('execa');\n\nmodule.exports = function loadExample(opts) {\n  const projectName = opts.projectName;\n  const example = opts.example;\n  const [repoBranch, examplePath = ''] = example\n    .slice(3)\n    .split(/(?<!\\+http?s|\\+ssh|\\+git):/);\n  const [repoUrl, branch = 'HEAD'] = repoBranch.slice(1).split('@');\n  const id = new UUID(4).format();\n  const idIndex = new UUID(4).format();\n  const directory = path.join(os.tmpdir(), id);\n  const directoryIndex = path.join(os.tmpdir(), idIndex);\n\n  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);\n\n  const branchArg = branch !== 'HEAD' ? ` --branch=${branch}` : '';\n\n  const stopExampleSpinner = output.wait(\n    `Downloading files for ${output.cmd(example)} example`\n  );\n\n  return fs\n    .ensureDir(directory)\n    .then(() => {\n      return exec(`git clone --depth 1${branchArg} ${repoUrl} .`, {\n        cwd: directory,\n        shell: true,\n      });\n    })\n    .then(() => {\n      return exec(\n        `git checkout-index --prefix=${(directoryIndex + path.sep).replace(\n          /\\\\/g,\n          '/'\n        )} -a`,\n        { cwd: directory, shell: true }\n      );\n    })\n    .then(function() {\n      stopExampleSpinner();\n      output.success(\n        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`\n      );\n      return copyDir({\n        templatePath: path.join(directoryIndex, examplePath),\n        projectPath: projectPath,\n        projectName: projectName,\n      });\n    })\n    .then(function() {\n      return fs.remove(directory);\n    })\n    .then(function() {\n      return fs.remove(directoryIndex);\n    })\n    .catch(function(err) {\n      throw err;\n    });\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/load-github-example.js",
    "content": "'use strict';\n\nconst fs = require('fs-extra');\nconst tar = require('tar');\nconst axios = require('axios');\nconst httpAdapter = require('axios/lib/adapters/http');\nconst os = require('os');\nconst path = require('path');\nconst UUID = require('pure-uuid');\nconst output = require('./output');\nconst copyDir = require('./copy-dir');\nconst Promise = require('promise');\n\nmodule.exports = function loadExample(opts) {\n  const projectName = opts.projectName;\n  const example = opts.example;\n  const [url, examplePath = ''] = example.split(/(?<!https):/);\n  const [, , , user, repoBranch] = url.split('/');\n  const [repo, branch = 'master'] = repoBranch.split('@');\n  const id = new UUID(4).format();\n  const directory = path.join(os.tmpdir(), id);\n  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);\n  const tarGzUrl = `https://codeload.github.com/${user}/${repo}/tar.gz/${branch}`;\n\n  const stopExampleSpinner = output.wait(\n    `Downloading files for ${output.cmd(example)} example from ${branch} branch`\n  );\n  return fs\n    .ensureDir(directory)\n    .then(() => {\n      return axios.get(tarGzUrl, {\n        responseType: 'stream',\n        adapter: httpAdapter,\n      });\n    })\n    .then(response => {\n      return new Promise((resolve, reject) => {\n        const stream = response.data;\n        stream.on('end', () => resolve());\n        stream.pipe(tar.x({ C: directory }));\n      });\n    })\n    .then(function() {\n      stopExampleSpinner();\n      output.success(\n        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`\n      );\n      return copyDir({\n        templatePath: path.join(directory, `${repo}-${branch}`, examplePath),\n        projectPath: projectPath,\n        projectName: projectName,\n      });\n    })\n    .then(function() {\n      return fs.remove(directory);\n    })\n    .catch(function(err) {\n      throw err;\n    });\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/load-npm-example.js",
    "content": "'use strict';\n\nconst fs = require('fs-extra');\nconst pacote = require('pacote');\nconst axios = require('axios');\nconst os = require('os');\nconst path = require('path');\nconst UUID = require('pure-uuid');\nconst output = require('./output');\nconst copyDir = require('./copy-dir');\n\nmodule.exports = function loadExample(opts) {\n  const projectName = opts.projectName;\n  const example = opts.example;\n  const [npmPackage, examplePath = ''] = example.split(/:/);\n  const id = new UUID(4).format();\n  const directory = path.join(os.tmpdir(), id);\n  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);\n\n  const stopExampleSpinner = output.wait(\n    `Downloading files for ${output.cmd(example)} example`\n  );\n  return fs\n    .ensureDir(directory)\n    .then(() => {\n      return pacote.extract(npmPackage, directory);\n    })\n    .then(function() {\n      stopExampleSpinner();\n      output.success(\n        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`\n      );\n      return copyDir({\n        templatePath: path.join(directory, examplePath),\n        projectPath: projectPath,\n        projectName: projectName,\n      });\n    })\n    .then(function() {\n      return fs.remove(directory);\n    })\n    .catch(function(err) {\n      throw err;\n    });\n};\n"
  },
  {
    "path": "packages/create-razzle-app/lib/utils/output.js",
    "content": "'use strict';\n\nconst { eraseLine } = require('ansi-escapes');\nconst chalk = require('chalk');\nconst ora = require('ora');\nconst ms = require('ms');\n\nexports.info = function(msg) {\n  console.log(`${chalk.gray('>')} ${msg}`);\n};\n\nexports.error = function(msg) {\n  if (msg instanceof Error) {\n    msg = msg.message;\n  }\n\n  console.error(`${chalk.red('> Error!')} ${msg}`);\n};\n\nexports.success = function(msg) {\n  console.log(`${chalk.green('> Success!')} ${msg}`);\n};\n\nexports.time = function() {\n  const start = new Date();\n  return chalk.gray(`[${ms(new Date() - start)}]`);\n};\n\nexports.wait = function(msg) {\n  const spinner = ora(chalk.green(msg));\n  spinner.color = 'blue';\n  spinner.start();\n\n  return function() {\n    spinner.stop();\n    process.stdout.write(eraseLine);\n  };\n};\n\nexports.prompt = function(opts) {\n  return new Promise(function(resolve, reject) {\n    opts.forEach(function(val, i) {\n      const text = val[1];\n      console.log(`${chalk.gray('>')} [${chalk.bold(i + 1)}] ${text}`);\n    });\n\n    const ondata = v => {\n      const s = v.toString();\n\n      function cleanup() {\n        process.stdin.setRawMode(false);\n        process.stdin.removeListener('data', ondata);\n      }\n\n      if (s === '\\u0003') {\n        cleanup();\n        reject(new Error('Aborted'));\n        return;\n      }\n\n      const n = Number(s);\n      if (opts[n - 1]) {\n        cleanup();\n        resolve(opts[n - 1][0]);\n      }\n    };\n\n    process.stdin.setRawMode(true);\n    process.stdin.resume();\n    process.stdin.on('data', ondata);\n  });\n};\n\nexports.cmd = function(cmd) {\n  return chalk.bold(chalk.cyan(cmd));\n};\n\nexports.code = function(cmd) {\n  return `${chalk.gray('`')}${chalk.bold(cmd)}${chalk.gray('`')}`;\n};\n\nexports.param = function(param) {\n  return chalk.bold(`${chalk.gray('{')}${chalk.bold(param)}${chalk.gray('}')}`);\n};\n"
  },
  {
    "path": "packages/create-razzle-app/package.json",
    "content": "{\n  \"name\": \"create-razzle-app\",\n  \"version\": \"4.2.18\",\n  \"description\": \"CLI tool to bootstrap Razzle applications with no configuration\",\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"author\": \"Jared Palmer <jared@palmer.net> (http://jaredpalmer.com)\",\n  \"engines\": {\n    \"node\": \">=8\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/create-razzle-app\"\n  },\n  \"bugs\": {\n    \"url\": \"https://github.com/jaredpalmer/razzle/issues\"\n  },\n  \"bin\": {\n    \"create-razzle-app\": \"./bin/create-razzle-app\"\n  },\n  \"dependencies\": {\n    \"ansi-escapes\": \"^4.3.1\",\n    \"axios\": \"^0.21.2\",\n    \"chalk\": \"^3.0.0\",\n    \"commander\": \"^5.0.0\",\n    \"execa\": \"^5.0.0\",\n    \"fs-extra\": \"^9.1.0\",\n    \"ms\": \"^2.1.2\",\n    \"ora\": \"^4.0.3\",\n    \"pacote\": \"^11.1.8\",\n    \"promise\": \"^8.1.0\",\n    \"pure-uuid\": \"^1.6.0\",\n    \"recursive-copy\": \"^2.0.11\",\n    \"tar\": \"^6.0.2\"\n  },\n  \"keywords\": [\n    \"razzle\",\n    \"react\",\n    \"webpack\",\n    \"preact\",\n    \"ssr\",\n    \"universal\",\n    \"isomorphic\",\n    \"inferno\",\n    \"reason\",\n    \"reasonml\"\n  ]\n}\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/README.md",
    "content": "**WARNING: This is the documentation for `razzle@next` (Webpack 4).**  \n[Go here for for razzle@0.8.x (stable) docs (Webpack 3)](https://github.com/jaredpalmer/razzle/tree/master).\n\n![repo-banner](https://user-images.githubusercontent.com/4060187/28923990-050a32d4-782e-11e7-9da7-574ce5a8b455.png)\n\n[![CircleCI](https://circleci.com/gh/jaredpalmer/razzle/tree/master.svg?style=shield)](https://circleci.com/gh/jaredpalmer/razzle/tree/master) ![Razzle-status](https://david-dm.org/jaredpalmer/razzle.svg?path=packages/razzle) [![npm version](https://badge.fury.io/js/razzle.svg)](https://badge.fury.io/js/razzle)\n\nUniversal JavaScript applications are tough to setup. Either you buy into a framework like [Next.js](https://github.com/zeit/next.js) or [react-server](https://github.com/redfin/react-server), fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR into a single dependency--giving you the awesome developer experience of [create-react-app](https://github.com/facebookincubator/create-react-app), but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly......whatever comes next.\n\n**Razzle comes with the \"battery-pack included\"**:\n\n* :fire: Universal Hot Module Replacement, so both the client and server update whenever you make edits. No annoying restarts necessary\n* Comes with your favorite ES6 JavaScript goodies (through `babel-preset-razzle`)\n* Comes with the same CSS setup as [create-react-app](https://github.com/facebookincubator/create-react-app)\n* Works with [React](https://github.com/facebook/react), [Preact](https://github.com/developit/preact), [Elm](http://elm-lang.org/), [Reason-React](https://github.com/jaredpalmer/razzle/tree/master/examples/with-reason-react), [Inferno](https://github.com/infernojs), and [Rax](https://github.com/alibaba/rax) as well as [Angular](https://github.com/angular/angular) and [Vue](https://github.com/vuejs/vue) if that's your thing\n* Escape hatches for customization via `.babelrc` and `razzle.config.js`\n* [Jest](https://github.com/facebook/jest) test runner setup with sensible defaults via `razzle test`\n\n## Quick Start\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/jaredpalmer/razzle.svg)](https://greenkeeper.io/)\n\n```bash\nnpm install -g create-razzle-app\n\ncreate-razzle-app my-app\ncd my-app\nnpm start\n```\n\nThen open http://localhost:3000/ to see your app. Your console should look like this:\n\n<img src=\"https://cloud.githubusercontent.com/assets/4060187/26324663/b31788c4-3f01-11e7-8e6f-ffa48533af54.png\" width=\"500px\" alt=\"Razzle Development Mode\"/>\n\n**That's it**. You don't need to worry about setting up multiple webpack configs or other build tools. Just start editing `src/App.js` and go!\n\nBelow is a list of commands you will probably find useful.\n\n### `npm start` or `yarn start`\n\nRuns the project in development mode.  \nYou can view your application at `http://localhost:3000`\n\nThe page will reload if you make edits.\n\n### `npm run build` or `yarn build`\n\nBuilds the app for production to the build folder.\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\n### `npm run start:prod` or `yarn start:prod`\n\nRuns the compiled app in production.\n\nYou can again view your application at `http://localhost:3000`\n\n### `npm test` or `yarn test`\n\nRuns the test watcher (Jest) in an interactive mode.\nBy default, runs tests related to files changed since the last commit.\n\n### `npm start -- --inspect` or `yarn start -- --inspect`\n\nTo debug the node server, you can use `razzle start --inspect`. This will start the node server and enable the inspector agent. For more information, see [this](https://nodejs.org/en/docs/inspector/).\n\n### `npm start -- --inspect-brk` or `yarn start -- --inspect-brk`\n\nTo debug the node server, you can use `razzle start --inspect-brk`. This will start the node server, enable the inspector agent and Break before user code starts. For more information, see [this](https://nodejs.org/en/docs/inspector/).\n\n### `rs`\n\nIf your application is running, and you need to manually restart your server, you do not need to completely kill and rebundle your application. Instead you can just type `rs` and press enter in terminal.\n\n## <img src=\"https://user-images.githubusercontent.com/4060187/37915268-209644d0-30e7-11e8-8ef7-086b529ede8c.png\" width=\"500px\" alt=\"Razzle Hot Restart\"/>\n\n<!-- START doctoc generated TOC please keep comment here to allow auto update -->\n\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->\n\n**Table of Contents**\n\n* [Customization](#customization)\n  * [Extending Babel Config](#extending-babel-config)\n  * [Extending Webpack](#extending-webpack)\n  * [Environment Variables](#environment-variables)\n  * [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)\n    * [Windows (cmd.exe)](#windows-cmdexe)\n    * [Linux, macOS (Bash)](#linux-macos-bash)\n  * [Adding Environment Variables In `.env`](#adding-environment-variables-in-env)\n    * [What other `.env` files are can be used?](#what-other-env-files-are-can-be-used)\n* [How Razzle works (the secret sauce)](#how-razzle-works-the-secret-sauce)\n* [Inspiration](#inspiration)\n  * [Author](#author)\n* [Contributors](#contributors)\n\n<!-- END doctoc generated TOC please keep comment here to allow auto update -->\n\n## Customization\n\n### Customizing Babel Config\n\nRazzle comes with most of ES6 stuff you need. However, if you want to add your own babel transformations, just add a `.babelrc` file to the root of your project.\n\n```js\n{\n  \"presets\": [\n    \"razzle/babel\", // NEEDED\n    \"stage-0\"\n   ],\n   \"plugins\": [\n     // additional plugins\n   ]\n}\n```\n\nA word of advice: the `.babelrc` file will replace the internal razzle babelrc template. You must include at the very minimum the default razzle/babel preset.\n\n### Extending Webpack\n\nYou can also extend the underlying webpack config. Create a file called `razzle.config.js` in your project's root.\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  modify: (config, { target, dev }, webpack) => {\n    // do something to config\n\n    return config;\n  },\n};\n```\n\nA word of advice: `razzle.config.js` is an escape hatch. However, since it's just JavaScript, you can and should publish your `modify` function to npm to make it reusable across your projects. For example, imagine you added some custom webpack loaders and published it as a package to npm as `my-razzle-modifictions`. You could then write your `razzle.config.js` like so:\n\n```\n// razzle.config.js\nconst modify = require('my-razzle-modifictions');\n\nmodule.exports = {\n  modify\n}\n```\n\nLast but not least, if you find yourself needing a more customized setup, Razzle is _very_ forkable. There is one webpack configuration factory that is 300 lines of code, and 4 scripts (`build`, `start`, `test`, and `init`). The paths setup is shamelessly taken from [create-react-app](https://github.com/facebookincubator/create-react-app), and the rest of the code related to logging.\n\n### Environment Variables\n\n**The environment variables are embedded during the build time.** You can read them at runtime just because by default we export them with the `webpack.DefinePlugin`.\n\n* `process.env.RAZZLE_PUBLIC_DIR`: Absolute path to the public directory in the server's filesystem.\n* `process.env.RAZZLE_ASSETS_MANIFEST`: Path to a file containing compiled asset outputs\n* `process.env.REACT_BUNDLE_PATH`: Relative path to where React will be bundled during development. Unless you are modifying the output path of your webpack config, you can safely ignore this. This path is used by `react-error-overlay` and webpack to power up the fancy runtime error iframe. For example, if you are using common chunks and an extra entry to create a vendor bundle with stuff like react, react-dom, react-router, etc. called `vendor.js`, and you've changed webpack's output to `[name].js` in development, you'd want to set this environment variable to `/static/js/vendor.js`. If you do not make this change, nothing bad will happen, you will simply not get the cool error overlay when there are runtime errors. You'll just see them in the console. Note: This does not impact production bundling.\n* `process.env.VERBOSE`: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).\n* `process.env.PORT`: The `BUILD_TARGET=server` build listens on this port for all NODE_ENVs. default is `3000`\n* `process.env.HOST`: The IP address that the server will bind to. default is `0.0.0.0`, for INADDR_ANY\n* `process.env.NODE_ENV`: `'development'` or `'production'`\n* `process.env.BUILD_TARGET`: either `'client'` or `'server'`\n* `process.env.PUBLIC_PATH`: Only in used in `razzle build`. You can alter the `webpack.config.output.publicPath` of the client assets (bundle, css, and images). This is useful if you plan to serve your assets from a CDN. Make sure to _include_ a trailing slash (e.g. `PUBLIC_PATH=https://cdn.example.com/`). If you are using React and altering the public path, make sure to also [include the `crossorigin` attribute](https://reactjs.org/docs/installation.html#using-a-cdn) on your `<script>` tag in `src/server.js`.\n* `process.env.CLIENT_PUBLIC_PATH`: The `NODE_ENV=development` build's `BUILD_TARGET=client` has a different `PUBLIC_PATH` than `BUILD_TARGET=server`. Default is `http://${process.env.HOST}:${process.env.PORT + 1}/`\n\nYou can create your own custom environment variables that will be inlined during the build. They must start\nwith `RAZZLE_`. Any other variables except the ones listed above will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.\n\nThese environment variables will be defined for you on `process.env`. For example, having an environment variable named `RAZZLE_SECRET_CODE` will be exposed in your JS as `process.env.RAZZLE_SECRET_CODE`.\n\n### Adding Temporary Environment Variables In Your Shell\n\nDefining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the\nlife of the shell session.\n\n#### Windows (cmd.exe)\n\n```cmd\nset RAZZLE_SECRET_CODE=abcdef&&npm start\n```\n\n(Note: the lack of whitespace is intentional.)\n\n#### Linux, macOS (Bash)\n\n```bash\nRAZZLE_SECRET_CODE=abcdef npm start\n```\n\n### Adding Environment Variables In `.env`\n\nTo define permanent environment variables, create a file called .env in the root of your project:\n\n```\nRAZZLE_SECRET_CODE=abcdef\n```\n\n#### What other `.env` files are can be used?\n\n* `.env`: Default.\n* `.env.local`: Local overrides. **This file is loaded for all environments except test.**\n* `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.\n* `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.\n\nFiles on the left have more priority than files on the right:\n\n* `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`\n* `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`\n* `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)\n\nThese variables will act as the defaults if the machine does not explicitly set them.<br>\nPlease refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.\n\n> Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need\n> these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).\n\n## How Razzle works (the secret sauce)\n\n**tl;dr**: 2 configs, 2 ports, 2 webpack instances, both watching and hot reloading the same filesystem, in parallel during development and a little `webpack.output.publicPath` magic.\n\nIn development mode (`razzle start`), Razzle bundles both your client and server code using two different webpack instances running with Hot Module Replacement in parallel. While your server is bundled and run on whatever port your specify in `src/index.js` (`3000` is the default), the client bundle (i.e. entry point at `src/client.js`) is served via `webpack-dev-server` on a different port (`3001` by default) with its `publicPath` explicitly set to `localhost:3001` (and not `/` like many other setups do). Then the server's html template just points to the absolute url of the client JS: `localhost:3001/static/js/client.js`. Since both webpack instances watch the same files, whenever you make edits, they hot reload at _exactly_ the same time. Best of all, because they use the same code, the same webpack loaders, and the same babel transformations, you never run into a React checksum mismatch error.\n\n## Inspiration\n\n* [palmerhq/backpack](https://github.com/palmerhq/backpack)\n* [nytimes/kyt](https://github.com/nytimes/kyt)\n* [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)\n* [humblespark/sambell](https://github.com/humblespark/sambell)\n* [zeit/next.js](https://github.com/zeit/next.js)\n\n#### Author\n\n* [Jared Palmer](https://twitter.com/jaredpalmer)\n\n---\n\nMIT License\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n\n| [<img src=\"https://avatars2.githubusercontent.com/u/4060187?v=4\" width=\"100px;\"/><br /><sub>Jared Palmer</sub>](http://jaredpalmer.com)<br />[💬](#question-jaredpalmer 'Answering Questions') [💻](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer 'Code') [🎨](#design-jaredpalmer 'Design') [📖](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer 'Documentation') [💡](#example-jaredpalmer 'Examples') [🤔](#ideas-jaredpalmer 'Ideas, Planning, & Feedback') [👀](#review-jaredpalmer 'Reviewed Pull Requests') [⚠️](https://github.com/jaredpalmer/razzle/commits?author=jaredpalmer 'Tests') [🔧](#tool-jaredpalmer 'Tools') | [<img src=\"https://avatars3.githubusercontent.com/u/1415847?v=4\" width=\"100px;\"/><br /><sub>Jari Zwarts</sub>](https://jari.io)<br />[💬](#question-jariz 'Answering Questions') [💻](https://github.com/jaredpalmer/razzle/commits?author=jariz 'Code') [🤔](#ideas-jariz 'Ideas, Planning, & Feedback') [🔌](#plugin-jariz 'Plugin/utility libraries') [👀](#review-jariz 'Reviewed Pull Requests') | [<img src=\"https://avatars0.githubusercontent.com/u/810438?v=4\" width=\"100px;\"/><br /><sub>Dan Abramov</sub>](http://twitter.com/dan_abramov)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=gaearon 'Code') [🤔](#ideas-gaearon 'Ideas, Planning, & Feedback') | [<img src=\"https://avatars0.githubusercontent.com/u/15182?v=4\" width=\"100px;\"/><br /><sub>Eric Clemmons</sub>](http://ericclemmons.github.com/)<br />[💻](https://github.com/jaredpalmer/razzle/commits?author=ericclemmons 'Code') [🤔](#ideas-ericclemmons 'Ideas, Planning, & Feedback') |\n| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/gitignore",
    "content": "logs\n*.log\nnpm-debug.log*\n.DS_Store\n\ncoverage\nnode_modules\nbuild\ncache\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local"
  },
  {
    "path": "packages/create-razzle-app/templates/default/package.json",
    "content": "{\n  \"name\": \"my-razzle-app\",\n  \"version\": \"4.2.15\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"start\": \"razzle start\",\n    \"build\": \"razzle build\",\n    \"test\": \"razzle test --env=jsdom\",\n    \"start:prod\": \"NODE_ENV=production node build/server.js\"\n  },\n  \"dependencies\": {\n    \"axios\": \"^0.21.1\",\n    \"express\": \"^4.17.1\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-router-dom\": \"^5.2.0\"\n  },\n  \"devDependencies\": {\n    \"razzle\": \"4.2.15\",\n    \"babel-preset-razzle\": \"4.2.15\",\n    \"razzle-dev-utils\": \"4.2.15\",\n    \"html-webpack-plugin\": \"^4.5.2\",\n    \"webpack\": \"^4.44.1\",\n    \"mini-css-extract-plugin\": \"^0.9.0\",\n    \"webpack-dev-server\": \"^3.11.2\"\n  }\n}\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/public/robots.txt",
    "content": "User-agent: *\n\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/sandbox.config.json",
    "content": "{\n  \"container\": {\n    \"port\": 3000\n  }\n}\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/App.css",
    "content": "body {\n  margin: 0;\n  padding: 0;\n  font-family: sans-serif;\n}"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/App.js",
    "content": "import React from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport Home from './Home';\nimport './App.css';\n\nconst App = () => (\n  <Switch>\n    <Route exact={true} path=\"/\" component={Home} />\n  </Switch>\n);\n\nexport default App;\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/App.test.js",
    "content": "import App from './App';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { MemoryRouter } from 'react-router-dom';\n\ndescribe('<App />', () => {\n  test('renders without exploding', () => {\n    const div = document.createElement('div');\n    ReactDOM.render(\n      <MemoryRouter>\n        <App />\n      </MemoryRouter>,\n      div\n    );\n  });\n});\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/Home.css",
    "content": ".Home {\n  text-align: center;\n}\n\n.Home-logo {\n  animation: Home-logo-spin infinite 20s linear;\n  height: 80px;\n}\n\n.Home-header {\n  background-color: #222;\n  height: 150px;\n  padding: 20px;\n  color: white;\n}\n\n.Home-intro {\n  font-size: large;\n}\n\n.Home-resources {\n  list-style: none;\n}\n\n.Home-resources > li {\n  display: inline-block;\n  padding: 1rem;\n}\n\n@keyframes Home-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/Home.js",
    "content": "import React from 'react';\nimport logo from './react.svg';\nimport './Home.css';\n\nclass Home extends React.Component {\n  render() {\n    return (\n      <div className=\"Home\">\n        <div className=\"Home-header\">\n          <img src={logo} className=\"Home-logo\" alt=\"logo\" />\n          <h2>Welcome to Razzle</h2>\n        </div>\n        <p className=\"Home-intro\">\n          To get started, edit <code>src/App.js</code> or{' '}\n          <code>src/Home.js</code> and save to reload.\n        </p>\n        <ul className=\"Home-resources\">\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle\">Docs</a>\n          </li>\n          <li>\n            <a href=\"https://github.com/jaredpalmer/razzle/issues\">Issues</a>\n          </li>\n          <li>\n            <a href=\"https://palmer.chat\">Community Slack</a>\n          </li>\n        </ul>\n      </div>\n    );\n  }\n}\n\nexport default Home;\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/client.js",
    "content": "import App from './App';\nimport { BrowserRouter } from 'react-router-dom';\nimport React from 'react';\nimport { hydrate } from 'react-dom';\n\nhydrate(\n  <BrowserRouter>\n    <App />\n  </BrowserRouter>,\n  document.getElementById('root')\n);\n\nif (module.hot) {\n  module.hot.accept();\n}\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/index.js",
    "content": "import express from 'express';\n\nlet app = require('./server').default;\n\nif (module.hot) {\n  module.hot.accept('./server', function() {\n    console.log('🔁  HMR Reloading `./server`...');\n    try {\n      app = require('./server').default;\n    } catch (error) {\n      console.error(error);\n    }\n  });\n  console.info('✅  Server-side HMR Enabled!');\n}\n\nconst port = process.env.PORT || 3000;\n\nexport default express()\n  .use((req, res) => app.handle(req, res))\n  .listen(port, function(err) {\n    if (err) {\n      console.error(err);\n      return;\n    }\n    console.log(`> Started on port ${port}`);\n  });\n"
  },
  {
    "path": "packages/create-razzle-app/templates/default/src/server.js",
    "content": "import App from './App';\nimport React from 'react';\nimport { StaticRouter } from 'react-router-dom';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\n\nconst assets = require(process.env.RAZZLE_ASSETS_MANIFEST);\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, ...extra) => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${asset}\" ${extra.join(\" \")}></script>`\n  ).join('') : '' : '';\n};\n\nexport const renderApp = (req, res) => {\n  const context = {};\n  const markup = renderToString(\n    <StaticRouter context={context} location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n  const html = `<!doctype html>\n  <html lang=\"\">\n  <head>\n      <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n      <meta charset=\"utf-8\" />\n      <title>Welcome to Razzle</title>\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n      ${cssLinksFromAssets(assets, 'client')}\n  </head>\n  <body>\n      <div id=\"root\">${markup}</div>\n      ${jsScriptTagsFromAssets(assets, 'client', 'defer', 'crossorigin')}\n  </body>\n</html>`\n  return {context, html};\n}\n\nconst server = express();\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const {context, html} = renderApp(req, res);\n    if (context.url) {\n      res.redirect(context.url);\n    } else {\n      res.status(200).send(html);\n    }\n  });\n\nexport default server;\n"
  },
  {
    "path": "packages/razzle/.gitignore",
    "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\n.DS_Store\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n\n# Dependency directory\nnode_modules\n\n# Optional npm cache directory\n.npm\n\n# Optional REPL history\n.node_repl_history\n\n# Build Output\nbuild\n.vscode"
  },
  {
    "path": "packages/razzle/CHANGELOG.md",
    "content": "# razzle\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - babel-preset-razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n  - razzle-start-server-webpack-plugin@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - babel-preset-razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n  - razzle-start-server-webpack-plugin@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - babel-preset-razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n  - razzle-start-server-webpack-plugin@4.2.16\n"
  },
  {
    "path": "packages/razzle/LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2016 Jared Palmer\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/razzle/README.md",
    "content": "![repo-banner](https://user-images.githubusercontent.com/4060187/28923990-050a32d4-782e-11e7-9da7-574ce5a8b455.png)\n\n[![npm version](https://badge.fury.io/js/razzle.svg)](https://badge.fury.io/js/razzle) [![npm](https://img.shields.io/npm/dm/razzle)](https://www.npmjs.com/package/razzle) ![Node CI](https://github.com/jaredpalmer/razzle/workflows/Node%20CI/badge.svg) [![Known Vulnerabilities](https://snyk.io/test/github/jaredpalmer/razzle/badge.svg?targetFile=package.json)](https://snyk.io/test/github/jaredpalmer/razzle?targetFile=package.json) ![Razzle-status](https://david-dm.org/jaredpalmer/razzle.svg?path=packages/razzle) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE) [![Discord](https://img.shields.io/discord/769256827007139912?label=%F0%9F%92%AC%20%20join%20us%20on%20discord&style=plastic)](https://discord.com/invite/RevdZTYMzr)\n\nUniversal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or Nuxt, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all the complex configuration needed for building SPA's and SSR applications into a single dependency--giving you the awesome developer experience of [create-react-app](https://github.com/facebookincubator/create-react-app), but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Preact, Vue, Svelte, and Angular, and most importantly......whatever comes next.\n\n## Getting Started\n\nVisit <a aria-label=\"razzle getting started\" href=\"https://razzlejs.org/getting-started\">https://razzlejs.org/getting-started</a> to get started with Razzle.\n\n## Examples\n\nRazzle has many examples, we might have one that fits your needs\n\nSee: [The examples](https://github.com/jaredpalmer/razzle/tree/master/examples)\n\n## Documentation\n\nVisit <a aria-label=\"razzle docs\" href=\"https://razzlejs.org/\">https://razzlejs.org/</a> to view the documentation.\n\n## Getting help\n\nIf you get stuck, check out Razzle's [GitHub Discussions](https://github.com/jaredpalmer/razzle/discussions). In addition, #razzle-afterjs on the [Formium Community Discord Server](https://discord.gg/pJSg287) is a great way to get help quickly too.\n\n## Contributing\n\nPlease see our [CONTRIBUTING.md](/.github/CONTRIBUTING.md).\n\n## Inspiration\n\n- [jaredpalmer/backpack](https://github.com/jaredpalmer/backpack)\n- [nytimes/kyt](https://github.com/nytimes/kyt)\n- [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)\n- [humblespark/sambell](https://github.com/humblespark/sambell)\n- [zeit/next.js](https://github.com/zeit/next.js)\n\n### Author\n\n- [Jared Palmer](https://twitter.com/jaredpalmer)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n<!-- START contributors generated instructions please keep comment here to allow auto update -->\n<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->\n- **Jared Palmer** - [@jaredpalmer](http://jaredpalmer.com)\n  - **Contributions:** question, code, design, doc, example, ideas, review, test, tool\n- **Nima Arefi** - [@Nimaa77](https://github.com/Nimaa77)\n  - **Contributions:** question, code, doc, example, ideas, review, test, tool\n- **Øyvind Saltvik** - [@fivethreeo](https://github.com/fivethreeo/)\n  - **Contributions:** question, code, example, ideas, review, test, tool\n- **Jari Zwarts** - [@jariz](https://jari.io)\n  - **Contributions:** question, code, ideas, plugin, review\n- **Dan Abramov** - [@gaearon](http://twitter.com/dan_abramov)\n  - **Contributions:** code, ideas\n- **Eric Clemmons** - [@ericclemmons](http://ericclemmons.github.com/)\n  - **Contributions:** code, ideas\n- **Zino Hofmann** - [@HofmannZ](https://www.linkedin.com/in/zinohofmann/)\n  - **Contributions:** example\n- **Lucas Terra** - [@lucasterra](https://www.linkedin.com/in/lucasterra7/)\n  - **Contributions:** code, example, plugin\n- **Ray Andrew** - [@rayandrews](https://www.linkedin.com/in/ray-andrew/)\n  - **Contributions:** code, example, plugin\n- **Heithem Moumni** - [@heithemmoumni](https://www.linkedin.com/in/heithemmoumni/)\n  - **Contributions:** code, example, plugin\n<!-- END contributors generated instructions please keep comment here to allow auto update -->\n\nThis project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!\n\n---\n\nMIT License\n"
  },
  {
    "path": "packages/razzle/babel.js",
    "content": "module.exports = require('babel-preset-razzle');\n"
  },
  {
    "path": "packages/razzle/bin/razzle.js",
    "content": "#!/usr/bin/env node\n'use strict';\n\nconst sade = require('sade');\nconst spawn = require('react-dev-utils/crossSpawn');\nconst pkg = require('../package.json');\nconst prog = sade('razzle');\nprog.version(pkg.version);\n\nconst argv = process.argv.slice(3);\n\nprog\n  .command('build')\n  .describe('Build the application')\n  .option(\n    '-t, --type',\n    'Change the application build type. Must be either `iso` or `spa`.',\n    'iso'\n  )\n  .action(() => {\n    runCommand('build', [], argv);\n  });\n\nprog\n  .command('start')\n  .describe('Start the application in development mode.')\n  .option(\n    '-t, --type',\n    'Change the application build type. Must be either `iso` or `spa`.',\n    'iso'\n  )\n  .action(() => {\n    runCommand('start', [], argv);\n  });\n\nprog\n  .command('export')\n  .describe('Export a static version of the application in production mode.')\n  .action(() => {\n    runCommand('export', [], argv);\n  });\n\nprog\n  .command('test')\n  .describe('Runs the test watcher in an interactive mode.')\n  .action(() => {\n    runCommand('test', argv.filter(x=>x.includes('--inspect')), argv.filter(x=>!x.includes('--inspect')));\n  });\n\nfunction runCommand(script, node_args, script_args) {\n  const result = spawn.sync(\n    'node',\n    node_args.concat([require.resolve('../scripts/' + script)]).concat(script_args),\n    { stdio: 'inherit' }\n  );\n  if (result.signal) {\n    if (result.signal === 'SIGKILL') {\n      console.log(\n        'The build failed because the process exited too early. ' +\n          'This probably means the system ran out of memory or someone called ' +\n          '`kill -9` on the process.'\n      );\n    } else if (result.signal === 'SIGTERM') {\n      console.log(\n        'The build failed because the process exited too early. ' +\n          'Someone might have called `kill` or `killall`, or the system could ' +\n          'be shutting down.'\n      );\n    }\n    process.exit(1);\n  }\n  process.exit(result.status);\n}\n\nprog.parse(process.argv);\n"
  },
  {
    "path": "packages/razzle/config/babel-loader/razzle-babel-loader.js",
    "content": "'use strict';\n\nconst babelLoader = require('babel-loader');\nconst hash = require('string-hash');\nconst path = require('path');\nconst merge = require('deepmerge');\nconst basename = path.basename;\nconst join = path.join;\n\n// increment 'm' to invalidate cache\n// eslint-disable-razzle-line no-useless-concat\nconst cacheKey = 'babel-cache-' + 'm' + '-';\nconst razzleBabelPreset = require('babel-preset-razzle');\n\nconst getModernOptions = function(babelOptions) {\n  babelOptions = babelOptions || {};\n  const presetEnvOptions = Object.assign({}, babelOptions['preset-env']);\n  const transformRuntimeOptions = Object.assign(\n    {},\n    babelOptions['transform-runtime'],\n    { regenerator: false }\n  );\n\n  presetEnvOptions.targets = {\n    esmodules: true,\n  };\n  presetEnvOptions.exclude = (presetEnvOptions.exclude || []).concat([\n    // Block accidental inclusions\n    'transform-regenerator',\n    'transform-async-to-generator',\n  ]);\n\n  return Object.assign({}, babelOptions, {\n    'preset-env': presetEnvOptions,\n    'transform-runtime': transformRuntimeOptions,\n  });\n};\n\nconst razzleBabelPresetModern = function(presetOptions) {\n  return function(context) {\n    return razzleBabelPreset(context, getModernOptions(presetOptions));\n  };\n};\n\nmodule.exports = babelLoader.custom(function(babel) {\n  const presetItem = babel.createConfigItem(razzleBabelPreset, {\n    type: 'preset',\n  });\n  const applyCommonJs = babel.createConfigItem(\n    require('babel-preset-razzle/babel-plugins/commonjs'),\n    { type: 'plugin' }\n  );\n  const commonJsItem = babel.createConfigItem(\n    require('@babel/plugin-transform-modules-commonjs'),\n    { type: 'plugin' }\n  );\n\n  const configs = new Set();\n\n  return {\n    customOptions: function(opts) {\n      const custom = {\n        verbose: opts.verbose,\n        isServer: opts.isServer,\n        isModern: opts.isModern,\n        hasModern: opts.hasModern,\n        development: opts.development,\n        shouldUseReactRefresh: opts.shouldUseReactRefresh,\n      };\n      const filename = join(opts.cwd, 'noop.js');\n      const loader = Object.assign(\n        opts.cache\n          ? {\n              cacheCompression: false,\n              cacheDirectory: join(opts.cwd, 'cache', 'razzle-babel-loader'),\n              cacheIdentifier:\n                cacheKey +\n                (opts.isServer ? '-server' : '') +\n                (opts.isModern ? '-modern' : '') +\n                (opts.hasModern ? '-has-modern' : '') +\n                '-new-polyfills' +\n                (opts.development ? '-development' : '-production') +\n                (opts.hasReactRefresh ? '-react-refresh' : '') +\n                JSON.stringify(\n                  babel.loadPartialConfig({\n                    filename,\n                    cwd: opts.cwd,\n                    sourceFileName: filename,\n                  }).options\n                ),\n            }\n          : {\n              cacheDirectory: false,\n            },\n        opts\n      );\n\n      delete loader.verbose;\n      delete loader.isServer;\n      delete loader.cache;\n      delete loader.distDir;\n      delete loader.isModern;\n      delete loader.hasModern;\n      delete loader.development;\n      delete loader.shouldUseReactRefresh;\n      return { loader, custom };\n    },\n    config: function(cfg, cfgOpts) {\n      const source = cfgOpts.source;\n      const customOptions = cfgOpts.customOptions;\n      const verbose = customOptions.verbose;\n      const isServer = customOptions.isServer;\n      const isModern = customOptions.isModern;\n      const hasModern = customOptions.hasModern;\n      const development = customOptions.development;\n      const shouldUseReactRefresh = customOptions.shouldUseReactRefresh;\n\n      const filename = this.resourcePath;\n      const presetOptions = Object.assign({}, cfg.options);\n\n      if (cfg.hasFilesystemConfig()) {\n        for (const file of [cfg.babelrc, cfg.config]) {\n          // We only log for first compilation otherwise there will be double output\n          if (file && verbose && !configs.has(`${file}.${isServer ? 'node' : 'web'}`)) {\n            configs.add(`${file}.${isServer ? 'node' : 'web'}`);\n            console.info(`Using external babel configuration from ${file} for \"${isServer ? 'node' : 'web'}\" build`);\n          }\n        }\n      } else {\n        // Add our default preset if the no \"babelrc\" found.\n        presetOptions.presets = (presetOptions.presets || []).concat([presetItem]);\n      }\n\n      presetOptions.caller.isServer = isServer;\n      presetOptions.caller.isModern = isModern;\n      presetOptions.caller.isDev = development;\n\n      const emitWarning = this.emitWarning.bind(this);\n      Object.defineProperty(presetOptions.caller, 'onWarning', {\n        enumerable: false,\n        writable: false,\n        value: (presetOptions.caller.onWarning = function(reason) {\n          if (!(reason instanceof Error)) {\n            reason = new Error(reason);\n          }\n          emitWarning(reason);\n        }),\n      });\n\n      presetOptions.plugins = presetOptions.plugins || [];\n\n      if (shouldUseReactRefresh) {\n        const reactRefreshPlugin = babel.createConfigItem(\n          [require('react-refresh/babel'), { skipEnvCheck: true }],\n          { type: 'plugin' }\n        );\n        presetOptions.plugins.unshift(reactRefreshPlugin);\n        if (!isServer) {\n          const noAnonymousDefaultExportPlugin = babel.createConfigItem(\n            [\n              require('babel-preset-razzle/babel-plugins/no-anonymous-default-export'),\n              {},\n            ],\n            { type: 'plugin' }\n          );\n          presetOptions.plugins.unshift(noAnonymousDefaultExportPlugin);\n        }\n      }\n\n      if (isModern) {\n        const razzlePreset = presetOptions.presets.find(\n          preset => preset && preset.value === razzleBabelPreset\n        ) || { options: {} };\n\n        const additionalPresets = presetOptions.presets.filter(\n          preset => preset !== razzlePreset\n        );\n\n        const presetItemModern = babel.createConfigItem(\n          razzleBabelPresetModern(razzlePreset.options),\n          {\n            type: 'preset',\n          }\n        );\n\n        presetOptions.presets = (additionalPresets || []).concat([presetItemModern]);\n      }\n\n      // If the file has `module.exports` we have to transpile commonjs because Babel adds `import` statements\n      // That break webpack, since webpack doesn't support combining commonjs and esmodules\n      if (!hasModern && source.indexOf('module.exports') !== -1) {\n        presetOptions.plugins.push(applyCommonJs);\n      }\n\n      presetOptions.plugins.push([\n        require.resolve('babel-plugin-transform-define'),\n        {\n          'process.env.NODE_ENV': development ? 'development' : 'production',\n          'typeof window': isServer ? 'undefined' : 'object',\n          'process.browser': isServer ? false : true,\n        },\n        'razzle-js-transform-define-instance',\n      ]);\n\n      // As lib has stateful modules we have to transpile commonjs\n      presetOptions.overrides = presetOptions.overrides || [];\n      // .concat([\n      //   {\n      //     test: [\n      //       /razzle[\\\\/]dist[\\\\/]lib/,\n      //     ],\n      //     plugins: [commonJsItem],\n      //   },\n      // ])\n\n      return presetOptions;\n    },\n  };\n});\n"
  },
  {
    "path": "packages/razzle/config/createConfigAsync.js",
    "content": "'use strict';\n\nconst fs = require('fs-extra');\nconst path = require('path');\nconst webpack = require('webpack');\nconst crypto = require('crypto');\nconst util = require('util');\nconst TerserPlugin = require('terser-webpack-plugin');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst StartServerPlugin = require('razzle-start-server-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin');\nconst getClientEnv = require('./env').getClientEnv;\nconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');\nconst errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');\nconst WebpackBar = require('webpackbar');\nconst ManifestPlugin = require('webpack-manifest-plugin').WebpackManifestPlugin;\nconst CopyPlugin = require('copy-webpack-plugin');\nconst PnpWebpackPlugin = require('pnp-webpack-plugin');\nconst modules = require('./modules');\nconst postcssLoadConfig = require('postcss-load-config');\nconst resolveRequest = require('razzle-dev-utils/resolveRequest');\nconst logger = require('razzle-dev-utils/logger');\nconst razzlePaths = require('./paths');\nconst getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');\nconst webpackMajor = require('razzle-dev-utils/webpackMajor');\nconst devServerMajorVersion = require('razzle-dev-utils/devServerMajor');\n\nconst hasPostCssConfigTest = () => {\n  try {\n    return !!postcssLoadConfig.sync();\n  } catch (_error) {\n    return false;\n  }\n};\n\nconst hasPostCssConfig = hasPostCssConfigTest();\n\nlet webpackDevClientEntry;\nif (devServerMajorVersion > 3) {\n  webpackDevClientEntry = require.resolve('razzle-dev-utils/webpackHotDevClientV4');\n} else {\n  webpackDevClientEntry = require.resolve('razzle-dev-utils/webpackHotDevClient');\n}\n\nconst isModuleCSS = module => {\n  return (\n    // mini-css-extract-plugin\n    module.type === `css/mini-extract` ||\n    // extract-css-chunks-webpack-plugin (old)\n    module.type === `css/extract-chunks` ||\n    // extract-css-chunks-webpack-plugin (new)\n    module.type === `css/extract-css-chunks`\n  );\n};\n\n// This is the Webpack configuration factory. It's the juice!\nmodule.exports = (\n  target = 'web',\n  env = 'dev',\n  {\n    clearConsole = true,\n    host = 'localhost',\n    port = 3000,\n    modify = null,\n    modifyWebpackOptions = null,\n    modifyWebpackConfig = null,\n    modifyBabelPreset = null,\n    experimental = {},\n    disableStartServer = false,\n  },\n  webpackObject,\n  clientOnly = false,\n  paths = razzlePaths,\n  plugins = [],\n  razzleOptions = {}\n) => {\n  return new Promise(async resolve => {\n    // Define some useful shorthands.\n    const IS_NODE = target === 'node';\n    const IS_WEB = target === 'web';\n    const IS_SERVERLESS = /serverless/.test(razzleOptions.buildType);\n    const IS_PROD = env === 'prod';\n    const IS_DEV = env === 'dev';\n    const IS_DEV_ENV = process.env.NODE_ENV === 'development';\n\n    // Contains various versions of the Webpack SplitChunksPlugin used in different build types\n    const splitChunksConfigs = {\n      dev: {\n        cacheGroups: {\n          default: false,\n          vendors: false,\n          // In webpack 5 vendors was renamed to defaultVendors\n          defaultVendors: false,\n        },\n      },\n      prod: {\n        cacheGroups: {\n          default: false,\n          vendors: false,\n          // In webpack 5 vendors was renamed to defaultVendors\n          defaultVendors: false,\n        },\n      },\n    };\n\n    const shouldUseReactRefresh =\n      IS_WEB && IS_DEV && razzleOptions.enableReactRefresh ? true : false;\n\n    const shouldDisableWebpackbar =\n      razzleOptions.disableWebpackbar === true || razzleOptions.disableWebpackbar === target;\n\n    let webpackOptions = {};\n\n    const hasPublicDir = fs.existsSync(paths.appPublic);\n\n    const hasStaticExportJs = fs.existsSync(paths.appStaticExportJs + '.js') ||\n      fs.existsSync(paths.appStaticExportJs + '.jsx') ||\n      fs.existsSync(paths.appStaticExportJs + '.ts') ||\n      fs.existsSync(paths.appStaticExportJs + '.tsx');\n\n    const dotenv = getClientEnv(\n      target, IS_DEV,\n      { clearConsole, host, port, shouldUseReactRefresh, forceRuntimeEnvVars: razzleOptions.forceRuntimeEnvVars, webpackObject },\n      paths\n    );\n\n    const portOffset = clientOnly ? 0 : 1;\n\n    const devServerPort =\n      (process.env.PORT_DEV && parseInt(process.env.PORT_DEV, 10)) ||\n      (process.env.PORT && parseInt(process.env.PORT, 10) + portOffset) ||\n      3000 + portOffset;\n\n    // VMs, Docker containers might not be available at localhost:3001. CLIENT_PUBLIC_PATH can override.\n    const clientPublicPath =\n      dotenv.raw.CLIENT_PUBLIC_PATH ||\n      (IS_DEV ? `http://${dotenv.raw.HOST}:${devServerPort}/` : '/');\n\n    const modulesConfig = modules(paths);\n    const additionalModulePaths = modulesConfig.additionalModulePaths || [];\n    const additionalAliases = modulesConfig.additionalAliases || {};\n    const additionalIncludes = modulesConfig.additionalIncludes || [];\n\n\n    webpackOptions.fileLoaderExclude = [\n      /\\.html$/,\n      /\\.(js|jsx|mjs)$/,\n      /\\.(ts|tsx)$/,\n      /\\.(vue)$/,\n      /\\.(less)$/,\n      /\\.(re)$/,\n      /\\.(s?css|sass)$/,\n      /\\.json$/,\n      /\\.bmp$/,\n      /\\.gif$/,\n      /\\.jpe?g$/,\n      /\\.png$/\n    ];\n\n    webpackOptions.urlLoaderTest = [/\\.bmp$/, /\\.gif$/, /\\.jpe?g$/, /\\.png$/];\n\n    webpackOptions.fileLoaderOutputName = `${razzleOptions.mediaPrefix}/[name].[contenthash:8].[ext]`;\n\n    webpackOptions.urlLoaderOutputName = `${razzleOptions.mediaPrefix}/[name].[contenthash:8].[ext]`;\n\n    webpackOptions.cssTest = [/\\.css(\\.map)?$/];\n\n    webpackOptions.cssOutputFilename = `${razzleOptions.cssPrefix}/[name].[contenthash:8].css`;\n\n    webpackOptions.cssOutputChunkFilename = `${razzleOptions.cssPrefix}/[name].[contenthash:8].chunk.css`;\n\n    webpackOptions.jsTest = [/\\.js(\\.map)?$/];\n\n    webpackOptions.definePluginOptions = dotenv.stringified;\n\n    webpackOptions.appAssetsManifestPath = paths.appAssetsManifest;\n\n    if (IS_NODE) {\n\n      webpackOptions.jsOutputFilename = `[name].js`;\n      webpackOptions.jsOutputChunkFilename = `[name].chunk.js`;\n\n      if (IS_DEV) {\n        const nodeArgs = ['-r', require.resolve('source-map-support/register')];\n\n        // Passthrough --inspect and --inspect-brk flags (with optional [host:port] value) to node\n        if (process.env.INSPECT_BRK) {\n          nodeArgs.push(process.env.INSPECT_BRK);\n        } else if (process.env.INSPECT) {\n          nodeArgs.push(process.env.INSPECT);\n        }\n\n        webpackOptions.startServerOptions = {\n          verbose: razzleOptions.verbose,\n          name: 'server.js',\n          entryName: 'server',\n          killOnExit: false,\n          killOnError: false,\n          nodeArgs,\n        };\n      } else {\n        webpackOptions.terserPluginOptions = {};\n      }\n    }\n\n    if (IS_WEB) {\n\n      if (IS_DEV) {\n\n        webpackOptions.jsOutputFilename = `${razzleOptions.jsPrefix}/[name].js`;\n        webpackOptions.jsOutputChunkFilename = `${razzleOptions.jsPrefix}/[name].chunk.js`;\n\n        webpackOptions.splitChunksConfig = splitChunksConfigs.dev;\n      } else {\n\n        webpackOptions.jsOutputFilename = `${razzleOptions.jsPrefix}/[name].[contenthash:8].js`;\n        webpackOptions.jsOutputChunkFilename = `${razzleOptions.jsPrefix}/[name].[contenthash:8].chunk.js`;\n\n        webpackOptions.splitChunksConfig = splitChunksConfigs.prod;\n        webpackOptions.terserPluginOptions = {\n          terserOptions: {\n            parse: {\n              // we want uglify-js to parse ecma 8 code. However, we don't want it\n              // to apply any minfication steps that turns valid ecma 5 code\n              // into invalid ecma 5 code. This is why the 'compress' and 'output'\n              // sections only apply transformations that are ecma 5 safe\n              // https://github.com/facebook/create-react-app/pull/4234\n              ecma: 8,\n            },\n            compress: {\n              ecma: 5,\n              warnings: false,\n              // Disabled because of an issue with Uglify breaking seemingly valid code:\n              // https://github.com/facebook/create-react-app/issues/2376\n              // Pending further investigation:\n              // https://github.com/mishoo/UglifyJS2/issues/2011\n              comparisons: false,\n              // Disabled because of an issue with Terser breaking valid code:\n              // https://github.com/facebook/create-react-app/issues/5250\n              // Pending futher investigation:\n              // https://github.com/terser-js/terser/issues/120\n              inline: 2,\n            },\n            mangle: {\n              safari10: true,\n            },\n            output: {\n              ecma: 5,\n              comments: false,\n              // Turned on because emoji and regex is not minified properly using default\n              // https://github.com/facebook/create-react-app/issues/2488\n              ascii_only: true,\n            },\n          },\n          // @todo add flag for sourcemaps\n          sourceMap: razzleOptions.enableSourceMaps,\n        };\n      }\n    }\n\n    webpackOptions.enableHtmlWebpackPlugin = clientOnly;\n\n    webpackOptions.htmlWebpackPluginOptions = Object.assign(\n      {},\n      {\n        inject: false,\n        template: paths.appHtml\n      },\n      IS_PROD\n      ? {\n        minify: {\n          removeComments: true,\n          collapseWhitespace: true,\n          removeRedundantAttributes: true,\n          useShortDoctype: true,\n          removeEmptyAttributes: true,\n          removeStyleLinkTypeAttributes: true,\n          keepClosingSlash: true,\n          minifyJS: true,\n          minifyCSS: true,\n          minifyURLs: true,\n        },\n      }\n      : {}\n    );\n\n    webpackOptions.browserslist = razzleOptions.browserslist;\n\n    webpackOptions.babelRule = {\n        test: /\\.(js|jsx|mjs|ts|tsx)$/,\n        include: [paths.appSrc].concat(additionalIncludes),\n        use: [{\n          loader: require.resolve('./babel-loader/razzle-babel-loader'),\n          options: {\n            verbose: razzleOptions.verbose,\n            sourceMaps: razzleOptions.enableSourceMaps,\n            isServer: IS_NODE,\n            cwd: paths.appPath,\n            cache: razzleOptions.enableBabelCache,\n            configFile: razzleOptions.enableTargetBabelrc ? path.resolve(paths.appPath, `.babelrc.${target}`) : undefined,\n            hasModern: false,\n            development: IS_DEV,\n            shouldUseReactRefresh: shouldUseReactRefresh,\n          },\n          ident: 'razzle-babel-loader'\n        }\n      ]\n    };\n\n    webpackOptions.watchIgnorePaths = [paths.appAssetsManifest];\n\n    webpackOptions.notNodeExternalResMatch = null;\n\n    webpackOptions.nodeExternals = [];\n    webpackOptions.clientExternals = [];\n    webpackOptions.clientExternals = [];\n\n    webpackOptions.postCssOptions = {\n      ident: 'postcss',\n      sourceMap: razzleOptions.enableSourceMaps,\n      plugins: [\n        [require('autoprefixer'), {\n          overrideBrowserslist: razzleOptions.browserslist || [\n            '>1%',\n            'last 4 versions',\n            'Firefox ESR',\n            'not ie < 9',\n          ],\n          flexbox: 'no-2009',\n        }],\n      ],\n    };\n\n    webpackOptions.nullNodeCss = false;\n\n    for (const [plugin, pluginOptions] of plugins) {\n      // Check if .modifyWebpackConfig is a function.\n      // If it is, call it on the configs we created.\n      if (plugin.modifyWebpackOptions) {\n        webpackOptions = await plugin.modifyWebpackOptions({\n          env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },\n          webpackObject: webpackObject,\n          options: {\n            pluginOptions,\n            razzleOptions,\n            webpackOptions,\n          },\n          paths,\n        });\n      }\n    }\n    // Check if razzle.config.js has a modifyWebpackOptions function.\n    // If it does, call it on the configs we created.\n    if (modifyWebpackOptions) {\n      webpackOptions = await modifyWebpackOptions({\n        env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },\n        webpackObject: webpackObject,\n        options: {\n          razzleOptions,\n          webpackOptions,\n        },\n        paths,\n      });\n    }\n\n    if (razzleOptions.debug.options) {\n      console.log(`Printing webpack options for ${target} target`);\n      console.log(util.inspect(webpackOptions, {depth: null}));\n    }\n\n    const debugNodeExternals = razzleOptions.debug.nodeExternals;\n\n    const nodeExternalsFunc = (context, request, callback) => {\n      if (webpackOptions.notNodeExternalResMatch &&\n        webpackOptions.notNodeExternalResMatch(request, context)\n      ) {\n        if (debugNodeExternals) {\n          console.log(`Not externalizing ${request} (using notNodeExternalResMatch)`);\n        }\n        return callback();\n      }\n\n      const isLocal =\n      request.startsWith('.') ||\n      // Always check for unix-style path, as webpack sometimes\n      // normalizes as posix.\n      path.posix.isAbsolute(request) ||\n      // When on Windows, we also want to check for Windows-specific\n      // absolute paths.\n      (process.platform === 'win32' && path.win32.isAbsolute(request));\n\n      // Relative requires don't need custom resolution, because they\n      // are relative to requests we've already resolved here.\n      // Absolute requires (require('/foo')) are extremely uncommon, but\n      // also have no need for customization as they're already resolved.\n      if (isLocal) {\n        if (debugNodeExternals) {\n          console.log(`Not externalizing ${request} (relative require)`);\n        }\n        return callback();\n      }\n\n      let res;\n      try {\n        res = resolveRequest(request, `${context}/`);\n      } catch (err) {\n        // If the request cannot be resolved, we need to tell webpack to\n        // \"bundle\" it so that webpack shows an error (that it cannot be\n        // resolved).\n        if (debugNodeExternals) {\n          console.log(`Not externalizing ${request} (cannot resolve)`);\n        }\n        return callback();\n      }\n      // Same as above, if the request cannot be resolved we need to have\n      // webpack \"bundle\" it so it surfaces the not found error.\n      if (!res) {\n        if (debugNodeExternals) {\n          console.log(`Not externalizing ${request} (cannot resolve)`);\n        }\n        return callback();\n      }\n      // This means we need to make sure its request resolves to the same\n      // package that'll be available at runtime. If it's not identical,\n      // we need to bundle the code (even if it _should_ be external).\n      let baseRes = null;\n      try {\n        baseRes = resolveRequest(request, `${paths.appPath}/`);\n      } catch (err) {\n        baseRes = null;\n      }\n\n      // Same as above: if the package, when required from the root,\n      // would be different from what the real resolution would use, we\n      // cannot externalize it.\n      if (baseRes !== res) {\n        if (debugNodeExternals) {\n          console.log(`Not externalizing ${request} (real resolution differs)`);\n        }\n        return callback();\n      }\n\n      // This is the @babel/plugin-transform-runtime \"helpers: true\" option\n      if (res.match(/node_modules[/\\\\]@babel[/\\\\]runtime[/\\\\]/)) {\n        if (debugNodeExternals) {\n          console.log(`Not externalizing @babel/plugin-transform-runtime`);\n        }\n        return callback();\n      }\n\n      // Anything else that is standard JavaScript within `node_modules`\n      // can be externalized.\n      if (res.match(/node_modules[/\\\\].*\\.c?js$/)) {\n        if (debugNodeExternals) {\n          console.log(`Externalizing ${request} (node_modules)`);\n        }\n        return callback(undefined, `commonjs ${request}`);\n      }\n\n      if (debugNodeExternals) {\n        console.log(`Not externalizing ${request} (default)`);\n      }\n      // Default behavior: bundle the code!\n      return callback();\n    };\n\n    const postCssOptions = hasPostCssConfig ? undefined : { postcssOptions: webpackOptions.postCssOptions };\n\n    // This is our base webpack config.\n    let config = {\n      // Set webpack mode:\n      mode: IS_DEV || IS_DEV_ENV ? 'development' : 'production',\n      // Set webpack context to the current apps directory\n      context: paths.appPath,\n      // Specify target (either 'node' or 'web')\n      target: target,\n      // Controversially, decide on sourcemaps.\n      devtool: IS_DEV || IS_DEV_ENV ? 'cheap-module-source-map' : razzleOptions.enableSourceMaps ? 'source-map' : false,\n      // We need to tell webpack how to resolve both Razzle's node_modules and\n      // the users', so we use resolve and resolveLoader.\n      resolve: {\n        mainFields: IS_NODE ? ['main', 'module']\n        : ['browser', 'module', 'main'],\n        modules: ['node_modules', paths.appNodeModules].concat(\n          additionalModulePaths\n        ),\n        extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx'],\n        alias: Object.assign(\n          {\n            // This is required so symlinks work during development.\n            'webpack/hot/poll': require.resolve('webpack/hot/poll'),\n            // Support React Native Web\n            // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/\n            'react-native': 'react-native-web',\n          },\n          additionalAliases\n        ),\n        plugins: [\n          webpackMajor !== 5 && PnpWebpackPlugin,\n        ].filter(x => x),\n      },\n      resolveLoader: {\n        modules: [paths.appNodeModules, paths.ownNodeModules],\n        plugins: [\n          webpackMajor !== 5 && PnpWebpackPlugin.moduleLoader(module),\n        ].filter(x => x),\n      },\n      module: {\n        strictExportPresence: true,\n        rules: [\n          webpackOptions.babelRule,\n          {\n            exclude: webpackOptions.fileLoaderExclude,\n            use: clientOnly || webpackOptions.enableHtmlWebpackPlugin ? (info) => {\n              return info.compiler !== 'HtmlWebpackCompiler' ? [{\n                loader: require.resolve('file-loader'),\n                options: {\n                  name: webpackOptions.fileLoaderOutputName,\n                  emitFile: IS_WEB,\n                },\n                ident: 'razzle-file-loader'\n              }]:[]} :\n              [{ // fix for vue-loader plugin\n                loader: require.resolve('file-loader'),\n                options: {\n                  name: webpackOptions.fileLoaderOutputName,\n                  emitFile: IS_WEB,\n                },\n                ident: 'razzle-file-loader'\n              }]\n            },\n          // \"url\" loader works like \"file\" loader except that it embeds assets\n          // smaller than specified limit in bytes as data URLs to avoid requests.\n          // A missing `test` is equivalent to a match.\n          {\n            test: webpackOptions.urlLoaderTest,\n            use: [{\n              loader: require.resolve('url-loader'),\n              options: {\n                limit: 10000,\n                name: webpackOptions.urlLoaderOutputName,\n                emitFile: IS_WEB,\n              },\n              ident: 'razzle-url-loader'\n            }\n          ]},\n\n          // \"postcss\" loader applies autoprefixer to our CSS.\n          // \"css\" loader resolves paths in CSS and adds assets as dependencies.\n          // \"style\" loader turns CSS into JS modules that inject <style> tags.\n          // In production, we use a plugin to extract that CSS to a file, but\n          // in development \"style\" loader enables hot editing of CSS.\n          //\n          // Note: this yields the exact same CSS config as create-react-app.\n          {\n            test: /\\.css$/,\n            use: IS_NODE\n            ? // Style-loader does not work in Node.js without some crazy\n            // magic. Luckily we just need css-loader.\n            [\n              webpackOptions.nullNodeCss ? {\n                loader: require.resolve('null-loader')\n              } : {\n                loader: require.resolve('css-loader'),\n                options: {\n                  importLoaders: 1,\n                  modules: {\n                    auto: true,\n                    exportOnlyLocals: true,\n                    localIdentName: '[name]__[local]___[hash:base64:5]'\n                  },\n                },\n                ident: 'razzle-css-loader'\n              },\n            ]\n            : IS_DEV\n            ? [\n              razzleOptions.staticCssInDev\n                ?  {\n                  loader: MiniCssExtractPlugin.loader,\n                  ident: 'razzle-mini-css-extract-loader'\n                } : {\n                  loader: require.resolve('style-loader'),\n                  ident: 'razzle-style-loader'\n                },\n              {\n                loader: require.resolve('css-loader'),\n                options: {\n                  importLoaders: 1,\n                  modules: {\n                    auto: true,\n                    localIdentName: '[name]__[local]___[hash:base64:5]',\n                  },\n                },\n                ident: 'razzle-css-loader'\n              },\n              {\n                loader: require.resolve('postcss-loader'),\n                options: postCssOptions,\n                ident: 'razzle-postcss-loader'\n              },\n            ]\n            : [{\n                loader: MiniCssExtractPlugin.loader,\n                ident: 'razzle-mini-css-extract-loader'\n              },\n              {\n                loader: require.resolve('css-loader'),\n                options: {\n                  sourceMap: razzleOptions.enableSourceMaps,\n                  importLoaders: 1,\n                  modules: {\n                    auto: true,\n                    localIdentName: '[name]__[local]___[hash:base64:5]',\n                  },\n                },\n                ident: 'razzle-css-loader'\n              },\n              {\n                loader: require.resolve('postcss-loader'),\n                options: postCssOptions,\n                ident: 'razzle-postcss-loader'\n              },\n            ],\n          },\n        ],\n      },\n    };\n\n    config.plugins = [\n      // Ignore assets.json and chunks.json to avoid infinite recompile bug\n      new webpack.WatchIgnorePlugin(\n        webpackMajor === 5\n        ? { paths: webpackOptions.watchIgnorePaths }\n        : webpackOptions.watchIgnorePaths\n      ),\n    ];\n\n    if (IS_NODE) {\n      // We want to uphold node's __filename, and __dirname.\n      config.node = {\n        __dirname: false,\n        __filename: false,\n      };\n\n      const nodeExternals = Array.isArray(webpackOptions.nodeExternals)\n        ? webpackOptions.nodeExternals : [webpackOptions.nodeExternals];\n\n      // We need to tell webpack what to bundle into our Node bundle.\n      config.externals = (!IS_SERVERLESS ? [nodeExternalsFunc] : []).concat(nodeExternals);\n\n      // Specify webpack Node.js output path and filename\n      config.output = {\n        path: paths.appBuild,\n        publicPath: clientPublicPath,\n        filename: webpackOptions.jsOutputFilename,\n        chunkFilename: webpackOptions.jsOutputChunkFilename,\n        libraryTarget: 'commonjs2',\n      };\n\n      if (webpackMajor === 5) {\n        config.output.library = {\n          type: 'commonjs2'\n        };\n      }\n\n      // Add some plugins...\n      config.plugins = [\n        ...config.plugins,\n        // We define environment variables that can be accessed globally in our\n        new webpack.DefinePlugin(webpackOptions.definePluginOptions),\n      ];\n\n      config.entry = {\n        server: [paths.appServerIndexJs],\n      };\n\n      // make sure the key exists\n      config.optimization = {};\n\n      if (IS_PROD) {\n        // Prevent creating multiple chunks for the server\n        // in dev mode emitting one huge server file on every save is very slow\n        if (!IS_DEV_ENV) {\n          config.plugins.push(\n            new webpack.optimize.LimitChunkCountPlugin({\n              maxChunks: 1,\n            })\n          );\n          config.optimization = {\n            minimize: true,\n            minimizer: [\n              new TerserPlugin(webpackOptions.terserPluginOptions)\n            ],\n          }\n        }\n        if (webpackMajor === 5) {\n          config.optimization.emitOnErrors = razzleOptions.emitOnErrors;\n        } else {\n          config.optimization.noEmitOnErrors = !razzleOptions.emitOnErrors;\n        }\n        if (hasStaticExportJs) {\n          config.entry.static_export = [paths.appStaticExportJs];\n        }\n      }\n\n      if (IS_DEV) {\n        // Use watch mode\n        config.watch = true;\n        config.entry.server.unshift(\n          `${require.resolve('webpack/hot/poll')}?300`\n        );\n\n        // Pretty format server errors\n        config.entry.server.unshift(\n          require.resolve('razzle-dev-utils/prettyNodeErrors')\n        );\n\n        config.plugins = [\n          ...config.plugins,\n          // Add hot module replacement\n          new webpack.HotModuleReplacementPlugin(),\n          // Supress errors to console (we use our own logger)\n          !disableStartServer &&\n            new StartServerPlugin(webpackOptions.startServerOptions),\n        ].filter(x => x);\n      }\n    }\n\n    if (IS_WEB) {\n      //\n      // config.node = {\n      //   fs: 'empty',\n      // };\n\n      // Extract our CSS into files.\n      const miniCssExtractPlugin = new MiniCssExtractPlugin({\n        filename: webpackOptions.cssOutputFilename,\n        chunkFilename: webpackOptions.cssOutputChunkFilename,\n      });\n\n      config.plugins = [\n        ...config.plugins,\n        webpackMajor === 5 && new webpack.ProvidePlugin({\n          Buffer: [require.resolve('buffer'), 'Buffer'],\n          process: [require.resolve('process')],\n        }),\n        // Output all files in a manifest file called assets-manifest.json\n        // in the build directory.\n        new ManifestPlugin({\n          fileName: webpackOptions.appAssetsManifestPath,\n          writeToFileEmit: true,\n          generate: (seed, files) => {\n            const entrypoints = new Set();\n            const noChunkFiles = new Set();\n            files.forEach(file => {\n              if (file.isChunk) {\n                const groups = (\n                  (file.chunk || {})._groups || []\n                ).forEach(group => entrypoints.add(group));\n              } else {\n                noChunkFiles.add(file);\n              }\n            });\n            const entries = [...entrypoints];\n            const entryArrayManifest = entries.reduce((acc, entry) => {\n              const name =\n                (entry.options || {}).name ||\n                (entry.runtimeChunk || {}).name ||\n                entry.id;\n              const allFiles = []\n                .concat(\n                  ...(entry.chunks || []).map(chunk =>\n                    chunk.files.map(path => !path.startsWith('/.') && config.output.publicPath + path)\n                  )\n                )\n                .filter(Boolean);\n\n              const filesByType = allFiles.reduce((types, file) => {\n                const fileType = file.slice(file.lastIndexOf('.') + 1);\n                types[fileType] = types[fileType] || [];\n                types[fileType].push(file);\n                return types;\n              }, {});\n\n              const chunkIds = [].concat(\n                ...(entry.chunks || []).map(chunk => chunk.ids)\n              );\n\n              return name\n                ? {\n                    ...acc,\n                    [name]:  { ...filesByType, chunks: chunkIds },\n                  }\n                : acc;\n            }, seed);\n            entryArrayManifest['noentry'] = [...noChunkFiles]\n              .map(file => !file.path.includes('/.') && file.path)\n              .filter(Boolean)\n              .reduce((types, file) => {\n                const fileType = file.slice(file.lastIndexOf('.') + 1);\n                types[fileType] = types[fileType] || [];\n                types[fileType].push(file);\n                return types;\n              }, {});\n            return entryArrayManifest;\n          },\n        })\n      ].filter(x=>x);\n\n      if (IS_DEV) {\n        // Setup Webpack Dev Server on port 3001 and\n        // specify our client entry point /client/index.js\n        config.entry = {\n          client: [\n            !shouldUseReactRefresh ? webpackDevClientEntry : null,\n            paths.appClientIndexJs,\n          ].filter(x => x),\n        };\n\n        // Configure our client bundles output. Not the public path is to 3001.\n        config.output = {\n          path: paths.appBuildPublic,\n          publicPath: clientPublicPath,\n          pathinfo: true,\n          libraryTarget: 'var',\n          filename: webpackOptions.jsOutputFilename,\n          chunkFilename: webpackOptions.jsOutputChunkFilename,\n          devtoolModuleFilenameTemplate: info =>\n            path.resolve(info.resourcePath).replace(/\\\\/g, '/'),\n        };\n\n        if (webpackMajor === 5) {\n          config.output.library = {\n            type: 'var',\n            name: 'client',\n          };\n        }\n\n        // Configure webpack-dev-server to serve our client-side bundle from\n        // http://${dotenv.raw.HOST}:3001\n        //\n        // First assign the dev server props that are common to v3 and v4\n        config.devServer = {\n          compress: true, // watchContentBase: true,\n          headers: { 'Access-Control-Allow-Origin': '*' },\n          historyApiFallback: {\n            // Paths with dots should still use the history fallback.\n            // See https://github.com/facebookincubator/create-react-app/issues/387.\n            disableDotRule: true,\n          },\n          hot: true,\n          host: dotenv.raw.HOST,\n          port: devServerPort,\n        };\n        // If the major version is > 3, then use the newer configuration notation\n        if (devServerMajorVersion > 3) {\n          // See https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md for how this was migrated\n          config.devServer = Object.assign(config.devServer, {\n            allowedHosts: 'all',\n            client: {\n              logging: 'none', // Enable gzip compression of generated files.\n              overlay: false,\n            },\n            devMiddleware: {\n              publicPath: clientPublicPath,\n            },\n            static: {\n              // Reportedly, this avoids CPU overload on some systems.\n              // https://github.com/facebookincubator/create-react-app/issues/293\n              watch: { ignored: /node_modules/ },\n            },\n            onBeforeSetupMiddleware(server) {\n              // This lets us open files from the runtime error overlay.\n              server.app.use(errorOverlayMiddleware());\n            },\n          });\n        } else {\n          config.devServer = Object.assign(config.devServer, {\n            disableHostCheck: true,\n            clientLogLevel: 'none', // Enable gzip compression of generated files.\n            publicPath: clientPublicPath,\n            noInfo: true,\n            overlay: false,\n            quiet: true, // By default files from `contentBase` will not trigger a page reload.\n            // Reportedly, this avoids CPU overload on some systems.\n            // https://github.com/facebookincubator/create-react-app/issues/293\n            watchOptions: { ignored: /node_modules/ },\n            before(app) {\n              // This lets us open files from the runtime error overlay.\n              app.use(errorOverlayMiddleware());\n            },\n          });\n        }\n\n        // Add client-only development plugins\n        config.plugins = [\n          ...config.plugins,\n          devServerMajorVersion > 3\n            ? null // avoid warning since v4 automatically adds the HRM plugin when `hot` is true\n            : new webpack.HotModuleReplacementPlugin({\n                // set this true will break HtmlWebpackPlugin\n                multiStep: !clientOnly,\n              }),\n          shouldUseReactRefresh\n            ? new ReactRefreshWebpackPlugin({\n                overlay: {\n                  entry: webpackDevClientEntry,\n                },\n              })\n            : null,\n          new webpack.DefinePlugin(webpackOptions.definePluginOptions),\n          razzleOptions.staticCssInDev ? miniCssExtractPlugin : null,\n        ].filter(x => x);\n\n        config.optimization = {\n          splitChunks: webpackOptions.splitChunksConfig,\n        };\n      } else {\n        // Specify production entry point (/client/index.js)\n        config.entry = {\n          client: paths.appClientIndexJs,\n        };\n\n        const clientExternals = Array.isArray(webpackOptions.clientExternals)\n          ? webpackOptions.clientExternals : [webpackOptions.clientExternals];\n\n        // We need to tell webpack what to bundle into our client bundle.\n        config.externals = clientExternals;\n\n        // Specify the client output directory and paths. Notice that we have\n        // changed the publicPath to just '/' from http://localhost:3001. This is because\n        // we will only be using one port in production.\n        config.output = {\n          path: paths.appBuildPublic,\n          publicPath: dotenv.raw.PUBLIC_PATH || '/',\n          filename: webpackOptions.jsOutputFilename,\n          chunkFilename: webpackOptions.jsOutputChunkFilename,\n          libraryTarget: 'var',\n        };\n\n        if (webpackMajor === 5) {\n          config.output.library = {\n            type: 'var',\n            name: 'client',\n          };\n        }\n\n        config.plugins = [\n          ...config.plugins,\n          // Define production environment vars\n          new webpack.DefinePlugin(webpackOptions.definePluginOptions),\n          miniCssExtractPlugin,\n          IS_DEV_ENV || webpackMajor === 5 ? null : new webpack.HashedModuleIdsPlugin(),\n          IS_DEV_ENV ? null : new webpack.optimize.AggressiveMergingPlugin(),\n          hasPublicDir && new CopyPlugin({\n            patterns: [\n              {\n                from: paths.appPublic.replace(/\\\\/g, '/') + '/**/*',\n                to: paths.appBuild,\n                context: paths.appPath,\n                globOptions: {\n                  ignore: [paths.appPublic.replace(/\\\\/g, '/') + \"/index.html\"],\n                }\n              },\n            ]\n          }),\n        ].filter(x => x);\n\n        // make sure the key exists\n        config.optimization = {};\n\n        if (!IS_DEV_ENV) {\n          config.optimization = {\n            splitChunks: webpackOptions.splitChunksConfig,\n            moduleIds: webpackMajor === 5 ? 'deterministic' : 'hashed',\n            minimize: true,\n            minimizer: [\n              new TerserPlugin(webpackOptions.terserPluginOptions),\n              new CssMinimizerPlugin({\n                sourceMap: razzleOptions.enableSourceMaps,\n                minimizerOptions: {\n                  sourceMap: razzleOptions.enableSourceMaps\n                },\n                minify: async (data, inputMap, minimizerOptions) => {\n                  // eslint-disable-next-line global-require\n                  const CleanCSS = require('clean-css');\n\n                  const [[filename, input]] = Object.entries(data);\n                  const minifiedCss = await new CleanCSS({ sourceMap: minimizerOptions.sourceMap }).minify({\n                    [filename]: {\n                      styles: input,\n                      sourceMap: inputMap,\n                    },\n                  });\n\n                  return {\n                    css: minifiedCss.styles,\n                    map: minifiedCss.sourceMap ? minifiedCss.sourceMap.toJSON() : '',\n                    warnings: minifiedCss.warnings,\n                  };\n                },\n              })\n            ],\n          }\n        }\n        if (webpackMajor === 5) {\n          config.optimization.emitOnErrors = razzleOptions.emitOnErrors;\n        } else {\n          config.optimization.noEmitOnErrors = !razzleOptions.emitOnErrors;\n        }\n      }\n\n      if (clientOnly) {\n        if (IS_DEV) {\n          if (devServerMajorVersion > 3) {\n            // See https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md for how this was migrated\n            config.devServer.static.directory = paths.appPublic;\n            if (!config.devServer.static.watch) {\n              config.devServer.static.watch = true;\n            }\n          } else {\n            config.devServer.contentBase = paths.appPublic;\n            config.devServer.watchContentBase = true;\n          }\n        }\n      }\n\n      if (webpackOptions.enableHtmlWebpackPlugin) {\n        config.plugins = [\n          ...config.plugins,\n          // Generates an `index.html` file with the <script> injected.\n          new HtmlWebpackPlugin(webpackOptions.htmlWebpackPluginOptions),\n        ];\n      }\n    }\n\n    if (IS_DEV && !shouldDisableWebpackbar) {\n      config.plugins = [\n        ...config.plugins,\n        new WebpackBar({\n          color: target === 'web' ? '#f56be2' : '#c065f4',\n          name: target === 'web' ? 'client' : 'server',\n        }),\n      ];\n    }\n\n    for (const [plugin, pluginOptions] of plugins) {\n      // Check if .modifyWebpackConfig is a function.\n      // If it is, call it on the configs we created.\n      if (plugin.modifyWebpackConfig) {\n        config = await plugin.modifyWebpackConfig({\n          env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },\n          webpackConfig: config,\n          webpackObject: webpackObject,\n          options: {\n            pluginOptions,\n            razzleOptions,\n            webpackOptions,\n          },\n          paths,\n        });\n      }\n    }\n    // Check if razzle.config.js has a modifyWebpackConfig function.\n    // If it does, call it on the configs we created.\n    if (modifyWebpackConfig) {\n      config = await modifyWebpackConfig({\n        env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },\n        webpackConfig: config,\n        webpackObject: webpackObject,\n        options: {\n          razzleOptions,\n          webpackOptions,\n        },\n        paths,\n      });\n    }\n    if (razzleOptions.debug.config) {\n      console.log(`Printing webpack config for ${target} target`);\n      console.log(util.inspect(config, {depth: null}));\n    }\n    resolve(config);\n  });\n};\n"
  },
  {
    "path": "packages/razzle/config/createJestConfig.js",
    "content": "'use strict';\n\nconst fs = require('fs');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\n\n// first search for setupTests.ts file\n// if .ts file not exists then looks for setupTests.js\nfunction getSetupTestsFilePath(paths) {\n  const path = '<rootDir>/src/setupTests';\n  if (fs.existsSync(paths.tsTestsSetup)) {\n    return path.concat('.ts');\n  }\n  if (fs.existsSync(paths.jsTestsSetup)) {\n    return path.concat('.js');\n  }\n}\n\nmodule.exports = (\n  resolve,\n  rootDir,\n  razzle,\n  razzleOptions,\n  webpackObject,\n  plugins,\n  paths\n) => {\n  return new Promise(async resolveConfig => {\n    // Use this instead of `paths.testsSetup` to avoid putting\n    // an absolute filename into configuration after ejecting.\n    const setupTestsFile = getSetupTestsFilePath(paths);\n\n    // TODO: I don't know if it's safe or not to just use / as path separator\n    // in Jest configs. We need help from somebody with Windows to determine this.\n    let config =\n    {\n      collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],\n      testMatch: [\n        '<rootDir>/src/**/*(*.)@(spec|test).(ts|js)?(x)',\n        '<rootDir>/src/**/__tests__/**/*(*.)@(spec|test).(ts|js)?(x)',\n        '<rootDir>/tests/**/*(*.)@(spec|test).(ts|js)?(x)',\n      ],\n      testEnvironment: 'node',\n      testURL: 'http://localhost',\n      transform: {\n        '^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$': resolve(\n          'config/jest/babelTransform.js'\n        ),\n        '^.+\\\\.css$': resolve('config/jest/cssTransform.js'),\n        '^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': resolve(\n          'config/jest/fileTransform.js'\n        ),\n      },\n      transformIgnorePatterns: [\n        '[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$',\n        '^.+\\\\.module\\\\.(css|sass|scss)$',\n      ],\n      moduleDirectories: ['node_modules'],\n      moduleNameMapper: {\n        '^react-native$': 'react-native-web',\n      },\n      moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],\n      setupFilesAfterEnv: setupTestsFile ? [setupTestsFile] : []\n    }\n\n    if (rootDir) {\n      config.rootDir = rootDir;\n    }\n\n    let overrides = {};\n    if (fs.existsSync(paths.appPackageJson)) {\n      try {\n        overrides = Object.assign({}, require(paths.appPackageJson).jest);\n      } catch (e) {\n        clearConsole();\n        logger.error('Invalid package.json.', e);\n        process.exit(1);\n      }\n    }\n\n    const supportedKeys = [\n      'collectCoverageFrom',\n      'coverageReporters',\n      'coverageThreshold',\n      'globals',\n      'globalSetup',\n      'globalTeardown',\n      'mapCoverage',\n      'moduleDirectories',\n      'moduleFileExtensions',\n      'moduleNameMapper',\n      'modulePaths',\n      'snapshotSerializers',\n      'setupFiles',\n      'testMatch',\n      'testEnvironmentOptions',\n      'testResultsProcessor',\n      'transform',\n      'transformIgnorePatterns',\n      'reporters',\n      'watchPlugins',\n      'setupFilesAfterEnv'\n    ];\n    if (overrides) {\n      supportedKeys.forEach(key => {\n        if (overrides.hasOwnProperty(key)) {\n          config[key] = overrides[key];\n          delete overrides[key];\n        }\n      });\n    }\n    for (const [plugin, pluginOptions] of plugins) {\n      // Check if plugin.modifyJestConfig is a function.\n      // If it is, call it on the configs we created.\n      if (plugin.modifyJestConfig) {\n        config = await plugin.modifyJestConfig({\n          jestConfig: config,\n          webpackObject: webpackObject,\n          options: {\n            razzleOptions,\n            pluginOptions,\n          },\n          paths,\n        });\n      }\n    }\n\n    // Check if razzle.modifyJestConfig is a function.\n    // If it is, call it on the configs we created.\n    if (razzle.modifyJestConfig) {\n      config = await razzle.modifyJestConfig({\n        jestConfig: config,\n        webpackObject: webpackObject,\n        options: {\n          razzleOptions,\n        },\n        paths,\n      });\n    }\n    resolveConfig(config);\n  });\n};\n"
  },
  {
    "path": "packages/razzle/config/createRazzleTestConfig.js",
    "content": "const webpack = require('webpack');\nconst createConfig = require('./createConfigAsync');\nconst loadRazzleConfig = require('./loadRazzleConfig');\n\nmodule.exports = (\n  target,\n  env,\n  razzleConfig,\n  clientOnly = false,\n  packageJsonIn\n) => {\n  return new Promise(async resolve => {\n    const {\n      razzle,\n      razzleOptions,\n      webpackObject,\n      plugins,\n      paths,\n    } = await loadRazzleConfig(webpack, razzleConfig, packageJsonIn);\n    createConfig(\n      target,\n      env,\n      razzle,\n      webpackObject,\n      clientOnly,\n      paths,\n      plugins,\n      razzleOptions\n    ).then(config => resolve(config));\n  });\n};\n"
  },
  {
    "path": "packages/razzle/config/defaultOptions.js",
    "content": "'use strict';\n\nmodule.exports = {\n  verbose: false,\n  debug: {},\n  buildType: 'iso',\n  cssPrefix: 'static/css',\n  jsPrefix: 'static/js',\n  enableSourceMaps: true,\n  enableReactRefresh: false,\n  enableTargetBabelrc: false,\n  enableBabelCache: true,\n  forceRuntimeEnvVars: [],\n  mediaPrefix: 'static/media',\n  staticCssInDev: false,\n  emitOnErrors: false,\n  disableWebpackbar: false\n};\n"
  },
  {
    "path": "packages/razzle/config/env.js",
    "content": "'use strict';\n\nconst fs = require('fs-extra');\nconst path = require('path');\n\nfunction setupEnvironment(paths) {\n  const NODE_ENV = process.env.NODE_ENV;\n  if (!NODE_ENV) {\n    throw new Error(\n      'The NODE_ENV environment variable is required but was not specified.'\n    );\n  }\n\n  // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use\n  var dotenvFiles = [\n    `${paths.dotenv}.${NODE_ENV}.local`,\n    `${paths.dotenv}.${NODE_ENV}`,\n    NODE_ENV !== 'test' && `${paths.dotenv}.local`,\n    paths.dotenv,\n  ].filter(Boolean);\n  // Load environment variables from .env* files. Suppress warnings using silent\n  // if this file is missing. dotenv will never modify any environment variables\n  // that have already been set. Variable expansion is supported in .env files.\n  // https://github.com/motdotla/dotenv\n  // https://github.com/motdotla/dotenv-expand\n  dotenvFiles.forEach(dotenvFile => {\n    if (fs.existsSync(dotenvFile)) {\n      require('dotenv-expand')(\n        require('dotenv').config({\n          path: dotenvFile,\n        })\n      );\n    }\n  });\n}\n// Grab NODE_ENV and RAZZLE_* environment variables and prepare them to be\n// injected into the application via DefinePlugin in Webpack configuration.\nconst RAZZLE = /^RAZZLE_/i;\n\nfunction getClientEnvironment(target, is_dev, options, paths) {\n  const raw = Object.keys(process.env)\n    .filter(key => RAZZLE.test(key))\n    .reduce(\n      (env, key) => {\n        env[key] = process.env[key];\n        return env;\n      },\n      {\n        // Useful for determining whether we’re running in production mode.\n        // Most importantly, it switches React into the correct mode.\n        NODE_ENV: process.env.NODE_ENV || 'development',\n        PORT: process.env.PORT || options.port || 3000,\n        VERBOSE: !!process.env.VERBOSE,\n        HOST: process.env.HOST || options.host || 'localhost',\n        RAZZLE_ASSETS_MANIFEST: paths.appAssetsManifest,\n        BUILD_TARGET: target === 'web' ? 'client' : 'server',\n        // only for production builds. Useful if you need to serve from a CDN\n        PUBLIC_PATH: process.env.PUBLIC_PATH || '/',\n        // CLIENT_PUBLIC_PATH is a PUBLIC_PATH for NODE_ENV === 'development' && BUILD_TARGET === 'client'\n        // It's useful if you're running razzle in a non-localhost container. Ends in a /\n        CLIENT_PUBLIC_PATH: process.env.CLIENT_PUBLIC_PATH,\n        // The public dir changes between dev and prod, so we use an environment\n        // variable available to users.\n        RAZZLE_PUBLIC_DIR:\n          process.env.NODE_ENV !== 'development'\n            ? path.relative(paths.appPath, paths.appBuildPublic)\n            : paths.appPublic,\n        // Whether or not react-refresh is enabled.\n        // react-refresh is not 100% stable at this time,\n        // which is why it's disabled by default.\n        // It is defined here so it is available in the webpackHotDevClient.\n        FAST_REFRESH: options.shouldUseReactRefresh,\n        WEBPACK_VERSION: options.webpackObject.version ? parseInt(options.webpackObject.version[0]) : 3\n      }\n    );\n  // Stringify all values so we can feed into Webpack DefinePlugin\n  const stringified = Object.keys(raw).reduce((env, key) => {\n    if (!options.forceRuntimeEnvVars.includes(key) || is_dev) {\n      env[`process.env.${key}`] = JSON.stringify(raw[key]);\n    }\n    return env;\n  }, {});\n\n  return { raw, stringified };\n}\n\nmodule.exports = {\n  getClientEnv: getClientEnvironment,\n  setupEnvironment: setupEnvironment,\n};\n"
  },
  {
    "path": "packages/razzle/config/jest/babelTransform.js",
    "content": "'use strict';\n\nconst babelJest = require('babel-jest');\nconst paths = require('../paths');\nconst fs = require('fs-extra');\n\nconst hasBabelRc = fs.existsSync(paths.appBabelRc);\n\nconst config = {\n  presets: !hasBabelRc ? [require.resolve('babel-preset-razzle')] : [],\n  babelrc: !!hasBabelRc,\n};\n\nmodule.exports = babelJest.createTransformer(config);\n"
  },
  {
    "path": "packages/razzle/config/jest/cssTransform.js",
    "content": "'use strict';\n\n// This is a custom Jest transformer turning style imports into empty objects.\n// http://facebook.github.io/jest/docs/tutorial-webpack.html\n\nmodule.exports = {\n  process() {\n    return 'module.exports = {};';\n  },\n  getCacheKey() {\n    // The output is always the same.\n    return 'cssTransform';\n  },\n};\n"
  },
  {
    "path": "packages/razzle/config/jest/fileTransform.js",
    "content": "'use strict';\n\nconst path = require('path');\n\n// This is a custom Jest transformer turning file imports into filenames.\n// http://facebook.github.io/jest/docs/tutorial-webpack.html\n\nmodule.exports = {\n  process(src, filename) {\n    return `module.exports = ${JSON.stringify(path.basename(filename))};`;\n  },\n};\n"
  },
  {
    "path": "packages/razzle/config/loadPlugins.js",
    "content": "'use strict';\n\nconst resolve = require('resolve');\n\nfunction loadPlugin(plugin, paths) {\n  if (typeof plugin === 'string') {\n    // Apply the plugin with default options if passing only a string\n    return loadPlugin({ name: plugin }, paths);\n  }\n\n  if (typeof plugin === 'function') {\n    return [plugin, {}];\n  }\n\n  // Support for not released plugins without options\n  // Use plugin.object if you need options\n  if (typeof plugin === 'object' && !plugin.name && !plugin.object) {\n    return [plugin, {}];\n  }\n\n  if (typeof plugin.func === 'function') {\n    // Used for writing plugin tests\n    return [plugin.func, plugin.options];\n  }\n\n  if (typeof plugin.object === 'object') {\n    // Used for writing plugin tests\n    return [plugin.object, plugin.options];\n  }\n\n  const isScopedPlugin = plugin.name.startsWith('@') && plugin.name.includes('/');\n  let scope;\n  let scopedPluginName;\n  if (isScopedPlugin) {\n    const pluginNameParts = plugin.name.split(\"/\");\n    scope = pluginNameParts[0];\n    scopedPluginName = pluginNameParts[1]\n  }\n\n  const completePluginNames = [\n    isScopedPlugin && `${scope}/razzle-plugin-${scopedPluginName}`,\n    isScopedPlugin && plugin.name,\n    `razzle-plugin-${plugin.name}`,\n    `${plugin.name}/razzle-plugin`,\n  ].filter(Boolean);\n\n  // Try to find the plugin in node_modules\n  let razzlePlugin = null;\n  for (const completePluginName of completePluginNames) {\n    try {\n      razzlePlugin = require(completePluginName);\n    // eslint-disable-next-line no-empty\n    } catch (error) {}\n    \n    if (razzlePlugin) {\n      break;\n    }\n  }\n  if (!razzlePlugin) {\n    const last = completePluginNames.pop();\n    throw new Error(`Unable to find '${completePluginNames.join(\"', '\")}' or ${last}'`);\n  }\n\n  return [razzlePlugin, plugin.options];\n}\n\nfunction loadPlugins(plugins, paths) {\n  return plugins.map(function(plugin) {\n    return loadPlugin(plugin, paths);\n  });\n}\n\nmodule.exports = loadPlugins;\n"
  },
  {
    "path": "packages/razzle/config/loadRazzleConfig.js",
    "content": "const fs = require('fs-extra');\nconst merge = require('deepmerge');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\n\nconst defaultPaths = require('./paths');\nconst defaultRazzleOptions = require('./defaultOptions');\nconst setupEnvironment = require('./env').setupEnvironment;\nconst loadPlugins = require('./loadPlugins');\n\nconst getModuleFormat = packageJson => {\n  // See https://nodejs.org/api/packages.html#type for more info on \"type\"\n  return packageJson.type || \"commonjs\";\n};\n\nmodule.exports = (webpackObject, razzleConfig, packageJsonIn) => {\n  return new Promise(async resolve => {\n    let razzle = razzleConfig || {};\n    let packageJson = packageJsonIn || {};\n    let paths = Object.assign({}, defaultPaths);\n\n    if (fs.existsSync(paths.appPackageJson)) {\n      try {\n        packageJson = require(paths.appPackageJson);\n      } catch (e) {\n        clearConsole();\n        logger.error('Invalid package.json.', e);\n        process.exit(1);\n      }\n    }\n\n    // Check for razzle.config.js file\n    if (fs.existsSync(paths.appRazzleConfig)) {\n      try {\n        if (getModuleFormat(packageJson) === 'module') {\n          razzle = await import(paths.appRazzleConfig);\n        }\n        else {\n          razzle = require(paths.appRazzleConfig);\n        }\n      } catch (e) {\n        clearConsole();\n        logger.error('Invalid razzle.config.js file.', e);\n        process.exit(1);\n      }\n    }\n\n    setupEnvironment(paths);\n\n    let razzleOptions = merge(defaultRazzleOptions, razzle.options || {});\n\n    if (packageJson.browserslist) {\n      razzleOptions.browserslist =\n        razzleOptions.browserslist || packageJson.browserslist;\n    }\n\n    const plugins = Array.isArray(razzle.plugins)\n      ? loadPlugins(razzle.plugins, paths)\n      : [];\n\n    for (const [plugin, pluginOptions] of plugins) {\n      // Check if plugin.modifyOptions is a function.\n      // If it is, call it on the configs we created.\n      if (plugin.modifyOptions) {\n        razzleOptions = await plugin.modifyOptions({\n          options: {\n            razzleOptions,\n            pluginOptions,\n          },\n          paths,\n        });\n      }\n    }\n    if (razzle.modifyOptions) {\n      // Check if razzle.modifyOptions is a function.\n      // If it is, call it on the configs we created.\n      razzleOptions = await razzle.modifyOptions({\n        options: {\n          razzleOptions,\n        },\n        paths,\n      });\n    }\n    for (const [plugin, pluginOptions] of plugins) {\n      // Check if plugin.modifyPaths is a function.\n      // If it is, call it on the paths we created.\n      if (plugin.modifyPaths) {\n        paths = await plugin.modifyPaths({\n          options: {\n            razzleOptions,\n            pluginOptions,\n          },\n          paths,\n        });\n      }\n    }\n    if (razzle.modifyPaths) {\n      // Check if razzle.modifyPaths is a function.\n      // If it is, call it on the paths we created.\n      paths = await razzle.modifyPaths({\n        options: {\n          razzleOptions,\n        },\n        paths,\n      });\n    }\n\n    resolve({\n      razzle,\n      razzleOptions,\n      webpackObject,\n      plugins,\n      paths,\n      packageJson,\n    });\n  });\n};\n"
  },
  {
    "path": "packages/razzle/config/modules.js",
    "content": "'use strict';\n\nconst fs = require('fs');\nconst path = require('path');\nconst resolve = require('resolve');\nconst logger = require('razzle-dev-utils/logger');\n\nfunction getAdditionalModulePaths(options = {}, paths) {\n  const baseUrl = options.baseUrl;\n\n  // We need to explicitly check for null and undefined (and not a falsy value) because\n  // TypeScript treats an empty string as `.`.\n  if (baseUrl == null) {\n    // If there's no baseUrl set we respect NODE_PATH\n    return paths.nodePaths.split(path.delimiter).filter(Boolean);\n  }\n\n  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);\n\n  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is\n  // the default behavior.\n  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {\n    return null;\n  }\n\n  // Allow the user set the `baseUrl` to `appSrc`.-\n  if (path.relative(paths.appSrc, baseUrlResolved) === '') {\n    return [paths.appSrc];\n  }\n\n  // Otherwise, throw an error.\n  throw new Error(\n    logger.error(\n      \"Your project's `baseUrl` can only be set to `src` or `node_modules`.\" +\n        ' Razzle does not support other values at this time.'\n    )\n  );\n}\n\nfunction getAdditionalAliases(options = {}, paths) {\n  const baseUrl = options.baseUrl;\n  let aliases = {};\n\n  // We need to explicitly check for null and undefined (and not a falsy value) because\n  // TypeScript treats an empty string as `.`.\n  if (baseUrl == null) {\n    // If there's no baseUrl we have no aliases\n    return {};\n  }\n\n  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);\n\n  Object.keys(options.paths || {}).forEach(item => {\n    const name = item.replace(/\\/\\*$/, '');\n    // webpack5 allows arrays here, fix later\n    const value = path.resolve(\n      baseUrlResolved,\n      options.paths[item][0].replace(/\\/\\*$/, '')\n    );\n    aliases[name] = value;\n  });\n\n  return aliases;\n}\n\nfunction getAdditionalIncludes(additionalAliases) {\n  return Object.values(additionalAliases);\n}\n\nfunction getModules(paths) {\n  // Check if TypeScript is setup\n  const hasTsConfig = fs.existsSync(paths.appTsConfig);\n  const hasJsConfig = fs.existsSync(paths.appJsConfig);\n\n  if (hasTsConfig && hasJsConfig) {\n    throw new Error(\n      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'\n    );\n  }\n\n  let config;\n\n  // If there's a tsconfig.json we assume it's a\n  // TypeScript project and set up the config\n  // based on tsconfig.json\n  if (hasTsConfig) {\n    const ts = require(resolve.sync('typescript', {\n      basedir: paths.appNodeModules,\n    }));\n    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;\n    // Otherwise we'll check if there is jsconfig.json\n    // for non TS projects.\n  } else if (hasJsConfig) {\n    config = require(paths.appJsConfig);\n  }\n\n  config = config || {};\n  const options = config.compilerOptions || {};\n\n  const additionalModulePaths = getAdditionalModulePaths(options, paths);\n  const additionalAliases = getAdditionalAliases(options, paths);\n  const additionalIncludes = getAdditionalIncludes(additionalAliases);\n\n  return {\n    additionalModulePaths: additionalModulePaths,\n    additionalAliases: additionalAliases,\n    additionalIncludes: additionalIncludes,\n  };\n}\n\nmodule.exports = getModules;\n"
  },
  {
    "path": "packages/razzle/config/paths.js",
    "content": "'use strict';\n\nconst path = require('path');\nconst fs = require('fs');\nconst url = require('url');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\n\n// Make sure any symlinks in the project folder are resolved:\n// https://github.com/facebookincubator/create-react-app/issues/637\nconst appDirectory = fs.realpathSync(path.join(process.cwd(), process.env.RAZZLE_APP_PATH || ''));\nconst resolveApp = relativePath => path.resolve(appDirectory, relativePath);\n\nconst envPublicUrl = process.env.PUBLIC_URL;\n\nfunction ensureSlash(path, needsSlash) {\n  const hasSlash = path.endsWith('/');\n  if (hasSlash && !needsSlash) {\n    return path.substr(path, path.length - 1);\n  } else if (!hasSlash && needsSlash) {\n    return `${path}/`;\n  } else {\n    return path;\n  }\n}\n\nconst getPublicUrl = appPackageJson => {\n  if (envPublicUrl) {\n    return envPublicUrl;\n  }\n  \n  if (fs.existsSync(appPackageJson)) {\n    try {\n      const packageJson = require(appPackageJson)\n      return packageJson.homepage;\n    } catch (e) {\n      clearConsole();\n      logger.error('Invalid package.json.', e);\n      process.exit(1);\n    }\n  }\n\n  return undefined;\n};\n\nfunction getServedPath(appPackageJson) {\n  const publicUrl = getPublicUrl(appPackageJson);\n  const servedUrl =\n    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');\n  return ensureSlash(servedUrl, true);\n}\n\nconst resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);\n\n// We support resolving modules according to `NODE_PATH`.\n// This lets you use absolute paths in imports inside large monorepos:\n// https://github.com/facebookincubator/create-react-app/issues/253.\n// It works similar to `NODE_PATH` in Node itself:\n// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders\n// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.\n// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.\n// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421\n// We also resolve them to make sure all tools using them work consistently.\nconst nodePaths = (process.env.NODE_PATH || '')\n  .split(path.delimiter)\n  .filter(folder => folder && !path.isAbsolute(folder))\n  .map(folder => path.resolve(appDirectory, folder))\n  .join(path.delimiter);\n\nmodule.exports = {\n  dotenv: resolveApp('.env'),\n  appPath: resolveApp('.'),\n  appBuild: resolveApp('build'),\n  appBuildPublic: resolveApp('build/public'),\n  appAssetsManifest: resolveApp('build/assets.json'),\n  appBuildStaticExport: resolveApp('build/static_export.js'),\n  appBuildStaticExportRoutes: resolveApp('build/public/static_routes.js'),\n  appPublic: resolveApp('public'),\n  appNodeModules: resolveApp('node_modules'),\n  appSrc: resolveApp('src'),\n  appHtml: resolveApp('public/index.html'), // client only\n  appPackageJson: resolveApp('package.json'),\n  appServerJs: resolveApp('src/server'),\n  appServerIndexJs: resolveApp('src'),\n  appClientIndexJs: resolveApp('src/client'),\n  appStaticExportJs: resolveApp('src/static_export'),\n  tsTestsSetup: resolveApp('src/setupTests.ts'),\n  jsTestsSetup: resolveApp('src/setupTests.js'),\n  appBabelRc: resolveApp('.babelrc'),\n  appRazzleConfig: resolveApp('razzle.config.js'),\n  nodePaths: nodePaths,\n  ownPath: resolveOwn('.'),\n  ownNodeModules: resolveOwn('node_modules'),\n  publicUrl: getPublicUrl(resolveApp('package.json')),\n  servedPath: getServedPath(resolveApp('package.json')),\n  appJsConfig: resolveApp('jsconfig.json'),\n  appTsConfig: resolveApp('tsconfig.json'),\n};\n"
  },
  {
    "path": "packages/razzle/config/razzleDevServer.js",
    "content": "#! /usr/bin/env node\n'use strict';\n\nconst devServer = require('webpack-dev-server');\n\nclass razzleDevServer extends devServer {\n  constructor(compiler, options = {}, _log) {\n    const verbose = options.verbose || false;\n    delete options['verbose'];\n    super(compiler, options, _log);\n    this.verbose = verbose;\n  }\n\n  showStatus() {\n    if (this.verbose) {\n      super.showStatus();\n    }\n  }\n}\n\nmodule.exports = razzleDevServer;\n"
  },
  {
    "path": "packages/razzle/package.json",
    "content": "{\n  \"name\": \"razzle\",\n  \"description\": \"Create server-rendered universal JavaScript applications with no configuration\",\n  \"license\": \"MIT\",\n  \"author\": \"Jared Palmer <jared@palmer.net>\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle\"\n  },\n  \"version\": \"4.2.18\",\n  \"bin\": {\n    \"razzle\": \"./bin/razzle.js\"\n  },\n  \"files\": [\n    \"babel.js\",\n    \"bin\",\n    \"config\",\n    \"scripts\",\n    \"template\"\n  ],\n  \"dependencies\": {\n    \"@babel/plugin-transform-modules-commonjs\": \"^7.12.1\",\n    \"@pmmmwh/react-refresh-webpack-plugin\": \"^0.4.3\",\n    \"autoprefixer\": \"^10.2.3\",\n    \"babel-jest\": \"^26.3.0\",\n    \"babel-loader\": \"^8.0.6\",\n    \"babel-plugin-transform-define\": \"^2.0.0\",\n    \"buffer\": \"^6.0.3\",\n    \"chalk\": \"^4.1.0\",\n    \"clean-css\": \"^5.0.1\",\n    \"copy-webpack-plugin\": \"^6.1.1\",\n    \"css-loader\": \"^5.0.0\",\n    \"css-minimizer-webpack-plugin\": \"^1.2.0\",\n    \"deepmerge\": \"^4.2.2\",\n    \"dotenv\": \"^8.2.0\",\n    \"dotenv-expand\": \"^5.1.0\",\n    \"file-loader\": \"^4.3.0\",\n    \"fs-extra\": \"^9.1.0\",\n    \"inquirer\": \"^7.3.3\",\n    \"jest\": \"^26.4.2\",\n    \"mri\": \"^1.1.4\",\n    \"null-loader\": \"^4.0.1\",\n    \"pnp-webpack-plugin\": \"^1.6.4\",\n    \"postcss\": \"^8.2.4\",\n    \"postcss-load-config\": \"^3.0.0\",\n    \"postcss-loader\": \"^4.2.0\",\n    \"process\": \"^0.11.10\",\n    \"razzle-start-server-webpack-plugin\": \"4.2.18\",\n    \"react-dev-utils\": \"^11.0.4\",\n    \"react-refresh\": \"^0.9.0\",\n    \"resolve\": \"^1.17.0\",\n    \"sade\": \"^1.4.2\",\n    \"source-map-support\": \"^0.5.16\",\n    \"string-hash\": \"^1.1.3\",\n    \"style-loader\": \"^2.0.0\",\n    \"terminate\": \"^2.1.2\",\n    \"terser-webpack-plugin\": \"^2.3.5\",\n    \"tiny-async-pool\": \"^1.1.0\",\n    \"url-loader\": \"^2.3.0\",\n    \"webpack-manifest-plugin\": \"^3.1.1\",\n    \"webpackbar\": \"~4||~5\"\n  },\n  \"peerDependencies\": {\n    \"babel-preset-razzle\": \"4.2.18\",\n    \"html-webpack-plugin\": \"~4||~5\",\n    \"mini-css-extract-plugin\": \">=0.9.0 <1.0.0\",\n    \"razzle-dev-utils\": \"4.2.18\",\n    \"webpack\": \"~4||~5\",\n    \"webpack-dev-server\": \"^3.11.0||~4\"\n  },\n  \"keywords\": [\n    \"inferno\",\n    \"isomorphic\",\n    \"preact\",\n    \"razzle\",\n    \"react\",\n    \"reason\",\n    \"reasonml\",\n    \"ssr\",\n    \"universal\",\n    \"webpack\"\n  ]\n}\n"
  },
  {
    "path": "packages/razzle/scripts/build.js",
    "content": "#! /usr/bin/env node\n'use strict';\n\nconst mri = require('mri');\n\nconst argv = process.argv.slice(2);\nconst cliArgs = mri(argv);\n\nconst nodeEnv = cliArgs['node-env'] || 'production';\nconst mode = cliArgs['watch'] ? 'watch' : 'run';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.NODE_ENV = /production|staging|development$/.test(nodeEnv) ? nodeEnv : 'production';\n\nconst webpack = require('webpack');\nconst fs = require('fs-extra');\nconst inquirer = require('inquirer');\nconst chalk = require('chalk');\nconst createConfig = require('../config/createConfigAsync');\nconst loadRazzleConfig = require('../config/loadRazzleConfig');\nconst printErrors = require('razzle-dev-utils/printErrors');\nconst printWarnings = require('razzle-dev-utils/printWarnings');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\nconst FileSizeReporter = require('razzle-dev-utils/FileSizeReporter');\nconst formatWebpackMessages = require('razzle-dev-utils/formatWebpackMessages');\nconst measureFileSizesBeforeBuild =\n  FileSizeReporter.measureFileSizesBeforeBuild;\nconst printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;\n\n// Makes the script crash on unhandled rejections instead of silently\n// ignoring them. In the future, promise rejections that are not handled will\n// terminate the Node.js process with a non-zero exit code.\nprocess.on('unhandledRejection', err => {\n  clearConsole();\n  logger.error('Unexpected error', err);\n  process.exit(1);\n});\n\nloadRazzleConfig(webpack).then(\n  async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {\n    const verbose = razzleOptions.verbose;\n    if (!verbose) {\n      process.removeAllListeners('warning');\n    }\n    if (!process.env.CI && process.env.NODE_ENV === \"production\" && (process.env.RAZZLE_NONINTERACTIVE !== \"true\" && !cliArgs['noninteractive'])) {\n      await inquirer.prompt([\n        {\n          type: 'confirm',\n          name: 'run',\n          message: 'This runs the production build, are you sure you want to run it?\\nAdd --noninteractive to remove this prompt.',\n        }\n      ]).then((answers) => {\n        if (answers.run === false) {\n          process.exit(1);\n        }\n      });\n    }\n\n    const clientOnly = /spa|single\\-page\\-application/.test(\n      razzleOptions.buildType\n    );\n    const serverOnly = /serveronly|server\\-only/.test(razzleOptions.buildType);\n\n    process.env.BUILD_TYPE = razzleOptions.buildType;\n\n    const clientBuilds = ['default'];\n    const serverBuilds = ['default'];\n\n    const clientBuildProceedFrom = 'default';\n    const serverBuildProceedFrom = 'default';\n\n    const runBuildPromisesInSeries = ps =>\n      ps.reduce(\n        (p, next) =>\n          p.then(next).catch((buildName, target) => {\n            process.exit(1);\n          }),\n        Promise.resolve()\n      );\n\n    if (!serverOnly) {\n      const clientResults = await runBuildPromisesInSeries(\n        clientBuilds\n          .slice(clientBuilds.indexOf(clientBuildProceedFrom))\n          .map(buildName => {\n            return () => {\n              return new Promise((resolveBuild, rejectBuild) => {\n                const build = async previousFileSizes => {\n                  return new Promise(async (resolve, reject) => {\n                    // Create our production webpack configurations and pass in razzle options.\n                    const clientConfig = await createConfig(\n                      'web',\n                      'prod',\n                      razzle,\n                      webpackObject,\n                      clientOnly,\n                      paths,\n                      plugins,\n                      razzleOptions\n                    );\n\n                    console.log(`Compiling client ${buildName} build...\\n`);\n                    // First compile the client. We need it to properly output assets.json (asset\n                    // manifest) and chunks.json (chunk manifest) files with the correct hashes on file names BEFORE we can start\n                    // the server compiler.\n                    compile(clientConfig, (err, clientStats) => {\n                      if (err) {\n                        return reject(err);\n                      }\n                      const clientMessages = clientStats.toJson({}, true);\n                      if (clientMessages.errors.length) {\n                        return reject(clientMessages.errors);\n                      }\n                      if (\n                        !process.env.WARNINGS_ERRORS_DISABLE &&\n                        process.env.CI &&\n                        (typeof process.env.CI !== 'string' ||\n                          process.env.CI.toLowerCase() !== 'false') &&\n                        clientMessages.warnings.length\n                      ) {\n                        console.log(\n                          chalk.yellow(\n                            '\\nTreating warnings as errors because process.env.CI = true.\\n' +\n                            'Most CI servers set it automatically.\\n'\n                          )\n                        );\n                        return reject(clientMessages.warnings);\n                      }\n\n                      return resolve({\n                        stats: clientStats,\n                        previousFileSizes,\n                        warnings: clientMessages.warnings,\n                      });\n                    }, (err) => {\n                      return reject(err);\n                    });\n                  });\n                };\n                // First, read the current file sizes in build directory.\n                // This lets us display how much they changed later.\n                measureFileSizesBeforeBuild(paths.appBuildPublic)\n                  .then(async previousFileSizes => {\n                    // Remove all content but keep the directory so that\n                    // if you're in it, you don't end up in Trash\n                    fs.emptyDirSync(paths.appBuild);\n\n                    // Start the webpack build\n                    return build(previousFileSizes);\n                  })\n                  .then(\n                    ({ stats, previousFileSizes, warnings }) => {\n                      if (warnings.length) {\n                        printWarnings(\n                          `Client ${buildName} build compiled with warnings\\n`,\n                          warnings,\n                          verbose\n                        );\n                        console.log(\n                          '\\nSearch for the ' +\n                          chalk.underline(chalk.yellow('keywords')) +\n                          ' to learn more about each warning.'\n                        );\n                        console.log(\n                          'To ignore, add ' +\n                          chalk.cyan('// eslint-disable-next-line') +\n                          ' to the line before.\\n'\n                        );\n                      } else {\n                        console.log(\n                          chalk.green(\n                            `Compiled client ${buildName} build successfully.\\n`\n                          )\n                        );\n                      }\n                      console.log('File sizes after gzip:\\n');\n                      printFileSizesAfterBuild(\n                        stats,\n                        previousFileSizes,\n                        paths.appBuild\n                      );\n                      console.log();\n                      resolveBuild();\n                    },\n                    err => {\n                      printErrors(\n                        `Failed to compile client ${buildName} build.`,\n                        Array.isArray(err) ? err : [err],\n                        verbose\n                      );\n                      rejectBuild(buildName, 'web');\n                    }\n                  );\n              });\n            };\n          })\n      );\n    }\n\n    if (!clientOnly) {\n      const serverResults = await runBuildPromisesInSeries(\n        serverBuilds\n          .slice(serverBuilds.indexOf(serverBuildProceedFrom))\n          .map(buildName => {\n            return () => {\n              return new Promise((resolveBuild, rejectBuild) => {\n                const build = async () => {\n                  return new Promise(async (resolve, reject) => {\n                    // Create our production webpack configurations and pass in razzle options.\n                    const serverConfig = await createConfig(\n                      'node',\n                      'prod',\n                      razzle,\n                      webpackObject,\n                      serverOnly,\n                      paths,\n                      plugins,\n                      razzleOptions\n                    );\n\n                    console.log(`Compiling server ${buildName} build...\\n`);\n\n                    compile(serverConfig, (err, serverStats) => {\n                      if (err) {\n                        return reject(err);\n                      }\n                      const serverMessages = serverStats.toJson({}, true);\n                      if (serverMessages.errors.length) {\n                        return reject(serverMessages.errors);\n                      }\n                      if (\n                        !process.env.WARNINGS_ERRORS_DISABLE &&\n                        process.env.CI &&\n                        (typeof process.env.CI !== 'string' ||\n                          process.env.CI.toLowerCase() !== 'false') &&\n                        serverMessages.warnings.length\n                      ) {\n                        console.log(\n                          chalk.yellow(\n                            '\\nTreating warnings as errors because process.env.CI = true.\\n' +\n                            'Most CI servers set it automatically.\\n'\n                          )\n                        );\n                        return reject(serverMessages.warnings);\n                      }\n\n                      return resolve({\n                        stats: serverStats,\n                        warnings: serverMessages.warnings,\n                      });\n                    }, (err) => {\n                      return reject(err);\n                    });\n                  });\n                };\n\n                build().then(\n                  ({ stats, warnings }) => {\n                    if (warnings.length) {\n                      printWarnings(\n                        `Server ${buildName} build compiled with warnings\\n`,\n                        warnings,\n                        verbose\n                      );\n                      console.log(\n                        '\\nSearch for the ' +\n                        chalk.underline(chalk.yellow('keywords')) +\n                        ' to learn more about each warning.'\n                      );\n                      console.log(\n                        'To ignore, add ' +\n                        chalk.cyan('// eslint-disable-next-line') +\n                        ' to the line before.\\n'\n                      );\n                    } else {\n                      console.log(\n                        chalk.green(\n                          `Compiled server ${buildName} build successfully.\\n`\n                        )\n                      );\n                    }\n                    resolveBuild();\n                  },\n                  err => {\n                    printErrors(\n                      `Failed to compile server ${buildName} build.`,\n                      Array.isArray(err) ? err : [err],\n                      verbose\n                    );\n                    rejectBuild(buildName, 'node');\n                  }\n                );\n              });\n            };\n          })\n      );\n    }\n    // Wrap webpackcompile in a try catch.\n    function compile(config, cb, internal_error_cb) {\n      let compiler;\n      try {\n        compiler = webpackObject(config);\n      } catch (e) {\n        printErrors('Failed to compile.', [e], verbose);\n        return internal_error_cb(e);\n      }\n      compiler.run((err, stats) => {\n        cb(err, stats);\n      });\n    }\n  }\n);\n"
  },
  {
    "path": "packages/razzle/scripts/export.js",
    "content": "#! /usr/bin/env node\n'use strict';\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.NODE_ENV = 'production';\n\nconst webpack = require('webpack');\nconst mri = require('mri');\nconst fs = require('fs-extra');\nconst path = require('path');\nconst chalk = require('chalk');\nconst asyncPool = require('tiny-async-pool');\nconst loadRazzleConfig = require('../config/loadRazzleConfig');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\nconst FileSizeReporter = require('razzle-dev-utils/FileSizeReporter');\nconst measureFileSizesBeforeBuild =\n  FileSizeReporter.measureFileSizesBeforeBuild;\nconst printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;\nconst getFileNamesAsStat = FileSizeReporter.getFileNamesAsStat;\n\n// Makes the script crash on unhandled rejections instead of silently\n// ignoring them. In the future, promise rejections that are not handled will\n// terminate the Node.js process with a non-zero exit code.\nprocess.on('unhandledRejection', err => {\n  clearConsole();\n  logger.error('Unexpected error', err);\n  process.exit(1);\n});\n\nconst argv = process.argv.slice(2);\nconst cliArgs = mri(argv);\n\nloadRazzleConfig(webpack).then(\n  async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {\n    // First, read the current file sizes in build directory.\n    // This lets us display how much they changed later.\n    measureFileSizesBeforeBuild(paths.appBuildPublic)\n      .then(previousFileSizes => {\n        if (!fs.existsSync(paths.appBuildStaticExport)) {\n          console.log(chalk.red('Failed to export static.\\n'));\n          console.log(\n            'No ' +\n              path.basename(paths.appBuildStaticExport) +\n              ' found in ' +\n              path.dirname(paths.appBuildStaticExport) +\n              ', run build before export.\\n' +\n              '\\n'\n          );\n          process.exit(1);\n        }\n        // Start the webpack build\n        return static_export(previousFileSizes);\n      })\n      .then(\n        ({ stats, previousFileSizes }) => {\n          console.log(chalk.green('Exported static successfully.\\n'));\n          console.log('File sizes after gzip:\\n');\n          printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild);\n          console.log();\n        },\n        err => {\n          console.log(chalk.red('Failed to export static.\\n'));\n          console.log((err.message || err) + '\\n');\n          process.exit(1);\n        }\n      );\n\n    async function static_export(previousFileSizes) {\n      const options = razzleOptions.staticExport || {};\n\n      if (!fs.existsSync(paths.appBuildStaticExport)) {\n        console.log(chalk.red('Failed to export static.\\n'));\n        console.log(\n          'No ' +\n            path.basename(paths.appBuildStaticExport) +\n            ' found in ' +\n            path.dirname(paths.appBuildStaticExport) +\n            '.\\n' +\n            '\\n'\n        );\n        process.exit(1);\n      }\n\n      const static_export_entrypoint = require(paths.appBuildStaticExport);\n\n      const imported_render =\n        static_export_entrypoint[options.renderExport || 'render'];\n\n      const imported_routes =\n        static_export_entrypoint[options.routesExport || 'routes'];\n\n      if (!imported_routes) {\n        console.log(chalk.red('Failed to export static.\\n'));\n        console.log(\n          'No ' + options.routesExport ||\n            'routes' +\n              ' export found in ' +\n              paths.appBuildStaticExport +\n              '.\\n' +\n              '\\n'\n        );\n        process.exit(1);\n      }\n\n      if (!imported_render) {\n        console.log(chalk.red('Failed to export static.\\n'));\n        console.log(\n          'No ' + options.renderExport ||\n            'render' +\n              ' export found in ' +\n              paths.appBuildStaticExport +\n              '.\\n' +\n              '\\n'\n        );\n        process.exit(1);\n      }\n\n      const routes =\n        typeof imported_routes == 'function'\n          ? await imported_routes()\n          : imported_routes;\n\n      const insertScript = `\\$1<script src=\"${process.env.PUBLIC_PATH ||\n        '/'}static_routes.js\" defer crossorigin></script>`;\n      const insertScriptRe = /(<body.*?>)/ims;\n\n      const render_static_export = async pathname => {\n        let htmlFile, hasData;\n        const json = ({ html, data, error = null }) => {\n          if (error) console.error(error);\n          const outputDir = path.join(paths.appBuildPublic, pathname);\n          const pageDataFile = path.join(outputDir, 'page-data.json');\n          htmlFile = path.join(outputDir, 'index.html');\n\n          fs.ensureDirSync(outputDir);\n          fs.outputFileSync(\n            htmlFile,\n            !options.scriptInline\n              ? html.replace(insertScriptRe, insertScript)\n              : html\n          );\n          hasData = !!data;\n          if (hasData) {\n            console.log(chalk.green(`Data written for ${pathname}.`), data);\n            fs.outputFileSync(pageDataFile, JSON.stringify(data));\n          }\n        };\n\n        const req = { url: pathname };\n        const res = { json };\n        await imported_render(req, res);\n        return { pathname, htmlFile, hasData };\n      };\n\n      const rendersInfo = await asyncPool(\n        Math.min(options.parallel || 5, routes.length),\n        routes,\n        render_static_export\n      );\n\n      const exportDataRoutes = rendersInfo\n        .filter(info => info.hasData)\n        .map(info => info.pathname);\n\n      const insertScriptCode =\n        `window.${options.windowRoutesVariable || 'RAZZLE_STATIC_ROUTES'}` +\n        ` =  ${JSON.stringify(\n          routes.map(route => route.replace(/^\\/|\\/$/g, ''))\n        )};\\n` +\n        `window.${options.windowRoutesDataVariable ||\n          'RAZZLE_STATIC_DATA_ROUTES'}` +\n        ` =  ${JSON.stringify(\n          exportDataRoutes.map(route => route.replace(/^\\/|\\/$/g, ''))\n        )};\\n`;\n\n      if (!options.scriptInline) {\n        await fs.writeFile(paths.appBuildStaticExportRoutes, insertScriptCode);\n      } else {\n        const insertScriptInline = `\\$1<script>${insertScriptCode}</script>`;\n        const updateFile = htmlFile => {\n          fs.pathExists(htmlFile).then(exists => {\n            if (exists) {\n              fs.readFile(htmlFile).then(content => {\n                const contentString = content.toString();\n                const updated = contentString.replace(\n                  insertScriptRe,\n                  insertScriptInline\n                );\n                return fs.writeFile(htmlFile, updated);\n              });\n            }\n          });\n        };\n\n        const exportHtmlFiles = rendersInfo.map(info => info.htmlFile);\n\n        await asyncPool(\n          Math.min(options.parallel || 5, exportHtmlFiles.length),\n          exportHtmlFiles,\n          updateFile\n        );\n      }\n\n      const stats = await getFileNamesAsStat(paths.appBuildPublic);\n      return { stats, previousFileSizes };\n    }\n  }\n);\n"
  },
  {
    "path": "packages/razzle/scripts/start.js",
    "content": "#! /usr/bin/env node\n'use strict';\n\nprocess.env.NODE_ENV = 'development';\nconst fs = require('fs-extra');\nconst mri = require('mri');\nconst webpack = require('webpack');\nconst createConfig = require('../config/createConfigAsync');\nconst loadRazzleConfig = require('../config/loadRazzleConfig');\nconst devServer = require('../config/razzleDevServer');\nconst printErrors = require('razzle-dev-utils/printErrors');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\nconst setPorts = require('razzle-dev-utils/setPorts');\nconst chalk = require('chalk');\nconst terminate = require('terminate');\nconst devServerMajorVersion = require('razzle-dev-utils/devServerMajor');\n\nlet verbose = false;\n\nprocess.once('SIGINT', () => {\n  if (verbose) {\n    console.error(chalk.bgRedBright(' SIGINT '), chalk.redBright('exiting...'));\n  }\n  terminate(process.pid, 'SIGINT', { timeout: 1000 }, () => {\n    if (verbose) {\n      console.error(chalk.bgGreen(' Goodbye '));\n    }\n    terminate(process.pid);\n  });\n});\n\n// Makes the script crash on unhandled rejections instead of silently\n// ignoring them. In the future, promise rejections that are not handled will\n// terminate the Node.js process with a non-zero exit code.\nprocess.on('unhandledRejection', err => {\n  clearConsole();\n  logger.error('Unexpected error', err);\n  process.exit(1);\n});\n\nprocess.noDeprecation = true; // turns off that loadQuery clutter.\n\nconst argv = process.argv.slice(2);\nconst cliArgs = mri(argv);\n// Capture any --inspect or --inspect-brk flags (with optional values) so that we\n// can pass them when we invoke nodejs\nprocess.env.INSPECT_BRK = formatInspectFlag(cliArgs, 'inspect-brk');\nprocess.env.INSPECT = formatInspectFlag(cliArgs, 'inspect');\n\nfunction main() {\n  return new Promise(async (resolve, reject) => {\n    loadRazzleConfig(webpack)\n      .then(\n        async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {\n          verbose = razzleOptions.verbose;\n          if (!verbose) {\n            process.removeAllListeners('warning');\n          }\n          const clientOnly = /spa|single-page-application/.test(\n            razzleOptions.buildType\n          );\n          const serverOnly = /serveronly|server-only/.test(\n            razzleOptions.buildType\n          );\n\n          process.env.BUILD_TYPE = razzleOptions.buildType;\n\n          setPorts(clientOnly).then(async () => {\n            // Optimistically, we make the console look exactly like the output of our\n            // FriendlyErrorsPlugin during compilation, so the user has immediate feedback.\n            // clearConsole();\n            logger.start('Compiling...');\n\n            let clientCompiler;\n            let clientConfig; // Create dev configs using our config factory, passing in razzle file as\n            // options.\n            if (!serverOnly) {\n              clientConfig = await createConfig(\n                'web',\n                'dev',\n                razzle,\n                webpackObject,\n                clientOnly,\n                paths,\n                plugins,\n                razzleOptions\n              );\n              if (clientOnly) {\n                // Check for public/index.html file\n                if (!fs.existsSync(paths.appHtml)) {\n                  clearConsole();\n                  logger.error(`index.html dose not exists public folder.`);\n                  process.exit(1);\n                }\n              }\n\n              // Delete assets.json to always have a manifest up to date\n              fs.removeSync(paths.appAssetsManifest);\n\n              clientCompiler = compile(clientConfig, verbose);\n            }\n            let serverCompiler;\n            let serverConfig;\n            if (!clientOnly) {\n              serverConfig = await createConfig(\n                'node',\n                'dev',\n                razzle,\n                webpackObject,\n                clientOnly,\n                paths,\n                plugins,\n                razzleOptions\n              );\n              serverCompiler = compile(serverConfig, verbose);\n            }\n\n            const port =\n              ((clientConfig || {}).devServer || {}).port || process.env.PORT;\n\n            // Compile our assets with webpack\n            // Instatiate a variable to track server watching\n            let watching;\n            let clientDevServer;\n\n            // in SPA mode we want to give the user\n            // feedback about the port that app is running on\n            // this variable helps us to don't show\n            // the message multiple times ...\n            let logged = false;\n\n            // Start our server webpack instance in watch mode after assets compile\n            if (clientCompiler) {\n              clientCompiler.hooks.done.tap('razzle', () => {\n                // If we've already started the server watcher, bail early.\n                if (watching) {\n                  return;\n                }\n\n                if (!clientOnly && serverCompiler) {\n                  // Otherwise, create a new watcher for our server code.\n                  watching = serverCompiler.watch(\n                    {\n                      quiet: !verbose,\n                      stats: 'none',\n                    },\n                    /* eslint-disable no-unused-vars */\n                    stats => {}\n                  );\n                }\n\n                // in SPA mode we want to give the user\n                // feedback about the port that app is running on\n                if (clientOnly && !logged) {\n                  logged = true;\n                  console.log(chalk.green(`> SPA Started on port ${port}`));\n                }\n              });\n            } else {\n              watching = serverCompiler.watch(\n                {\n                  quiet: !verbose,\n                  stats: 'none',\n                },\n                /* eslint-disable no-unused-vars */\n                stats => {}\n              );\n            }\n\n            // Provide a reusable logger function\n            const errorLogger = (err) => {\n              if (err) {\n                logger.error(err);\n              }\n            };\n\n            if (!serverOnly) {\n              // Create a new instance of Webpack-dev-server for our client assets.\n              // This will actually run on a different port than the users app.\n              clientDevServer = new devServer(\n                clientCompiler,\n                Object.assign(clientConfig.devServer, { verbose, port }),\n              );\n              if (devServerMajorVersion > 3) {\n                // listen was deprecated in v4 and causes issues when used, switch to its replacement\n                clientDevServer.startCallback(errorLogger);\n              } else {\n                // Start Webpack-dev-server\n                clientDevServer.listen(port, errorLogger);\n              }\n            }\n\n            ['SIGINT', 'SIGTERM'].forEach(sig => {\n              process.on(sig, () => {\n                if (clientDevServer) {\n                  if (devServerMajorVersion > 3) {\n                    // close was deprecated in v4, switch to its replacement\n                    clientDevServer.stopCallback(errorLogger);\n                  } else {\n                    clientDevServer.close(errorLogger);\n                  }\n                }\n                if (watching) {\n                  watching.close();\n                }\n              });\n            });\n\n            resolve();\n          });\n        }\n      )\n      .catch(console.error);\n  });\n}\n\n// Webpack compile in a try-catch\nfunction compile(config, verbose) {\n  let compiler;\n  try {\n    compiler = webpack(config);\n  } catch (e) {\n    printErrors('Failed to compile.', [e], verbose);\n    process.exit(1);\n  }\n  return compiler;\n}\n\nfunction formatInspectFlag(cliArgs, flag) {\n  const value = cliArgs[flag];\n\n  if (typeof value === 'undefined' || value === '') {\n    return '';\n  }\n\n  // When passed as `--inspect`.\n  if (value === true) {\n    return '--' + flag;\n  }\n\n  // When passed as `--inspect=[port]` or `--inspect=[host:port]`\n  return '--' + flag + '=' + value.toString();\n}\n\nmain();\n"
  },
  {
    "path": "packages/razzle/scripts/test.js",
    "content": "// @remove-on-eject-begin\n/**\n * Copyright (c) 2015-present, Facebook, Inc.\n * All rights reserved.\n *\n * This source code is licensed under the BSD-style license found in the\n * LICENSE file in the root directory of this source tree. An additional grant\n * of patent rights can be found in the PATENTS file in the same directory.\n */\n// @remove-on-eject-end\n'use strict';\n\n// Do this as the first thing so that any code reading it knows the right env.\nprocess.env.BABEL_ENV = 'test';\nprocess.env.NODE_ENV = 'test';\nprocess.env.PUBLIC_URL = '';\n\n// Ensure environment variables are read.\nrequire('../config/env');\n\nconst jest = require('jest');\nlet argv = process.argv.slice(2);\n\n// Watch unless on CI, in coverage mode, or user has specified --watchAll\nif (\n  !process.env.CI &&\n  argv.indexOf('--coverage') < 0 &&\n  argv.indexOf('--watchAll') < 0\n) {\n  if (!argv.includes('--no-watch')) {\n    argv.push('--watch');\n  } else {\n    argv=argv.filter(x=>x!=='--no-watch')\n  }\n}\n\nconst webpack = require('webpack');\nconst loadRazzleConfig = require('../config/loadRazzleConfig');\nconst createJestConfig = require('../config/createJestConfig');\nconst path = require('path');\nconst fs = require('fs-extra');\nconst defaultPaths = require('../config/paths');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst logger = require('razzle-dev-utils/logger');\n\n// Makes the script crash on unhandled rejections instead of silently\n// ignoring them. In the future, promise rejections that are not handled will\n// terminate the Node.js process with a non-zero exit code.\nprocess.on('unhandledRejection', err => {\n  clearConsole();\n  logger.error('Unexpected error', err);\n  process.exit(1);\n});\n\nloadRazzleConfig(webpack, defaultPaths).then(\n  async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {\n    argv.push(\n      '--config',\n      JSON.stringify(\n        await createJestConfig(\n          relativePath => path.resolve(__dirname, '..', relativePath),\n          path.resolve(paths.appSrc, '..'),\n          razzle,\n          razzleOptions,\n          webpackObject,\n          plugins,\n          paths\n        )\n      )\n    );\n\n    jest.run(argv);\n  }\n);\n"
  },
  {
    "path": "packages/razzle-dev-utils/CHANGELOG.md",
    "content": "# razzle-dev-utils\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/razzle-dev-utils/FileSizeReporter.js",
    "content": "'use strict';\n\n/**\n * Copyright (c) 2015-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nvar fs = require('fs');\nvar path = require('path');\nvar chalk = require('chalk');\nvar filesize = require('filesize');\nvar recursive = require('recursive-readdir');\nvar stripAnsi = require('strip-ansi');\nvar gzipSize = require('gzip-size').sync;\n\nfunction canReadAsset(asset) {\n  return (\n    /\\.(js|css|html|json)$/.test(asset) &&\n    !/service-worker\\.js/.test(asset) &&\n    !/precache-manifest\\.[0-9a-f]+\\.js/.test(asset)\n  );\n}\n\n// Prints a detailed summary of build files.\nfunction printFileSizesAfterBuild(\n  webpackStats,\n  previousSizeMap,\n  buildFolder,\n  maxBundleGzipSize,\n  maxChunkGzipSize\n) {\n  var root = previousSizeMap.root;\n  var sizes = previousSizeMap.sizes;\n  var assets = (webpackStats.stats || [webpackStats])\n    .map(stats =>\n      stats\n        .toJson({ all: false, assets: true })\n        .assets.filter(asset => canReadAsset(asset.name))\n        .map(asset => {\n          var fileContents = fs.readFileSync(path.join(root, asset.name));\n          var size = gzipSize(fileContents);\n          var previousSize = sizes[removeFileNameHash(root, asset.name)];\n          var difference = getDifferenceLabel(size, previousSize);\n          return {\n            folder: path.join(\n              path.basename(buildFolder),\n              path.basename(root),\n              path.dirname(asset.name)\n            ),\n            name: path.basename(asset.name),\n            size: size,\n            sizeLabel:\n              filesize(size) + (difference ? ' (' + difference + ')' : ''),\n          };\n        })\n    )\n    .reduce((single, all) => all.concat(single), []);\n  assets.sort((a, b) => b.size - a.size);\n  var longestSizeLabelLength = Math.max.apply(\n    null,\n    assets.map(a => stripAnsi(a.sizeLabel).length)\n  );\n  var suggestBundleSplitting = false;\n  assets.forEach(asset => {\n    var sizeLabel = asset.sizeLabel;\n    var sizeLength = stripAnsi(sizeLabel).length;\n    if (sizeLength < longestSizeLabelLength) {\n      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);\n      sizeLabel += rightPadding;\n    }\n    var isMainBundle = asset.name.indexOf('main.') === 0;\n    var maxRecommendedSize = isMainBundle\n      ? maxBundleGzipSize\n      : maxChunkGzipSize;\n    var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize;\n    if (isLarge && path.extname(asset.name) === '.js') {\n      suggestBundleSplitting = true;\n    }\n    console.log(\n      '  ' +\n        (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) +\n        '  ' +\n        chalk.dim(asset.folder + (/[\\/\\\\]$/.test(asset.folder) ? '':path.sep)) +\n        chalk.cyan(asset.name)\n    );\n  });\n  if (suggestBundleSplitting) {\n    console.log();\n    console.log(\n      chalk.yellow('The bundle size is significantly larger than recommended.')\n    );\n    console.log(\n      chalk.yellow(\n        'Consider reducing it with code splitting: https://goo.gl/9VhYWB'\n      )\n    );\n    console.log(\n      chalk.yellow(\n        'You can also analyze the project dependencies: https://goo.gl/LeUzfb'\n      )\n    );\n  }\n}\n\nfunction removeFileNameHash(buildFolder, fileName) {\n  return fileName\n    .replace(buildFolder, '')\n    .replace(/\\\\/g, '/')\n    .replace(\n      /\\/?(.*)(\\.[0-9a-f]+)(\\.chunk)?(\\.js|\\.css)/,\n      (match, p1, p2, p3, p4) => p1 + p4\n    );\n}\n\n// Input: 1024, 2048\n// Output: \"(+1 KB)\"\nfunction getDifferenceLabel(currentSize, previousSize) {\n  var FIFTY_KILOBYTES = 1024 * 50;\n  var difference = currentSize - previousSize;\n  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;\n  if (difference >= FIFTY_KILOBYTES) {\n    return chalk.red('+' + fileSize);\n  } else if (difference < FIFTY_KILOBYTES && difference > 0) {\n    return chalk.yellow('+' + fileSize);\n  } else if (difference < 0) {\n    return chalk.green(fileSize);\n  } else {\n    return '';\n  }\n}\n\nfunction measureFileSizesBeforeBuild(buildFolder) {\n  return new Promise(resolve => {\n    recursive(buildFolder, (err, fileNames) => {\n      var sizes;\n      if (!err && fileNames) {\n        sizes = fileNames.filter(canReadAsset).reduce((memo, fileName) => {\n          var contents = fs.readFileSync(fileName);\n          var key = removeFileNameHash(buildFolder, fileName);\n          memo[key] = gzipSize(contents);\n          return memo;\n        }, {});\n      }\n      resolve({\n        root: buildFolder,\n        sizes: sizes || {},\n      });\n    });\n  });\n}\n\nfunction removeFilePrefix(buildFolder, fileName) {\n  return fileName.replace(buildFolder, '').replace(/\\\\/g, '/');\n}\n\nfunction getFileNamesAsStat(buildFolder) {\n  return new Promise(resolve => {\n    recursive(buildFolder, (err, fileNames) => {\n      var filteredFileNames;\n      if (!err && fileNames) {\n        filteredFileNames = fileNames\n          .filter(canReadAsset)\n          .map(fileName => removeFilePrefix(buildFolder, fileName));\n      }\n      resolve({\n        toJson: () => ({\n          assets: filteredFileNames.map(name => ({ name: name })),\n        }),\n      });\n    });\n  });\n}\n\nmodule.exports = {\n  measureFileSizesBeforeBuild: measureFileSizesBeforeBuild,\n  printFileSizesAfterBuild: printFileSizesAfterBuild,\n  getFileNamesAsStat: getFileNamesAsStat,\n};\n"
  },
  {
    "path": "packages/razzle-dev-utils/FriendlyErrorsPlugin.js",
    "content": "'use strict';\n\nconst chalk = require('chalk');\nconst clearConsole = require('react-dev-utils/clearConsole');\nconst formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');\nconst logger = require('./logger');\n\nlet WEBPACK_COMPILING = false;\nlet WEBPACK_DONE = false;\n\n// This is a custom Webpack Plugin that prints out prettier console messages\n// and errors depending on webpack compiler events. It runs on the Node.js\n// server webpack instance.\nclass WebpackErrorsPlugin {\n  constructor(options) {\n    options = options || {};\n    this.verbose = options.verbose;\n    this.onSuccessMessage = options.onSuccessMessage;\n    this.target = options.target === 'web' ? 'CLIENT' : 'SERVER';\n  }\n\n  apply(compiler) {\n    compiler.plugin('done', stats => {\n      const rawMessages = stats.toJson({}, true);\n      const messages = formatWebpackMessages(rawMessages);\n      WEBPACK_COMPILING = false;\n      if (!messages.errors.length && !messages.warnings.length) {\n        if (!WEBPACK_DONE) {\n          if (!this.verbose) {\n            clearConsole();\n          }\n          logger.done('Compiled successfully');\n          WEBPACK_DONE = true;\n\n          if (this.onSuccessMessage) {\n            logger.log(this.onSuccessMessage);\n            logger.log('');\n          }\n        }\n      }\n\n      if (\n        messages.errors.length &&\n        !(\n          rawMessages.errors &&\n          rawMessages.errors.length > 0 &&\n          (rawMessages.errors[0].includes('assets.json') ||\n            rawMessages.errors[0].includes('chunks.json') ||\n            rawMessages.errors[0].includes(\"Module not found: Can't resolve\"))\n        )\n      ) {\n        messages.errors.forEach(e => {\n          logger.error(\n            `Failed to compile ${this.target} with ${messages.errors.length} errors`,\n            e\n          );\n        });\n        // return;\n      }\n\n      if (messages.warnings.length) {\n        logger.warn(\n          `Failed to compile with ${messages.warnings.length} warnings`\n        );\n        messages.warnings.forEach(w => logger.log(w));\n      }\n    });\n\n    compiler.plugin('invalid', params => {\n      WEBPACK_DONE = false;\n      if (!WEBPACK_COMPILING) {\n        if (!this.verbose) {\n          clearConsole();\n        }\n        logger.start('Compiling...');\n        WEBPACK_COMPILING = true;\n      }\n    });\n  }\n}\n\nmodule.exports = WebpackErrorsPlugin;\n"
  },
  {
    "path": "packages/razzle-dev-utils/README.md",
    "content": "# razzle-dev-utils\n\nThis package includes some utilties used by [Razzle](https://github/com/palmerhq/razzle)\n\n## Usage in Razzle Projects\n\nThese utilities come by default with Razzle, which includes it by default. **You don’t need to install it separately in Razzle projects.**\n\n## Usage Outside of Razzle\n\nIf you don’t use Razzle, you may keep using these utilities. Their development will be aligned with Razzle, so major versions of these utilities may come out relatively often. Feel free to fork or copy and paste them into your projects if you’d like to have more control over them, or feel free to use the old versions.\n\n### Entry Points\n\nThere is no single entry point. You can only import individual top-level modules.\n\n#### `logger`\n\n- `logger.log(thing: any): void`: Log to console. = `console.log`\n- `logger.start(text: string): void`: Log the start of a task to console\n- `logger.done(text: string): void`: Log the end of task to console\n- `logger.info(text: string, data: object): void`: Log information and data to console\n- `logger.debug(text: string, data: object): void`: Log debug message and data to console\n- `logger.warn(text: string, data: object): void`: Log a warning with message and data to console\n- `logger.error(text: string, err: object): void`: Log a message and an error to console\n\n#### `new FriendlyErrorsWebpackPlugin({ verbose: boolean, onSuccessMessage: string, target: 'web' | 'server' })`\n\nThis will pretty print webpack errors to your console. It is mean to be used with Razzle's double webpack setup, where you have two webpack instances running in parallel. Otherwise the output looks almost identical to `create-react-app's` as it uses the same error formatter under the hood.\n\n```js\nconst FriendlyErrorsPlugin = require('razzle-dev-utils/FriendlyErrorsPlugin');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new FriendlyErrorsPlugin({\n        verbose: false,\n        target: 'web',\n        onSuccessMessage: `Your application is running at http://${process.env.HOST}:${process.env.PORT}`,\n      }),\n    // ...\n  ],\n  // ...\n}\n```\n\n#### `printErrors(summary: string, errors: Error[])`\n\nPretty print an array of errors with a message. Good for CI's.\n\n```js\nconst printErrors = require('razzle-dev-utils/printErrors');\n\ntry {\n  // do something\n} catch (e) {\n  printErrors('Failed to compile.', [e]);\n}\n```\n\n`makeLoaderFinder(loaderName: string): (rule: WebPackRule) => boolean;`\n\nHelper function to find a loader in the webpack config object. Used for writing Razzle Plugins, or razzle modify functions.\n\nExample:\n\n```js\n// razzle.config.js\nconst loaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nmodule.exports = {\n  modify(config) {\n    // Makes a finder function, to search for babel-loader\n    const babelLoaderFinder = makeLoaderFinder('babel-loader');\n\n    // Finds the JS rule containing babel-loader using our function\n    const jsRule = config.module.rules.find(babelLoaderFinder);\n\n    // Set cacheDirectory to true in our babel-loader\n    jsRule.use.find(babelLoaderFinder).options.cacheDirectory = true;\n  },\n};\n```\n"
  },
  {
    "path": "packages/razzle-dev-utils/WebpackConfigHelpers.js",
    "content": "'use strict';\n\nconst path = require('path');\n\n/**\n * WebpackConfigHelpers\n *\n * @class WebpackConfigHelpers\n */\nclass WebpackConfigHelpers {\n  constructor(cwd) {\n    this._cwd = cwd;\n  }\n\n  /**\n   * Returns wrapper around all loaders from config.\n   *\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @returns {LoaderWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getLoaders(config) {\n    return this.getRules(config).map(({ rule, index }) => ({\n      rule: rule,\n      ruleIndex: index,\n      loaders: rule.loaders || rule.use || rule.loader,\n    }));\n  }\n\n  /**\n   * Returns wrapper around all rules from config.\n   *\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @returns {RuleWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getRules(config) {\n    return [\n      ...(config.module.loaders || []),\n      ...(config.module.rules || []),\n    ].map((rule, index) => ({ index, rule }));\n  }\n\n  /**\n   * Returns wrapper around all plugins from config.\n   *\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @returns {PluginWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getPlugins(config) {\n    return (config.plugins || []).map((plugin, index) => ({ index, plugin }));\n  }\n\n  /**\n   *\n   *\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @param {string} file - path to test against loader. Resolved relatively to $PWD.\n   * @returns {RuleWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getRulesByMatchingFile(config, file) {\n    let filePath = path.resolve(this._cwd, file);\n    return this.getRules(config).filter(\n      w => w.rule.test && w.rule.test.exec(filePath)\n    );\n  }\n\n  /**\n   * Returns loaders that match provided name.\n   *\n   * @example\n   * helpers.getLoadersByName(config, 'less-loader')\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @param {string} name - name of loader.\n   * @returns {LoaderWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getLoadersByName(config, name) {\n    return this.getLoaders(config)\n      .map(({ rule, ruleIndex, loaders }) =>\n        Array.isArray(loaders)\n          ? loaders.map((loader, loaderIndex) => ({\n              rule,\n              ruleIndex,\n              loader,\n              loaderIndex,\n            }))\n          : [{ rule, ruleIndex, loader: loaders, loaderIndex: -1 }]\n      )\n      .reduce((arr, loaders) => arr.concat(loaders), [])\n      .filter(\n        ({ loader }) => loader === name || (loader && loader.loader === name)\n      );\n  }\n\n  /**\n   * Returns plugins that match provided name.\n   *\n   * @example\n   * helpers.getPluginsByName(config, 'HtmlWebpackPlugin')\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @param {string} name - name of loader.\n   * @returns {PluginWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getPluginsByName(config, name) {\n    return this.getPlugins(config).filter(\n      w =>\n        w.plugin && w.plugin.constructor && w.plugin.constructor.name === name\n    );\n  }\n\n  /**\n   * Returns plugins that match provided type.\n   *\n   * @example\n   * helpers.getPluginsByType(config, webpack.optimize.CommonsChunkPlugin)\n   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).\n   * @param {any} type - type of plugin.\n   * @returns {PluginWrapper[]}\n   *\n   * @memberof WebpackConfigHelpers\n   */\n  getPluginsByType(config, type) {\n    return this.getPlugins(config).filter(w => w.plugin instanceof type);\n  }\n\n  getResolveExtensions(config) {\n    return config.resolve.extensions;\n  }\n\n  addResolveExtensions(config, ext) {\n    return config.resolve.extensions.concat(ext);\n  }\n\n  makeLoaderFinder(loaderName) {\n    return function findLoader(rule) {\n      // i.e.: /eslint-loader/\n      const loaderRegex = new RegExp(`[/\\\\\\\\]${loaderName}[/\\\\\\\\]`);\n\n      // Checks if there's a loader string in rule.loader matching loaderRegex.\n      const inLoaderString =\n        typeof rule.loader === 'string' && rule.loader.match(loaderRegex);\n\n      // Checks if there is an object inside rule.use with loader matching loaderRegex, OR\n      const inUseArray =\n        Array.isArray(rule.use) &&\n        rule.use.find(\n          loader =>\n            typeof loader.loader === 'string' &&\n            loader.loader.match(loaderRegex)\n        );\n\n      return inUseArray || inLoaderString;\n    };\n  }\n}\n\n/**\n * Wrapper around webpack's [loader entry](https://webpack.js.org/configuration/module/#useentry).\n *\n * @typedef {object} LoaderWrapper\n * @property {object} rule - [rule entry](https://webpack.js.org/configuration/module/#module-rules).\n * @property {number} ruleIndex - index of rule in config.\n * @property {object} loader - [loader entry](https://webpack.js.org/configuration/module/#useentry).\n * @property {number} loaderIndex - index of loader in rule.\n */\n\n/**\n * Wrapper around webpack's [rule](https://webpack.js.org/configuration/module/#module-rules).\n *\n * @typedef {object} RuleWrapper\n * @property {object} rule - [rule entry](https://webpack.js.org/configuration/module/#module-rules).\n * @property {number} index - index of rule in config.\n */\n\n/**\n * Wrapper around webpack's [plugin](https://webpack.js.org/configuration/plugins/#plugins).\n *\n * @typedef {object} PluginWrapper\n * @property {object} plugin - [plugin entry](https://webpack.js.org/configuration/plugins/#plugins).\n * @property {number} index - index of plugin in config.\n */\n\nmodule.exports = WebpackConfigHelpers;\n"
  },
  {
    "path": "packages/razzle-dev-utils/devServerMajor.js",
    "content": "'use strict';\n\nconst devserverPkg = require('webpack-dev-server/package.json');\n\nmodule.exports = devserverPkg.version ? parseInt(devserverPkg.version[0]) : 3;\n"
  },
  {
    "path": "packages/razzle-dev-utils/formatWebpackMessages.js",
    "content": "'use strict';\n\nconst formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');\n\nfunction razzleFormatWebpackMessages(messages) {\n  return process.env.WEBPACK_VERSION === 5\n    ? formatWebpackMessages(\n        ['errors', 'warnings'].reduce(\n          function(result, item) {\n            result[item] = result[item].concat(\n              messages[item].map(function(stat) {\n                return stat.message;\n              })\n            );\n            return result;\n          },\n          { errors: [], warnings: [] }\n        )\n      )\n    : formatWebpackMessages(messages);\n}\nmodule.exports = razzleFormatWebpackMessages;\n"
  },
  {
    "path": "packages/razzle-dev-utils/logger.js",
    "content": "'use strict';\n\nconst chalk = require('chalk');\n\nconst logTypes = {\n  warn: {\n    bg: 'bgYellow',\n    msg: ' WARNING ',\n    text: 'yellow',\n  },\n  debug: {\n    bg: 'bgMagenta',\n    msg: ' DEBUG ',\n    text: 'magenta',\n  },\n  info: {\n    bg: 'bgCyan',\n    msg: ' INFO ',\n    text: 'cyan',\n  },\n  error: {\n    bg: 'bgRed',\n    msg: ' ERROR ',\n    text: 'red',\n  },\n  start: {\n    bg: 'bgBlue',\n    msg: ' WAIT ',\n    text: 'blue',\n  },\n  done: {\n    bg: 'bgGreen',\n    msg: ' DONE ',\n    text: 'green',\n  },\n};\n\nconst write = (type, text, verbose) => {\n  let textToLog = '';\n  let logObject = false;\n\n  const logType = logTypes[type];\n\n  textToLog +=\n    chalk[logType.bg].black(logType.msg) + ' ' + chalk[logType.text](text);\n\n  // Adds optional verbose output\n  if (verbose) {\n    if (typeof verbose === 'object') {\n      logObject = true;\n    } else {\n      textToLog += `\\n\\n${verbose}`;\n    }\n  }\n\n  console.log(textToLog);\n  if (['start', 'done', 'error'].indexOf(type) > -1) {\n    console.log();\n  }\n\n  if (logObject) console.dir(verbose, { depth: 15 });\n};\n\n// Printing any statements\nconst log = (text = '') => console.log(text);\n\n// Starting a process\nconst start = text => {\n  write('start', text);\n};\n\n// Ending a process\nconst done = text => {\n  write('done', text);\n};\n\n// Info about a process task\nconst info = text => {\n  write('info', text);\n};\n\n// Verbose output\n// takes optional data\nconst debug = (text, data) => {\n  write('debug', text, data);\n};\n\n// Warn output\nconst warn = (text, data) => {\n  write('warn', text, data);\n};\n\n// Error output\n// takes an optional error\nconst error = (text, err) => {\n  write('error', text, err);\n};\n\nmodule.exports = {\n  log,\n  info,\n  debug,\n  warn,\n  error,\n  start,\n  done,\n};\n"
  },
  {
    "path": "packages/razzle-dev-utils/makeLoaderFinder.js",
    "content": "'use strict';\n\nconst makeLoaderFinder = loaderName => rule => {\n  // i.e.: /eslint-loader/\n  const loaderRegex = new RegExp(`[/\\\\\\\\]${loaderName}[/\\\\\\\\]`);\n\n  // Checks if there's a loader string in rule.loader matching loaderRegex.\n  const inLoaderString =\n    typeof rule.loader === 'string' && (rule.loader.match(loaderRegex) || rule.loader === loaderName);\n\n  // Checks if there is an object inside rule.use with loader matching loaderRegex, OR\n  // Checks another condition, if rule is not an object, but pure string (ex: \"style-loader\", etc)\n  const inUseArray =\n    Array.isArray(rule.use) &&\n    rule.use.find(\n      loader =>\n        (typeof loader.loader === 'string' &&\n          (loader.loader.match(loaderRegex)) || rule.loader === loaderName) ||\n        (typeof loader === 'string' && (loader.match(loaderRegex) || loader === loaderName))\n    );\n\n  return inUseArray || inLoaderString;\n};\n\nmodule.exports = makeLoaderFinder;\n"
  },
  {
    "path": "packages/razzle-dev-utils/package.json",
    "content": "{\n  \"name\": \"razzle-dev-utils\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Utilities and helpers for Razzle\",\n  \"author\": \"Jared Palmer <jared@palmer.net>\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-dev-utils\"\n  },\n  \"license\": \"MIT\",\n  \"files\": [\n    \"logger.js\",\n    \"printErrors.js\",\n    \"printWarnings.js\",\n    \"FriendlyErrorsPlugin.js\",\n    \"FileSizeReporter.js\",\n    \"webpackHotDevClient.js\",\n    \"webpackHotDevClientV4.js\",\n    \"setPorts.js\",\n    \"makeLoaderFinder.js\",\n    \"WebpackConfigHelpers.js\",\n    \"prettyNodeErrors.js\",\n    \"resolveRequest.js\",\n    \"webpackMajor.js\",\n    \"formatWebpackMessages.js\",\n    \"devServerMajor.js\"\n  ],\n  \"dependencies\": {\n    \"@babel/code-frame\": \"^7.8.3\",\n    \"chalk\": \"^4.1.0\",\n    \"filesize\": \"^6.1.0\",\n    \"gzip-size\": \"^6.0.0\",\n    \"jest-message-util\": \"^26.3.0\",\n    \"react-dev-utils\": \"^11.0.4\",\n    \"react-error-overlay\": \"^6.0.7\",\n    \"recursive-readdir\": \"^2.2.2\",\n    \"resolve\": \"^1.17.0\",\n    \"sockjs-client\": \"~1.4.0\",\n    \"strip-ansi\": \"^6.0.0\"\n  },\n  \"peerDependencies\": {\n    \"webpack\": \"~4||~5\",\n    \"webpack-dev-server\": \"~3||~4\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-dev-utils/prettyNodeErrors.js",
    "content": "const fs = require('fs');\nconst {\n  getTopFrame,\n  getStackTraceLines,\n  separateMessageFromStack,\n} = require('jest-message-util');\nconst { codeFrameColumns } = require('@babel/code-frame');\n\nfunction pretty(error) {\n  const { message, stack } = error;\n  const lines = getStackTraceLines(stack);\n  const topFrame = getTopFrame(lines);\n  const fallback = `${message}${stack}`;\n\n  if (!topFrame) {\n    return fallback;\n  }\n\n  const { file, line } = topFrame;\n  try {\n    const result = codeFrameColumns(\n      fs.readFileSync(file, 'utf8'),\n      { start: { line } },\n      { highlightCode: true }\n    );\n    return `\\n${message}\\n\\n${result}\\n${stack}\\n`;\n  } catch (error) {\n    return fallback;\n  }\n}\n\nfunction usePrettyErrors(transform) {\n  const { prepareStackTrace } = Error;\n\n  Error.prepareStackTrace = (error, trace) => {\n    const prepared = prepareStackTrace\n      ? separateMessageFromStack(prepareStackTrace(error, trace))\n      : error;\n    const transformed = transform ? transform(prepared) : prepared;\n    return pretty(transformed);\n  };\n}\n\n// Clean up Webpack's sourcemap namespacing in error stacks\n// @see https://github.com/facebook/create-react-app/blob/next/packages/react-dev-utils/formatWebpackMessages.js#L112\nconst stackTransform = ({ stack = '', ...rest }) => ({\n  stack: stack.replace('/build/webpack:', ''),\n  ...rest,\n});\n\nusePrettyErrors(stackTransform);\n"
  },
  {
    "path": "packages/razzle-dev-utils/printErrors.js",
    "content": "'use strict';\n\nconst webpackMajor = require('./webpackMajor');\nconst chalk = require('chalk');\n\n/**\n* Print an array of errors to console.\n*\n* @param {string} summary Summary of error\n* @param {Array<Error>} errors Array of Errors\n*/\nfunction printErrors(summary, errors, verbose) {\n  console.log(chalk.red(summary));\n  console.log();\n  errors.forEach(err => {\n    if (webpackMajor < 5) {\n      // webpack 4 format\n      console.error(err);\n    } else {\n      if (err.message) {\n        console.error(err.message);\n      }\n      console.error(err.stack || err);\n      if (err.details) {\n        console.error(err.details);\n      }\n    }\n    console.log();\n  });\n}\n\nmodule.exports = printErrors;\n"
  },
  {
    "path": "packages/razzle-dev-utils/printWarnings.js",
    "content": "'use strict';\n\nconst webpackMajor = require('./webpackMajor');\nconst chalk = require('chalk');\n\n/**\n* Print an array of warnings to console.\n*\n* @param {string} summary Summary of error\n* @param {Array<Warnings>} warnings Array of Warningss\n*/\nfunction printWarnings(summary, warnings, verbose) {\n  console.log(chalk.yellow(summary));\n  console.log();\n  warnings.forEach(wrn => {\n    if (webpackMajor < 5) {\n      // webpack 4\n      console.warn(wrn);\n    } else {\n      if (wrn.message) {\n        console.warn(wrn.message);\n      }\n      if (verbose) {\n        console.warn(wrn.stack || wrn);\n      }\n      if (wrn.details) {\n        console.warn(wrn.details);\n      }\n    }\n    console.log();\n  });\n}\n\nmodule.exports = printWarnings;\n"
  },
  {
    "path": "packages/razzle-dev-utils/resolveRequest.js",
    "content": "const resolve = require('resolve');\nconst path = require('path');\n\nfunction resolveRequest(req, issuer) {\n  const basedir =\n    issuer.endsWith(path.posix.sep) || issuer.endsWith(path.win32.sep)\n      ? issuer\n      : path.dirname(issuer);\n  return resolve.sync(req, { basedir });\n}\n\nmodule.exports = resolveRequest;\n"
  },
  {
    "path": "packages/razzle-dev-utils/setPorts.js",
    "content": "const { choosePort } = require('react-dev-utils/WebpackDevServerUtils');\n\n// Checks if PORT and PORT_DEV are available and suggests alternatives if not\nmodule.exports = clientOnly => {\n  return new Promise(async resolve => {\n    const port = (process.env.PORT && parseInt(process.env.PORT, 10)) || 3000;\n    const portDev =\n      (process.env.PORT_DEV && parseInt(process.env.PORT_DEV, 10)) ||\n      (clientOnly && port) ||\n      port + 1;\n\n    const actualPort = await choosePort(process.env.HOST, port);\n    const actualPortDev = await choosePort(process.env.HOST, portDev);\n\n    process.env.PORT = actualPort;\n    process.env.PORT_DEV = actualPortDev;\n\n    resolve();\n  });\n};\n"
  },
  {
    "path": "packages/razzle-dev-utils/webpackHotDevClient.js",
    "content": "'use strict';\n\n// This alternative WebpackDevServer combines the functionality of:\n// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js\n// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js\n\n// It only supports their simplest configuration (hot updates on same server).\n// It makes some opinionated choices on top, like adding a syntax error overlay\n// that looks similar to our console output. The error overlay is inspired by:\n// https://github.com/glenjamin/webpack-hot-middleware\n\n// HACK ALERT: Most of this file is identical to the webpackHotDevClientV4.js file with the exception of the code blocks\n// denoted with //--- START Unique code --- and //--- END Unique code\n// This was done to avoid getting a warning about the `createSocketURL` vs `createSocketUrl` file names\n// You must keep the code in these two files in sync\n\nvar SockJS = require('sockjs-client');\nvar stripAnsi = require('strip-ansi');\nvar url = require('url');\nvar launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');\nvar formatWebpackMessages = require('./formatWebpackMessages');\nvar ErrorOverlay = require('react-error-overlay');\n\n//--- START Unique code ---\n// This code is unique to webpack-dev-server v3\nvar createSocketUrl = require('webpack-dev-server/client/utils/createSocketUrl');\nvar socketUrl = createSocketUrl();\n//--- END Unique code ---\n\nvar parsedSocketUrl = url.parse(socketUrl);\n\nErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {\n  // Keep this sync with errorOverlayMiddleware.js\n  fetch(\n    url.format({\n      protocol: parsedSocketUrl.protocol,\n      hostname: parsedSocketUrl.hostname,\n      port: parsedSocketUrl.port,\n      pathname: launchEditorEndpoint,\n      search:\n        '?fileName=' +\n        window.encodeURIComponent(errorLocation.fileName) +\n        '&lineNumber=' +\n        window.encodeURIComponent(errorLocation.lineNumber || 1) +\n        '&colNumber=' +\n        window.encodeURIComponent(errorLocation.colNumber || 1),\n    }),\n    { mode: 'no-cors' }\n  );\n});\n\n// We need to keep track of if there has been a runtime error.\n// Essentially, we cannot guarantee application state was not corrupted by the\n// runtime error. To prevent confusing behavior, we forcibly reload the entire\n// application. This is handled below when we are notified of a compile (code\n// change).\n// See https://github.com/facebookincubator/create-react-app/issues/3096\nvar hadRuntimeError = false;\nErrorOverlay.startReportingRuntimeErrors({\n  onError: function() {\n    hadRuntimeError = true;\n  },\n  filename: process.env.REACT_BUNDLE_PATH || '/static/js/bundle.js',\n});\n\nif (module.hot && typeof module.hot.dispose === 'function') {\n  module.hot.dispose(function() {\n    // TODO: why do we need this?\n    ErrorOverlay.stopReportingRuntimeErrors();\n  });\n}\n\n//--- START Unique code ---\n// This code is unique to webpack-dev-server v3\nvar connection = new SockJS(socketUrl);\n//--- END Unique code ---\n\n// Unlike WebpackDevServer client, we won't try to reconnect\n// to avoid spamming the console. Disconnect usually happens\n// when developer stops the server.\nconnection.onclose = function() {\n  if (typeof console !== 'undefined' && typeof console.info === 'function') {\n    console.info(\n      'The development server has disconnected.\\nRefresh the page if necessary.'\n    );\n  }\n};\n\n// Remember some state related to hot module replacement.\nvar isFirstCompilation = true;\nvar mostRecentCompilationHash = null;\nvar hasCompileErrors = false;\n\nfunction clearOutdatedErrors() {\n  // Clean up outdated compile errors, if any.\n  if (typeof console !== 'undefined' && typeof console.clear === 'function') {\n    if (hasCompileErrors) {\n      console.clear();\n    }\n  }\n}\n\n// Successful compilation.\nfunction handleSuccess() {\n  clearOutdatedErrors();\n\n  var isHotUpdate = !isFirstCompilation;\n  isFirstCompilation = false;\n  hasCompileErrors = false;\n\n  // Attempt to apply hot updates or reload.\n  if (isHotUpdate) {\n    tryApplyUpdates(function onHotUpdateSuccess() {\n      // Only dismiss it when we're sure it's a hot update.\n      // Otherwise it would flicker right before the reload.\n      tryDismissErrorOverlay();\n    });\n  }\n}\n\n// Compilation with warnings (e.g. ESLint).\nfunction handleWarnings(warnings) {\n  clearOutdatedErrors();\n\n  var isHotUpdate = !isFirstCompilation;\n  isFirstCompilation = false;\n  hasCompileErrors = false;\n\n  function printWarnings() {\n    // Print warnings to the console.\n    var formatted = formatWebpackMessages({\n      warnings: warnings,\n      errors: [],\n    });\n\n    if (typeof console !== 'undefined' && typeof console.warn === 'function') {\n      for (var i = 0; i < formatted.warnings.length; i++) {\n        if (i === 5) {\n          console.warn(\n            'There were more warnings in other files.\\n' +\n              'You can find a complete log in the terminal.'\n          );\n          break;\n        }\n        console.warn(stripAnsi(formatted.warnings[i]));\n      }\n    }\n  }\n\n  // Attempt to apply hot updates or reload.\n  if (isHotUpdate) {\n    tryApplyUpdates(function onSuccessfulHotUpdate() {\n      // Only print warnings if we aren't refreshing the page.\n      // Otherwise they'll disappear right away anyway.\n      printWarnings();\n      // Only dismiss it when we're sure it's a hot update.\n      // Otherwise it would flicker right before the reload.\n      tryDismissErrorOverlay();\n    });\n  } else {\n    // Print initial warnings immediately.\n    printWarnings();\n  }\n}\n\n// Compilation with errors (e.g. syntax error or missing modules).\nfunction handleErrors(errors) {\n  clearOutdatedErrors();\n\n  isFirstCompilation = false;\n  hasCompileErrors = true;\n\n  // \"Massage\" webpack messages.\n  var formatted = formatWebpackMessages({\n    errors: errors,\n    warnings: [],\n  });\n\n  // Only show the first error.\n  ErrorOverlay.reportBuildError(formatted.errors[0]);\n\n  // Also log them to the console.\n  if (typeof console !== 'undefined' && typeof console.error === 'function') {\n    for (var i = 0; i < formatted.errors.length; i++) {\n      console.error(stripAnsi(formatted.errors[i]));\n    }\n  }\n\n  // Do not attempt to reload now.\n  // We will reload on next success instead.\n}\n\nfunction tryDismissErrorOverlay() {\n  if (!hasCompileErrors) {\n    ErrorOverlay.dismissBuildError();\n  }\n}\n\n// There is a newer version of the code available.\nfunction handleAvailableHash(hash) {\n  // Update last known compilation hash.\n  mostRecentCompilationHash = hash;\n}\n\n// Handle messages from the server.\nconnection.onmessage = function(e) {\n  var message = JSON.parse(e.data);\n  switch (message.type) {\n    case 'hash':\n      handleAvailableHash(message.data);\n      break;\n    case 'still-ok':\n    case 'ok':\n      handleSuccess();\n      break;\n    case 'content-changed':\n      // Triggered when a file from `contentBase` changed.\n      window.location.reload();\n      break;\n    case 'warnings':\n      handleWarnings(message.data);\n      break;\n    case 'errors':\n      handleErrors(message.data);\n      break;\n    default:\n    // Do nothing.\n  }\n};\n\n// Is there a newer version of this code available?\nfunction isUpdateAvailable() {\n  /* globals __webpack_hash__ */\n  // __webpack_hash__ is the hash of the current compilation.\n  // It's a global variable injected by Webpack.\n  return mostRecentCompilationHash !== __webpack_hash__;\n}\n\n// Webpack disallows updates in other states.\nfunction canApplyUpdates() {\n  return module.hot.status() === 'idle';\n}\n\n// Attempt to update code on the fly, fall back to a hard reload.\nfunction tryApplyUpdates(onHotUpdateSuccess) {\n  if (!module.hot) {\n    // HotModuleReplacementPlugin is not in Webpack configuration.\n    window.location.reload();\n    return;\n  }\n\n  if (!isUpdateAvailable() || !canApplyUpdates()) {\n    return;\n  }\n\n  function handleApplyUpdates(err, updatedModules) {\n    const hasReactRefresh = process.env.FAST_REFRESH;\n    const wantsForcedReload = err || !updatedModules || hadRuntimeError;\n    // React refresh can handle hot-reloading over errors.\n    if (!hasReactRefresh && wantsForcedReload) {\n      window.location.reload();\n      return;\n    }\n\n    if (typeof onHotUpdateSuccess === 'function') {\n      // Maybe we want to do something.\n      onHotUpdateSuccess();\n    }\n\n    if (isUpdateAvailable()) {\n      // While we were updating, there was a new update! Do it again.\n      tryApplyUpdates();\n    }\n  }\n\n  // https://webpack.github.io/docs/hot-module-replacement.html#check\n  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);\n\n  // // Webpack 2 returns a Promise instead of invoking a callback\n  if (result && result.then) {\n    result.then(\n      function(updatedModules) {\n        handleApplyUpdates(null, updatedModules);\n      },\n      function(err) {\n        handleApplyUpdates(err, null);\n      }\n    );\n  }\n}\n"
  },
  {
    "path": "packages/razzle-dev-utils/webpackHotDevClientV4.js",
    "content": "'use strict';\n\n// This alternative WebpackDevServer combines the functionality of:\n// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js\n// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js\n\n// It only supports their simplest configuration (hot updates on same server).\n// It makes some opinionated choices on top, like adding a syntax error overlay\n// that looks similar to our console output. The error overlay is inspired by:\n// https://github.com/glenjamin/webpack-hot-middleware\n\n// HACK ALERT: Most of this file is identical to the webpackHotDevClient.js file with the exception of the code blocks\n// denoted with //--- START Unique code --- and //--- END Unique code\n// This was done to avoid getting a warning about the `createSocketURL` vs `createSocketUrl` file names\n// You must keep the code in these two files in sync\n\nvar stripAnsi = require('strip-ansi');\nvar url = require('url');\nvar launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');\nvar formatWebpackMessages = require('./formatWebpackMessages');\nvar ErrorOverlay = require('react-error-overlay');\n\n//--- START Unique code ---\n// This code is unique to webpack-dev-server v4\n// The single API changed to 2 APIs in v4, first you parse the URL, then you create the socket URL from the parsed data\n// These APIs are accessible from the `default` context\nvar parseURL = require('webpack-dev-server/client/utils/parseURL').default\nvar createSocketUrl = require('webpack-dev-server/client/utils/createSocketURL').default;\nvar socketUrl = createSocketUrl(parseURL());\n//--- START Unique code ---\n\nvar parsedSocketUrl = url.parse(socketUrl);\n\nErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {\n  // Keep this sync with errorOverlayMiddleware.js\n  fetch(\n    url.format({\n      protocol: parsedSocketUrl.protocol,\n      hostname: parsedSocketUrl.hostname,\n      port: parsedSocketUrl.port,\n      pathname: launchEditorEndpoint,\n      search:\n        '?fileName=' +\n        window.encodeURIComponent(errorLocation.fileName) +\n        '&lineNumber=' +\n        window.encodeURIComponent(errorLocation.lineNumber || 1) +\n        '&colNumber=' +\n        window.encodeURIComponent(errorLocation.colNumber || 1),\n    }),\n    { mode: 'no-cors' }\n  );\n});\n\n// We need to keep track of if there has been a runtime error.\n// Essentially, we cannot guarantee application state was not corrupted by the\n// runtime error. To prevent confusing behavior, we forcibly reload the entire\n// application. This is handled below when we are notified of a compile (code\n// change).\n// See https://github.com/facebookincubator/create-react-app/issues/3096\nvar hadRuntimeError = false;\nErrorOverlay.startReportingRuntimeErrors({\n  onError: function() {\n    hadRuntimeError = true;\n  },\n  filename: process.env.REACT_BUNDLE_PATH || '/static/js/bundle.js',\n});\n\nif (module.hot && typeof module.hot.dispose === 'function') {\n  module.hot.dispose(function() {\n    // TODO: why do we need this?\n    ErrorOverlay.stopReportingRuntimeErrors();\n  });\n}\n\n//--- START Unique code ---\n// This code is unique to webpack-dev-server v4\nvar connection = new WebSocket(socketUrl);\n//--- END Unique code ---\n\n// Unlike WebpackDevServer client, we won't try to reconnect\n// to avoid spamming the console. Disconnect usually happens\n// when developer stops the server.\nconnection.onclose = function() {\n  if (typeof console !== 'undefined' && typeof console.info === 'function') {\n    console.info(\n      'The development server has disconnected.\\nRefresh the page if necessary.'\n    );\n  }\n};\n\n// Remember some state related to hot module replacement.\nvar isFirstCompilation = true;\nvar mostRecentCompilationHash = null;\nvar hasCompileErrors = false;\n\nfunction clearOutdatedErrors() {\n  // Clean up outdated compile errors, if any.\n  if (typeof console !== 'undefined' && typeof console.clear === 'function') {\n    if (hasCompileErrors) {\n      console.clear();\n    }\n  }\n}\n\n// Successful compilation.\nfunction handleSuccess() {\n  clearOutdatedErrors();\n\n  var isHotUpdate = !isFirstCompilation;\n  isFirstCompilation = false;\n  hasCompileErrors = false;\n\n  // Attempt to apply hot updates or reload.\n  if (isHotUpdate) {\n    tryApplyUpdates(function onHotUpdateSuccess() {\n      // Only dismiss it when we're sure it's a hot update.\n      // Otherwise it would flicker right before the reload.\n      tryDismissErrorOverlay();\n    });\n  }\n}\n\n// Compilation with warnings (e.g. ESLint).\nfunction handleWarnings(warnings) {\n  clearOutdatedErrors();\n\n  var isHotUpdate = !isFirstCompilation;\n  isFirstCompilation = false;\n  hasCompileErrors = false;\n\n  function printWarnings() {\n    // Print warnings to the console.\n    var formatted = formatWebpackMessages({\n      warnings: warnings,\n      errors: [],\n    });\n\n    if (typeof console !== 'undefined' && typeof console.warn === 'function') {\n      for (var i = 0; i < formatted.warnings.length; i++) {\n        if (i === 5) {\n          console.warn(\n            'There were more warnings in other files.\\n' +\n              'You can find a complete log in the terminal.'\n          );\n          break;\n        }\n        console.warn(stripAnsi(formatted.warnings[i]));\n      }\n    }\n  }\n\n  // Attempt to apply hot updates or reload.\n  if (isHotUpdate) {\n    tryApplyUpdates(function onSuccessfulHotUpdate() {\n      // Only print warnings if we aren't refreshing the page.\n      // Otherwise they'll disappear right away anyway.\n      printWarnings();\n      // Only dismiss it when we're sure it's a hot update.\n      // Otherwise it would flicker right before the reload.\n      tryDismissErrorOverlay();\n    });\n  } else {\n    // Print initial warnings immediately.\n    printWarnings();\n  }\n}\n\n// Compilation with errors (e.g. syntax error or missing modules).\nfunction handleErrors(errors) {\n  clearOutdatedErrors();\n\n  isFirstCompilation = false;\n  hasCompileErrors = true;\n\n  // \"Massage\" webpack messages.\n  var formatted = formatWebpackMessages({\n    errors: errors,\n    warnings: [],\n  });\n\n  // Only show the first error.\n  ErrorOverlay.reportBuildError(formatted.errors[0]);\n\n  // Also log them to the console.\n  if (typeof console !== 'undefined' && typeof console.error === 'function') {\n    for (var i = 0; i < formatted.errors.length; i++) {\n      console.error(stripAnsi(formatted.errors[i]));\n    }\n  }\n\n  // Do not attempt to reload now.\n  // We will reload on next success instead.\n}\n\nfunction tryDismissErrorOverlay() {\n  if (!hasCompileErrors) {\n    ErrorOverlay.dismissBuildError();\n  }\n}\n\n// There is a newer version of the code available.\nfunction handleAvailableHash(hash) {\n  // Update last known compilation hash.\n  mostRecentCompilationHash = hash;\n}\n\n// Handle messages from the server.\nconnection.onmessage = function(e) {\n  var message = JSON.parse(e.data);\n  switch (message.type) {\n    case 'hash':\n      handleAvailableHash(message.data);\n      break;\n    case 'still-ok':\n    case 'ok':\n      handleSuccess();\n      break;\n    case 'content-changed':\n      // Triggered when a file from `contentBase` changed.\n      window.location.reload();\n      break;\n    case 'warnings':\n      handleWarnings(message.data);\n      break;\n    case 'errors':\n      handleErrors(message.data);\n      break;\n    default:\n    // Do nothing.\n  }\n};\n\n// Is there a newer version of this code available?\nfunction isUpdateAvailable() {\n  /* globals __webpack_hash__ */\n  // __webpack_hash__ is the hash of the current compilation.\n  // It's a global variable injected by Webpack.\n  return mostRecentCompilationHash !== __webpack_hash__;\n}\n\n// Webpack disallows updates in other states.\nfunction canApplyUpdates() {\n  return module.hot.status() === 'idle';\n}\n\n// Attempt to update code on the fly, fall back to a hard reload.\nfunction tryApplyUpdates(onHotUpdateSuccess) {\n  if (!module.hot) {\n    // HotModuleReplacementPlugin is not in Webpack configuration.\n    window.location.reload();\n    return;\n  }\n\n  if (!isUpdateAvailable() || !canApplyUpdates()) {\n    return;\n  }\n\n  function handleApplyUpdates(err, updatedModules) {\n    const hasReactRefresh = process.env.FAST_REFRESH;\n    const wantsForcedReload = err || !updatedModules || hadRuntimeError;\n    // React refresh can handle hot-reloading over errors.\n    if (!hasReactRefresh && wantsForcedReload) {\n      window.location.reload();\n      return;\n    }\n\n    if (typeof onHotUpdateSuccess === 'function') {\n      // Maybe we want to do something.\n      onHotUpdateSuccess();\n    }\n\n    if (isUpdateAvailable()) {\n      // While we were updating, there was a new update! Do it again.\n      tryApplyUpdates();\n    }\n  }\n\n  // https://webpack.github.io/docs/hot-module-replacement.html#check\n  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);\n\n  // // Webpack 2 returns a Promise instead of invoking a callback\n  if (result && result.then) {\n    result.then(\n      function(updatedModules) {\n        handleApplyUpdates(null, updatedModules);\n      },\n      function(err) {\n        handleApplyUpdates(err, null);\n      }\n    );\n  }\n}\n"
  },
  {
    "path": "packages/razzle-dev-utils/webpackMajor.js",
    "content": "'use strict';\n\nconst webpack = require('webpack');\n\nmodule.exports = webpack.version ? parseInt(webpack.version[0]) : 3;\n"
  },
  {
    "path": "packages/razzle-plugin-bundle-analyzer/CHANGELOG.md",
    "content": "# razzle-plugin-bundle-analyzer\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-bundle-analyzer/README.md",
    "content": "# razzle-plugin-bundle-analyzer\n\nThis package contains a plugin for using webpack-bundle-analyzer with Razzle\n\n## Usage in Razzle Projects\n\n```\nyarn add razzle-plugin-bundle-analyzer\n```\n\nUsing the plugin with the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['bundle-analyzer'],\n};\n```\n\n### With custom options:\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'bundle-analyzer',\n      options: {\n        target: 'web', // or 'node'\n        env: 'production', // or 'development'\n        bundleAnalyzerConfig: {},\n      },\n    },\n  ],\n};\n```\n\n## Options\n\n**target: _string_** (defaults: 'web')\n\n**env:  _string_** (defaults: 'production')\n\n**bundleAnalyzerConfig: _bundleAnalyzerOptions_** (defaults: {})\n\nUse this to override [`webpack-bundle-analyzer`](https://github.com/webpack-contrib/webpack-bundle-analyzer) options. Check all the options here: [webpack-bundle-analyzer options](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-plugin).\n"
  },
  {
    "path": "packages/razzle-plugin-bundle-analyzer/index.js",
    "content": "'use strict';\n\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nconst defaultOptions = {\n  target: 'web',\n  env: 'production',\n  bundleAnalyzerConfig: {\n    analyzerMode: \"static\",\n    reportFilename: \"report.html\",\n  },\n};\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n    const options = Object.assign(\n      {},\n      defaultOptions,\n      opts.options.pluginOptions\n    );\n\n    if (opts.env.target === options.target && options.env !== 'production' === opts.env.dev) {\n      config.plugins.push(\n        new BundleAnalyzerPlugin(\n          Object.assign({}, defaultOptions.bundleAnalyzerConfig, options.bundleAnalyzerConfig)\n        )\n      );\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-bundle-analyzer/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-bundle-analyzer\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Use webpack bundle analyzer with Razzle\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-bundle-analyzer\"\n  },\n  \"author\": \"Lucas Terra <lucasterra7@gmail.com>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"webpack-bundle-analyzer\": \"^3.9.0\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-bundle-analyzer/tests/index.test.js",
    "content": "'use strict';\n\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\nconst plugin = require('../index');\n\ndescribe('razzle-bundle-analyzer-plugin', () => {\n  describe('with default options in web development ', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('web', 'dev', {\n        plugins: [{ object: plugin }],\n      });\n      done();\n    });\n\n    it('should not add webpack-bundle-analyzer-plugin', () => {\n      const BAPlugin = config.plugins.find(\n        plugin => plugin instanceof BundleAnalyzerPlugin\n      );\n\n      expect(BAPlugin).toBeUndefined();\n    });\n\n  });\n\n  describe('with default options in web production ', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('web', 'prod', {\n        plugins: [{ object: plugin }],\n      });\n      done();\n    });\n\n    it('should add webpack-bundle-analyzer-plugin', () => {\n      const BAPlugin = config.plugins.find(\n        plugin => plugin instanceof BundleAnalyzerPlugin\n      );\n\n      expect(BAPlugin).not.toBeUndefined();\n    });\n  });\n\n  describe('with default options in node development ', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('node', 'dev', {\n        plugins: [{ object: plugin }],\n      });\n      done();\n    });\n\n    it('should not add webpack-bundle-analyzer-plugin', () => {\n      const BAPlugin = config.plugins.find(\n        plugin => plugin instanceof BundleAnalyzerPlugin\n      );\n\n      expect(BAPlugin).toBeUndefined();\n    });\n\n  });\n\n  describe('with default options in node production ', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('node', 'prod', {\n        plugins: [{ object: plugin }],\n      });\n      done();\n    });\n\n    it('should not add webpack-bundle-analyzer-plugin', () => {\n      const BAPlugin = config.plugins.find(\n        plugin => plugin instanceof BundleAnalyzerPlugin\n      );\n\n      expect(BAPlugin).toBeUndefined();\n    });\n  });\n\n  describe('with options in node development ', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('node', 'dev', {\n        plugins: [{ object: plugin, options: { target: 'node' } }],\n      });\n      done();\n    });\n\n    it('should not add webpack-bundle-analyzer-plugin', () => {\n      const BAPlugin = config.plugins.find(\n        plugin => plugin instanceof BundleAnalyzerPlugin\n      );\n\n      expect(BAPlugin).toBeUndefined();\n    });\n\n  });\n\n  describe('with options in node production ', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('node', 'prod', {\n        plugins: [{ object: plugin, options: { target: 'node' } }],\n      });\n      done();\n    });\n\n    it('should add webpack-bundle-analyzer-plugin', () => {\n      const BAPlugin = config.plugins.find(\n        plugin => plugin instanceof BundleAnalyzerPlugin\n      );\n\n      expect(BAPlugin).not.toBeUndefined();\n    });\n  });\n\n    describe('with options in web development ', () => {\n      let config;\n      beforeAll(async done => {\n        config = await createRazzleTestConfig('web', 'dev', {\n          plugins: [{ object: plugin, options: { env: 'development' } }],\n        });\n        done();\n      });\n\n      it('should add webpack-bundle-analyzer-plugin', () => {\n        const BAPlugin = config.plugins.find(\n          plugin => plugin instanceof BundleAnalyzerPlugin\n        );\n\n        expect(BAPlugin).not.toBeUndefined();\n      });\n\n    });\n\n    describe('with options in web production ', () => {\n      let config;\n      beforeAll(async done => {\n        config = await createRazzleTestConfig('web', 'prod', {\n          plugins: [{ object: plugin, options: { env: 'development' } }],\n        });\n        done();\n      });\n\n      it('should not add webpack-bundle-analyzer-plugin', () => {\n        const BAPlugin = config.plugins.find(\n          plugin => plugin instanceof BundleAnalyzerPlugin\n        );\n\n        expect(BAPlugin).toBeUndefined();\n      });\n    });\n\n});\n"
  },
  {
    "path": "packages/razzle-plugin-css/CHANGELOG.md",
    "content": "# razzle-plugin-css\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/razzle-plugin-css/README.md",
    "content": "# razzle-plugin-css\n\nThis is just a stub. Razzle comes with CSS. The same exact setup as `create-react-app`.\n"
  },
  {
    "path": "packages/razzle-plugin-css/index.js",
    "content": "'use strict';\n\nmodule.exports = function modify(config) {\n  console.log(\n    'Razzle comes with the same CSS setup as create-react-app. This package is a stub.'\n  );\n  return config;\n};\n"
  },
  {
    "path": "packages/razzle-plugin-css/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-css\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-css\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/razzle-plugin-devcert/CHANGELOG.md",
    "content": "# razzle-plugin-devcert\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-devcert/README.md",
    "content": "# razzle-plugin-devcert\n\n## Installation\n\n```bash\nyarn add razzle-plugin-devcert\n```\n\nAdd it to your `razzle.config.js`:\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['devcert'],\n};\n```\n"
  },
  {
    "path": "packages/razzle-plugin-devcert/index.js",
    "content": "'use strict';\nconst devcert = require('devcert');\n\nmodule.exports = {\n  modifyOptions(opts) {\n    // use modifyOptions so certificateFor is called once\n    const options = opts.options.razzleOptions;\n    return new Promise(async resolve => {\n      const httpsCredentials = await devcert.certificateFor('localhost');\n      const stringHttpsCredentials = {\n        key: httpsCredentials.key.toString(),\n        cert: httpsCredentials.cert.toString(),\n      };\n      options.HTTPS_CREDENTIALS = stringHttpsCredentials;\n      resolve(options);\n    });\n  },\n  modifyWebpackOptions(opts) {\n    const razzleOptions = opts.options.razzleOptions;\n    const webpackOptions = opts.options.webpackOptions;\n    if (opts.env.target === 'node' && opts.env.dev) {\n      webpackOptions.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(\n        razzleOptions.HTTPS_CREDENTIALS\n      );\n    }\n    return webpackOptions;\n  },\n  modifyWebpackConfig({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackConfig, // the created webpack config\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    // Do some stuff to webpackConfig\n    // DevCert配置\n    {\n      if (target === 'web' && dev) {\n        webpackConfig.devServer.https = razzleOptions.HTTPS_CREDENTIALS;\n        webpackConfig.devServer.headers = {\n          'Access-Control-Allow-Origin': '*',\n          https: true,\n        };\n      }\n    }\n    return webpackConfig;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-devcert/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-devcert\",\n  \"license\": \"MIT\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-devcert\"\n  },\n  \"main\": \"index.js\",\n  \"dependencies\": {\n    \"devcert\": \"^1.2.0\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\",\n    \"webpack\": \"~4||~5\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-elm/CHANGELOG.md",
    "content": "# razzle-plugin-elm\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-elm/README.md",
    "content": "# razzle-plugin-elm\n\n## Installation\n\n```bash\nyarn add razzle-plugin-elm --dev\n```\n\nAdd it to your `razzle.config.js`:\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['elm'],\n};\n```\n"
  },
  {
    "path": "packages/razzle-plugin-elm/index.js",
    "content": "'use strict';\n\nconst WebpackConfigHelpers = require('razzle-dev-utils/WebpackConfigHelpers');\nconst Helpers = new WebpackConfigHelpers(process.cwd());\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    // Add .elm extension\n    config.resolve.extensions.push('.elm');\n\n    // Don't parse as JS\n    config.module.noParse = config.module.noParse\n      ? config.module.noParse.push(/.elm$/)\n      : [/.elm$/];\n\n    // Exclude from file-loader\n    config.module.rules[\n      config.module.rules.findIndex(Helpers.makeLoaderFinder('file-loader'))\n    ].exclude.push(/\\.(elm)$/);\n\n    if (opts.env.dev) {\n      config.module.rules.push({\n        test: /\\.elm$/,\n        exclude: [/elm-stuff/, /node_modules/],\n        use: [\n          {\n            loader: require.resolve('elm-webpack-loader'),\n            options: {\n              verbose: true,\n              warn: true,\n              pathToMake: require('elm/platform').executablePaths['elm-make'],\n              forceWatch: true,\n            },\n          },\n        ],\n      });\n    } else {\n      // Production\n      config.module.rules.push({\n        test: /\\.elm$/,\n        exclude: [/elm-stuff/, /node_modules/],\n        use: [\n          {\n            loader: require.resolve('elm-webpack-loader'),\n            options: {\n              pathToMake: require('elm/platform').executablePaths['elm-make'],\n            },\n          },\n        ],\n      });\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-elm/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-elm\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-elm\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"elm-hot-loader\": \"^0.5.4\",\n    \"elm-webpack-loader\": \"^5.0.0\"\n  },\n  \"peerDependencies\": {\n    \"elm\": \"^0.19.1-5\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-eslint/CHANGELOG.md",
    "content": "# razzle-plugin-eslint\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/razzle-plugin-eslint/README.md",
    "content": "# razzle-plugin-eslint\n\nNot yet implemented.\n"
  },
  {
    "path": "packages/razzle-plugin-eslint/index.js",
    "content": "'use strict';\n\nconst ESLintPlugin = require('eslint-webpack-plugin');\n\nconst eslintFormatter = require('react-dev-utils/eslintFormatter');\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n\n    const mainEslintOptions = {\n      extensions: ['js','mjs','jsx','ts','tsx'],\n      baseConfig: {\n        extends: [require.resolve('eslint-config-react-app')],\n      },\n      formatter: eslintFormatter,\n      eslintPath: require.resolve('eslint'),\n      ignore: false,\n      useEslintrc: true\n    };\n\n    config.plugins = [\n      new ESLintPlugin(mainEslintOptions),\n      ...config.plugins,\n    ];\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-eslint/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-eslint\",\n  \"version\": \"4.2.18\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-eslint\"\n  },\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@typescript-eslint/eslint-plugin\": \"^4.0.0\",\n    \"@typescript-eslint/parser\": \"^4.14.1\",\n    \"babel-eslint\": \"^10.1.0\",\n    \"eslint\": \"^7.18.0\",\n    \"eslint-config-react-app\": \"^6.0.0\",\n    \"eslint-plugin-flowtype\": \"^5.2.0\",\n    \"eslint-plugin-import\": \"^2.22.1\",\n    \"eslint-plugin-jsx-a11y\": \"^6.4.1\",\n    \"eslint-plugin-react\": \"^7.22.0\",\n    \"eslint-plugin-react-hooks\": \"^4.2.0\",\n    \"eslint-webpack-plugin\": \"^2.1.0\"\n  },\n  \"peerDependencies\": {\n    \"react-dev-utils\": \"11.0.4\",\n    \"webpack\": \"~4||~5\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-graphql/CHANGELOG.md",
    "content": "# razzle-plugin-graphql\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-graphql/README.md",
    "content": "# razzle-plugin-graphql\n\nThis package contains a plugin for using [graphql/gql](https://www.npmjs.com/package/graphql-tag) with Razzle\n\n## Usage in Razzle Projects\n\n```bash\nyarn add razzle-plugin-graphql --dev\n```\n\n### With the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['graphql'],\n};\n```\n\n---\n\n### With custom options\n\nNo supported options right now\n\n## Options\n\nNo supported options right now\n\n---\n\n## Use\n\nTo use a `.graphql` or `.gql` simply import them in your component.\n\n```\nimport query from './query.graphql';\n\nconsole.log(query);\n// {\n//   \"kind\": \"Document\",\n// ...\n```\n\nsee the `graphql-tag` package documentation for further information."
  },
  {
    "path": "packages/razzle-plugin-graphql/helpers.js",
    "content": "'use strict';\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nconst gqlLoaderFinder = makeLoaderFinder('graphql-tag/loader');\n\nmodule.exports = {\n  gqlLoaderFinder,\n};\n"
  },
  {
    "path": "packages/razzle-plugin-graphql/index.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackOptions(opts) {\n    const options = Object.assign({}, opts.options.webpackOptions);    // Add .graphql to exlude\n    options.fileLoaderExclude = [/\\.graphql|gql?$/, ...options.fileLoaderExclude];\n    return options;\n  },\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n      const graphqlLoader = {\n        test: /\\.(graphql|gql)$/,\n        exclude: /node_modules/,\n        use: [require.resolve('graphql-tag/loader')]\n      };\n\n      config.module.rules = [\n        ...config.module.rules,\n        graphqlLoader\n      ];\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-graphql/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-graphql\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Use .graphql and .gql files with Razzle\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-graphql\"\n  },\n  \"author\": \"Mikael Pettersson <me@evanion.com>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"graphql-tag\": \"^2.11.0\"\n  },\n  \"peerDependencies\": {\n    \"graphql\": \"^15.5.0\",\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-graphql/tests/index.test.js",
    "content": "'use strict';\n\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\n\nconst plugin = require('../index');\nconst {\n  gqlLoaderFinder\n} = require('../helpers');\n\nconst webDevLoaderTests = [\n  {\n    name: 'should add grahpql-tag/loader',\n    loaderFinder: gqlLoaderFinder,\n  }\n];\n\nconst webProdLoaderTests = [\n  {\n    name: 'should add grahpql-tag/loader',\n    loaderFinder: gqlLoaderFinder,\n  }\n];\n\nconst nodeLoaderTests = [\n  {\n    name: 'should add grahpql-tag/loader',\n    loaderFinder: gqlLoaderFinder,\n  }\n];\n\ndescribe('razzle-plugin-graphql', () => {\n  describe('when creating web config', () => {\n    describe('when environment set to development', () => {\n\n      let config;\n      beforeAll(async () => {\n        config = await createRazzleTestConfig('web', 'dev', {\n          plugins: [{ object: plugin }],\n        });\n      });\n\n\n      webDevLoaderTests.forEach(test => {\n        if (test.status === 'falsy') {\n          it(test.name, () => {\n            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n          });\n        } else {\n          it(test.name, () => {\n            expect(\n              config.module.rules.find(test.loaderFinder)\n            ).not.toBeUndefined();\n          });\n        }\n      });\n    });\n\n    describe('when environment set to production', () => {\n      let config;\n\n      beforeAll(async () => {\n        config = await createRazzleTestConfig('web', 'prod', {\n          plugins: [{ object: plugin }],\n        });\n      });\n\n\n      webProdLoaderTests.forEach(test => {\n        if (test.status === 'falsy') {\n          it(test.name, () => {\n            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n          });\n        } else {\n          it(test.name, () => {\n            expect(\n              config.module.rules.find(test.loaderFinder)\n            ).not.toBeUndefined();\n          });\n        }\n      });\n    });\n  });\n\n  describe('when creating a node config', () => {\n\n    let config;\n    beforeAll(async () => {\n      config = await createRazzleTestConfig('node', 'prod', {\n        plugins: [{ object: plugin }],\n      });\n    });\n\n\n    nodeLoaderTests.forEach(test => {\n      if (test.status === 'falsy') {\n        it(test.name, () => {\n          expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n        });\n      } else {\n        it(test.name, () => {\n          expect(\n            config.module.rules.find(test.loaderFinder)\n          ).not.toBeUndefined();\n        });\n      }\n    });\n  });\n});\n"
  },
  {
    "path": "packages/razzle-plugin-inferno/CHANGELOG.md",
    "content": "# razzle-plugin-inferno\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/razzle-plugin-inferno/README.md",
    "content": "# razzle-plugin-inferno\n\nNot yet implemented.\n"
  },
  {
    "path": "packages/razzle-plugin-inferno/index.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    console.log(\n      'Not yet implemented. Help out at https://github.com/jaredpalmer/razzle'\n    );\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-inferno/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-inferno\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-inferno\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/razzle-plugin-less/.eslintrc",
    "content": "{\n  \"env\": {\n    \"jest\": true,\n    \"node\": true\n  }\n}"
  },
  {
    "path": "packages/razzle-plugin-less/CHANGELOG.md",
    "content": "# razzle-plugin-less\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-less/README.md",
    "content": "# razzle-plugin-less\n\nThis package contains a plugin for using [LESS](http://lesscss.org/) with Razzle\n\n## Usage in Razzle Projects\n\n```bash\nyarn add razzle-plugin-less --dev\n```\n\n### With the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['less'],\n};\n```\n\n### With custom options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'less',\n      options: {\n        postcss: {\n          dev: {\n            sourceMap: false,\n          },\n        },\n      },\n    },\n  ],\n};\n```\n\n## Options\n\nPlease remember that custom options will extends default options using `Object.assign`.\nArray such as postcss.plugins **WILL NOT BE EXTENDED OR CONCATED**, it will override all default plugins.\n\n---\n\n### postcss\n\ndefault\n\n```js\n{\n  dev: {\n    sourceMap: true,\n    ident: 'postcss',\n  },\n  prod: {\n    sourceMap: false,\n    ident: 'postcss',\n  },\n  plugins: [\n    PostCssFlexBugFixes,\n    autoprefixer({\n      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],\n      flexbox: 'no-2009',\n    }),\n  ],\n}\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [postcss loader options](https://github.com/postcss/postcss-loader#options) to override configs.\n\n\n### less\n\ndefault\n\n```js\n{\n  dev: {\n    sourceMap: true,\n    includePaths: [paths.appNodeModules],\n  },\n  prod: {\n    sourceMap: false,\n    includePaths: [paths.appNodeModules],\n  },\n}\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [less loader options](https://github.com/webpack-contrib/less-loader) to override configs.\n\n---\n\n### css\n\ndefault\n\n```js\n{\n  dev: {\n    sourceMap: true,\n    importLoaders: 1,\n    modules: false,\n  },\n  prod: {\n    sourceMap: false,\n    importLoaders: 1,\n    modules: false,\n    minimize: true,\n  },\n}\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [css loader options](https://github.com/webpack-contrib/css-loader#options) to override configs.\n\n\n#### style\n\ndefault\n\n```js\n{\n}\n```\n\nStyle loader only used in `development` environment.\n\nSee [style loader options](https://github.com/webpack-contrib/style-loader#options) to override configs.\n\n#### resolveUrl\n\ndefault\n\n```js\n{\n  dev: {},\n  prod: {},\n}\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [resolve url loader options](https://github.com/bholloway/resolve-url-loader#options) to override configs.\n"
  },
  {
    "path": "packages/razzle-plugin-less/helpers.js",
    "content": "'use strict';\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nconst cssLoaderFinder = makeLoaderFinder('css-loader');\nconst postCssLoaderFinder = makeLoaderFinder('postcss-loader');\nconst resolveUrlLoaderFinder = makeLoaderFinder('resolve-url-loader');\nconst lessLoaderFinder = makeLoaderFinder('less-loader');\nconst styleLoaderFinder = makeLoaderFinder('style-loader');\n\nmodule.exports = {\n  cssLoaderFinder,\n  postCssLoaderFinder,\n  resolveUrlLoaderFinder,\n  lessLoaderFinder,\n  styleLoaderFinder,\n};\n"
  },
  {
    "path": "packages/razzle-plugin-less/index.js",
    "content": "'use strict';\n\nconst autoprefixer = require('autoprefixer');\nconst merge = require('deepmerge');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst paths = require('razzle/config/paths');\nconst postcssLoadConfig = require('postcss-load-config');\n\nconst hasPostCssConfig = () => {\n  try {\n    return !!postcssLoadConfig.sync();\n  } catch (_error) {\n    return false;\n  }\n};\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const isServer = opts.env.target !== 'web';\n    const constantEnv = opts.env.dev ? 'dev' : 'prod';\n\n    const razzleOptions = opts.options.razzleOptions;\n    const config = Object.assign({}, opts.webpackConfig);\n\n    const defaultOptions = {\n      postcss: {\n        dev: {\n          sourceMap: true,\n          ident: 'postcss',\n        },\n        prod: {\n          sourceMap: razzleOptions.enableSourceMaps,\n          ident: 'postcss',\n        },\n        plugins: [\n          [autoprefixer, {\n            overrideBrowserslist: opts.options.razzleOptions.browserslist || [\n              '>1%',\n              'last 4 versions',\n              'Firefox ESR',\n              'not ie < 9',\n            ],\n            flexbox: 'no-2009',\n          }],\n        ],\n      },\n      less: {\n        dev: {\n          sourceMap: true,\n          lessOptions: {\n            includePaths: [paths.appNodeModules],\n          },\n        },\n        prod: {\n          // XXX Source maps are required for the resolve-url-loader to properly\n          // function. Disable them in later stages if you do not want source maps.\n          sourceMap: true,\n          lessOptions: {\n            includePaths: [paths.appNodeModules],\n          },\n        },\n      },\n      css: {\n        dev: {\n          sourceMap: true,\n          importLoaders: 1,\n          modules: {\n            auto: true,\n            localIdentName: '[name]__[local]___[hash:base64:5]',\n          },\n        },\n        prod: {\n          sourceMap: razzleOptions.enableSourceMaps,\n          importLoaders: 1,\n          modules: {\n            auto: true,\n            localIdentName: '[name]__[local]___[hash:base64:5]',\n          },\n        },\n      },\n      style: {},\n      resolveUrl: {\n        dev: {},\n        prod: {},\n      },\n    };\n\n    const options = Object.assign(\n      {},\n      defaultOptions,\n      opts.options.pluginOptions\n    );\n\n    const styleLoader = {\n      loader: require.resolve('style-loader'),\n      options: options.style,\n    };\n\n    const cssLoader = {\n      loader: require.resolve('css-loader'),\n      options: options.css[constantEnv],\n    };\n\n    const resolveUrlLoader = {\n      loader: require.resolve('resolve-url-loader'),\n      options: options.resolveUrl[constantEnv],\n    };\n\n    const postCssLoader = {\n      loader: require.resolve('postcss-loader'),\n      options: hasPostCssConfig()\n        ? undefined\n        : { postcssOptions: Object.assign({}, options.postcss[constantEnv], {\n            plugins: options.postcss.plugins,\n          })},\n    };\n\n    const lessLoader = {\n      loader: require.resolve('less-loader'),\n      options: Object.assign({}, options.less[constantEnv]),\n    };\n\n    config.module.rules = [\n      ...config.module.rules,\n      {\n        test: /\\.less$/,\n        use: isServer\n          ? [\n              {\n                loader: require.resolve('css-loader'),\n                options: merge(options.css[constantEnv], {\n                  modules: {\n                    exportOnlyLocals: true,\n                  }\n                }),\n              },\n              resolveUrlLoader,\n              postCssLoader,\n              lessLoader,\n            ]\n          : [\n              opts.env.dev ? styleLoader : MiniCssExtractPlugin.loader,\n              cssLoader,\n              postCssLoader,\n              resolveUrlLoader,\n              lessLoader,\n            ],\n      },\n    ];\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-less/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-less\",\n  \"version\": \"4.2.18\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-less\"\n  },\n  \"author\": \"Ryan Yang <orange881217@gmail.com>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"autoprefixer\": \"^10.2.3\",\n    \"css-loader\": \"^5.0.0\",\n    \"deepmerge\": \"^4.2.2\",\n    \"less-loader\": \"^7.0.2\",\n    \"node-less-chokidar\": \"^0.4.1\",\n    \"postcss-less\": \"^4.0.0\",\n    \"postcss-load-config\": \"^3.0.0\",\n    \"postcss-loader\": \"^4.2.0\",\n    \"resolve-url-loader\": \"^3.1.2\"\n  },\n  \"peerDependencies\": {\n    \"less\": \"^4.1.0\",\n    \"mini-css-extract-plugin\": \">=0.9.0 <1.0.0\",\n    \"postcss\": \"^8.2.4\",\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\",\n    \"style-loader\": \"^2.0.0\",\n    \"webpack\": \"~4||~5\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-less/tests/index.test.js",
    "content": "'use strict';\n\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\n\nconst plugin = require('../index');\nconst {\n  cssLoaderFinder,\n  postCssLoaderFinder,\n  resolveUrlLoaderFinder,\n  lessLoaderFinder,\n  styleLoaderFinder,\n} = require('../helpers');\n\nconst webDevLoaderTests = [\n  {\n    name: 'should add style-loader',\n    loaderFinder: styleLoaderFinder,\n  },\n  {\n    name: 'should add css-loader',\n    loaderFinder: cssLoaderFinder,\n  },\n  {\n    name: 'should add postcss-loader',\n    loaderFinder: postCssLoaderFinder,\n  },\n  {\n    name: 'should add resolve-url-loader',\n    loaderFinder: resolveUrlLoaderFinder,\n  },\n  {\n    name: 'should add less-loader',\n    loaderFinder: lessLoaderFinder,\n  },\n];\n\nconst webProdLoaderTests = [\n  {\n    name: 'should not add style-loader (using mini-extract-css-plugin loader)',\n    loaderFinder: styleLoaderFinder,\n    status: 'falsy',\n  },\n  {\n    name: 'should add css-loader',\n    loaderFinder: cssLoaderFinder,\n  },\n  {\n    name: 'should add postcss-loader',\n    loaderFinder: postCssLoaderFinder,\n  },\n  {\n    name: 'should add resolve-url-loader',\n    loaderFinder: resolveUrlLoaderFinder,\n  },\n  {\n    name: 'should add less-loader',\n    loaderFinder: lessLoaderFinder,\n  },\n];\n\nconst nodeLoaderTests = [\n  {\n    name: 'should not add style-loader',\n    loaderFinder: styleLoaderFinder,\n    status: 'falsy',\n  },\n  {\n    name: 'should add css-loader',\n    loaderFinder: cssLoaderFinder,\n  },\n  {\n    name: 'should add postcss-loader',\n    loaderFinder: postCssLoaderFinder,\n  },\n  {\n    name: 'should add resolve-url-loader',\n    loaderFinder: resolveUrlLoaderFinder,\n  },\n  {\n    name: 'should add less-loader',\n    loaderFinder: lessLoaderFinder,\n  },\n];\n\ndescribe('razzle-less-plugin', () => {\n  describe('when creating web config', () => {\n    describe('when environment set to development', () => {\n      let config;\n\n      beforeAll(async () => {\n        config = await createRazzleTestConfig('web', 'dev', {\n          plugins: [{ object: plugin }],\n        });\n      });\n\n      webDevLoaderTests.forEach(test => {\n        if (test.status === 'falsy') {\n          it(test.name, () => {\n            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n          });\n        } else {\n          it(test.name, () => {\n            expect(\n              config.module.rules.find(test.loaderFinder)\n            ).not.toBeUndefined();\n          });\n        }\n      });\n    });\n\n    describe('when environment set to production', () => {\n      let config;\n\n      beforeAll(async () => {\n        config = await createRazzleTestConfig('web', 'prod', {\n          plugins: [{ object: plugin }],\n        });\n      });\n\n      webProdLoaderTests.forEach(test => {\n        if (test.status === 'falsy') {\n          it(test.name, () => {\n            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n          });\n        } else {\n          it(test.name, () => {\n            expect(\n              config.module.rules.find(test.loaderFinder)\n            ).not.toBeUndefined();\n          });\n        }\n      });\n    });\n  });\n\n  describe('when creating a node config', () => {\n    let config;\n\n    beforeAll(async () => {\n      config = await createRazzleTestConfig('node', 'prod', {\n        plugins: [{ object: plugin }],\n      });\n    });\n\n    nodeLoaderTests.forEach(test => {\n      if (test.status === 'falsy') {\n        it(test.name, () => {\n          expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n        });\n      } else {\n        it(test.name, () => {\n          expect(\n            config.module.rules.find(test.loaderFinder)\n          ).not.toBeUndefined();\n        });\n      }\n    });\n  });\n});\n"
  },
  {
    "path": "packages/razzle-plugin-manifest/CHANGELOG.md",
    "content": "# razzle-plugin-manifest\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-manifest/README.md",
    "content": "# razzle-plugin-manifest\n\nThis package contains a plugin for generating manifest file for splitted chunk paths with Razzle\n\n## Usage in Razzle Projects\n\n```\nnpm i razzle-plugin-manifest\n```\n\nor\n\n```\nyarn add razzle-plugin-manifest\n```\n\n### Using the plugin with the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['manifest'],\n};\n```\n\nA file called `chunks.json` will get generated at build time. you can import the file using `RAZZLE_CHUNKS_MANIFEST` enviroment variable.\n\nexample:\n\n```js\nconst chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);\n```\n"
  },
  {
    "path": "packages/razzle-plugin-manifest/index.js",
    "content": "'use strict';\n\nconst { WebpackManifestPlugin } = require('webpack-manifest-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  modifyWebpackConfig({\n    env: { target },\n    webpackConfig,\n    webpackObject,\n    paths,\n    options: {\n      pluginOptions = { fileName: path.join(paths.appBuild, 'chunks.json') },\n    },\n  }) {\n    if (target === 'web') {\n      webpackConfig.plugins.push(\n        // Output our JS and CSS files in a manifest file called chunks.json\n        // in the build directory.\n        // based on https://github.com/danethurber/webpack-manifest-plugin/issues/181#issuecomment-467907737\n        new WebpackManifestPlugin({\n          fileName: pluginOptions.fileName,\n          writeToFileEmit: true,\n          filter: item => item.isChunk,\n          generate: (seed, files) => {\n            const entrypoints = new Set();\n            files.forEach(file =>\n              ((file.chunk || {})._groups || []).forEach(group =>\n                entrypoints.add(group)\n              )\n            );\n            const entries = [...entrypoints];\n            const entryArrayManifest = entries.reduce((acc, entry) => {\n              const name =\n                (entry.options || {}).name ||\n                (entry.runtimeChunk || {}).name ||\n                entry.id;\n              const files = []\n                .concat(\n                  ...(entry.chunks || []).map(chunk =>\n                    chunk.files.map(\n                      path => webpackConfig.output.publicPath + path\n                    )\n                  )\n                )\n                .filter(Boolean);\n\n              const chunkIds = [].concat(\n                ...(entry.chunks || []).map(chunk => chunk.ids)\n              );\n\n              const cssFiles = files\n                .map(item => (item.indexOf('.css') !== -1 ? item : null))\n                .filter(Boolean);\n\n              const jsFiles = files\n                .map(item => (item.indexOf('.js') !== -1 ? item : null))\n                .filter(Boolean);\n\n              return name\n                ? {\n                    ...acc,\n                    [name]: {\n                      css: cssFiles,\n                      js: jsFiles,\n                      chunks: chunkIds,\n                    },\n                  }\n                : acc;\n            }, seed);\n            return entryArrayManifest;\n          },\n        })\n      );\n    }\n\n    webpackConfig.plugins.push(\n      new webpackObject.DefinePlugin({\n        'process.env.RAZZLE_CHUNKS_MANIFEST': JSON.stringify(pluginOptions.fileName),\n      })\n    );\n\n    return webpackConfig;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-manifest/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-manifest\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-manifest\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\",\n  \"author\": {\n    \"name\": \"Nima Arefi\",\n    \"email\": \"arefinima@gmail.com\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  },\n  \"dependencies\": {\n    \"webpack-manifest-plugin\": \"^4.0.2\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-mdx/.eslintrc",
    "content": "{\n  \"env\": {\n    \"jest\": true,\n    \"node\": true\n  }\n}"
  },
  {
    "path": "packages/razzle-plugin-mdx/CHANGELOG.md",
    "content": "# razzle-plugin-mdx\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-mdx/README.md",
    "content": "# razzle-plugin-mdx\n\nThis package contains a plugin for using mdx with Razzle\n\n## Usage in Razzle Projects\n\n```\nnpm i razzle-plugin-mdx\n```\n\nor\n\n```\nyarn add razzle-plugin-mdx\n```\n\n### Using the plugin with the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['mdx'],\n};\n```\n\nFiles with .md extension will be loaded as markdown and transpiled to html markup.\n\nexample:\n\n```jsx\nimport Document from './Document.md';\n\nconst Example = () => (<Document />);\n```\n\n### With custom options:\n\n```js\n// razzle.config.js\nconst images = require('remark-images');\nconst emoji = require('remark-emoji');\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'mdx',\n      options: {\n        remarkPlugins: [images, emoji],\n      },\n    },\n  ],\n};\n```\n\n## Options\n\nCheck all the options here: [mdx-js options](https://github.com/mdx-js/mdx#options).\n"
  },
  {
    "path": "packages/razzle-plugin-mdx/helpers.js",
    "content": "'use strict';\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nconst babelLoaderFinder = makeLoaderFinder('babel-loader');\nconst fileLoaderFinder = makeLoaderFinder('file-loader');\nconst mdxLoaderFinder = makeLoaderFinder('@mdx-js/loader');\n\nmodule.exports = {\n  fileLoaderFinder,\n  babelLoaderFinder,\n  mdxLoaderFinder,\n};\n"
  },
  {
    "path": "packages/razzle-plugin-mdx/index.js",
    "content": "'use strict';\n\nconst { babelLoaderFinder } = require('./helpers');\nconst path = require('path');\n\nconst defaultOptions = {};\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n    const options = Object.assign(\n      {},\n      defaultOptions,\n      opts.options.pluginOptions\n    );\n\n    config.resolve.modules = [\n      ...config.resolve.modules,\n      path.join(__dirname, './node_modules'),\n    ];\n    config.resolve.extensions = [...config.resolve.extensions, '.md', '.mdx'];\n\n    // Safely locate Babel-Loader in Razzle's webpack internals\n    const babelLoader = config.module.rules.find(babelLoaderFinder);\n    if (!babelLoader) {\n      throw new Error(`'babel-loader' required for nice 'MDX loader' work`);\n    }\n\n    // Get the correct `include` option, since that hasn't changed.\n    // This tells Razzle which directories to transform.\n    const { include } = babelLoader;\n\n    // Configure @mdx-js/loader\n    const mdxLoader = {\n      include,\n      test: /\\.mdx?$/,\n      use: [\n        ...babelLoader.use,\n        {\n          loader: require.resolve('@mdx-js/loader'),\n          options: Object.assign({}, options),\n        },\n      ],\n    };\n\n    config.module.rules.push(mdxLoader);\n\n    return config;\n  },\n  modifyWebpackOptions({\n    env: {\n      target, // the target 'node' or 'web'\n      dev // is this a development build? true or false\n    },\n    webpackObject, // the imported webpack node module\n    options: {\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n      pluginOptions\n    },\n    paths // the modified paths that will be used by Razzle.\n  }) {\n    // Don't import md and mdx files with file-loader\n    webpackOptions.fileLoaderExclude.push(/\\.mdx?$/);\n    return webpackOptions;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-mdx/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-mdx\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Use mdx with Razzle\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-mdx\"\n  },\n  \"author\": \"Ivakhnenko Dmitry <jeetiss@ya.ru>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"@mdx-js/loader\": \"^1.6.18\",\n    \"@mdx-js/mdx\": \"^1.6.18\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-mdx/tests/index.test.js",
    "content": "'use strict';\n\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\nconst plugin = require('../index');\nconst { fileLoaderFinder, mdxLoaderFinder } = require('../helpers');\n\ndescribe('razzle-mdx-plugin', () => {\n  let config;\n  beforeAll(async () => {\n    config = await createRazzleTestConfig('web', 'dev', {\n      plugins: [{ object: plugin }],\n    });\n  });\n\n  it('should add .md and .mdx to extensions', () => {\n    expect(config.resolve.extensions).toContain('.md');\n    expect(config.resolve.extensions).toContain('.mdx');\n  });\n\n  it('should add mdx-loader', () => {\n    const rule = config.module.rules.find(mdxLoaderFinder);\n    expect(rule).not.toBeUndefined();\n  });\n\n  it('should add mdx format to exclude', () => {\n    const fileRule = config.module.rules.find(fileLoaderFinder);\n    expect(fileRule.exclude).toContainEqual(/\\.mdx?$/);\n  });\n});\n"
  },
  {
    "path": "packages/razzle-plugin-php/CHANGELOG.md",
    "content": "# razzle-plugin-php\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-php/README.md",
    "content": "# razzle-plugin-php\n\nRazzle plugin to add `babel-preset-php`.\n\n> Note this is kind of a joke, but actually works.\n\n## Installation\n\n```bash\nyarn add razzle-plugin-php --dev\n```\n\nAdd it to your `razzle.config.js`:\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['php'],\n};\n```\n"
  },
  {
    "path": "packages/razzle-plugin-php/index.js",
    "content": "'use strict';\n\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n    config.resolve.extensions.push('.php');\n\n    // Exclude from file-loader\n    config.module.rules[\n      config.module.rules.findIndex(makeLoaderFinder('file-loader'))\n    ].exclude.push(/\\.(php)$/);\n\n    // Don't parse as JS\n    config.module.noParse = config.module.noParse\n      ? config.module.noParse.concat([/.php$/])\n      : [/.php$/];\n\n    // Add a custom babel loader (in addition to the one for .js)\n    // making sure to ignore .babelrc\n    config.module.rules.push({\n      test: /\\.php$/,\n      include: config.module.rules.find(makeLoaderFinder('babel-loader'))\n        .include,\n      use: [\n        {\n          loader: 'babel-loader',\n          options: {\n            presets: [require.resolve('babel-preset-php')],\n            babelrc: false,\n          },\n        },\n      ],\n    });\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-php/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-php\",\n  \"version\": \"4.2.18\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-php\"\n  },\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"babel-preset-php\": \"^1.2.0\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-preact/CHANGELOG.md",
    "content": "# razzle-plugin-preact\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/razzle-plugin-preact/README.md",
    "content": "# razzle-plugin-preact\n\nNot yet implemented.\n"
  },
  {
    "path": "packages/razzle-plugin-preact/index.js",
    "content": "'use strict';\n\nmodule.exports = function modify(config) {\n  console.log(\n    'Not yet implemented. Help out at https://github.com/jaredpalmer/razzle'\n  );\n  return config;\n};\n"
  },
  {
    "path": "packages/razzle-plugin-preact/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-preact\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-preact\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/razzle-plugin-react/CHANGELOG.md",
    "content": "# razzle-plugin-react\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n"
  },
  {
    "path": "packages/razzle-plugin-react/README.md",
    "content": "# razzle-plugin-react\n\nThis is just a stub. Razzle ships with React as the default.\n"
  },
  {
    "path": "packages/razzle-plugin-react/index.js",
    "content": "'use strict';\n\nmodule.exports = function modify(config) {\n  console.log('Razzle comes with React! This package is a stub.');\n  return config;\n};\n"
  },
  {
    "path": "packages/razzle-plugin-react/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-react\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-react\"\n  },\n  \"main\": \"index.js\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "packages/razzle-plugin-scss/.eslintrc",
    "content": "{\n  \"env\": {\n    \"jest\": true,\n    \"node\": true\n  }\n}"
  },
  {
    "path": "packages/razzle-plugin-scss/CHANGELOG.md",
    "content": "# razzle-plugin-scss\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-scss/README.md",
    "content": "# razzle-plugin-scss\n\nThis package contains a plugin for using [SCSS/SASS](https://sass-lang.com/) with Razzle\n\n## Usage in Razzle Projects\n\n```bash\nyarn add razzle-plugin-scss --dev\n```\n\n### With the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['scss'],\n};\n```\n\nFiles with an ending in the name _.module.scss and _.module.sass will load as cssModules\n\nexample:\n\n```jsx\nimport s from './myfile.module.scss';\n```\n\n---\n\n### With custom options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'scss',\n      options: {\n        postcss: {\n          dev: {\n            sourceMap: false,\n          },\n        },\n      },\n    },\n  ],\n};\n```\n\n## Options\n\nPlease remember that custom options will extends default options using `Object.assign`.\nArray such as postcss.plugins **WILL NOT BE EXTENDED OR CONCATED**, it will override all default plugins.\n\n---\n\n### postcss\n\ndefault\n\n```js\n{\n  dev: {\n    sourceMap: true,\n    ident: 'postcss',\n  },\n  prod: {\n    sourceMap: false,\n    ident: 'postcss',\n  },\n  plugins: [\n    PostCssFlexBugFixes,\n    autoprefixer({\n      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],\n      flexbox: 'no-2009',\n    }),\n  ],\n}\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [postcss loader options](https://github.com/postcss/postcss-loader#options) to override configs.\n\n---\n\n### sass\n\ndefault\n\n```js\n{\n  dev: {\n    sassOptions: {\n      sourceMap: true,\n      includePaths: [paths.appNodeModules],\n    },\n  },\n  prod: {\n    sassOptions: {\n      sourceMap: true,\n      sourceMapContents: false,\n      includePaths: [paths.appNodeModules],\n    },\n  },\n},\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [node-sass options](https://github.com/sass/node-sass#options) to override configs.\n\n---\n\n### css\n\ndefault\n\n```js\n{\n  dev: {\n    sourceMap: true,\n    importLoaders: 1,\n    modules: {\n      auto: true,\n      localIdentName: '[name]__[local]___[hash:base64:5]',\n    },\n  },\n  prod: {\n    sourceMap: razzleOptions.enableSourceMaps,\n    importLoaders: 1,\n    modules: {\n      auto: true,\n      localIdentName: '[name]__[local]___[hash:base64:5]',\n    },\n  },\n},\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [css loader options](https://github.com/webpack-contrib/css-loader#options) to override configs.\n\n---\n\n#### style\n\ndefault\n\n```js\n{\n}\n```\n\nStyle loader only used in `development` environment.\n\nSee [style loader options](https://github.com/webpack-contrib/style-loader#options) to override configs.\n\n#### resolveUrl\n\ndefault\n\n```js\n{\n  dev: {},\n  prod: {},\n}\n```\n\nSet `dev` to add config to postcss in `development`.\nSet `prod` to add config to postcss in `production`.\n\nSee [resolve url loader options](https://github.com/bholloway/resolve-url-loader#options) to override configs.\n"
  },
  {
    "path": "packages/razzle-plugin-scss/helpers.js",
    "content": "'use strict';\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nconst cssLoaderFinder = makeLoaderFinder('css-loader');\nconst postCssLoaderFinder = makeLoaderFinder('postcss-loader');\nconst resolveUrlLoaderFinder = makeLoaderFinder('resolve-url-loader');\nconst sassLoaderFinder = makeLoaderFinder('sass-loader');\nconst styleLoaderFinder = makeLoaderFinder('style-loader');\n\nmodule.exports = {\n  cssLoaderFinder,\n  postCssLoaderFinder,\n  resolveUrlLoaderFinder,\n  sassLoaderFinder,\n  styleLoaderFinder,\n};\n"
  },
  {
    "path": "packages/razzle-plugin-scss/index.js",
    "content": "'use strict';\n\nconst autoprefixer = require('autoprefixer');\nconst merge = require('deepmerge');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst paths = require('razzle/config/paths');\nconst postcssLoadConfig = require('postcss-load-config');\n\nconst hasPostCssConfig = () => {\n  try {\n    return !!postcssLoadConfig.sync();\n  } catch (_error) {\n    return false;\n  }\n};\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const isServer = opts.env.target !== 'web';\n    const constantEnv = opts.env.dev ? 'dev' : 'prod';\n\n    const razzleOptions = opts.options.razzleOptions;\n    const config = Object.assign({}, opts.webpackConfig);\n\n    const defaultOptions = {\n      postcss: {\n        dev: {\n          sourceMap: true,\n          ident: 'postcss',\n        },\n        prod: {\n          sourceMap: razzleOptions.enableSourceMaps,\n          ident: 'postcss',\n        },\n        plugins: [\n          [autoprefixer, {\n            overrideBrowserslist: opts.options.razzleOptions.browserslist || [\n              '>1%',\n              'last 4 versions',\n              'Firefox ESR',\n              'not ie < 9',\n            ],\n            flexbox: 'no-2009',\n          }],\n        ],\n      },\n      sass: {\n        dev: {\n          sassOptions: {\n            sourceMap: true,\n            includePaths: [paths.appNodeModules],\n          },\n        },\n        prod: {\n          sassOptions: {\n            // XXX Source maps are required for the resolve-url-loader to properly\n            // function. Disable them in later stages if you do not want source maps.\n            sourceMap: true,\n            sourceMapContents: false,\n            includePaths: [paths.appNodeModules],\n          },\n        },\n      },\n      css: {\n        dev: {\n          sourceMap: true,\n          importLoaders: 1,\n          modules: {\n            auto: true,\n            localIdentName: '[name]__[local]___[hash:base64:5]',\n          },\n        },\n        prod: {\n          sourceMap: razzleOptions.enableSourceMaps,\n          importLoaders: 1,\n          modules: {\n            auto: true,\n            localIdentName: '[name]__[local]___[hash:base64:5]',\n          },\n        },\n      },\n      style: {},\n      resolveUrl: {\n        dev: {},\n        prod: {},\n      },\n    };\n\n    const options = Object.assign(\n      {},\n      defaultOptions,\n      opts.options.pluginOptions\n    );\n\n    const styleLoader = {\n      loader: require.resolve('style-loader'),\n      options: options.style,\n    };\n\n    const cssLoader = {\n      loader: require.resolve('css-loader'),\n      options: options.css[constantEnv],\n    };\n\n    const resolveUrlLoader = {\n      loader: require.resolve('resolve-url-loader'),\n      options: options.resolveUrl[constantEnv],\n    };\n\n    const postCssLoader = {\n      loader: require.resolve('postcss-loader'),\n      options: hasPostCssConfig()\n        ? undefined\n        : { postcssOptions: Object.assign({}, options.postcss[constantEnv], {\n            plugins: options.postcss.plugins,\n          })},\n    };\n\n    const sassLoader = {\n      loader: require.resolve('sass-loader'),\n      options: options.sass[constantEnv],\n    };\n\n    config.module.rules = [\n      ...config.module.rules,\n      {\n        test: /\\.(sa|sc)ss$/,\n        use: isServer\n          ? [\n              {\n                loader: require.resolve('css-loader'),\n                options: merge(options.css[constantEnv], {\n                  modules: {\n                    exportOnlyLocals: true,\n                  }\n                }),\n              },\n              resolveUrlLoader,\n              postCssLoader,\n              sassLoader,\n            ]\n          : [\n              opts.env.dev ? styleLoader : MiniCssExtractPlugin.loader,\n              cssLoader,\n              postCssLoader,\n              resolveUrlLoader,\n              sassLoader,\n            ],\n      },\n    ];\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-scss/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-scss\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Use SCSS/SASS with Razzle\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-scss\"\n  },\n  \"author\": \"Ray Andrew <raydreww@gmail.com>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"autoprefixer\": \"^10.2.3\",\n    \"css-loader\": \"^5.0.0\",\n    \"deepmerge\": \"^4.2.2\",\n    \"postcss-load-config\": \"^3.0.0\",\n    \"postcss-loader\": \"^4.2.0\",\n    \"postcss-scss\": \"^3.0.4\",\n    \"resolve-url-loader\": \"^3.1.2\",\n    \"sass\": \"^1.29.0\",\n    \"sass-loader\": \"^10.0.3\"\n  },\n  \"peerDependencies\": {\n    \"mini-css-extract-plugin\": \">=0.9.0 <1.0.0\",\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-scss/tests/index.test.js",
    "content": "'use strict';\n\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\n\nconst plugin = require('../index');\nconst {\n  cssLoaderFinder,\n  postCssLoaderFinder,\n  resolveUrlLoaderFinder,\n  sassLoaderFinder,\n  styleLoaderFinder,\n} = require('../helpers');\n\nconst webDevLoaderTests = [\n  {\n    name: 'should add style-loader',\n    loaderFinder: styleLoaderFinder,\n  },\n  {\n    name: 'should add css-loader',\n    loaderFinder: cssLoaderFinder,\n  },\n  {\n    name: 'should add postcss-loader',\n    loaderFinder: postCssLoaderFinder,\n  },\n  {\n    name: 'should add resolve-url-loader',\n    loaderFinder: resolveUrlLoaderFinder,\n  },\n  {\n    name: 'should add sass-loader',\n    loaderFinder: sassLoaderFinder,\n  },\n];\n\nconst webProdLoaderTests = [\n  {\n    name: 'should not add style-loader (using mini-extract-css-plugin loader)',\n    loaderFinder: styleLoaderFinder,\n    status: 'falsy',\n  },\n  {\n    name: 'should add css-loader',\n    loaderFinder: cssLoaderFinder,\n  },\n  {\n    name: 'should add postcss-loader',\n    loaderFinder: postCssLoaderFinder,\n  },\n  {\n    name: 'should add resolve-url-loader',\n    loaderFinder: resolveUrlLoaderFinder,\n  },\n  {\n    name: 'should add sass-loader',\n    loaderFinder: sassLoaderFinder,\n  },\n];\n\nconst nodeLoaderTests = [\n  {\n    name: 'should not add style-loader',\n    loaderFinder: styleLoaderFinder,\n    status: 'falsy',\n  },\n  {\n    name: 'should add css-loader',\n    loaderFinder: cssLoaderFinder,\n  },\n  {\n    name: 'should add postcss-loader',\n    loaderFinder: postCssLoaderFinder,\n  },\n  {\n    name: 'should add resolve-url-loader',\n    loaderFinder: resolveUrlLoaderFinder,\n  },\n  {\n    name: 'should add sass-loader',\n    loaderFinder: sassLoaderFinder,\n  },\n];\n\ndescribe('razzle-scss-plugin', () => {\n  describe('when creating web config', () => {\n    describe('when environment set to development', () => {\n      let config;\n\n      beforeAll(async () => {\n        config = await createRazzleTestConfig('web', 'dev', {\n          plugins: [{ object: plugin }],\n        });\n      });\n\n      webDevLoaderTests.forEach(test => {\n        if (test.status === 'falsy') {\n          it(test.name, () => {\n            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n          });\n        } else {\n          it(test.name, () => {\n            expect(\n              config.module.rules.find(test.loaderFinder)\n            ).not.toBeUndefined();\n          });\n        }\n      });\n    });\n\n    describe('when environment set to production', () => {\n      let config;\n\n      beforeAll(async () => {\n        config = await createRazzleTestConfig('web', 'prod', {\n          plugins: [{ object: plugin }],\n        });\n      });\n\n      webProdLoaderTests.forEach(test => {\n        if (test.status === 'falsy') {\n          it(test.name, () => {\n            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n          });\n        } else {\n          it(test.name, () => {\n            expect(\n              config.module.rules.find(test.loaderFinder)\n            ).not.toBeUndefined();\n          });\n        }\n      });\n    });\n  });\n\n  describe('when creating a node config', () => {\n    let config;\n\n    beforeAll(async () => {\n      config = await createRazzleTestConfig('node', 'prod', {\n        plugins: [{ object: plugin }],\n      });\n    });\n\n    nodeLoaderTests.forEach(test => {\n      if (test.status === 'falsy') {\n        it(test.name, () => {\n          expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();\n        });\n      } else {\n        it(test.name, () => {\n          expect(\n            config.module.rules.find(test.loaderFinder)\n          ).not.toBeUndefined();\n        });\n      }\n    });\n  });\n});\n"
  },
  {
    "path": "packages/razzle-plugin-svelte/CHANGELOG.md",
    "content": "# razzle-plugin-svelte\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-svelte/README.md",
    "content": "# razzle-plugin-svelte\n\n## Installation\n\n```bash\nyarn add razzle-plugin-svelte\n```\n\nAdd it to your `razzle.config.js`:\n\n```js\n// razzle.config.js\nmodule.exports = {\n  plugins: ['svelte'],\n};\n```"
  },
  {
    "path": "packages/razzle-plugin-svelte/helpers.js",
    "content": "'use strict';\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nconst svelteLoaderFinder = makeLoaderFinder('svelte-loader');\nconst fileLoaderFinder = makeLoaderFinder('file-loader');\n\nmodule.exports = {\n  fileLoaderFinder,\n  svelteLoaderFinder,\n};\n"
  },
  {
    "path": "packages/razzle-plugin-svelte/index.js",
    "content": "\"use strict\";\n\nmodule.exports = {\n  modifyWebpackOptions(opts) {\n    const options = opts.options.webpackOptions;    // Add .svelte to exlude\n    options.fileLoaderExclude = [/\\.svelte?$/, ...options.fileLoaderExclude];\n    return options;\n  },\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;    // Add .svelte to extensions\n\n    config.resolve.extensions = [...config.resolve.extensions, '.svelte'];\n\n    config.module.rules.push({\n      test: /\\.svelte$/,\n      loader: require.resolve('svelte-loader'),\n      options: {\n        preprocess: require('svelte-preprocess')({})\n      }\n    });\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-svelte/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-svelte\",\n  \"license\": \"MIT\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-svelte\"\n  },\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"css-loader\": \"^5.0.0\",\n    \"svelte\": \"^3.24.1\",\n    \"svelte-loader\": \"^2.13.6\",\n    \"svelte-preprocess\": \"^4.0.10\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-svelte/tests/index.test.js",
    "content": "'use strict';\n\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\nconst plugin = require('../index');\nconst { svelteLoaderFinder, fileLoaderFinder } = require('../helpers');\n\ndescribe('razzle-svelte-plugin', () => {\n  let config;\n  beforeAll(async () => {\n    config = await createRazzleTestConfig('web', 'dev', {\n      plugins: [{ object: plugin }],\n    });\n    console.log(config);\n  });\n\n  it('should add .svelte', () => {\n    expect(config.resolve.extensions).toContain('.svelte');\n  });\n\n  it('should add svelte-loader', () => {\n    const rule = config.module.rules.find(svelteLoaderFinder);\n    expect(rule).not.toBeUndefined();\n  });\n\n  it('should add svelte format to exclude', () => {\n    const fileRule = config.module.rules.find(fileLoaderFinder);\n    expect(fileRule.exclude).toContainEqual(/\\.svelte?$/);\n  });\n});\n"
  },
  {
    "path": "packages/razzle-plugin-typescript/.eslintrc",
    "content": "{\n  \"env\": {\n    \"jest\": true,\n    \"node\": true\n  }\n}"
  },
  {
    "path": "packages/razzle-plugin-typescript/CHANGELOG.md",
    "content": "# razzle-plugin-typescript\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-typescript/README.md",
    "content": "## razzle-plugin-typescript\n\nThis package contains a plugin for using TypeScript with Razzle\n\nRazzle now has support for typescript using babel. Unless you specifically need this plugin we recommend using the builtin support\n\nUse [with-typescript example](https://github.com/jaredpalmer/razzle/tree/master/examples/with-typescript) instead.\n\n## Usage in Razzle Projects\n\n```\nyarn add razzle-plugin-typescript\n```\n\nUsing the plugin with the default options\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['typescript'],\n};\n```\n\nSee full configuration in the [typescript example project](https://github.com/jaredpalmer/razzle/tree/master/examples/with-typescript-plugin).\n\n### With custom options:\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: [\n    {\n      name: 'typescript',\n      options: {\n        useBabel: false,\n        tsLoader: {\n          transpileOnly: true,\n          experimentalWatchApi: true,\n        },\n        forkTsChecker: {\n          eslint: {\n            files: ['*.js', '*.jsx', '*.ts', '*.tsx'],\n          }\n        },\n      },\n    },\n  ],\n};\n```\n\n## Options\n\n**useBabel: _boolean_** (defaults: false)\n\nSet `useBabel` to `true` if you want to keep using `babel` for _JS_/_TS_ interoperability, or if you want to apply any babel transforms to typescript files. (i.e.: [`babel-plugin-styled-components`](https://github.com/styled-components/babel-plugin-styled-components)).\n\n**tsLoader: _TSLoaderOptions_** (defaults: { transpileOnly: true, experimentalWatchApi: true })\n\nUse this to override [`ts-loader`](https://github.com/TypeStrong/ts-loader) options. Check all the options here: [ts-loader options](https://github.com/TypeStrong/ts-loader#loader-options).\n\n**forkTsChecker: _TSCheckerOptions_** (defaults: { async: 'compiler.options.mode === 'development'', typescript: true, eslint: undefined, issue: {}, formatter: 'codeframe', logger: { infrastructure: 'silent', issues: 'console', devServer: true } })\n\nUse this to override [`fork-ts-checker-webpack-plugin`](https://github.com/Realytics/fork-ts-checker-webpack-plugin) options. Check all the options here: [fork-ts-checker-webpack-plugin options](https://github.com/Realytics/fork-ts-checker-webpack-plugin#options).\n"
  },
  {
    "path": "packages/razzle-plugin-typescript/helpers.js",
    "content": "'use strict';\nconst makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');\n\nconst babelLoaderFinder = makeLoaderFinder('babel-loader');\nconst tsLoaderFinder = makeLoaderFinder('ts-loader');\n\nmodule.exports = {\n  babelLoaderFinder,\n  tsLoaderFinder,\n};\n"
  },
  {
    "path": "packages/razzle-plugin-typescript/index.js",
    "content": "'use strict';\n\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst { babelLoaderFinder } = require('./helpers');\n\nconst defaultOptions = {\n  useBabel: false,\n  tsLoader: {\n    transpileOnly: true,\n    experimentalWatchApi: true,\n  },\n  forkTsChecker: {\n    eslint: {\n      files: './src/**/*.{ts,tsx,js,jsx}',\n    }\n  },\n};\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n    const options = Object.assign(\n      {},\n      defaultOptions,\n      opts.options.pluginOptions\n    );\n\n    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];\n\n    // Safely locate Babel-Loader in Razzle's webpack internals\n    const babelLoader = config.module.rules.find(babelLoaderFinder);\n    if (!babelLoader) {\n      throw new Error(\n        `'babel-loader' was erased from config, we need it to define 'include' option for 'ts-loader'`\n      );\n    }\n\n    // don't allow babel-loader to transpile typescript\n    babelLoader.exclude = [/\\.ts$/, /\\.tsx$/];\n\n    // Get the correct `include` option, since that hasn't changed.\n    // This tells Razzle which directories to transform.\n    const { include } = babelLoader;\n\n    // Configure ts-loader\n    const tsLoader = {\n      include,\n      test: /\\.tsx?$/,\n      use: [\n        {\n          loader: require.resolve('ts-loader'),\n          options: Object.assign({}, defaultOptions.tsLoader, options.tsLoader),\n        },\n      ],\n    };\n\n    if (options.useBabel) {\n      // If using babel, also add babel-loader to ts files,\n      // so we can use babel plugins on tsx files too\n      tsLoader.use = [...babelLoader.use, ...tsLoader.use];\n    } else {\n      // If not using babel, remove it\n      config.module.rules = config.module.rules.filter(\n        rule => !babelLoaderFinder(rule)\n      );\n    }\n\n    config.module.rules.push(tsLoader);\n\n    // Do typechecking in a separate process,\n    // We can run it only in client builds.\n    if (opts.env.target === 'web') {\n      config.plugins.push(\n        new ForkTsCheckerWebpackPlugin(\n          Object.assign({}, defaultOptions.forkTsChecker, options.forkTsChecker)\n        )\n      );\n      if (opts.env.dev) {\n        // As suggested by Microsoft's Outlook team, these optimizations\n        // crank up Webpack x TypeScript perf.\n        // @see https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15\n        config.output.pathinfo = false;\n        config.optimization = {\n          removeAvailableModules: false,\n          removeEmptyChunks: false,\n          splitChunks: false,\n        };\n      }\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-typescript/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-typescript\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Use TypeScript with Razzle\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-typescript\"\n  },\n  \"author\": \"Lucas Terra <lucasterra7@gmail.com>\",\n  \"license\": \"MIT\",\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"dependencies\": {\n    \"fork-ts-checker-webpack-plugin\": \"^5.2.0\",\n    \"ts-loader\": \"^8.0.4\",\n    \"typescript\": \">=4.0.3\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\",\n    \"webpack\": \"~4||~5\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-plugin-typescript/tests/index.test.js",
    "content": "'use strict';\n\nconst ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');\nconst createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');\nconst plugin = require('../index');\nconst { babelLoaderFinder, tsLoaderFinder } = require('../helpers');\n\ndescribe('razzle-typescript-plugin', () => {\n  describe('with useBabel=false', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('web', 'dev', {\n        plugins: [{ object: plugin, options: { useBabel: false } }],\n      });\n      done();\n    });\n\n    it('should add .ts and .tsx to extensions', () => {\n      expect(config.resolve.extensions).toContain('.ts');\n      expect(config.resolve.extensions).toContain('.tsx');\n    });\n\n    it('should add ts-loader', () => {\n      const rule = config.module.rules.find(tsLoaderFinder);\n      expect(rule).not.toBeUndefined();\n    });\n\n    it('should add fork-ts-checker-webpack-plugin', () => {\n      const tsCheckerPlugin = config.plugins.find(\n        plugin => plugin instanceof ForkTsCheckerWebpackPlugin\n      );\n\n      expect(tsCheckerPlugin).not.toBeUndefined();\n    });\n\n    it('should remove babel-loader', () => {\n      const rule = config.module.rules.find(babelLoaderFinder);\n      expect(rule).toBeUndefined();\n    });\n  });\n\n  describe('with useBabel=true', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('web', 'dev', {\n        plugins: [{ object: plugin, options: { useBabel: true } }],\n      });\n      done();\n    });\n\n    it('should keep babel-loader', () => {\n      const rule = config.module.rules.find(babelLoaderFinder);\n      expect(rule).not.toBeUndefined();\n    });\n\n    it('should add babel-loader to .ts and .tsx files too', () => {\n      const tsLoader = config.module.rules.find(tsLoaderFinder);\n      const babelLoader = tsLoader.use.find(babelLoaderFinder);\n\n      expect(babelLoader).not.toBeUndefined();\n    });\n  });\n\n  describe('when creating a server config', () => {\n    let config;\n    beforeAll(async done => {\n      config = await createRazzleTestConfig('node', 'dev', {\n        disableStartServer: true,\n        plugins: [{ object: plugin, options: {} }],\n      });\n      done();\n    });\n\n    it('should not add fork-ts-checker-webpack-plugin', () => {\n      const tsCheckerPlugin = config.plugins.find(\n        plugin => plugin instanceof ForkTsCheckerWebpackPlugin\n      );\n\n      expect(tsCheckerPlugin).toBeUndefined();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/razzle-plugin-vue/CHANGELOG.md",
    "content": "# razzle-plugin-vue\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:\n  - razzle@4.2.18\n  - razzle-dev-utils@4.2.18\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:\n  - razzle@4.2.17\n  - razzle-dev-utils@4.2.17\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n- Updated dependencies [dc4c7870]\n  - razzle@4.2.16\n  - razzle-dev-utils@4.2.16\n"
  },
  {
    "path": "packages/razzle-plugin-vue/README.md",
    "content": "# razzle-plugin-vue\n\n## Installation\n\n```bash\nyarn add razzle-plugin-vue\n```\n\nAdd it to your `razzle.config.js`:\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  plugins: ['vue'],\n};\n```\n"
  },
  {
    "path": "packages/razzle-plugin-vue/index.js",
    "content": "'use strict';\n\nconst WebpackConfigHelpers = require('razzle-dev-utils/WebpackConfigHelpers');\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\n\nconst Helpers = new WebpackConfigHelpers(process.cwd());\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = Object.assign({}, opts.webpackConfig);\n\n    // Add .vue to extensions\n    config.resolve.extensions = [...config.resolve.extensions, '.vue'];\n\n    // Alias ESM module\n    config.resolve.alias = Object.assign({}, config.resolve.alias, {\n      vue$: 'vue/dist/vue.esm.js',\n    });\n\n    // Replace the default CSS loader with Vue's\n    const cssLoaderFinder = Helpers.makeLoaderFinder('css-loader');\n\n    config.module.rules = config.module.rules.filter(\n      rule => !cssLoaderFinder(rule)\n    );\n\n    config.module.rules.push({\n      test: /\\.vue$/,\n        use: [{\n        loader: require.resolve('vue-loader'),\n        ident: 'razzle-vue-loader'\n      }]\n    });\n\n    config.module.rules.unshift({\n      test: /\\.css$/,\n      use: [{\n          loader: require.resolve('vue-style-loader'),\n          ident: 'razzle-vue-style-loader'\n        }, {\n          loader: require.resolve('css-loader'),\n          ident: 'razzle-css-loader'\n      }] // https://github.com/vuejs/vue-loader\n    });\n\n    config.plugins.push(new VueLoaderPlugin());\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "packages/razzle-plugin-vue/package.json",
    "content": "{\n  \"name\": \"razzle-plugin-vue\",\n  \"license\": \"MIT\",\n  \"version\": \"4.2.18\",\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-plugin-vue\"\n  },\n  \"main\": \"index.js\",\n  \"dependencies\": {\n    \"css-loader\": \"^5.0.0\",\n    \"vue\": \"^2.6.12\",\n    \"vue-loader\": \"^15.9.6\",\n    \"vue-style-loader\": \"^4.1.3\",\n    \"vue-template-compiler\": \"^2.6.12\"\n  },\n  \"peerDependencies\": {\n    \"razzle\": \"4.2.18\",\n    \"razzle-dev-utils\": \"4.2.18\",\n    \"webpack\": \"~4||~5\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/.babelrc",
    "content": "{\n  \"presets\": [[\"@babel/env\", {\"targets\": {\"node\": \"10\"}}]],\n  \"plugins\": [\"@babel/plugin-proposal-object-rest-spread\"]\n}\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/.nvmrc",
    "content": "v10.22.1\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/CHANGELOG.md",
    "content": "# Change Log\n\n## 4.2.18\n\n### Patch Changes\n\n- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js\n\n## 4.2.17\n\n### Patch Changes\n\n- [`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341) Thanks [@fivethreeo](https://github.com/fivethreeo)! - Remove the require of `jest` and `chalk` as they are not used in the file\n\n* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages\n\n## 4.2.16\n\n### Patch Changes\n\n- dc4c7870: add changesets\n\nAll notable changes to this project will be documented in this file.\n\nThis project adheres to [Semantic Versioning](http://semver.org/).\n\n## 2018-03-06 - [2.2.5 - current version]\n\n- 2.2.5 - ([24](https://github.com/ericclemmons/start-server-webpack-plugin/pull/24)) - Fixes (@wmertens)\n\n## 2018-03-05\n\n- 2.2.4 - ([21](https://github.com/ericclemmons/start-server-webpack-plugin/pull/21)) - Update deps (@wmertens)\n\n## 2018-03-05 - [2.2.3 - current version]\n\n- 2.2.3 - ([7696962](https://github.com/ericclemmons/start-server-webpack-plugin/commit/769696228460912178a982f8c2594d5376a2230e)) - gsv: also push and publish (@wmertens)\n- ([21](https://github.com/ericclemmons/start-server-webpack-plugin/pull/21)) - Update deps (@wmertens)\n\n## 2018-03-04\n\n- ([18](https://github.com/ericclemmons/start-server-webpack-plugin/pull/18)) - Add the ability to manually restart the server by typing rs (@tikotzky)\n- ([17](https://github.com/ericclemmons/start-server-webpack-plugin/pull/17)) - Send a signal to the server process for HMR (@tikotzky)\n- ([20](https://github.com/ericclemmons/start-server-webpack-plugin/pull/20)) - Add support for the new Webpack 4 Hooks API (@Nayni)\n\n## 2018-02-02\n\n- ([16](https://github.com/ericclemmons/start-server-webpack-plugin/pull/16)) - Allow setting of inspectPort (@eligolding)\n\n## 2018-01-15\n\n- ([15](https://github.com/ericclemmons/start-server-webpack-plugin/pull/15)) - Fix broken link (@njradford)\n\n## 2017-04-10\n\n- ([11](https://github.com/ericclemmons/start-server-webpack-plugin/pull/11)) - Add options `name`, `nodeArgs`, `args` (@wmertens)\n\n## 2017-02-27\n\n- ([18bdabf](https://github.com/ericclemmons/start-server-webpack-plugin/commit/18bdabf3b76a4a938c4b843193642925b4ab8e0b)) - Export via module.exports (@ericclemmons)\n\n## 2016-10-27\n\n- ([6e3d51f](https://github.com/ericclemmons/start-server-webpack-plugin/commit/6e3d51f3029aa5d7d6774a8cc90ec2c3cc13f3c7)) - v2.1.0 Allow specifying the entry to run after build. (@wmertens)\n- ([7](https://github.com/ericclemmons/start-server-webpack-plugin/pull/7)) - Allow specifying entry to run (@wmertens)\n\n## 2016-06-05\n\n- ([4](https://github.com/ericclemmons/start-server-webpack-plugin/pull/4)) - Fix for Server-Side HMR (@ericclemmons)\n\n## 2016-04-11\n\n- ([1](https://github.com/ericclemmons/start-server-webpack-plugin/pull/1)) - Initial release (@ericclemmons)\n- ([24155cc](https://github.com/ericclemmons/start-server-webpack-plugin/commit/24155cc7cb93d7719aaec52c5cab22929d6fa882)) - Initial commit (@ericclemmons)\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2016 Eric Clemmons\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/README.md",
    "content": "# start-server-webpack-plugin\n\n> Automatically start your server once Webpack's build completes + handle hot reloading (HMR)\n\n[![travis build](https://img.shields.io/travis/ericclemmons/start-server-webpack-plugin.svg)](https://travis-ci.org/ericclemmons/start-server-webpack-plugin)\n[![version](https://img.shields.io/npm/v/start-server-webpack-plugin.svg)](http://npm.im/start-server-webpack-plugin)\n[![downloads](https://img.shields.io/npm/dm/start-server-webpack-plugin.svg)](http://npm-stat.com/charts.html?package=start-server-webpack-plugin)\n[![MIT License](https://img.shields.io/npm/l/start-server-webpack-plugin.svg)](http://opensource.org/licenses/MIT)\n\n### Installation\n\n```shell\n$ npm install --save-dev start-server-webpack-plugin\n```\n\n### Usage\n\nIn `webpack.config.server.babel.js`:\n\n```js\nimport StartServerPlugin from \"start-server-webpack-plugin\";\n\nexport default {\n  ...\n  plugins: [\n    ...\n    // Only use this in DEVELOPMENT\n    new StartServerPlugin({\n      // print server logs\n      verbose: true,\n      // print plugin/server errors\n      debug: false,\n      // name of the entry to run, defaults to 'main'\n      entryName: 'server',\n      // any arguments to nodejs when running the entry, this one allows debugging\n      nodeArgs: ['--inspect-brk'],\n      // any arguments to pass to the script\n      scriptArgs: ['scriptArgument1', 'scriptArgument2'],\n      // Allow typing 'rs' to restart the server. default: only if NODE_ENV is 'development'\n      restartable: true | false,\n      // Only run the server once (default: false)\n      once: false | true,\n    }),\n    ...\n  ],\n  ...\n}\n```\n\nThe `entryName` argument defaults to `\"main\"`, which is the name Webpack uses if you use the string or array versions of the `entry` option.\n\nYou can use `nodeArgs` and `args` to pass arguments to node and your script, respectively. For example, you can use this to use the node debugger.\n\nTo use Hot Module Reloading with your server code, set Webpack to \"hot\" and \"watch\" modes.\nThis plugin appends some code to the end of the entry so that it can handle HMR and restarts; no need to add any of the `webpack/hot` modules.\n\n### Upgrading from v2\n\n- Remove the `name` option and define `entryName` if it's not just `\"main\"`\n- Remove any hot reloading additions\n\n### License\n\n> MIT License 2016-2018 © Eric Clemmons\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/dist/StartServerPlugin.js",
    "content": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _path = _interopRequireDefault(require(\"path\"));\n\nvar _child_process = _interopRequireDefault(require(\"child_process\"));\n\nvar _webpack = _interopRequireDefault(require(\"webpack\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nconst webpackMajorVersion = typeof _webpack.default.version !== 'undefined' ? parseInt(_webpack.default.version[0]) : 3;\n\nclass StartServerPlugin {\n  constructor(options) {\n    if (options == null) {\n      options = {};\n    }\n\n    if (typeof options === 'string') {\n      options = {\n        entryName: options\n      };\n    }\n\n    this.options = Object.assign({\n      verbose: true,\n      // print logs\n      entryName: 'main',\n      // What to run\n      once: false,\n      // Run once and exit when worker exits\n      nodeArgs: [],\n      // Node arguments for worker\n      scriptArgs: [],\n      // Script arguments for worker\n      signal: false,\n      // Send a signal instead of a message\n      // Only listen on keyboard in development, so the server doesn't hang forever\n      restartable: process.env.NODE_ENV === 'development',\n      inject: true,\n      // inject monitor to script\n      killOnExit: true,\n      // issue SIGKILL on child process exit\n      killOnError: true,\n      // issue SIGKILL on child process error\n      killTimeout: 1000 // timeout before SIGKILL in milliseconds\n\n    }, options);\n\n    if (this.options.args) {\n      throw new Error('options.args is now options.scriptArgs');\n    }\n\n    if (!Array.isArray(this.options.scriptArgs)) {\n      throw new Error('options.args has to be an array of strings');\n    }\n\n    if (this.options.signal === true) {\n      this.options.signal = 'SIGUSR2';\n      this.options.inject = false;\n    }\n\n    this.afterEmit = this.afterEmit.bind(this);\n    this.apply = this.apply.bind(this);\n    this._handleChildError = this._handleChildError.bind(this);\n    this._handleChildExit = this._handleChildExit.bind(this);\n    this._handleChildQuit = this._handleChildQuit.bind(this);\n    this._handleChildMessage = this._handleChildMessage.bind(this);\n    this._handleWebpackExit = this._handleWebpackExit.bind(this);\n    this._handleProcessKill = this._handleProcessKill.bind(this);\n    this.worker = null;\n\n    if (this.options.restartable && !options.once) {\n      this._enableRestarting();\n    }\n  }\n\n  _info(msg, ...args) {\n    if (this.options.verbose) console.log(`sswp> ${msg}`, ...args);\n  }\n\n  _error(msg, ...args) {\n    console.error(`sswp> !!! ${msg}`, ...args);\n  }\n\n  _worker_error(msg, ...args) {\n    process.stderr.write(msg);\n  }\n\n  _worker_info(msg, ...args) {\n    process.stdout.write(msg);\n  }\n\n  _enableRestarting() {\n    this._info('Type `rs<Enter>` to restart the worker');\n\n    process.stdin.setEncoding('utf8');\n    process.stdin.on('data', data => {\n      if (data.trim() === 'rs') {\n        if (this.worker) {\n          this._info('Killing worker...');\n\n          process.kill(this.worker.pid);\n        } else {\n          this._runWorker();\n        }\n      }\n    });\n  }\n\n  _getScript(compilation) {\n    const {\n      entryName\n    } = this.options;\n    const entrypoints = compilation.entrypoints;\n    const entry = entrypoints.get ? entrypoints.get(entryName) : entrypoints[entryName];\n\n    if (!entry) {\n      this._info('compilation: %O', compilation);\n\n      throw new Error(`Requested entry \"${entryName}\" does not exist, try one of: ${(entrypoints.keys ? entrypoints.keys() : Object.keys(entrypoints)).join(' ')}`);\n    }\n\n    const runtimeChunk = _webpack.default.EntryPlugin && (entry.runtimeChunk || entry._entrypointChunk);\n    const runtimeChunkFiles = runtimeChunk && runtimeChunk.files && runtimeChunk.files.values();\n    const entryScript = runtimeChunkFiles && runtimeChunkFiles.next().value || ((entry.chunks[0] || {}).files || [])[0];\n\n    if (!entryScript) {\n      this._error(\"Entry chunk not outputted: %O\", entry);\n\n      return;\n    }\n\n    const {\n      path\n    } = compilation.outputOptions;\n    return _path.default.resolve(path, entryScript);\n  }\n\n  _getExecArgv() {\n    const {\n      options\n    } = this;\n    const execArgv = (options.nodeArgs || []).concat(process.execArgv);\n    return execArgv;\n  }\n\n  _handleChildQuit() {\n    this.worker = null;\n  }\n\n  _handleChildExit(code, signal) {\n    this._error(`Script exited with ${signal ? `signal ${signal}` : `code ${code}`}`);\n\n    this.worker = null;\n\n    if (code === 143 || signal === 'SIGTERM') {\n      if (!this.workerLoaded) {\n        this._error('Script did not load, or HMR failed; not restarting');\n\n        return;\n      }\n\n      if (this.options.once) {\n        this._info('Only running script once, as requested');\n\n        return;\n      }\n\n      this.workerLoaded = false;\n\n      this._runWorker();\n\n      return;\n    }\n\n    if (this.options.killOnExit) {\n      this._handleProcessKill();\n    }\n  }\n\n  _handleWebpackExit() {\n    if (this.worker) {\n      process.kill(this.worker.pid, 'SIGINT');\n    }\n  }\n\n  _handleChildError(err) {\n    this._error('Script errored');\n\n    this.worker = null;\n\n    if (this.options.killOnError) {\n      this._handleProcessKill();\n    }\n  }\n\n  _handleProcessKill() {\n    const pKill = () => process.kill(process.pid, 'SIGKILL');\n\n    if (!isNaN(this.options.killTimeout)) {\n      setTimeout(pKill, this.options.killTimeout);\n    } else {\n      pKill();\n    }\n  }\n\n  _handleChildMessage(message) {\n    if (message === 'SSWP_LOADED') {\n      this.workerLoaded = true;\n\n      this._info('Script loaded');\n\n      if (process.env.NODE_ENV === 'test' && this.options.once) {\n        process.kill(this.worker.pid);\n      }\n    } else if (message === 'SSWP_HMR_FAIL') {\n      this.workerLoaded = false;\n    }\n  }\n\n  _runWorker(callback) {\n    if (this.worker) return;\n    const {\n      scriptFile,\n      options: {\n        scriptArgs\n      }\n    } = this;\n\n    const execArgv = this._getExecArgv();\n\n    const extScriptArgs = ['--color', '--ansi', ...scriptArgs];\n\n    if (this.options.verbose) {\n      const cmdline = [...execArgv, scriptFile, '--', ...extScriptArgs].join(' ');\n\n      this._info(`running \\`node ${cmdline}\\``);\n    }\n\n    const worker = _child_process.default.fork(scriptFile, extScriptArgs, {\n      execArgv,\n      silent: true,\n      env: Object.assign(process.env, {\n        FORCE_COLOR: 3\n      })\n    });\n\n    worker.on('exit', this._handleChildExit);\n    worker.on('quit', this._handleChildQuit);\n    worker.on('error', this._handleChildError);\n    worker.on('message', this._handleChildMessage);\n    worker.stdout.on('data', this._worker_info);\n    worker.stderr.on('data', this._worker_error);\n    process.on('SIGINT', this._handleWebpackExit);\n    this.worker = worker;\n    if (callback) callback();\n  }\n\n  _hmrWorker(compilation, callback) {\n    const {\n      worker,\n      options: {\n        signal\n      }\n    } = this;\n\n    if (signal) {\n      process.kill(worker.pid, signal);\n    } else if (worker.send) {\n      worker.send('SSWP_HMR');\n    } else {\n      this._error('hot reloaded but no way to tell the worker');\n    }\n\n    callback();\n  }\n\n  afterEmit(compilation, callback) {\n    this.scriptFile = this._getScript(compilation);\n\n    if (this.worker) {\n      return this._hmrWorker(compilation, callback);\n    }\n\n    if (!this.scriptFile) return;\n\n    this._runWorker(callback);\n  }\n\n  _getMonitor() {\n    const loaderPath = require.resolve('./monitor-loader');\n\n    return `!!${loaderPath}!${loaderPath}`;\n  }\n\n  _amendEntry(entry) {\n    if (typeof entry === 'function') return (...args) => Promise.resolve(entry(...args)).then(this._amendEntry.bind(this));\n\n    const monitor = this._getMonitor();\n\n    if (typeof entry === 'string') return [entry, monitor];\n    if (Array.isArray(entry)) return [...entry, monitor];\n\n    if (typeof entry === 'object') {\n      return Object.assign({}, entry, {\n        [this.options.entryName]: this._amendEntry(entry[this.options.entryName])\n      });\n    }\n\n    throw new Error('Cannot parse webpack `entry` option: %O', entry);\n  }\n\n  apply(compiler) {\n    const inject = this.options.inject; // webpack v4+\n\n    if (webpackMajorVersion >= 4) {\n      const plugin = {\n        name: 'StartServerPlugin'\n      }; // webpack v5+\n\n      if (webpackMajorVersion >= 5) {\n        if (inject) {\n          compiler.hooks.make.tap(plugin, compilation => {\n            compilation.addEntry(compilation.compiler.context, _webpack.default.EntryPlugin.createDependency(this._getMonitor(), {\n              name: this.options.entryName\n            }), this.options.entryName, () => {});\n          });\n        }\n      } else {\n        if (inject) {\n          compiler.options.entry = this._amendEntry(compiler.options.entry);\n        }\n      }\n\n      compiler.hooks.afterEmit.tapAsync(plugin, this.afterEmit);\n    } else {\n      // webpack v3-\n      if (inject) {\n        compiler.options.entry = this._amendEntry(compiler.options.entry);\n      }\n\n      compiler.plugin('after-emit', this.afterEmit);\n    }\n  }\n\n}\n\nexports.default = StartServerPlugin;\nmodule.exports = StartServerPlugin;"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js",
    "content": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar _monitor = _interopRequireDefault(require(\"./monitor\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n// This loader just returns the monitor source\n// this way it can be embedded without processing or messing with external handling\nconst monitorSrc = `(${_monitor.default.toString()})()`;\n\nconst loader = function () {\n  return monitorSrc;\n};\n\nvar _default = loader;\nexports.default = _default;"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/dist/monitor.js",
    "content": "\"use strict\";\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\n// Monitor server script startup and reload. Should be added at the end of entries\nconst monitorFn = () => {\n  // Handle hot updates, copied with slight adjustments from webpack/hot/signal.js\n  if (module.hot) {\n    const log = (type, msg) => console[type](`sswp> ${msg}`); // TODO don't show this when sending signal instead of message\n\n\n    log('log', 'Handling Hot Module Reloading');\n\n    var checkForUpdate = function checkForUpdate(fromUpdate) {\n      module.hot.check().then(function (updatedModules) {\n        if (!updatedModules) {\n          if (fromUpdate) log('log', 'Update applied.');else log('warn', 'Cannot find update.');\n          return;\n        }\n\n        return module.hot.apply({\n          ignoreUnaccepted: true,\n          // TODO probably restart\n          onUnaccepted: function (data) {\n            log('warn', '\\u0007Ignored an update to unaccepted module ' + data.chain.join(' -> '));\n          }\n        }).then(function (renewedModules) {\n          require('webpack/hot/log-apply-result')(updatedModules, renewedModules);\n\n          checkForUpdate(true);\n        });\n      }).catch(function (err) {\n        var status = module.hot.status();\n\n        if (['abort', 'fail'].indexOf(status) >= 0) {\n          if (process.send) {\n            process.send('SSWP_HMR_FAIL');\n          }\n\n          log('warn', 'Cannot apply update.');\n          log('warn', '' + err.stack || err.message);\n          log('error', 'Quitting process - will reload on next file change\\u0007\\n\\u0007\\n\\u0007');\n          process.exit(222);\n        } else {\n          log('warn', 'Update failed: ' + err.stack || err.message);\n        }\n      });\n    };\n\n    process.on('message', function (message) {\n      if (message !== 'SSWP_HMR') return;\n\n      if (module.hot.status() !== 'idle') {\n        log('warn', 'Got signal but currently in ' + module.hot.status() + ' state.');\n        log('warn', 'Need to be in idle state to start hot update.');\n        return;\n      }\n\n      checkForUpdate();\n    });\n  } // Tell our plugin we loaded all the code without initially crashing\n\n\n  if (process.send) {\n    process.send('SSWP_LOADED');\n  }\n};\n\nvar _default = monitorFn;\nexports.default = _default;"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/package.json",
    "content": "{\n  \"name\": \"razzle-start-server-webpack-plugin\",\n  \"version\": \"4.2.18\",\n  \"description\": \"Automatically start your server once Webpack's build completes.\",\n  \"main\": \"dist/StartServerPlugin.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"scripts\": {\n    \"prebuild\": \"rimraf dist\",\n    \"build\": \"babel src -d dist\",\n    \"release\": \"github-semantic-version --bump --changelog --push --publish\",\n    \"prepublishOnly\": \"yarn run build\",\n    \"pretest\": \"yarn run build\",\n    \"test-project\": \"sh test/test-project.sh test-project\",\n    \"test-project-hmr\": \"sh test/test-project.sh test-project-hmr\",\n    \"test\": \"jest\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"https://github.com:jaredpalmer/razzle.git\",\n    \"directory\": \"packages/razzle-start-server-webpack-plugin\"\n  },\n  \"keywords\": [\n    \"webpack\",\n    \"server\",\n    \"start\",\n    \"watch\",\n    \"restart\",\n    \"express\"\n  ],\n  \"author\": \"Eric Clemmons <eric@smarterspam.com>\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/jaredpalmer/razzle/issues\"\n  },\n  \"homepage\": \"https://github.com/jaredpalmer/razzle\",\n  \"gsv\": {\n    \"majorLabel\": \"Version: Major\",\n    \"minorLabel\": \"Version: Minor\",\n    \"patchLabel\": \"Version: Patch\"\n  },\n  \"devDependencies\": {\n    \"@babel/cli\": \"^7.8.4\",\n    \"@babel/core\": \"^7.8.7\",\n    \"@babel/plugin-proposal-object-rest-spread\": \"^7.8.3\",\n    \"@babel/preset-env\": \"^7.8.7\",\n    \"@babel/register\": \"^7.8.6\",\n    \"expect\": \"^22.4.0\",\n    \"express\": \"^4.17.1\",\n    \"mocha\": \"^5.0.1\",\n    \"rimraf\": \"^2.6.2\"\n  },\n  \"peerDependencies\": {\n    \"webpack\": \"~4||~5\"\n  }\n}\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/src/StartServerPlugin.js",
    "content": "import sysPath from 'path';\nimport childProcess from 'child_process';\nimport webpack from 'webpack';\n\nconst webpackMajorVersion =\n  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;\n\nexport default class StartServerPlugin {\n  constructor(options) {\n    if (options == null) {\n      options = {};\n    }\n    if (typeof options === 'string') {\n      options = {entryName: options};\n    }\n    this.options = Object.assign(\n      {\n        verbose: true, // print logs\n        entryName: 'main', // What to run\n        once: false, // Run once and exit when worker exits\n        nodeArgs: [], // Node arguments for worker\n        scriptArgs: [], // Script arguments for worker\n        signal: false, // Send a signal instead of a message\n        // Only listen on keyboard in development, so the server doesn't hang forever\n        restartable: process.env.NODE_ENV === 'development',\n        inject: true, // inject monitor to script\n        killOnExit: true, // issue SIGKILL on child process exit\n        killOnError: true, // issue SIGKILL on child process error\n        killTimeout: 1000, // timeout before SIGKILL in milliseconds\n      },\n      options\n    );\n    if (this.options.args) {\n      throw new Error('options.args is now options.scriptArgs');\n    }\n    if (!Array.isArray(this.options.scriptArgs)) {\n      throw new Error('options.args has to be an array of strings');\n    }\n    if (this.options.signal === true) {\n      this.options.signal = 'SIGUSR2';\n      this.options.inject = false;\n    }\n    this.afterEmit = this.afterEmit.bind(this);\n    this.apply = this.apply.bind(this);\n    this._handleChildError = this._handleChildError.bind(this);\n    this._handleChildExit = this._handleChildExit.bind(this);\n    this._handleChildQuit = this._handleChildQuit.bind(this);\n    this._handleChildMessage = this._handleChildMessage.bind(this);\n    this._handleWebpackExit = this._handleWebpackExit.bind(this);\n    this._handleProcessKill = this._handleProcessKill.bind(this);\n\n    this.worker = null;\n    if (this.options.restartable && !options.once) {\n      this._enableRestarting();\n    }\n  }\n\n  _info(msg, ...args) {\n    if (this.options.verbose) console.log(`sswp> ${msg}`, ...args);\n  }\n\n  _error(msg, ...args) {\n    console.error(`sswp> !!! ${msg}`, ...args);\n  }\n\n  _worker_error(msg, ...args) {\n    process.stderr.write(msg);\n  }\n\n  _worker_info(msg, ...args) {\n    process.stdout.write(msg);\n  }\n\n  _enableRestarting() {\n    this._info('Type `rs<Enter>` to restart the worker');\n    process.stdin.setEncoding('utf8');\n    process.stdin.on('data', (data) => {\n      if (data.trim() === 'rs') {\n        if (this.worker) {\n          this._info('Killing worker...');\n          process.kill(this.worker.pid);\n        } else {\n          this._runWorker();\n        }\n      }\n    });\n  }\n\n  _getScript(compilation) {\n    const {entryName} = this.options;\n    const entrypoints = compilation.entrypoints;\n    const entry = entrypoints.get\n      ? entrypoints.get(entryName)\n      : entrypoints[entryName];\n    if (!entry) {\n      this._info('compilation: %O', compilation);\n      throw new Error(\n        `Requested entry \"${entryName}\" does not exist, try one of: ${(entrypoints.keys\n          ? entrypoints.keys()\n          : Object.keys(entrypoints)\n        ).join(' ')}`\n      );\n    }\n\n    const runtimeChunk = webpack.EntryPlugin && (entry.runtimeChunk || entry._entrypointChunk)\n    const runtimeChunkFiles = runtimeChunk && runtimeChunk.files && runtimeChunk.files.values()\n    const entryScript = (runtimeChunkFiles && runtimeChunkFiles.next().value) || ((entry.chunks[0] || {}).files || [])[0]\n    if (!entryScript) {\n      this._error(\"Entry chunk not outputted: %O\", entry)\n      return\n    }\n    const {path} = compilation.outputOptions;\n    return sysPath.resolve(path, entryScript);\n  }\n  _getExecArgv() {\n    const {options} = this;\n    const execArgv = (options.nodeArgs || []).concat(process.execArgv);\n    return execArgv;\n  }\n\n  _handleChildQuit() {\n    this.worker = null;\n  }\n\n  _handleChildExit(code, signal) {\n    this._error(`Script exited with ${signal ? `signal ${signal}` : `code ${code}`}`);\n    this.worker = null;\n\n    if (code === 143 || signal === 'SIGTERM') {\n      if (!this.workerLoaded) {\n        this._error('Script did not load, or HMR failed; not restarting');\n        return;\n      }\n      if (this.options.once) {\n        this._info('Only running script once, as requested');\n        return;\n      }\n\n      this.workerLoaded = false;\n      this._runWorker();\n      return;\n    }\n\n    if (this.options.killOnExit) {\n      this._handleProcessKill();\n    }\n  }\n\n  _handleWebpackExit() {\n    if (this.worker) {\n      process.kill(this.worker.pid, 'SIGINT');\n    }\n  }\n\n  _handleChildError(err) {\n    this._error('Script errored');\n    this.worker = null;\n\n    if (this.options.killOnError) {\n      this._handleProcessKill();\n    }\n  }\n\n  _handleProcessKill() {\n    const pKill = () => process.kill(process.pid, 'SIGKILL');\n\n    if (!isNaN(this.options.killTimeout)) {\n      setTimeout(pKill, this.options.killTimeout);\n    } else {\n      pKill();\n    }\n  }\n\n  _handleChildMessage(message) {\n    if (message === 'SSWP_LOADED') {\n      this.workerLoaded = true;\n      this._info('Script loaded');\n      if (process.env.NODE_ENV === 'test' && this.options.once) {\n        process.kill(this.worker.pid);\n      }\n    } else if (message === 'SSWP_HMR_FAIL') {\n      this.workerLoaded = false;\n    }\n  }\n\n  _runWorker(callback) {\n    if (this.worker) return;\n    const {\n      scriptFile,\n      options: {scriptArgs},\n    } = this;\n\n    const execArgv = this._getExecArgv();\n    const extScriptArgs = ['--color', '--ansi', ...scriptArgs];\n\n    if (this.options.verbose) {\n      const cmdline = [...execArgv, scriptFile, '--', ...extScriptArgs].join(' ');\n      this._info(`running \\`node ${cmdline}\\``);\n    }\n\n    const worker = childProcess.fork(scriptFile, extScriptArgs, {\n      execArgv,\n      silent: true,\n      env: Object.assign(process.env, { FORCE_COLOR: 3 })\n    });\n    worker.on('exit', this._handleChildExit);\n    worker.on('quit', this._handleChildQuit);\n    worker.on('error', this._handleChildError);\n    worker.on('message', this._handleChildMessage);\n    worker.stdout.on('data', this._worker_info);\n    worker.stderr.on('data', this._worker_error);\n\n    process.on('SIGINT', this._handleWebpackExit);\n\n    this.worker = worker;\n\n    if (callback) callback();\n  }\n\n  _hmrWorker(compilation, callback) {\n    const {\n      worker,\n      options: {signal},\n    } = this;\n    if (signal) {\n      process.kill(worker.pid, signal);\n    } else if (worker.send) {\n      worker.send('SSWP_HMR');\n    } else {\n      this._error('hot reloaded but no way to tell the worker');\n    }\n    callback();\n  }\n\n  afterEmit(compilation, callback) {\n    this.scriptFile = this._getScript(compilation);\n\n    if (this.worker) {\n      return this._hmrWorker(compilation, callback);\n    }\n\n    if (!this.scriptFile) return;\n\n    this._runWorker(callback);\n  }\n\n  _getMonitor() {\n    const loaderPath = require.resolve('./monitor-loader');\n    return `!!${loaderPath}!${loaderPath}`;\n  }\n\n  _amendEntry(entry) {\n    if (typeof entry === 'function')\n      return (...args) =>\n        Promise.resolve(entry(...args)).then(this._amendEntry.bind(this));\n\n    const monitor = this._getMonitor();\n    if (typeof entry === 'string') return [entry, monitor];\n    if (Array.isArray(entry)) return [...entry, monitor];\n    if (typeof entry === 'object') {\n      return Object.assign({}, entry, {\n        [this.options.entryName]: this._amendEntry(\n          entry[this.options.entryName]\n        ),\n      });\n    }\n    throw new Error('Cannot parse webpack `entry` option: %O', entry);\n  }\n\n  apply(compiler) {\n    const inject = this.options.inject;\n    // webpack v4+\n    if (webpackMajorVersion >= 4) {\n      const plugin = {name: 'StartServerPlugin'};\n      // webpack v5+\n      if (webpackMajorVersion >= 5) {\n        if (inject) {\n          compiler.hooks.make.tap(plugin, (compilation) => {\n            compilation.addEntry(\n              compilation.compiler.context,\n              webpack.EntryPlugin.createDependency(this._getMonitor(), {\n                name: this.options.entryName,\n              }),\n              this.options.entryName,\n              () => {}\n            );\n          });\n        }\n      } else {\n        if (inject) {\n          compiler.options.entry = this._amendEntry(compiler.options.entry);\n        }\n      }\n      compiler.hooks.afterEmit.tapAsync(plugin, this.afterEmit);\n    } else {\n      // webpack v3-\n      if (inject) {\n        compiler.options.entry = this._amendEntry(compiler.options.entry);\n      }\n      compiler.plugin('after-emit', this.afterEmit);\n    }\n  }\n}\n\nmodule.exports = StartServerPlugin;\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/src/monitor-loader.js",
    "content": "// This loader just returns the monitor source\n// this way it can be embedded without processing or messing with external handling\nimport monitorFn from './monitor';\n\nconst monitorSrc = `(${monitorFn.toString()})()`;\n\nconst loader = function () {\n  return monitorSrc;\n};\n\nexport default loader;\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/src/monitor.js",
    "content": "// Monitor server script startup and reload. Should be added at the end of entries\nconst monitorFn = () => {\n  // Handle hot updates, copied with slight adjustments from webpack/hot/signal.js\n  if (module.hot) {\n    const log = (type, msg) => console[type](`sswp> ${msg}`);\n    // TODO don't show this when sending signal instead of message\n    log('log', 'Handling Hot Module Reloading');\n    var checkForUpdate = function checkForUpdate(fromUpdate) {\n      module.hot\n        .check()\n        .then(function (updatedModules) {\n          if (!updatedModules) {\n            if (fromUpdate) log('log', 'Update applied.');\n            else log('warn', 'Cannot find update.');\n            return;\n          }\n\n          return module.hot\n            .apply({\n              ignoreUnaccepted: true,\n              // TODO probably restart\n              onUnaccepted: function (data) {\n                log(\n                  'warn',\n                  '\\u0007Ignored an update to unaccepted module ' +\n                    data.chain.join(' -> ')\n                );\n              },\n            })\n            .then(function (renewedModules) {\n              require('webpack/hot/log-apply-result')(\n                updatedModules,\n                renewedModules\n              );\n\n              checkForUpdate(true);\n            });\n        })\n        .catch(function (err) {\n          var status = module.hot.status();\n          if (['abort', 'fail'].indexOf(status) >= 0) {\n            if (process.send) {\n              process.send('SSWP_HMR_FAIL');\n            }\n            log('warn', 'Cannot apply update.');\n            log('warn', '' + err.stack || err.message);\n            log(\n              'error',\n              'Quitting process - will reload on next file change\\u0007\\n\\u0007\\n\\u0007'\n            );\n            process.exit(222);\n          } else {\n            log('warn', 'Update failed: ' + err.stack || err.message);\n          }\n        });\n    };\n\n    process.on('message', function (message) {\n      if (message !== 'SSWP_HMR') return;\n\n      if (module.hot.status() !== 'idle') {\n        log(\n          'warn',\n          'Got signal but currently in ' + module.hot.status() + ' state.'\n        );\n        log('warn', 'Need to be in idle state to start hot update.');\n        return;\n      }\n\n      checkForUpdate();\n    });\n  }\n\n  // Tell our plugin we loaded all the code without initially crashing\n  if (process.send) {\n    process.send('SSWP_LOADED');\n  }\n};\n\nexport default monitorFn;\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/SilentPlugin.js",
    "content": "import Plugin from '..';\n\nclass SilentPlugin extends Plugin {\n  _worker_error(msg, ...args) {}\n\n  _worker_info(msg, ...args) {}\n}\n\nmodule.exports = SilentPlugin;\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/cases/test-project/index.js",
    "content": "// be slightly async to allow HMR code to send to plugin\nsetTimeout(() => {\n  console.log('Test project ran sucessfully');\n}, 100);\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/cases/test-project/webpack.config.js",
    "content": "const path = require('path');\nconst webpack = require('webpack');\nconst StartServerPlugin = require('../../SilentPlugin');\n\nconst webpackMajorVersion =\n  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;\n\nconst is_test = process.env.NODE_ENV == 'test';\n\nmodule.exports = Object.assign(\n  {\n    watch: !is_test,\n    entry: {main: __dirname},\n    target: 'node',\n    plugins: [new StartServerPlugin({once: true, verbose: !is_test})],\n    output: {\n      path: path.resolve(__dirname, '..', '..', 'js', 'test-project'),\n      filename: 'server.js',\n    },\n  },\n  webpackMajorVersion !== 3 ? {mode: 'development'} : {}\n);\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/cases/test-project-hmr/index.js",
    "content": "// be slightly async to allow HMR code to send to plugin\nsetTimeout(() => {\n  console.log('Test project ran sucessfully');\n}, 100);\n\nmodule.hot.accept();\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/cases/test-project-hmr/webpack.config.js",
    "content": "const path = require('path');\nconst webpack = require('webpack');\nconst StartServerPlugin = require('../../SilentPlugin');\n\nconst webpackMajorVersion =\n  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;\n\nconst is_test = process.env.NODE_ENV == 'test';\n\nmodule.exports = Object.assign(\n  {\n    watch: !is_test,\n    entry: {main: [__dirname, 'webpack/hot/poll?300', 'webpack/hot/signal']},\n    target: 'node',\n    plugins: [\n      new webpack.HotModuleReplacementPlugin(),\n      new StartServerPlugin({once: is_test, verbose: !is_test}),\n    ],\n    output: {\n      path: path.resolve(__dirname, '..', '..', 'js', 'test-project-hmr'),\n      filename: 'server.js',\n    },\n  },\n  webpackMajorVersion !== 3 ? {mode: 'development'} : {}\n);\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/index.test.js",
    "content": "import fs from 'fs';\nimport path from 'path';\nimport webpack from 'webpack';\nimport expect from 'expect';\nimport {compareDirectory, compareWarning} from './utils';\nimport Plugin from '..';\n\nconst webpackMajorVersion =\n  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;\n\ndescribe('StartServerPluginWebpackCases', () => {\n  const casesDirectory = path.resolve(__dirname, 'cases');\n  const outputDirectory = path.resolve(__dirname, 'js');\n\n  for (const directory of fs.readdirSync(casesDirectory)) {\n    if (!/^(\\.|_)/.test(directory)) {\n      // eslint-disable-next-line no-loop-func\n      it(`${directory} should compile and start the server`, (done) => {\n        const directoryForCase = path.resolve(casesDirectory, directory);\n        const outputDirectoryForCase = path.resolve(outputDirectory, directory);\n        // eslint-disable-next-line import/no-dynamic-require, global-require\n        const webpackConfig = require(path.resolve(\n          directoryForCase,\n          'webpack.config.js'\n        ));\n\n        for (const config of [].concat(webpackConfig)) {\n          Object.assign(\n            config,\n            {\n              context: directoryForCase,\n              output: Object.assign(\n                {\n                  path: outputDirectoryForCase,\n                },\n                config.output\n              ),\n            },\n            config\n          );\n        }\n\n        webpack(webpackConfig, (err, stats) => {\n          if (err) {\n            done(err);\n            return;\n          }\n\n          /*\n          // eslint-disable-next-line no-console\n          console.log(\n            stats.toString({\n              context: path.resolve(__dirname, '..'),\n              chunks: true,\n              chunkModules: true,\n              modules: false,\n            })\n          );\n          */\n\n          if (stats.hasErrors()) {\n            done(\n              new Error(\n                stats.toString({\n                  context: path.resolve(__dirname, '..'),\n                  errorDetails: true,\n                })\n              )\n            );\n\n            return;\n          }\n\n          const expectedDirectory = path.resolve(directoryForCase, 'expected');\n          const expectedDirectoryByVersion = path.join(\n            expectedDirectory,\n            `webpack-${webpackMajorVersion}`\n          );\n\n          if (fs.existsSync(expectedDirectoryByVersion)) {\n            compareDirectory(\n              outputDirectoryForCase,\n              expectedDirectoryByVersion\n            );\n          } else if (fs.existsSync(expectedDirectory)) {\n            compareDirectory(outputDirectoryForCase, expectedDirectory);\n          }\n\n          const expectedWarning = path.resolve(directoryForCase, 'warnings.js');\n          if (fs.existsSync(expectedWarning)) {\n            const actualWarning = stats.toString({\n              all: false,\n              warnings: true,\n            });\n            compareWarning(actualWarning, expectedWarning);\n          }\n\n          done();\n        });\n      }, 10000);\n    }\n  }\n});\n\ndescribe('StartServerPlugin', function () {\n  it('should be `import`-able', function () {\n    expect(Plugin).toBeInstanceOf(Function);\n  });\n\n  it('should be `require`-able', function () {\n    expect(require('..')).toBe(Plugin);\n  });\n\n  it('should accept a string entryName', function () {\n    const p = new Plugin('test');\n    expect(p.options.entryName).toBe('test');\n  });\n\n  it('should accept an options object', function () {\n    const p = new Plugin({whee: true});\n    expect(p.options.whee).toBe(true);\n  });\n\n  it('should calculate nodeArgs', function () {\n    const p = new Plugin({nodeArgs: ['meep'], scriptArgs: ['moop']});\n    const nodeArgs = p._getExecArgv();\n    expect(nodeArgs.filter((a) => a === 'meep').length).toBe(1);\n  });\n\n  it('should calculate args', function () {\n    const p = new Plugin({\n      nodeArgs: ['meep'],\n      scriptArgs: ['moop', 'bleep', 'third'],\n    });\n    const args = p.options.scriptArgs;\n    expect(args).toEqual(['moop', 'bleep', 'third']);\n  });\n\n  it('should accept string entry', function () {\n    const p = new Plugin();\n    const entry = p._amendEntry('meep');\n    expect(entry).toBeInstanceOf(Array);\n    expect(entry[0]).toEqual('meep');\n    expect(entry[1]).toContain('monitor');\n  });\n  it('should accept array entry', function () {\n    const p = new Plugin();\n    const entry = p._amendEntry(['meep', 'moop']);\n    expect(entry).toBeInstanceOf(Array);\n    expect(entry.slice(0, 2)).toEqual(['meep', 'moop']);\n    expect(entry[2]).toContain('monitor');\n  });\n  it('should accept object entry', function () {\n    const p = new Plugin({entryName: 'boom'});\n    const entry = p._amendEntry({boom: 'meep', beep: 'foom'});\n    expect(entry.beep).toEqual('foom');\n    expect(entry.boom).toBeInstanceOf(Array);\n    expect(entry.boom[0]).toEqual('meep');\n    expect(entry.boom[1]).toContain('monitor');\n  });\n  it('should accept function entry', function (cb) {\n    const p = new Plugin();\n    const entryFn = p._amendEntry((arg) => arg);\n    expect(entryFn).toBeInstanceOf(Function);\n    const entry = entryFn('meep');\n    expect(entry).toBeInstanceOf(Promise);\n    entry.then((entry) => {\n      expect(entry[0]).toEqual('meep');\n      expect(entry[1]).toContain('monitor');\n      cb();\n    });\n  });\n});\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/js/test-project/server.js",
    "content": "/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// define __esModule on exports\n/******/ \t__webpack_require__.r = function(exports) {\n/******/ \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n/******/ \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n/******/ \t\t}\n/******/ \t\tObject.defineProperty(exports, '__esModule', { value: true });\n/******/ \t};\n/******/\n/******/ \t// create a fake namespace object\n/******/ \t// mode & 1: value is a module id, require it\n/******/ \t// mode & 2: merge all properties of value into the ns\n/******/ \t// mode & 4: return value when already ns object\n/******/ \t// mode & 8|1: behave like require\n/******/ \t__webpack_require__.t = function(value, mode) {\n/******/ \t\tif(mode & 1) value = __webpack_require__(value);\n/******/ \t\tif(mode & 8) return value;\n/******/ \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n/******/ \t\tvar ns = Object.create(null);\n/******/ \t\t__webpack_require__.r(ns);\n/******/ \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n/******/ \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n/******/ \t\treturn ns;\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ \"../../../dist/monitor-loader.js!../../../dist/monitor-loader.js\":\n/*!***********************************************************************************************************************************************************************************************************************!*\\\n  !*** /home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js ***!\n  \\***********************************************************************************************************************************************************************************************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"(() => {\\n  // Handle hot updates, copied with slight adjustments from webpack/hot/signal.js\\n  if (false) { var checkForUpdate; } // Tell our plugin we loaded all the code without initially crashing\\n\\n\\n  if (process.send) {\\n    process.send('SSWP_LOADED');\\n  }\\n})()\\n\\n//# sourceURL=webpack:////home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js?/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js\");\n\n/***/ }),\n\n/***/ \"./index.js\":\n/*!******************!*\\\n  !*** ./index.js ***!\n  \\******************/\n/*! no static exports found */\n/***/ (function(module, exports) {\n\neval(\"// be slightly async to allow HMR code to send to plugin\\nsetTimeout(() => {\\n  console.log('Test project ran sucessfully');\\n}, 100);\\n\\n\\n//# sourceURL=webpack:///./index.js?\");\n\n/***/ }),\n\n/***/ 0:\n/*!********************************************************************************************************************************************************************************************************************************!*\\\n  !*** multi . !/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js ***!\n  \\********************************************************************************************************************************************************************************************************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"__webpack_require__(/*! /home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/tests/cases/test-project */\\\"./index.js\\\");\\nmodule.exports = __webpack_require__(/*! !!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js */\\\"../../../dist/monitor-loader.js!../../../dist/monitor-loader.js\\\");\\n\\n\\n//# sourceURL=webpack:////home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js?multi_._!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js\");\n\n/***/ })\n\n/******/ });"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/js/test-project-hmr/server.js",
    "content": "/******/ (function(modules) { // webpackBootstrap\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tfunction hotDownloadUpdateChunk(chunkId) {\n/******/ \t\tvar chunk = require(\"./\" + \"\" + chunkId + \".\" + hotCurrentHash + \".hot-update.js\");\n/******/ \t\thotAddUpdateChunk(chunk.id, chunk.modules);\n/******/ \t}\n/******/\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tfunction hotDownloadManifest() {\n/******/ \t\ttry {\n/******/ \t\t\tvar update = require(\"./\" + \"\" + hotCurrentHash + \".hot-update.json\");\n/******/ \t\t} catch (e) {\n/******/ \t\t\treturn Promise.resolve();\n/******/ \t\t}\n/******/ \t\treturn Promise.resolve(update);\n/******/ \t}\n/******/\n/******/ \t//eslint-disable-next-line no-unused-vars\n/******/ \tfunction hotDisposeChunk(chunkId) {\n/******/ \t\tdelete installedChunks[chunkId];\n/******/ \t}\n/******/\n/******/ \tvar hotApplyOnUpdate = true;\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tvar hotCurrentHash = \"a0368f43305e48de2ec2\";\n/******/ \tvar hotRequestTimeout = 10000;\n/******/ \tvar hotCurrentModuleData = {};\n/******/ \tvar hotCurrentChildModule;\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tvar hotCurrentParents = [];\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tvar hotCurrentParentsTemp = [];\n/******/\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tfunction hotCreateRequire(moduleId) {\n/******/ \t\tvar me = installedModules[moduleId];\n/******/ \t\tif (!me) return __webpack_require__;\n/******/ \t\tvar fn = function(request) {\n/******/ \t\t\tif (me.hot.active) {\n/******/ \t\t\t\tif (installedModules[request]) {\n/******/ \t\t\t\t\tif (installedModules[request].parents.indexOf(moduleId) === -1) {\n/******/ \t\t\t\t\t\tinstalledModules[request].parents.push(moduleId);\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t} else {\n/******/ \t\t\t\t\thotCurrentParents = [moduleId];\n/******/ \t\t\t\t\thotCurrentChildModule = request;\n/******/ \t\t\t\t}\n/******/ \t\t\t\tif (me.children.indexOf(request) === -1) {\n/******/ \t\t\t\t\tme.children.push(request);\n/******/ \t\t\t\t}\n/******/ \t\t\t} else {\n/******/ \t\t\t\tconsole.warn(\n/******/ \t\t\t\t\t\"[HMR] unexpected require(\" +\n/******/ \t\t\t\t\t\trequest +\n/******/ \t\t\t\t\t\t\") from disposed module \" +\n/******/ \t\t\t\t\t\tmoduleId\n/******/ \t\t\t\t);\n/******/ \t\t\t\thotCurrentParents = [];\n/******/ \t\t\t}\n/******/ \t\t\treturn __webpack_require__(request);\n/******/ \t\t};\n/******/ \t\tvar ObjectFactory = function ObjectFactory(name) {\n/******/ \t\t\treturn {\n/******/ \t\t\t\tconfigurable: true,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: function() {\n/******/ \t\t\t\t\treturn __webpack_require__[name];\n/******/ \t\t\t\t},\n/******/ \t\t\t\tset: function(value) {\n/******/ \t\t\t\t\t__webpack_require__[name] = value;\n/******/ \t\t\t\t}\n/******/ \t\t\t};\n/******/ \t\t};\n/******/ \t\tfor (var name in __webpack_require__) {\n/******/ \t\t\tif (\n/******/ \t\t\t\tObject.prototype.hasOwnProperty.call(__webpack_require__, name) &&\n/******/ \t\t\t\tname !== \"e\" &&\n/******/ \t\t\t\tname !== \"t\"\n/******/ \t\t\t) {\n/******/ \t\t\t\tObject.defineProperty(fn, name, ObjectFactory(name));\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\tfn.e = function(chunkId) {\n/******/ \t\t\tif (hotStatus === \"ready\") hotSetStatus(\"prepare\");\n/******/ \t\t\thotChunksLoading++;\n/******/ \t\t\treturn __webpack_require__.e(chunkId).then(finishChunkLoading, function(err) {\n/******/ \t\t\t\tfinishChunkLoading();\n/******/ \t\t\t\tthrow err;\n/******/ \t\t\t});\n/******/\n/******/ \t\t\tfunction finishChunkLoading() {\n/******/ \t\t\t\thotChunksLoading--;\n/******/ \t\t\t\tif (hotStatus === \"prepare\") {\n/******/ \t\t\t\t\tif (!hotWaitingFilesMap[chunkId]) {\n/******/ \t\t\t\t\t\thotEnsureUpdateChunk(chunkId);\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t\tif (hotChunksLoading === 0 && hotWaitingFiles === 0) {\n/******/ \t\t\t\t\t\thotUpdateDownloaded();\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t};\n/******/ \t\tfn.t = function(value, mode) {\n/******/ \t\t\tif (mode & 1) value = fn(value);\n/******/ \t\t\treturn __webpack_require__.t(value, mode & ~1);\n/******/ \t\t};\n/******/ \t\treturn fn;\n/******/ \t}\n/******/\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tfunction hotCreateModule(moduleId) {\n/******/ \t\tvar hot = {\n/******/ \t\t\t// private stuff\n/******/ \t\t\t_acceptedDependencies: {},\n/******/ \t\t\t_declinedDependencies: {},\n/******/ \t\t\t_selfAccepted: false,\n/******/ \t\t\t_selfDeclined: false,\n/******/ \t\t\t_selfInvalidated: false,\n/******/ \t\t\t_disposeHandlers: [],\n/******/ \t\t\t_main: hotCurrentChildModule !== moduleId,\n/******/\n/******/ \t\t\t// Module API\n/******/ \t\t\tactive: true,\n/******/ \t\t\taccept: function(dep, callback) {\n/******/ \t\t\t\tif (dep === undefined) hot._selfAccepted = true;\n/******/ \t\t\t\telse if (typeof dep === \"function\") hot._selfAccepted = dep;\n/******/ \t\t\t\telse if (typeof dep === \"object\")\n/******/ \t\t\t\t\tfor (var i = 0; i < dep.length; i++)\n/******/ \t\t\t\t\t\thot._acceptedDependencies[dep[i]] = callback || function() {};\n/******/ \t\t\t\telse hot._acceptedDependencies[dep] = callback || function() {};\n/******/ \t\t\t},\n/******/ \t\t\tdecline: function(dep) {\n/******/ \t\t\t\tif (dep === undefined) hot._selfDeclined = true;\n/******/ \t\t\t\telse if (typeof dep === \"object\")\n/******/ \t\t\t\t\tfor (var i = 0; i < dep.length; i++)\n/******/ \t\t\t\t\t\thot._declinedDependencies[dep[i]] = true;\n/******/ \t\t\t\telse hot._declinedDependencies[dep] = true;\n/******/ \t\t\t},\n/******/ \t\t\tdispose: function(callback) {\n/******/ \t\t\t\thot._disposeHandlers.push(callback);\n/******/ \t\t\t},\n/******/ \t\t\taddDisposeHandler: function(callback) {\n/******/ \t\t\t\thot._disposeHandlers.push(callback);\n/******/ \t\t\t},\n/******/ \t\t\tremoveDisposeHandler: function(callback) {\n/******/ \t\t\t\tvar idx = hot._disposeHandlers.indexOf(callback);\n/******/ \t\t\t\tif (idx >= 0) hot._disposeHandlers.splice(idx, 1);\n/******/ \t\t\t},\n/******/ \t\t\tinvalidate: function() {\n/******/ \t\t\t\tthis._selfInvalidated = true;\n/******/ \t\t\t\tswitch (hotStatus) {\n/******/ \t\t\t\t\tcase \"idle\":\n/******/ \t\t\t\t\t\thotUpdate = {};\n/******/ \t\t\t\t\t\thotUpdate[moduleId] = modules[moduleId];\n/******/ \t\t\t\t\t\thotSetStatus(\"ready\");\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tcase \"ready\":\n/******/ \t\t\t\t\t\thotApplyInvalidatedModule(moduleId);\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tcase \"prepare\":\n/******/ \t\t\t\t\tcase \"check\":\n/******/ \t\t\t\t\tcase \"dispose\":\n/******/ \t\t\t\t\tcase \"apply\":\n/******/ \t\t\t\t\t\t(hotQueuedInvalidatedModules =\n/******/ \t\t\t\t\t\t\thotQueuedInvalidatedModules || []).push(moduleId);\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tdefault:\n/******/ \t\t\t\t\t\t// ignore requests in error states\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t}\n/******/ \t\t\t},\n/******/\n/******/ \t\t\t// Management API\n/******/ \t\t\tcheck: hotCheck,\n/******/ \t\t\tapply: hotApply,\n/******/ \t\t\tstatus: function(l) {\n/******/ \t\t\t\tif (!l) return hotStatus;\n/******/ \t\t\t\thotStatusHandlers.push(l);\n/******/ \t\t\t},\n/******/ \t\t\taddStatusHandler: function(l) {\n/******/ \t\t\t\thotStatusHandlers.push(l);\n/******/ \t\t\t},\n/******/ \t\t\tremoveStatusHandler: function(l) {\n/******/ \t\t\t\tvar idx = hotStatusHandlers.indexOf(l);\n/******/ \t\t\t\tif (idx >= 0) hotStatusHandlers.splice(idx, 1);\n/******/ \t\t\t},\n/******/\n/******/ \t\t\t//inherit from previous dispose call\n/******/ \t\t\tdata: hotCurrentModuleData[moduleId]\n/******/ \t\t};\n/******/ \t\thotCurrentChildModule = undefined;\n/******/ \t\treturn hot;\n/******/ \t}\n/******/\n/******/ \tvar hotStatusHandlers = [];\n/******/ \tvar hotStatus = \"idle\";\n/******/\n/******/ \tfunction hotSetStatus(newStatus) {\n/******/ \t\thotStatus = newStatus;\n/******/ \t\tfor (var i = 0; i < hotStatusHandlers.length; i++)\n/******/ \t\t\thotStatusHandlers[i].call(null, newStatus);\n/******/ \t}\n/******/\n/******/ \t// while downloading\n/******/ \tvar hotWaitingFiles = 0;\n/******/ \tvar hotChunksLoading = 0;\n/******/ \tvar hotWaitingFilesMap = {};\n/******/ \tvar hotRequestedFilesMap = {};\n/******/ \tvar hotAvailableFilesMap = {};\n/******/ \tvar hotDeferred;\n/******/\n/******/ \t// The update info\n/******/ \tvar hotUpdate, hotUpdateNewHash, hotQueuedInvalidatedModules;\n/******/\n/******/ \tfunction toModuleId(id) {\n/******/ \t\tvar isNumber = +id + \"\" === id;\n/******/ \t\treturn isNumber ? +id : id;\n/******/ \t}\n/******/\n/******/ \tfunction hotCheck(apply) {\n/******/ \t\tif (hotStatus !== \"idle\") {\n/******/ \t\t\tthrow new Error(\"check() is only allowed in idle status\");\n/******/ \t\t}\n/******/ \t\thotApplyOnUpdate = apply;\n/******/ \t\thotSetStatus(\"check\");\n/******/ \t\treturn hotDownloadManifest(hotRequestTimeout).then(function(update) {\n/******/ \t\t\tif (!update) {\n/******/ \t\t\t\thotSetStatus(hotApplyInvalidatedModules() ? \"ready\" : \"idle\");\n/******/ \t\t\t\treturn null;\n/******/ \t\t\t}\n/******/ \t\t\thotRequestedFilesMap = {};\n/******/ \t\t\thotWaitingFilesMap = {};\n/******/ \t\t\thotAvailableFilesMap = update.c;\n/******/ \t\t\thotUpdateNewHash = update.h;\n/******/\n/******/ \t\t\thotSetStatus(\"prepare\");\n/******/ \t\t\tvar promise = new Promise(function(resolve, reject) {\n/******/ \t\t\t\thotDeferred = {\n/******/ \t\t\t\t\tresolve: resolve,\n/******/ \t\t\t\t\treject: reject\n/******/ \t\t\t\t};\n/******/ \t\t\t});\n/******/ \t\t\thotUpdate = {};\n/******/ \t\t\tvar chunkId = \"main\";\n/******/ \t\t\t// eslint-disable-next-line no-lone-blocks\n/******/ \t\t\t{\n/******/ \t\t\t\thotEnsureUpdateChunk(chunkId);\n/******/ \t\t\t}\n/******/ \t\t\tif (\n/******/ \t\t\t\thotStatus === \"prepare\" &&\n/******/ \t\t\t\thotChunksLoading === 0 &&\n/******/ \t\t\t\thotWaitingFiles === 0\n/******/ \t\t\t) {\n/******/ \t\t\t\thotUpdateDownloaded();\n/******/ \t\t\t}\n/******/ \t\t\treturn promise;\n/******/ \t\t});\n/******/ \t}\n/******/\n/******/ \t// eslint-disable-next-line no-unused-vars\n/******/ \tfunction hotAddUpdateChunk(chunkId, moreModules) {\n/******/ \t\tif (!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId])\n/******/ \t\t\treturn;\n/******/ \t\thotRequestedFilesMap[chunkId] = false;\n/******/ \t\tfor (var moduleId in moreModules) {\n/******/ \t\t\tif (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n/******/ \t\t\t\thotUpdate[moduleId] = moreModules[moduleId];\n/******/ \t\t\t}\n/******/ \t\t}\n/******/ \t\tif (--hotWaitingFiles === 0 && hotChunksLoading === 0) {\n/******/ \t\t\thotUpdateDownloaded();\n/******/ \t\t}\n/******/ \t}\n/******/\n/******/ \tfunction hotEnsureUpdateChunk(chunkId) {\n/******/ \t\tif (!hotAvailableFilesMap[chunkId]) {\n/******/ \t\t\thotWaitingFilesMap[chunkId] = true;\n/******/ \t\t} else {\n/******/ \t\t\thotRequestedFilesMap[chunkId] = true;\n/******/ \t\t\thotWaitingFiles++;\n/******/ \t\t\thotDownloadUpdateChunk(chunkId);\n/******/ \t\t}\n/******/ \t}\n/******/\n/******/ \tfunction hotUpdateDownloaded() {\n/******/ \t\thotSetStatus(\"ready\");\n/******/ \t\tvar deferred = hotDeferred;\n/******/ \t\thotDeferred = null;\n/******/ \t\tif (!deferred) return;\n/******/ \t\tif (hotApplyOnUpdate) {\n/******/ \t\t\t// Wrap deferred object in Promise to mark it as a well-handled Promise to\n/******/ \t\t\t// avoid triggering uncaught exception warning in Chrome.\n/******/ \t\t\t// See https://bugs.chromium.org/p/chromium/issues/detail?id=465666\n/******/ \t\t\tPromise.resolve()\n/******/ \t\t\t\t.then(function() {\n/******/ \t\t\t\t\treturn hotApply(hotApplyOnUpdate);\n/******/ \t\t\t\t})\n/******/ \t\t\t\t.then(\n/******/ \t\t\t\t\tfunction(result) {\n/******/ \t\t\t\t\t\tdeferred.resolve(result);\n/******/ \t\t\t\t\t},\n/******/ \t\t\t\t\tfunction(err) {\n/******/ \t\t\t\t\t\tdeferred.reject(err);\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t);\n/******/ \t\t} else {\n/******/ \t\t\tvar outdatedModules = [];\n/******/ \t\t\tfor (var id in hotUpdate) {\n/******/ \t\t\t\tif (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {\n/******/ \t\t\t\t\toutdatedModules.push(toModuleId(id));\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t\tdeferred.resolve(outdatedModules);\n/******/ \t\t}\n/******/ \t}\n/******/\n/******/ \tfunction hotApply(options) {\n/******/ \t\tif (hotStatus !== \"ready\")\n/******/ \t\t\tthrow new Error(\"apply() is only allowed in ready status\");\n/******/ \t\toptions = options || {};\n/******/ \t\treturn hotApplyInternal(options);\n/******/ \t}\n/******/\n/******/ \tfunction hotApplyInternal(options) {\n/******/ \t\thotApplyInvalidatedModules();\n/******/\n/******/ \t\tvar cb;\n/******/ \t\tvar i;\n/******/ \t\tvar j;\n/******/ \t\tvar module;\n/******/ \t\tvar moduleId;\n/******/\n/******/ \t\tfunction getAffectedStuff(updateModuleId) {\n/******/ \t\t\tvar outdatedModules = [updateModuleId];\n/******/ \t\t\tvar outdatedDependencies = {};\n/******/\n/******/ \t\t\tvar queue = outdatedModules.map(function(id) {\n/******/ \t\t\t\treturn {\n/******/ \t\t\t\t\tchain: [id],\n/******/ \t\t\t\t\tid: id\n/******/ \t\t\t\t};\n/******/ \t\t\t});\n/******/ \t\t\twhile (queue.length > 0) {\n/******/ \t\t\t\tvar queueItem = queue.pop();\n/******/ \t\t\t\tvar moduleId = queueItem.id;\n/******/ \t\t\t\tvar chain = queueItem.chain;\n/******/ \t\t\t\tmodule = installedModules[moduleId];\n/******/ \t\t\t\tif (\n/******/ \t\t\t\t\t!module ||\n/******/ \t\t\t\t\t(module.hot._selfAccepted && !module.hot._selfInvalidated)\n/******/ \t\t\t\t)\n/******/ \t\t\t\t\tcontinue;\n/******/ \t\t\t\tif (module.hot._selfDeclined) {\n/******/ \t\t\t\t\treturn {\n/******/ \t\t\t\t\t\ttype: \"self-declined\",\n/******/ \t\t\t\t\t\tchain: chain,\n/******/ \t\t\t\t\t\tmoduleId: moduleId\n/******/ \t\t\t\t\t};\n/******/ \t\t\t\t}\n/******/ \t\t\t\tif (module.hot._main) {\n/******/ \t\t\t\t\treturn {\n/******/ \t\t\t\t\t\ttype: \"unaccepted\",\n/******/ \t\t\t\t\t\tchain: chain,\n/******/ \t\t\t\t\t\tmoduleId: moduleId\n/******/ \t\t\t\t\t};\n/******/ \t\t\t\t}\n/******/ \t\t\t\tfor (var i = 0; i < module.parents.length; i++) {\n/******/ \t\t\t\t\tvar parentId = module.parents[i];\n/******/ \t\t\t\t\tvar parent = installedModules[parentId];\n/******/ \t\t\t\t\tif (!parent) continue;\n/******/ \t\t\t\t\tif (parent.hot._declinedDependencies[moduleId]) {\n/******/ \t\t\t\t\t\treturn {\n/******/ \t\t\t\t\t\t\ttype: \"declined\",\n/******/ \t\t\t\t\t\t\tchain: chain.concat([parentId]),\n/******/ \t\t\t\t\t\t\tmoduleId: moduleId,\n/******/ \t\t\t\t\t\t\tparentId: parentId\n/******/ \t\t\t\t\t\t};\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t\tif (outdatedModules.indexOf(parentId) !== -1) continue;\n/******/ \t\t\t\t\tif (parent.hot._acceptedDependencies[moduleId]) {\n/******/ \t\t\t\t\t\tif (!outdatedDependencies[parentId])\n/******/ \t\t\t\t\t\t\toutdatedDependencies[parentId] = [];\n/******/ \t\t\t\t\t\taddAllToSet(outdatedDependencies[parentId], [moduleId]);\n/******/ \t\t\t\t\t\tcontinue;\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t\tdelete outdatedDependencies[parentId];\n/******/ \t\t\t\t\toutdatedModules.push(parentId);\n/******/ \t\t\t\t\tqueue.push({\n/******/ \t\t\t\t\t\tchain: chain.concat([parentId]),\n/******/ \t\t\t\t\t\tid: parentId\n/******/ \t\t\t\t\t});\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/\n/******/ \t\t\treturn {\n/******/ \t\t\t\ttype: \"accepted\",\n/******/ \t\t\t\tmoduleId: updateModuleId,\n/******/ \t\t\t\toutdatedModules: outdatedModules,\n/******/ \t\t\t\toutdatedDependencies: outdatedDependencies\n/******/ \t\t\t};\n/******/ \t\t}\n/******/\n/******/ \t\tfunction addAllToSet(a, b) {\n/******/ \t\t\tfor (var i = 0; i < b.length; i++) {\n/******/ \t\t\t\tvar item = b[i];\n/******/ \t\t\t\tif (a.indexOf(item) === -1) a.push(item);\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// at begin all updates modules are outdated\n/******/ \t\t// the \"outdated\" status can propagate to parents if they don't accept the children\n/******/ \t\tvar outdatedDependencies = {};\n/******/ \t\tvar outdatedModules = [];\n/******/ \t\tvar appliedUpdate = {};\n/******/\n/******/ \t\tvar warnUnexpectedRequire = function warnUnexpectedRequire() {\n/******/ \t\t\tconsole.warn(\n/******/ \t\t\t\t\"[HMR] unexpected require(\" + result.moduleId + \") to disposed module\"\n/******/ \t\t\t);\n/******/ \t\t};\n/******/\n/******/ \t\tfor (var id in hotUpdate) {\n/******/ \t\t\tif (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {\n/******/ \t\t\t\tmoduleId = toModuleId(id);\n/******/ \t\t\t\t/** @type {TODO} */\n/******/ \t\t\t\tvar result;\n/******/ \t\t\t\tif (hotUpdate[id]) {\n/******/ \t\t\t\t\tresult = getAffectedStuff(moduleId);\n/******/ \t\t\t\t} else {\n/******/ \t\t\t\t\tresult = {\n/******/ \t\t\t\t\t\ttype: \"disposed\",\n/******/ \t\t\t\t\t\tmoduleId: id\n/******/ \t\t\t\t\t};\n/******/ \t\t\t\t}\n/******/ \t\t\t\t/** @type {Error|false} */\n/******/ \t\t\t\tvar abortError = false;\n/******/ \t\t\t\tvar doApply = false;\n/******/ \t\t\t\tvar doDispose = false;\n/******/ \t\t\t\tvar chainInfo = \"\";\n/******/ \t\t\t\tif (result.chain) {\n/******/ \t\t\t\t\tchainInfo = \"\\nUpdate propagation: \" + result.chain.join(\" -> \");\n/******/ \t\t\t\t}\n/******/ \t\t\t\tswitch (result.type) {\n/******/ \t\t\t\t\tcase \"self-declined\":\n/******/ \t\t\t\t\t\tif (options.onDeclined) options.onDeclined(result);\n/******/ \t\t\t\t\t\tif (!options.ignoreDeclined)\n/******/ \t\t\t\t\t\t\tabortError = new Error(\n/******/ \t\t\t\t\t\t\t\t\"Aborted because of self decline: \" +\n/******/ \t\t\t\t\t\t\t\t\tresult.moduleId +\n/******/ \t\t\t\t\t\t\t\t\tchainInfo\n/******/ \t\t\t\t\t\t\t);\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tcase \"declined\":\n/******/ \t\t\t\t\t\tif (options.onDeclined) options.onDeclined(result);\n/******/ \t\t\t\t\t\tif (!options.ignoreDeclined)\n/******/ \t\t\t\t\t\t\tabortError = new Error(\n/******/ \t\t\t\t\t\t\t\t\"Aborted because of declined dependency: \" +\n/******/ \t\t\t\t\t\t\t\t\tresult.moduleId +\n/******/ \t\t\t\t\t\t\t\t\t\" in \" +\n/******/ \t\t\t\t\t\t\t\t\tresult.parentId +\n/******/ \t\t\t\t\t\t\t\t\tchainInfo\n/******/ \t\t\t\t\t\t\t);\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tcase \"unaccepted\":\n/******/ \t\t\t\t\t\tif (options.onUnaccepted) options.onUnaccepted(result);\n/******/ \t\t\t\t\t\tif (!options.ignoreUnaccepted)\n/******/ \t\t\t\t\t\t\tabortError = new Error(\n/******/ \t\t\t\t\t\t\t\t\"Aborted because \" + moduleId + \" is not accepted\" + chainInfo\n/******/ \t\t\t\t\t\t\t);\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tcase \"accepted\":\n/******/ \t\t\t\t\t\tif (options.onAccepted) options.onAccepted(result);\n/******/ \t\t\t\t\t\tdoApply = true;\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tcase \"disposed\":\n/******/ \t\t\t\t\t\tif (options.onDisposed) options.onDisposed(result);\n/******/ \t\t\t\t\t\tdoDispose = true;\n/******/ \t\t\t\t\t\tbreak;\n/******/ \t\t\t\t\tdefault:\n/******/ \t\t\t\t\t\tthrow new Error(\"Unexception type \" + result.type);\n/******/ \t\t\t\t}\n/******/ \t\t\t\tif (abortError) {\n/******/ \t\t\t\t\thotSetStatus(\"abort\");\n/******/ \t\t\t\t\treturn Promise.reject(abortError);\n/******/ \t\t\t\t}\n/******/ \t\t\t\tif (doApply) {\n/******/ \t\t\t\t\tappliedUpdate[moduleId] = hotUpdate[moduleId];\n/******/ \t\t\t\t\taddAllToSet(outdatedModules, result.outdatedModules);\n/******/ \t\t\t\t\tfor (moduleId in result.outdatedDependencies) {\n/******/ \t\t\t\t\t\tif (\n/******/ \t\t\t\t\t\t\tObject.prototype.hasOwnProperty.call(\n/******/ \t\t\t\t\t\t\t\tresult.outdatedDependencies,\n/******/ \t\t\t\t\t\t\t\tmoduleId\n/******/ \t\t\t\t\t\t\t)\n/******/ \t\t\t\t\t\t) {\n/******/ \t\t\t\t\t\t\tif (!outdatedDependencies[moduleId])\n/******/ \t\t\t\t\t\t\t\toutdatedDependencies[moduleId] = [];\n/******/ \t\t\t\t\t\t\taddAllToSet(\n/******/ \t\t\t\t\t\t\t\toutdatedDependencies[moduleId],\n/******/ \t\t\t\t\t\t\t\tresult.outdatedDependencies[moduleId]\n/******/ \t\t\t\t\t\t\t);\n/******/ \t\t\t\t\t\t}\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t}\n/******/ \t\t\t\tif (doDispose) {\n/******/ \t\t\t\t\taddAllToSet(outdatedModules, [result.moduleId]);\n/******/ \t\t\t\t\tappliedUpdate[moduleId] = warnUnexpectedRequire;\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// Store self accepted outdated modules to require them later by the module system\n/******/ \t\tvar outdatedSelfAcceptedModules = [];\n/******/ \t\tfor (i = 0; i < outdatedModules.length; i++) {\n/******/ \t\t\tmoduleId = outdatedModules[i];\n/******/ \t\t\tif (\n/******/ \t\t\t\tinstalledModules[moduleId] &&\n/******/ \t\t\t\tinstalledModules[moduleId].hot._selfAccepted &&\n/******/ \t\t\t\t// removed self-accepted modules should not be required\n/******/ \t\t\t\tappliedUpdate[moduleId] !== warnUnexpectedRequire &&\n/******/ \t\t\t\t// when called invalidate self-accepting is not possible\n/******/ \t\t\t\t!installedModules[moduleId].hot._selfInvalidated\n/******/ \t\t\t) {\n/******/ \t\t\t\toutdatedSelfAcceptedModules.push({\n/******/ \t\t\t\t\tmodule: moduleId,\n/******/ \t\t\t\t\tparents: installedModules[moduleId].parents.slice(),\n/******/ \t\t\t\t\terrorHandler: installedModules[moduleId].hot._selfAccepted\n/******/ \t\t\t\t});\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// Now in \"dispose\" phase\n/******/ \t\thotSetStatus(\"dispose\");\n/******/ \t\tObject.keys(hotAvailableFilesMap).forEach(function(chunkId) {\n/******/ \t\t\tif (hotAvailableFilesMap[chunkId] === false) {\n/******/ \t\t\t\thotDisposeChunk(chunkId);\n/******/ \t\t\t}\n/******/ \t\t});\n/******/\n/******/ \t\tvar idx;\n/******/ \t\tvar queue = outdatedModules.slice();\n/******/ \t\twhile (queue.length > 0) {\n/******/ \t\t\tmoduleId = queue.pop();\n/******/ \t\t\tmodule = installedModules[moduleId];\n/******/ \t\t\tif (!module) continue;\n/******/\n/******/ \t\t\tvar data = {};\n/******/\n/******/ \t\t\t// Call dispose handlers\n/******/ \t\t\tvar disposeHandlers = module.hot._disposeHandlers;\n/******/ \t\t\tfor (j = 0; j < disposeHandlers.length; j++) {\n/******/ \t\t\t\tcb = disposeHandlers[j];\n/******/ \t\t\t\tcb(data);\n/******/ \t\t\t}\n/******/ \t\t\thotCurrentModuleData[moduleId] = data;\n/******/\n/******/ \t\t\t// disable module (this disables requires from this module)\n/******/ \t\t\tmodule.hot.active = false;\n/******/\n/******/ \t\t\t// remove module from cache\n/******/ \t\t\tdelete installedModules[moduleId];\n/******/\n/******/ \t\t\t// when disposing there is no need to call dispose handler\n/******/ \t\t\tdelete outdatedDependencies[moduleId];\n/******/\n/******/ \t\t\t// remove \"parents\" references from all children\n/******/ \t\t\tfor (j = 0; j < module.children.length; j++) {\n/******/ \t\t\t\tvar child = installedModules[module.children[j]];\n/******/ \t\t\t\tif (!child) continue;\n/******/ \t\t\t\tidx = child.parents.indexOf(moduleId);\n/******/ \t\t\t\tif (idx >= 0) {\n/******/ \t\t\t\t\tchild.parents.splice(idx, 1);\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// remove outdated dependency from module children\n/******/ \t\tvar dependency;\n/******/ \t\tvar moduleOutdatedDependencies;\n/******/ \t\tfor (moduleId in outdatedDependencies) {\n/******/ \t\t\tif (\n/******/ \t\t\t\tObject.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)\n/******/ \t\t\t) {\n/******/ \t\t\t\tmodule = installedModules[moduleId];\n/******/ \t\t\t\tif (module) {\n/******/ \t\t\t\t\tmoduleOutdatedDependencies = outdatedDependencies[moduleId];\n/******/ \t\t\t\t\tfor (j = 0; j < moduleOutdatedDependencies.length; j++) {\n/******/ \t\t\t\t\t\tdependency = moduleOutdatedDependencies[j];\n/******/ \t\t\t\t\t\tidx = module.children.indexOf(dependency);\n/******/ \t\t\t\t\t\tif (idx >= 0) module.children.splice(idx, 1);\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// Now in \"apply\" phase\n/******/ \t\thotSetStatus(\"apply\");\n/******/\n/******/ \t\tif (hotUpdateNewHash !== undefined) {\n/******/ \t\t\thotCurrentHash = hotUpdateNewHash;\n/******/ \t\t\thotUpdateNewHash = undefined;\n/******/ \t\t}\n/******/ \t\thotUpdate = undefined;\n/******/\n/******/ \t\t// insert new code\n/******/ \t\tfor (moduleId in appliedUpdate) {\n/******/ \t\t\tif (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {\n/******/ \t\t\t\tmodules[moduleId] = appliedUpdate[moduleId];\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// call accept handlers\n/******/ \t\tvar error = null;\n/******/ \t\tfor (moduleId in outdatedDependencies) {\n/******/ \t\t\tif (\n/******/ \t\t\t\tObject.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)\n/******/ \t\t\t) {\n/******/ \t\t\t\tmodule = installedModules[moduleId];\n/******/ \t\t\t\tif (module) {\n/******/ \t\t\t\t\tmoduleOutdatedDependencies = outdatedDependencies[moduleId];\n/******/ \t\t\t\t\tvar callbacks = [];\n/******/ \t\t\t\t\tfor (i = 0; i < moduleOutdatedDependencies.length; i++) {\n/******/ \t\t\t\t\t\tdependency = moduleOutdatedDependencies[i];\n/******/ \t\t\t\t\t\tcb = module.hot._acceptedDependencies[dependency];\n/******/ \t\t\t\t\t\tif (cb) {\n/******/ \t\t\t\t\t\t\tif (callbacks.indexOf(cb) !== -1) continue;\n/******/ \t\t\t\t\t\t\tcallbacks.push(cb);\n/******/ \t\t\t\t\t\t}\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t\tfor (i = 0; i < callbacks.length; i++) {\n/******/ \t\t\t\t\t\tcb = callbacks[i];\n/******/ \t\t\t\t\t\ttry {\n/******/ \t\t\t\t\t\t\tcb(moduleOutdatedDependencies);\n/******/ \t\t\t\t\t\t} catch (err) {\n/******/ \t\t\t\t\t\t\tif (options.onErrored) {\n/******/ \t\t\t\t\t\t\t\toptions.onErrored({\n/******/ \t\t\t\t\t\t\t\t\ttype: \"accept-errored\",\n/******/ \t\t\t\t\t\t\t\t\tmoduleId: moduleId,\n/******/ \t\t\t\t\t\t\t\t\tdependencyId: moduleOutdatedDependencies[i],\n/******/ \t\t\t\t\t\t\t\t\terror: err\n/******/ \t\t\t\t\t\t\t\t});\n/******/ \t\t\t\t\t\t\t}\n/******/ \t\t\t\t\t\t\tif (!options.ignoreErrored) {\n/******/ \t\t\t\t\t\t\t\tif (!error) error = err;\n/******/ \t\t\t\t\t\t\t}\n/******/ \t\t\t\t\t\t}\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// Load self accepted modules\n/******/ \t\tfor (i = 0; i < outdatedSelfAcceptedModules.length; i++) {\n/******/ \t\t\tvar item = outdatedSelfAcceptedModules[i];\n/******/ \t\t\tmoduleId = item.module;\n/******/ \t\t\thotCurrentParents = item.parents;\n/******/ \t\t\thotCurrentChildModule = moduleId;\n/******/ \t\t\ttry {\n/******/ \t\t\t\t__webpack_require__(moduleId);\n/******/ \t\t\t} catch (err) {\n/******/ \t\t\t\tif (typeof item.errorHandler === \"function\") {\n/******/ \t\t\t\t\ttry {\n/******/ \t\t\t\t\t\titem.errorHandler(err);\n/******/ \t\t\t\t\t} catch (err2) {\n/******/ \t\t\t\t\t\tif (options.onErrored) {\n/******/ \t\t\t\t\t\t\toptions.onErrored({\n/******/ \t\t\t\t\t\t\t\ttype: \"self-accept-error-handler-errored\",\n/******/ \t\t\t\t\t\t\t\tmoduleId: moduleId,\n/******/ \t\t\t\t\t\t\t\terror: err2,\n/******/ \t\t\t\t\t\t\t\toriginalError: err\n/******/ \t\t\t\t\t\t\t});\n/******/ \t\t\t\t\t\t}\n/******/ \t\t\t\t\t\tif (!options.ignoreErrored) {\n/******/ \t\t\t\t\t\t\tif (!error) error = err2;\n/******/ \t\t\t\t\t\t}\n/******/ \t\t\t\t\t\tif (!error) error = err;\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t} else {\n/******/ \t\t\t\t\tif (options.onErrored) {\n/******/ \t\t\t\t\t\toptions.onErrored({\n/******/ \t\t\t\t\t\t\ttype: \"self-accept-errored\",\n/******/ \t\t\t\t\t\t\tmoduleId: moduleId,\n/******/ \t\t\t\t\t\t\terror: err\n/******/ \t\t\t\t\t\t});\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t\tif (!options.ignoreErrored) {\n/******/ \t\t\t\t\t\tif (!error) error = err;\n/******/ \t\t\t\t\t}\n/******/ \t\t\t\t}\n/******/ \t\t\t}\n/******/ \t\t}\n/******/\n/******/ \t\t// handle errors in accept handlers and self accepted module load\n/******/ \t\tif (error) {\n/******/ \t\t\thotSetStatus(\"fail\");\n/******/ \t\t\treturn Promise.reject(error);\n/******/ \t\t}\n/******/\n/******/ \t\tif (hotQueuedInvalidatedModules) {\n/******/ \t\t\treturn hotApplyInternal(options).then(function(list) {\n/******/ \t\t\t\toutdatedModules.forEach(function(moduleId) {\n/******/ \t\t\t\t\tif (list.indexOf(moduleId) < 0) list.push(moduleId);\n/******/ \t\t\t\t});\n/******/ \t\t\t\treturn list;\n/******/ \t\t\t});\n/******/ \t\t}\n/******/\n/******/ \t\thotSetStatus(\"idle\");\n/******/ \t\treturn new Promise(function(resolve) {\n/******/ \t\t\tresolve(outdatedModules);\n/******/ \t\t});\n/******/ \t}\n/******/\n/******/ \tfunction hotApplyInvalidatedModules() {\n/******/ \t\tif (hotQueuedInvalidatedModules) {\n/******/ \t\t\tif (!hotUpdate) hotUpdate = {};\n/******/ \t\t\thotQueuedInvalidatedModules.forEach(hotApplyInvalidatedModule);\n/******/ \t\t\thotQueuedInvalidatedModules = undefined;\n/******/ \t\t\treturn true;\n/******/ \t\t}\n/******/ \t}\n/******/\n/******/ \tfunction hotApplyInvalidatedModule(moduleId) {\n/******/ \t\tif (!Object.prototype.hasOwnProperty.call(hotUpdate, moduleId))\n/******/ \t\t\thotUpdate[moduleId] = modules[moduleId];\n/******/ \t}\n/******/\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {},\n/******/ \t\t\thot: hotCreateModule(moduleId),\n/******/ \t\t\tparents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),\n/******/ \t\t\tchildren: []\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// define __esModule on exports\n/******/ \t__webpack_require__.r = function(exports) {\n/******/ \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n/******/ \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n/******/ \t\t}\n/******/ \t\tObject.defineProperty(exports, '__esModule', { value: true });\n/******/ \t};\n/******/\n/******/ \t// create a fake namespace object\n/******/ \t// mode & 1: value is a module id, require it\n/******/ \t// mode & 2: merge all properties of value into the ns\n/******/ \t// mode & 4: return value when already ns object\n/******/ \t// mode & 8|1: behave like require\n/******/ \t__webpack_require__.t = function(value, mode) {\n/******/ \t\tif(mode & 1) value = __webpack_require__(value);\n/******/ \t\tif(mode & 8) return value;\n/******/ \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n/******/ \t\tvar ns = Object.create(null);\n/******/ \t\t__webpack_require__.r(ns);\n/******/ \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n/******/ \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n/******/ \t\treturn ns;\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n/******/\n/******/ \t// __webpack_hash__\n/******/ \t__webpack_require__.h = function() { return hotCurrentHash; };\n/******/\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn hotCreateRequire(0)(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ \"../../../../../node_modules/webpack/hot/log-apply-result.js\":\n/*!*****************************************!*\\\n  !*** (webpack)/hot/log-apply-result.js ***!\n  \\*****************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"/*\\n\\tMIT License http://www.opensource.org/licenses/mit-license.php\\n\\tAuthor Tobias Koppers @sokra\\n*/\\nmodule.exports = function(updatedModules, renewedModules) {\\n\\tvar unacceptedModules = updatedModules.filter(function(moduleId) {\\n\\t\\treturn renewedModules && renewedModules.indexOf(moduleId) < 0;\\n\\t});\\n\\tvar log = __webpack_require__(/*! ./log */ \\\"../../../../../node_modules/webpack/hot/log.js\\\");\\n\\n\\tif (unacceptedModules.length > 0) {\\n\\t\\tlog(\\n\\t\\t\\t\\\"warning\\\",\\n\\t\\t\\t\\\"[HMR] The following modules couldn't be hot updated: (They would need a full reload!)\\\"\\n\\t\\t);\\n\\t\\tunacceptedModules.forEach(function(moduleId) {\\n\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR]  - \\\" + moduleId);\\n\\t\\t});\\n\\t}\\n\\n\\tif (!renewedModules || renewedModules.length === 0) {\\n\\t\\tlog(\\\"info\\\", \\\"[HMR] Nothing hot updated.\\\");\\n\\t} else {\\n\\t\\tlog(\\\"info\\\", \\\"[HMR] Updated modules:\\\");\\n\\t\\trenewedModules.forEach(function(moduleId) {\\n\\t\\t\\tif (typeof moduleId === \\\"string\\\" && moduleId.indexOf(\\\"!\\\") !== -1) {\\n\\t\\t\\t\\tvar parts = moduleId.split(\\\"!\\\");\\n\\t\\t\\t\\tlog.groupCollapsed(\\\"info\\\", \\\"[HMR]  - \\\" + parts.pop());\\n\\t\\t\\t\\tlog(\\\"info\\\", \\\"[HMR]  - \\\" + moduleId);\\n\\t\\t\\t\\tlog.groupEnd(\\\"info\\\");\\n\\t\\t\\t} else {\\n\\t\\t\\t\\tlog(\\\"info\\\", \\\"[HMR]  - \\\" + moduleId);\\n\\t\\t\\t}\\n\\t\\t});\\n\\t\\tvar numberIds = renewedModules.every(function(moduleId) {\\n\\t\\t\\treturn typeof moduleId === \\\"number\\\";\\n\\t\\t});\\n\\t\\tif (numberIds)\\n\\t\\t\\tlog(\\n\\t\\t\\t\\t\\\"info\\\",\\n\\t\\t\\t\\t\\\"[HMR] Consider using the NamedModulesPlugin for module names.\\\"\\n\\t\\t\\t);\\n\\t}\\n};\\n\\n\\n//# sourceURL=webpack:///(webpack)/hot/log-apply-result.js?\");\n\n/***/ }),\n\n/***/ \"../../../../../node_modules/webpack/hot/log.js\":\n/*!****************************!*\\\n  !*** (webpack)/hot/log.js ***!\n  \\****************************/\n/*! no static exports found */\n/***/ (function(module, exports) {\n\neval(\"var logLevel = \\\"info\\\";\\n\\nfunction dummy() {}\\n\\nfunction shouldLog(level) {\\n\\tvar shouldLog =\\n\\t\\t(logLevel === \\\"info\\\" && level === \\\"info\\\") ||\\n\\t\\t([\\\"info\\\", \\\"warning\\\"].indexOf(logLevel) >= 0 && level === \\\"warning\\\") ||\\n\\t\\t([\\\"info\\\", \\\"warning\\\", \\\"error\\\"].indexOf(logLevel) >= 0 && level === \\\"error\\\");\\n\\treturn shouldLog;\\n}\\n\\nfunction logGroup(logFn) {\\n\\treturn function(level, msg) {\\n\\t\\tif (shouldLog(level)) {\\n\\t\\t\\tlogFn(msg);\\n\\t\\t}\\n\\t};\\n}\\n\\nmodule.exports = function(level, msg) {\\n\\tif (shouldLog(level)) {\\n\\t\\tif (level === \\\"info\\\") {\\n\\t\\t\\tconsole.log(msg);\\n\\t\\t} else if (level === \\\"warning\\\") {\\n\\t\\t\\tconsole.warn(msg);\\n\\t\\t} else if (level === \\\"error\\\") {\\n\\t\\t\\tconsole.error(msg);\\n\\t\\t}\\n\\t}\\n};\\n\\n/* eslint-disable node/no-unsupported-features/node-builtins */\\nvar group = console.group || dummy;\\nvar groupCollapsed = console.groupCollapsed || dummy;\\nvar groupEnd = console.groupEnd || dummy;\\n/* eslint-enable node/no-unsupported-features/node-builtins */\\n\\nmodule.exports.group = logGroup(group);\\n\\nmodule.exports.groupCollapsed = logGroup(groupCollapsed);\\n\\nmodule.exports.groupEnd = logGroup(groupEnd);\\n\\nmodule.exports.setLogLevel = function(level) {\\n\\tlogLevel = level;\\n};\\n\\nmodule.exports.formatError = function(err) {\\n\\tvar message = err.message;\\n\\tvar stack = err.stack;\\n\\tif (!stack) {\\n\\t\\treturn message;\\n\\t} else if (stack.indexOf(message) < 0) {\\n\\t\\treturn message + \\\"\\\\n\\\" + stack;\\n\\t} else {\\n\\t\\treturn stack;\\n\\t}\\n};\\n\\n\\n//# sourceURL=webpack:///(webpack)/hot/log.js?\");\n\n/***/ }),\n\n/***/ \"../../../../../node_modules/webpack/hot/poll.js?300\":\n/*!*********************************!*\\\n  !*** (webpack)/hot/poll.js?300 ***!\n  \\*********************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"/* WEBPACK VAR INJECTION */(function(__resourceQuery) {/*\\n\\tMIT License http://www.opensource.org/licenses/mit-license.php\\n\\tAuthor Tobias Koppers @sokra\\n*/\\n/*globals __resourceQuery */\\nif (true) {\\n\\tvar hotPollInterval = +__resourceQuery.substr(1) || 10 * 60 * 1000;\\n\\tvar log = __webpack_require__(/*! ./log */ \\\"../../../../../node_modules/webpack/hot/log.js\\\");\\n\\n\\tvar checkForUpdate = function checkForUpdate(fromUpdate) {\\n\\t\\tif (module.hot.status() === \\\"idle\\\") {\\n\\t\\t\\tmodule.hot\\n\\t\\t\\t\\t.check(true)\\n\\t\\t\\t\\t.then(function(updatedModules) {\\n\\t\\t\\t\\t\\tif (!updatedModules) {\\n\\t\\t\\t\\t\\t\\tif (fromUpdate) log(\\\"info\\\", \\\"[HMR] Update applied.\\\");\\n\\t\\t\\t\\t\\t\\treturn;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t__webpack_require__(/*! ./log-apply-result */ \\\"../../../../../node_modules/webpack/hot/log-apply-result.js\\\")(updatedModules, updatedModules);\\n\\t\\t\\t\\t\\tcheckForUpdate(true);\\n\\t\\t\\t\\t})\\n\\t\\t\\t\\t.catch(function(err) {\\n\\t\\t\\t\\t\\tvar status = module.hot.status();\\n\\t\\t\\t\\t\\tif ([\\\"abort\\\", \\\"fail\\\"].indexOf(status) >= 0) {\\n\\t\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] Cannot apply update.\\\");\\n\\t\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] \\\" + log.formatError(err));\\n\\t\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] You need to restart the application!\\\");\\n\\t\\t\\t\\t\\t} else {\\n\\t\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] Update failed: \\\" + log.formatError(err));\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t});\\n\\t\\t}\\n\\t};\\n\\tsetInterval(checkForUpdate, hotPollInterval);\\n} else {}\\n\\n/* WEBPACK VAR INJECTION */}.call(this, \\\"?300\\\"))\\n\\n//# sourceURL=webpack:///(webpack)/hot/poll.js?\");\n\n/***/ }),\n\n/***/ \"../../../../../node_modules/webpack/hot/signal.js\":\n/*!*******************************!*\\\n  !*** (webpack)/hot/signal.js ***!\n  \\*******************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"/*\\n\\tMIT License http://www.opensource.org/licenses/mit-license.php\\n\\tAuthor Tobias Koppers @sokra\\n*/\\n/*globals __resourceQuery */\\nif (true) {\\n\\tvar log = __webpack_require__(/*! ./log */ \\\"../../../../../node_modules/webpack/hot/log.js\\\");\\n\\tvar checkForUpdate = function checkForUpdate(fromUpdate) {\\n\\t\\tmodule.hot\\n\\t\\t\\t.check()\\n\\t\\t\\t.then(function(updatedModules) {\\n\\t\\t\\t\\tif (!updatedModules) {\\n\\t\\t\\t\\t\\tif (fromUpdate) log(\\\"info\\\", \\\"[HMR] Update applied.\\\");\\n\\t\\t\\t\\t\\telse log(\\\"warning\\\", \\\"[HMR] Cannot find update.\\\");\\n\\t\\t\\t\\t\\treturn;\\n\\t\\t\\t\\t}\\n\\n\\t\\t\\t\\treturn module.hot\\n\\t\\t\\t\\t\\t.apply({\\n\\t\\t\\t\\t\\t\\tignoreUnaccepted: true,\\n\\t\\t\\t\\t\\t\\tonUnaccepted: function(data) {\\n\\t\\t\\t\\t\\t\\t\\tlog(\\n\\t\\t\\t\\t\\t\\t\\t\\t\\\"warning\\\",\\n\\t\\t\\t\\t\\t\\t\\t\\t\\\"Ignored an update to unaccepted module \\\" +\\n\\t\\t\\t\\t\\t\\t\\t\\t\\tdata.chain.join(\\\" -> \\\")\\n\\t\\t\\t\\t\\t\\t\\t);\\n\\t\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\t})\\n\\t\\t\\t\\t\\t.then(function(renewedModules) {\\n\\t\\t\\t\\t\\t\\t__webpack_require__(/*! ./log-apply-result */ \\\"../../../../../node_modules/webpack/hot/log-apply-result.js\\\")(updatedModules, renewedModules);\\n\\n\\t\\t\\t\\t\\t\\tcheckForUpdate(true);\\n\\t\\t\\t\\t\\t\\treturn null;\\n\\t\\t\\t\\t\\t});\\n\\t\\t\\t})\\n\\t\\t\\t.catch(function(err) {\\n\\t\\t\\t\\tvar status = module.hot.status();\\n\\t\\t\\t\\tif ([\\\"abort\\\", \\\"fail\\\"].indexOf(status) >= 0) {\\n\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] Cannot apply update.\\\");\\n\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] \\\" + log.formatError(err));\\n\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] You need to restart the application!\\\");\\n\\t\\t\\t\\t} else {\\n\\t\\t\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] Update failed: \\\" + (err.stack || err.message));\\n\\t\\t\\t\\t}\\n\\t\\t\\t});\\n\\t};\\n\\n\\tprocess.on( false || \\\"SIGUSR2\\\", function() {\\n\\t\\tif (module.hot.status() !== \\\"idle\\\") {\\n\\t\\t\\tlog(\\n\\t\\t\\t\\t\\\"warning\\\",\\n\\t\\t\\t\\t\\\"[HMR] Got signal but currently in \\\" + module.hot.status() + \\\" state.\\\"\\n\\t\\t\\t);\\n\\t\\t\\tlog(\\\"warning\\\", \\\"[HMR] Need to be in idle state to start hot update.\\\");\\n\\t\\t\\treturn;\\n\\t\\t}\\n\\n\\t\\tcheckForUpdate();\\n\\t});\\n} else {}\\n\\n\\n//# sourceURL=webpack:///(webpack)/hot/signal.js?\");\n\n/***/ }),\n\n/***/ \"../../../dist/monitor-loader.js!../../../dist/monitor-loader.js\":\n/*!***********************************************************************************************************************************************************************************************************************!*\\\n  !*** /home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js ***!\n  \\***********************************************************************************************************************************************************************************************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"(() => {\\n  // Handle hot updates, copied with slight adjustments from webpack/hot/signal.js\\n  if (true) {\\n    const log = (type, msg) => console[type](`sswp> ${msg}`); // TODO don't show this when sending signal instead of message\\n\\n\\n    log('log', 'Handling Hot Module Reloading');\\n\\n    var checkForUpdate = function checkForUpdate(fromUpdate) {\\n      module.hot.check().then(function (updatedModules) {\\n        if (!updatedModules) {\\n          if (fromUpdate) log('log', 'Update applied.');else log('warn', 'Cannot find update.');\\n          return;\\n        }\\n\\n        return module.hot.apply({\\n          ignoreUnaccepted: true,\\n          // TODO probably restart\\n          onUnaccepted: function (data) {\\n            log('warn', '\\\\u0007Ignored an update to unaccepted module ' + data.chain.join(' -> '));\\n          }\\n        }).then(function (renewedModules) {\\n          __webpack_require__(/*! webpack/hot/log-apply-result */ \\\"../../../../../node_modules/webpack/hot/log-apply-result.js\\\")(updatedModules, renewedModules);\\n\\n          checkForUpdate(true);\\n        });\\n      }).catch(function (err) {\\n        var status = module.hot.status();\\n\\n        if (['abort', 'fail'].indexOf(status) >= 0) {\\n          if (process.send) {\\n            process.send('SSWP_HMR_FAIL');\\n          }\\n\\n          log('warn', 'Cannot apply update.');\\n          log('warn', '' + err.stack || err.message);\\n          log('error', 'Quitting process - will reload on next file change\\\\u0007\\\\n\\\\u0007\\\\n\\\\u0007');\\n          process.exit(222);\\n        } else {\\n          log('warn', 'Update failed: ' + err.stack || false);\\n        }\\n      });\\n    };\\n\\n    process.on('message', function (message) {\\n      if (message !== 'SSWP_HMR') return;\\n\\n      if (module.hot.status() !== 'idle') {\\n        log('warn', 'Got signal but currently in ' + module.hot.status() + ' state.');\\n        log('warn', 'Need to be in idle state to start hot update.');\\n        return;\\n      }\\n\\n      checkForUpdate();\\n    });\\n  } // Tell our plugin we loaded all the code without initially crashing\\n\\n\\n  if (process.send) {\\n    process.send('SSWP_LOADED');\\n  }\\n})()\\n\\n//# sourceURL=webpack:////home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js?/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js\");\n\n/***/ }),\n\n/***/ \"./index.js\":\n/*!******************!*\\\n  !*** ./index.js ***!\n  \\******************/\n/*! no static exports found */\n/***/ (function(module, exports) {\n\neval(\"// be slightly async to allow HMR code to send to plugin\\nsetTimeout(() => {\\n  console.log('Test project ran sucessfully');\\n}, 100);\\n\\nmodule.hot.accept();\\n\\n\\n//# sourceURL=webpack:///./index.js?\");\n\n/***/ }),\n\n/***/ 0:\n/*!************************************************************************************************************************************************************************************************************************************************************************!*\\\n  !*** multi . webpack/hot/poll?300 webpack/hot/signal !/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js ***!\n  \\************************************************************************************************************************************************************************************************************************************************************************/\n/*! no static exports found */\n/***/ (function(module, exports, __webpack_require__) {\n\neval(\"__webpack_require__(/*! /home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/tests/cases/test-project-hmr */\\\"./index.js\\\");\\n__webpack_require__(/*! webpack/hot/poll?300 */\\\"../../../../../node_modules/webpack/hot/poll.js?300\\\");\\n__webpack_require__(/*! webpack/hot/signal */\\\"../../../../../node_modules/webpack/hot/signal.js\\\");\\nmodule.exports = __webpack_require__(/*! !!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js */\\\"../../../dist/monitor-loader.js!../../../dist/monitor-loader.js\\\");\\n\\n\\n//# sourceURL=webpack:////home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js?multi_._webpack/hot/poll?300_webpack/hot/signal_!/home/oyvind/Documents/GitHub/razzle/packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js\");\n\n/***/ })\n\n/******/ });"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/test-project.sh",
    "content": "#!/bin/sh\n\n$(npm bin)/webpack-cli --config test/cases/$1/webpack.config.js\n"
  },
  {
    "path": "packages/razzle-start-server-webpack-plugin/tests/utils.js",
    "content": "import fs from 'fs';\nimport path from 'path';\nimport expect from 'expect';\n\nexport function compareDirectory(actual, expected) {\n  const files = fs.readdirSync(expected);\n\n  for (const file of files) {\n    const absoluteFilePath = path.resolve(expected, file);\n\n    const stats = fs.lstatSync(absoluteFilePath);\n\n    if (stats.isDirectory()) {\n      compareDirectory(\n        path.resolve(actual, file),\n        path.resolve(expected, file)\n      );\n    } else if (stats.isFile()) {\n      const content = fs.readFileSync(path.resolve(expected, file), 'utf8');\n      const actualContent = fs.readFileSync(path.resolve(actual, file), 'utf8');\n\n      expect(actualContent).toEqual(content);\n    }\n  }\n}\n\nexport function compareWarning(actual, expectedFile) {\n  if (!fs.existsSync(expectedFile)) {\n    return;\n  }\n\n  // eslint-disable-next-line global-require, import/no-dynamic-require\n  const expected = require(expectedFile);\n\n  expect(actual.trim()).toBe(expected.trim());\n}\n"
  },
  {
    "path": "scripts/bootstrap-examples.js",
    "content": "const yargs = require('yargs');\nconst execa = require('execa');\nconst fs = require('fs-extra');\nconst path = require('path');\n\nconst rootDir =  path.resolve(__dirname, '..');\nconst defaultExample = 'packages/create-razzle-app/templates/default';\n\nlet argv = yargs\n  .usage('$0 [<example>...] [-s|--stage=<stage>] [-c|--copy-only] [-a|--all]')\n  .command({\n    command: '*',\n    builder: yargs => {\n      return yargs\n        .option('c', {\n          alias: 'copy-only',\n          describe: 'only copy',\n          type: 'boolean',\n          default: false,\n        })\n        .option('a', {\n          alias: 'all',\n          describe: 'bootstrap all',\n          type: 'boolean',\n          default: false,\n        })\n        .option('s', {\n          alias: 'stage',\n          describe: 'stage directory',\n          default: false,\n          type: 'string'\n        })\n        .option('d', {\n          alias: 'default',\n          describe: 'bootstrap default example',\n          type: 'boolean',\n          default: false,\n        });\n    },\n    handler: async argv => {\n\n      const packageJsonData = JSON.parse(\n        await fs.readFile(path.join(rootDir, 'package.json'))\n      );\n\n      const packageMetaData = JSON.parse(\n        await fs.readFile(path.join(rootDir, 'package.meta.json'))\n      );\n\n      const examples = (\n        await fs.readdir(path.join(rootDir, 'examples'), {\n          withFileTypes: true,\n        })\n      )\n        .filter(item => item.isDirectory())\n        .map(item => item.name);\n\n      const exampleNamesMap = (argv.all\n        ? [defaultExample].concat(examples)\n        : argv._).map(example => {\n          return [example, example.includes('/') ? example : `examples/${example}`];\n        });\n\n      const exampleDirs = exampleNamesMap.map(example =>example[1]);\n\n      let extraWorkspaceDirs = [];\n      let extraNoHoist = [];\n\n      if (exampleDirs) {\n        const missing = exampleDirs\n          .map(example => {\n            const examplePackageJson = path.join(rootDir, example, 'package.json');\n            if (!fs.existsSync(examplePackageJson)) {\n              return example;\n            }\n            let examplePackageJsonData = {};\n            try {\n              examplePackageJsonData = JSON.parse(fs.readFileSync(examplePackageJson));\n            } catch {\n              console.log(`failed to read json ${examplePackageJson}`);\n              process.exit(1);\n            }\n            const razzle_meta = examplePackageJsonData.razzle_meta||{};\n            extraNoHoist = extraNoHoist.concat((razzle_meta.nohoist||[]).map(nohoist=>`${example}/${nohoist}`))\n            extraWorkspaceDirs = extraWorkspaceDirs\n              .concat([example])\n              .concat(razzle_meta.extraWorkspacedirs || []);\n            return false;\n          })\n          .filter(x => Boolean(x));\n\n          if (missing.length) {\n            console.log(`${missing.join(', ')} not found in ${rootDir}`);\n            process.exit(1);\n          }\n      }\n      packageJsonData.workspaces = packageJsonData.workspaces.concat(extraWorkspaceDirs);\n      packageJsonData.workspaces.nohoist = (packageJsonData.workspaces.nohoist||[]).concat(extraNoHoist);\n\n      const jsonString = JSON.stringify(packageJsonData, null, '  ') + '\\n';\n      if (jsonString) {\n        try {\n          fs.writeFileSync(path.join(rootDir, 'package.json'), jsonString);\n        } catch {\n          console.log(`failed to write json ${item}`);\n        }\n      } else {\n        console.log(`not writing empty json ${item}`);\n      }\n\n      await execa(\"yarn install --no-lockfile\", { shell: true, stdio: 'inherit' });\n      exampleDirs\n        .map(example => {\n          fs.ensureDirSync(path.join(rootDir, example, 'node_modules', '.bin'))\n          fs.writeFileSync(path.join(rootDir, example, 'node_modules', '.bin', 'restrap'), `#!/usr/bin/env node\n'use strict';\nconst execa = require('execa');\nexeca(\"cd ${rootDir} && yarn bootstrap-examples ${example}\", { shell: true, stdio: 'inherit' });`);\n      fs.chmodSync(path.join(rootDir, example, 'node_modules', '.bin', 'restrap'), 0o775)\n        })\n\n\n      packageJsonData.workspaces = packageMetaData.workspaces;\n      const resetJsonString = JSON.stringify(packageJsonData, null, '  ') + '\\n';\n      if (resetJsonString) {\n        try {\n          fs.writeFileSync(path.join(rootDir, 'package.json'), resetJsonString);\n        } catch {\n          console.log(`failed to write json ${item}`);\n        }\n      } else {\n        console.log(`not writing empty json ${item}`);\n      }\n\n    },\n  })\n  .help().argv;\n"
  },
  {
    "path": "scripts/build-docs.js",
    "content": "'use strict';\n\nconst execa = require('execa');\nconst util = require('util');\nconst glob = util.promisify(require('glob'));\nconst updateSection = require('update-section');\nconst transform = require('doctoc/lib/transform');\nconst fs = require('fs-extra');\nconst path = require('path');\n\nconst rootDir = process.cwd();\n\nvar startDocToc = '<!-- START doctoc generated instructions please keep comment here to allow auto update -->\\n' +\n            '<!-- DON\\'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->'\n  , endDocToc   = '<!-- END doctoc generated instructions please keep comment here to allow auto update -->'\n\nvar startContributors = '<!-- START contributors generated instructions please keep comment here to allow auto update -->\\n' +\n            '<!-- DON\\'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->'\n  , endContributors   = '<!-- END contributors generated instructions please keep comment here to allow auto update -->'\n\nfunction matchesStartDocToc(line) {\n  return (/<!-- START doctoc /).test(line);\n}\n\nfunction matchesEndDocToc(line) {\n  return (/<!-- END doctoc /).test(line);\n}\n\nfunction matchesStartContributors(line) {\n  return (/<!-- START contributors /).test(line);\n}\n\nfunction matchesEndContributors(line) {\n  return (/<!-- END contributors /).test(line);\n}\n\n\nfunction updatePackageJson(packageJson, branch, dependencyVersions, version) {\n  fs.pathExists(packageJson).then(async exists => {\n    if (exists) {\n      const packageJsonData = JSON.parse(await fs.readFile(packageJson));\n      const newPackageJsonData = [\"dependencies\", \"devDependencies\", \"peerDependencies\"].reduce((acc, depType) => {\n        if (acc[depType]) {\n          acc[depType] = Object.keys(acc[depType]).reduce((depsAcc, dep) => {\n            if (dependencyVersions[dep]) {\n              depsAcc[dep] = dependencyVersions[dep];\n            }\n\n            return depsAcc;\n          }, acc[depType]);\n        }\n        return acc;\n      }, packageJsonData);\n\n      packageJsonData['version'] = version;\n\n      console.log(JSON.stringify(newPackageJsonData, null, '  '));\n      return fs.writeFile(packageJson, JSON.stringify(newPackageJsonData, null, '  ')+'\\n');\n    }\n  })\n}\n\nconst tocDocs = [\n  path.join(rootDir, '.github', 'CODE_OF_CONDUCT.md'),\n  path.join(rootDir, '.github', 'CONTRIBUTING.md'),\n];\n\nconst contributorsDocs = [\n  path.join(rootDir, 'packages', 'razzle', 'README.md'),\n];\n\nfor (let tocDoc of tocDocs) {\n  fs.readFile(tocDoc).then(data=>{\n    return {\n      headings: data.toString().replace(/^((?!#.+$).*\\n)/gm, ''),\n      document: data.toString()\n    };\n  }).then(info=>{\n    const newToc = transform(info.headings).data.replace(/^((?!\\s*\\-.+$).*\\n)/gm, '');\n    const newDoc = updateSection(info.document, startDocToc+newToc+endDocToc, matchesStartDocToc, matchesEndDocToc);\n    return fs.writeFile(tocDoc, newDoc);\n  }).catch(err=>{\n    console.log(err)\n  })\n}\n\nfor (let contributorsDoc of contributorsDocs) {\n  fs.readFile(contributorsDoc).then(data=>{\n    const allContributors = JSON.parse(fs.readFileSync(path.join(rootDir, '.all-contributorsrc')));\n    const contributors = '\\n' +\n        allContributors.contributors.map(contributor=>`- **${contributor.name}** - [@${contributor.login}](${contributor.profile})\\n` +\n        `  - **Contributions:** ` + contributor.contributions.join(', ') ).join('\\n')\n      + '\\n';\n    return {\n      contributors: contributors,\n      document: data.toString()\n    };\n  }).then(info=>{\n    console.log(info.contributors);\n    const newDoc = updateSection(info.document, startContributors+info.contributors+endContributors, matchesStartContributors, matchesEndContributors);\n    return fs.writeFile(contributorsDoc, newDoc);\n  }).catch(err=>{\n    console.log(err)\n  })\n}\n\nexeca('git', ['rev-parse', '--abbrev-ref', 'HEAD'], {shell: true}).then(async ({stdout}) => {\n  const branch = stdout.split('\\n')[0];\n  const lernaJson = JSON.parse(await fs.readFile(path.join(rootDir, 'lerna.json')));\n  const internalPeerDependencyVersions = JSON.parse(await fs.readFile(\n    path.join(rootDir, 'scripts', 'internalPeerDependencyVersions.json')));\n\n  const packageJsons = (await Promise.all(lernaJson.packages.map(item =>\n    glob(item+'/package.json'))\n  )).flat();\n\n  const internalPackages = Object.fromEntries((await Promise.all(packageJsons.map(async item =>\n    JSON.parse(await fs.readFile(item))\n  ))).map(item=>([item.name, lernaJson.version])));\n\n  const dependencyVersions = {...internalPeerDependencyVersions, ...internalPackages};\n\n  const releaseBranches = lernaJson.command.publish.allowBranch;\n  const preReleaseBranches = releaseBranches.filter(b=>b!=='master');\n\n  packageJsons.map(item=>updatePackageJson(item, branch, dependencyVersions, lernaJson.version))\n\n  const docSite = branch == 'master' ? 'https://razzlejs.org/' : `https://razzle-git-${branch}.jared.vercel.app/`;\n  const readmePath = path.join(rootDir, 'packages', 'razzle', 'README.md');\n  fs.readFile(readmePath).then(content => {\n    const updated = content.toString().replace(/https:\\/\\/razzle.*?(\\.org|\\.app)\\//g, docSite);\n    return fs.writeFile(readmePath, updated);\n  })\n  const npxCmd = 'npx create-razzle-app' + ( preReleaseBranches.includes(branch) ? `@${branch}` : '');\n  const startedPath = path.join(rootDir, 'website/pages/getting-started.mdx');\n  fs.readFile(startedPath).then(content => {\n    const updated = content.toString().replace(/npx create-razzle-app@?[^\\s]*/g, npxCmd);\n    return fs.writeFile(startedPath, updated);\n  })\n});\n"
  },
  {
    "path": "scripts/exampleDependencyVersions.json",
    "content": "{\n  \"express\": \"^4.17.1\",\n  \"react\": \"^17.0.1\",\n  \"react-dom\": \"^17.0.1\",\n  \"serve\": \"^11.3.2\",\n  \"mini-css-extract-plugin\": \"^0.9.0\",\n  \"webpack-dev-server\": \"^3.11.2\"\n}\n"
  },
  {
    "path": "scripts/internalPeerDependencyVersions.json",
    "content": "{\n  \"webpack-dev-server\": \"^3.11.0\",\n  \"mini-css-extract-plugin\": \"^0.9.0\",\n  \"webpack\": \"~4||~5\"\n}\n"
  },
  {
    "path": "scripts/new-example.js",
    "content": "const yargs = require('yargs');\nconst execa = require('execa');\nconst fs = require('fs-extra');\nconst path = require('path');\n\nconst rootDir = process.cwd();\n\nlet argv = yargs\n.usage(\n  '$0 <from> <to> [-b|--bootstrap]')\n.command({\n  command: '*',\n  builder: yargs => {\n    return yargs\n      .option('b', {\n        alias: 'bootstrap',\n        describe: 'bootstrap example',\n        type: 'boolean',\n        default: true,\n      });\n  },\n  handler: async argv => {\n    console.log(argv);\n    const templatePath = path.join(rootDir, `examples/${argv._[0]}`);\n    const projectPath = path.join(rootDir, `examples/${argv._[1]}`);\n    const relativePath = `examples/${argv._[1]}`;\n    fs.copy(templatePath, projectPath)\n    .then(async function() {\n\n          const packageJsonData = JSON.parse(\n            await fs.readFile(path.join(projectPath, 'package.json'))\n          );\n          packageJsonData.name = `razzle-examples-${argv._[1]}`\n          const jsonString = JSON.stringify(packageJsonData, null, '  ') + '\\n';\n            if (jsonString) {\n              try {\n                fs.writeFileSync(path.join(projectPath, 'package.json'), jsonString);\n              } catch {\n                console.log(`failed to write json ${item}`);\n              }\n            } else {\n              console.log(`not writing empty json ${item}`);\n            }\n            if (argv.bootstrap) {\n              execa.sync(`yarn`, ['bootstrap-examples', relativePath],\n                { stdio: 'inherit', cwd: rootDir })\n            }\n            console.log(`Type\\ncd ${relativePath}\\nTo work on the new example`);\n\n    })\n  },\n})\n.help().argv;\n"
  },
  {
    "path": "scripts/publish-all.js",
    "content": "const yargs = require('yargs');\nconst execa = require('execa');\nconst fs = require('fs-extra');\nconst path = require('path');\nconst semver = require('semver');\nconst inquirer = require('inquirer');\nconst util = require('util');\nconst glob = util.promisify(require('glob'));\n\nconst rootDir = process.cwd();\n\nlet argv = yargs\n.usage(\n  '$0 [-p|--preid] [-s|--semver-keyword] [-t|--tag] [-c|--commit] [-u|--untag] [--push] [--noninteractive]'\n)\n.command({\n  command: '*',\n  builder: yargs => {\n    return yargs\n    .option('p', {\n      alias: 'preid',\n      describe: 'the npm release id',\n      default: 'latest',\n      type: 'string',\n    })\n    .option('s', {\n      alias: 'semver-keyword',\n      describe: 'the semver keyword',\n      default: 'patch',\n      type: 'string',\n    })\n    .option('t', {\n      alias: 'tag',\n      describe: 'add git tag',\n      type: 'boolean',\n      default: false,\n    })\n    .option('u', {\n      alias: 'untag',\n      describe: 'untag current version',\n      type: 'boolean',\n      default: false,\n    })\n    .option('c', {\n      alias: 'commit',\n      describe: 'add git commit',\n      type: 'boolean',\n      default: false,\n    })\n    .option('pu', {\n      alias: 'push',\n      describe: 'push changes and tag',\n      type: 'boolean',\n      default: false,\n    })\n    .option('i', {\n      alias: 'noninteractive',\n      describe: `don't ask for confirmation`,\n      type: 'boolean',\n      default: false,\n    });\n  },\n  handler: async argv => {\n\n    const preId = argv.preid;\n    const semverKeyword =\n    preId !== 'latest'\n    ? argv.semverKeyword == 'patch'\n    ? 'prerelease'\n    : argv.semverKeyword\n    : argv.semverKeyword;\n\n    let packageJsonData = JSON.parse(\n      fs.readFileSync(path.join(rootDir, 'package.json'))\n    );\n\n    if (!argv.untag) {\n      if (preId !== 'latest') {\n        packageJsonData.version = semver.inc(\n          packageJsonData.version,\n          semverKeyword,\n          preId\n        );\n      } else {\n        packageJsonData.version = semver.inc(\n          packageJsonData.version,\n          semverKeyword\n        );\n      }\n\n      if (!argv.noninteractive) {\n        await inquirer.prompt([\n          {\n            type: 'confirm',\n            name: 'publish',\n            message: `Are you sure you want to release v${packageJsonData.version}?`,\n          }\n        ]).then((answers) => {\n          if (answers.publish === false) {\n            process.exit(1);\n          }\n        });\n\n\n      }\n\n      const examplesGlob = 'examples/*/';\n\n      const examples = await glob(examplesGlob);\n\n      const packageJsonGlobs = packageJsonData.workspaces.concat(\n        'examples/*'\n      );\n\n      const packageJsons = (\n        await Promise.all(\n          packageJsonGlobs.map(item => glob(item + '/package.json'))\n        )\n      )\n      .flat()\n      .concat(['lerna.json', 'package.json', 'packages/create-razzle-app/templates/default/package.json']);\n\n      const packageVersions = packageJsons\n      .map(item => {\n        try {\n          return JSON.parse(fs.readFileSync(item));\n        } catch {\n          console.log(`failed to parse json ${item}`);\n        }\n      })\n      .map(item => [\n        item.name || 'it-is-lerna',\n        item.version,\n        packageJsonData.version,\n      ]);\n\n      const packageNames = packageVersions.map(item => item[0]);\n      const commitCmd = `git commit -a -m \"chore: bumped versions to ${packageJsonData.version}\"`;\n      const tagCmd = `git tag -am \"v${packageJsonData.version}\" v${packageJsonData.version}`;\n      const tagRemoteCmd = `git push origin refs/tags/v${packageJsonData.version}`;\n      const unTagCmd = `git tag -d v${packageJsonData.version}`;\n      const unTagRemoteCmd = `git push origin :refs/tags/v${packageJsonData.version}`;\n      const pushCmd = `git push origin`;\n      const pullCmd = `git pull origin`;\n\n      const officialExamples = 'module.exports = '\n      + JSON.stringify(\n        examples.map(example=>path.basename(example)\n      ), null, '  ') + ';\\n';\n\n      await fs.writeFile(\n        'packages/create-razzle-app/lib/officialExamples.js',\n        officialExamples);\n        console.log(\n          Object.fromEntries(packageVersions.map(item => [item[0], item[2]]))\n        );\n        packageJsons.map(item => {\n          let json = JSON.parse(fs.readFileSync(item));\n          json.version = packageJsonData.version;\n          let newJson = [\n            'dependencies',\n            'devDependencies',\n            'peerDependencies',\n          ].reduce((acc, depType) => {\n            if (acc[depType]) {\n              acc[depType] = Object.keys(acc[depType]).reduce(\n                (depsAcc, dep) => {\n                  if (packageNames.includes(dep)) {\n                    depsAcc[dep] = packageJsonData.version;\n                  }\n\n                  return depsAcc;\n                },\n                acc[depType]\n              );\n            }\n            return acc;\n          }, json);\n          console.log(newJson);\n          const jsonString = JSON.stringify(json, null, '  ') + '\\n';\n          if (jsonString) {\n            try {\n              return fs.writeFileSync(item, jsonString);\n            } catch {\n              console.log(`failed to write json ${item}`);\n            }\n          } else {\n            console.log(`not writing empty json ${item}`);\n          }\n        });\n\n        if (argv.commit) {\n          console.log(`\\nRunning: '${commitCmd}'`);\n          await execa(commitCmd, { shell: true, stdio: 'inherit' });\n        } else {\n          console.log(`\\nNot running: '${commitCmd}'`);\n          console.log(`Run '${commitCmd}' to commit.`);\n        }\n        if (argv.commit && argv.tag) {\n          console.log(`\\nRunning: '${tagCmd}'`);\n          console.log(`Run '${unTagCmd}' to untag.`);\n          await execa(tagCmd, { shell: true, stdio: 'inherit' });\n          if (argv.push) {\n            console.log(`\\nRunning: '${pushCmd}'`);\n            await execa(pushCmd, { shell: true, stdio: 'inherit' });\n            console.log(`\\nRunning: '${tagRemoteCmd}'`);\n            await execa(tagRemoteCmd, { shell: true, stdio: 'inherit' });\n            console.log(`Run '${unTagRemoteCmd}' to untag in remote.`);\n            console.log(`\\nRunning: '${pullCmd}'`);\n            await execa(pullCmd, { shell: true, stdio: 'inherit' });\n          } else {\n            console.log(`\\nNot running: '${pushCmd}'`);\n            console.log(`Run '${pushCmd}' to push to origin.`);\n            console.log(`\\nNot running: '${tagRemoteCmd}'`);\n            console.log(`Run '${tagRemoteCmd}' to tag in remote.`);\n          }\n        } else {\n          console.log(`\\nNot running: '${tagCmd}'`);\n          console.log(`Run '${tagCmd}' to tag.`);\n          console.log(`Run '${tagRemoteCmd}' to tag in remote.`);\n        }\n        console.log('Check that everything is ok and push to origin');\n      } else {\n        console.log(`\\nRunning: '${unTagCmd}'`);\n        console.log(`Run '${unTagRemoteCmd}' to untag in remote.`);\n        await execa(unTagCmd, {\n          shell: true,\n          stdio: 'inherit',\n        });\n      }\n    },\n  })\n  .help().argv;\n"
  },
  {
    "path": "scripts/publish-to-npm.js",
    "content": "'use strict';\nconst yargs = require('yargs');\nconst execa = require('execa');\nconst util = require('util');\nconst glob = util.promisify(require('glob'));\nconst fs = require('fs-extra');\nconst path = require('path');\n\nconst rootDir = process.cwd();\n\nlet argv = yargs\n  .usage(\n    '$0 [-t|--tag]'\n  )\n  .command({\n    command: '*',\n    builder: yargs => {\n      return yargs\n        .option('t', {\n          alias: 'tag',\n          describe: 'the npm dist-tag',\n          default: 'latest',\n          type: 'string',\n        });\n    },\n    handler: async argv => {\n\n\t\t\tconst packageJsonData = JSON.parse(\n\t\t\t\tawait fs.readFile(path.join(rootDir, 'package.json'))\n\t\t\t);\n\n\t\t\tconst packageDirs = (\n\t\t\t\tawait Promise.all(packageJsonData.workspaces.map((item) => glob(item)))\n\t\t\t).flat();\n\n      // await execa(`npm profile get --registry=https://registry.npmjs.org/ `, { shell: true, stdio: 'inherit' });\n\n\t\t\tawait Promise.all(packageDirs.map((item) => {\n\t\t\t\tconst publishCmd = `npm publish --tag ${argv.tag} --registry=https://registry.npmjs.org/ --access public`;\n\t\t\t\treturn execa(publishCmd, { shell: true, stdio: 'inherit', cwd: path.join(rootDir, item) });\n\t\t\t}))\n\n    },\n  })\n  .help().argv;\n"
  },
  {
    "path": "scripts/release-notes.js",
    "content": "const got = require('got');\n\nasync function main() {\n  const res = await got(\n    'https://api.github.com/repos/jaredpalmer/razzle/releases',\n    {\n      responseType: 'json',\n    }\n  );\n\n  const allReleases = res.body\n    .map(({ id, tag_name, created_at, body }) => ({\n      id,\n      tag_name,\n      created_at,\n      body: body\n        .replace(/\\r\\n/g, '\\n')\n        .split('\\n')\n        .map(e => e.trim()),\n    }))\n    .sort((a, b) => a.created_at.localeCompare(b.created_at));\n\n  const targetVersion = /v(.*?-)/\n    .exec(allReleases.filter(e => /v.*?-/.exec(e.tag_name)).pop().tag_name)\n    .pop();\n\n  const releases = allReleases.filter(v => v.tag_name.includes(targetVersion));\n\n  const lineItems = {\n    '### Minor Changes': [],\n    '### Patches': [],\n    '### Credits': [],\n  };\n\n  Object.keys(lineItems).forEach(header => {\n    releases.forEach(release => {\n      const headerIndex = release.body.indexOf(header);\n      if (!~headerIndex) return;\n\n      let headerLastIndex = release.body\n        .slice(headerIndex + 1)\n        .findIndex(v => v.startsWith('###'));\n\n      if (~headerLastIndex) {\n        headerLastIndex = headerLastIndex + headerIndex;\n      } else {\n        headerLastIndex = release.body.length - 1;\n      }\n\n      if (header === '### Credits') {\n        release.body.slice(headerIndex, headerLastIndex + 1).forEach(e => {\n          const re = /@[a-z\\d](?:[a-z\\d]|-(?=[a-z\\d])){0,38}/gi;\n          let m;\n          do {\n            m = re.exec(e);\n            if (m) {\n              lineItems[header].push(m.pop());\n            }\n          } while (m);\n        });\n      } else {\n        release.body.slice(headerIndex, headerLastIndex + 1).forEach(e => {\n          if (!e.startsWith('-')) {\n            return;\n          }\n\n          lineItems[header].push(e);\n        });\n      }\n    });\n  });\n\n  let finalMessage = [];\n  Object.keys(lineItems).forEach(header => {\n    let items = lineItems[header];\n    if (!items.length) {\n      return;\n    }\n\n    finalMessage.push(header);\n    finalMessage.push('');\n\n    if (header === '### Credits') {\n      items = [...new Set(items)];\n      let creditsMessage = `Huge thanks to `;\n      if (items.length > 1) {\n        creditsMessage += items.slice(0, items.length - 1).join(`, `);\n        creditsMessage += `, and `;\n      }\n\n      creditsMessage += items[items.length - 1];\n      creditsMessage += ` for helping!`;\n\n      finalMessage.push(creditsMessage);\n    } else {\n      items.forEach(e => finalMessage.push(e));\n    }\n\n    finalMessage.push('');\n  });\n\n  const firstVersion = releases[0].tag_name;\n  const lastVersion = releases[releases.length - 1].tag_name;\n\n  // Add compare link\n  finalMessage.push(\n    `https://github.com/jaredpalmer/razzle/compare/${firstVersion}...${lastVersion}`\n  );\n\n  return {\n    version: targetVersion.slice(0, -1),\n    firstVersion,\n    lastVersion,\n    content: finalMessage.join('\\n'),\n  };\n}\nPromise.resolve()\n  .then(main)\n  .then(notes => console.log(String(notes.content)));\n"
  },
  {
    "path": "scripts/try-example.js",
    "content": "const yargs = require('yargs');\nconst execa = require('execa');\nconst fs = require('fs-extra');\nconst path = require('path');\nconst util = require('../test/fixtures/util');\n\nlet argv = yargs\n.usage('$0 <example> <stage> [-c|--copy-only]')\n.command({\n  command: '*',\n  builder: (yargs) => {\n    return yargs.option('c', {\n      alias: 'copy-only',\n      describe: 'only copy',\n      default: false\n    })\n  },\n  handler: argv => {\n    const exampleName = argv._[0];\n    const stageName = argv._[1] || 'example';\n    console.log(`Setting up ${exampleName} with yalc as ${stageName}`)\n    util.yalcSetupStageWithExample(\n      stageName,\n      exampleName\n    );\n  }\n})\n.help()\n.argv\n"
  },
  {
    "path": "scripts/update-examples.js",
    "content": "'use strict';\n\nconst execa = require('execa');\nconst util = require('util');\nconst glob = util.promisify(require('glob'));\nconst updateSection = require('update-section');\nconst fs = require('fs-extra');\nconst path = require('path');\n\nconst rootDir = process.cwd();\n\nvar startInstall =\n    '<!-- START install generated instructions please keep comment here to allow auto update -->\\n' +\n    \"<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->\",\n  endInstall =\n    '<!-- END install generated instructions please keep comment here to allow auto update -->';\n\nfunction matchesStartInstall(line) {\n  return /<!-- START install /.test(line);\n}\n\nfunction matchesEndInstall(line) {\n  return /<!-- END install /.test(line);\n}\n\nfunction updateInstallSection(\n  example,\n  readme,\n  branch,\n  releaseBranches,\n  preReleaseBranches\n) {\n  fs.readFile(readme).then(content => {\n    let update = '';\n    if (releaseBranches.includes(branch)) {\n      const preReleaseBranch = preReleaseBranches.includes(branch);\n      const tag = preReleaseBranch ? `@${branch}` : '';\n      const info = preReleaseBranch\n        ? `\\nThis is the ${branch} release documentation for this example\\n\\n`\n        : '';\n      update = `${info}Create and start the example:\\n\\n`;\n      update += `\\`\\`\\`bash\\nnpx create-razzle-app${tag} --example ${example} ${example}\\n\\n`;\n      update += `cd ${example}\\nyarn start\\n\\`\\`\\`\\n`;\n    } else {\n      update =\n        '\\nThis is the development documentation for this example\\n\\nClone the `razzle` repository:\\n\\n';\n      update += `\\`\\`\\`bash\\ngit clone https://github.com/jaredpalmer/razzle.git\\n\\n`;\n      update += `cd razzle\\nyarn install --frozen-lockfile --ignore-engines --network-timeout 30000\\n\\`\\`\\`\\n\\n`;\n      update += `Create and start the example:\\n\\n`;\n      update += `\\`\\`\\`bash\\nnode -e 'require(\"./test/fixtures/util\").setupStageWithExample(\"${example}\", \"${example}\", symlink=false, yarnlink=true, install=true, test=false);'\\n\\n`;\n      update += `cd ${example}\\nyarn start\\n\\`\\`\\`\\n`;\n    }\n    const contentString = content.toString();\n    if (matchesStartInstall(contentString)) {\n      const updated = updateSection(\n        contentString,\n        startInstall + update + endInstall,\n        matchesStartInstall,\n        matchesEndInstall\n      );\n      return fs.writeFile(readme, updated);\n    }\n  });\n}\n\nfunction updatePackageJson(\n  example,\n  packageJson,\n  branch,\n  dependencyVersions,\n) {\n  fs.pathExists(packageJson).then(async exists => {\n    if (exists) {\n      const packageJsonData = JSON.parse(await fs.readFile(packageJson));\n      const newPackageJsonData = ['dependencies', 'devDependencies'].reduce(\n        (acc, depType) => {\n          if (acc[depType]) {\n            acc[depType] = Object.keys(acc[depType]).reduce((depsAcc, dep) => {\n              if (dependencyVersions[dep]) {\n                depsAcc[dep] = dependencyVersions[dep];\n              }\n\n              return depsAcc;\n            }, acc[depType]);\n          }\n          return acc;\n        },\n        packageJsonData\n      );\n\n\n      return fs.writeFile(\n        packageJson,\n        JSON.stringify(newPackageJsonData, null, '  ') + \"\\n\"\n      );\n    }\n  });\n}\n\nexeca('git', ['rev-parse', '--abbrev-ref', 'HEAD'], { shell: true }).then(\n  async ({ stdout }) => {\n    const branch = stdout.split('\\n')[0];\n    const lernaJson = JSON.parse(\n      await fs.readFile(path.join(rootDir, 'lerna.json'))\n    );\n\n    const exampleDependencyVersions = JSON.parse(\n      await fs.readFile(\n        path.join(rootDir, 'scripts', 'exampleDependencyVersions.json')\n      )\n    );\n\n    const packageJsons = (\n      await Promise.all(\n        lernaJson.packages.map(item => glob(item + '/package.json'))\n      )\n    ).flat();\n\n    const packageVersions = Object.fromEntries(\n      (\n        await Promise.all(\n          packageJsons.map(async item => JSON.parse(await fs.readFile(item)))\n        )\n      ).map(item => [item.name, item.version])\n    );\n\n    const dependencyVersions = {\n      ...exampleDependencyVersions,\n      ...packageVersions,\n    };\n\n    const releaseBranches = lernaJson.command.publish.allowBranch;\n    const preReleaseBranches = releaseBranches.filter(b => b !== 'master');\n\n    fs.readdir(path.join(rootDir, 'examples'), { withFileTypes: true }).then(\n      items => {\n        return items\n          .filter(item => item.isDirectory())\n          .map(item => {\n            updateInstallSection(\n              item.name,\n              path.join(rootDir, 'examples', item.name, 'README.md'),\n              branch,\n              releaseBranches,\n              preReleaseBranches\n            );\n            updatePackageJson(\n              item.name,\n              path.join(rootDir, 'examples', item.name, 'package.json'),\n              branch,\n              dependencyVersions\n            );\n          });\n      }\n    );\n\n    updatePackageJson(\n      'default',\n      path.join(\n        rootDir,\n        'packages',\n        'create-razzle-app',\n        'templates',\n        'default',\n        'package.json'\n      ),\n      branch,\n      dependencyVersions\n    );\n\n    const loadExamplePath =\n      'packages/create-razzle-app/lib/utils/load-example.js';\n    fs.readFile(loadExamplePath).then(content => {\n      const updated = content\n        .toString()\n        .replace(\n          /(?=const branch.*?yarn update-examples)(.*?)'.*?'/,\n          \"$1'\" + branch + \"'\"\n        );\n      return fs.writeFile(loadExamplePath, updated);\n    });\n\n    const installExamplePath = 'packages/create-razzle-app/lib/index.js';\n    fs.readFile(installExamplePath).then(content => {\n      const updated = content\n        .toString()\n        .replace(\n          /(?=const branch.*?yarn update-examples)(.*?)'.*?'/,\n          \"$1'\" + branch + \"'\"\n        );\n      return fs.writeFile(installExamplePath, updated);\n    });\n  }\n);\n"
  },
  {
    "path": "scripts/yalc-publish-all.js",
    "content": "const util = require('../test/fixtures/util');\n\nutil.yalcPublishPushAll();\n"
  },
  {
    "path": "test/e2e/create-razzle-app.test.js",
    "content": "/**\n * @jest-environment node\n */\n'use strict';\n\nconst shell = require('shelljs');\nconst fs = require('fs');\n\nconst util = require('../fixtures/util');\nconst path = require(\"path\");\n\nconst silent = !process.env.NOISY_TESTS;\nshell.config.verbose = !silent;\nshell.config.silent = silent;\n\nconst stageName = 'stage-cra';\nconst craPath = path.join('../node_modules/.bin/create-razzle-app');\nconst testPackage = 'razzle-example-basic';\nconst testRepo = 'https://github.com/fivethreeo/razzle-example-basic';\n\nconst directoryExists = (dirPath) => fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();\nconst fileExists = (dirPath) => fs.existsSync(dirPath);\n\ndescribe('create-razzle-app', () => {\n  beforeAll(() => {\n    util.teardownStage(stageName);\n  });\n\n  it('should create app from default template', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --no-install`\n    );\n    expect(directoryExists('cra/node_modules')).toBeFalsy();\n\n    expect(fileExists('cra/yarn.lock')).toBeFalsy();\n\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n  //\n  // it('should create app from default template and install packages', () => {\n  //   util.setupStage(stageName);\n  //   const output = shell.exec(\n  //     `${craPath} cra`--verbose\n  //   );\n  //   expect(directoryExists('cra/node_modules')).toBeTruthy();\n  //\n  //   expect(fileExists('cra/yarn.lock')).toBeTruthy();\n  //\n  //   expect(fileExists('cra/package.json')).toBeTruthy();\n  //\n  //   expect(directoryExists('cra/src')).toBeTruthy();\n  //   expect(fileExists('cra/src/index.js')).toBeTruthy();\n  //\n  //   expect(output.code).toBe(0);\n  // });\n\n  it('should create app from official example', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example basic --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from npm example', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example ${testPackage} --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from npm example at tag', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example ${testPackage}@latest --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from npm example in subdir', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example ${testPackage}:subexample --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from github example', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example ${testRepo} --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from github example at branch', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example ${testRepo}@master --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from github example in subdir', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example ${testRepo}:subexample --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from git example', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example git+${testRepo}.git --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from git example at branch', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example git+${testRepo}.git@master --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from git example in subdir', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example git+${testRepo}.git:subexample --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should create app from file example', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${craPath} cra --verbose --example file:../examples/basic --no-install`\n    );\n    expect(fileExists('cra/package.json')).toBeTruthy();\n\n    expect(directoryExists('cra/src')).toBeTruthy();\n    expect(fileExists('cra/src/index.js')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should exit with an error code when no project name is supplied', () => {\n    util.setupStage(stageName);\n    const output = shell.exec(\n      `${path.join(craPath)}`, {\n      silent: true,\n    });\n\n    expect(output.code).toBe(1);\n  });\n\n  afterEach(() => {\n    util.teardownStage(stageName);\n  });\n});\n"
  },
  {
    "path": "test/e2e/razzle-build.test.js",
    "content": "/**\n * @jest-environment node\n */\n'use strict';\n\nconst path = require('path');\nconst fs = require('fs-extra');\nconst shell = require('shelljs');\nconst util = require('../fixtures/util');\n\nconst silent = !process.env.NOISY_TESTS;\nshell.config.verbose = !silent;\nshell.config.silent = silent;\n\nprocess.env.RAZZLE_NONINTERACTIVE = \"true\";\n\nconst stageName = 'stage-build';\n\nconst directoryExists = (dirPath) => fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();\nconst fileExists = (dirPath) => fs.existsSync(dirPath);\n\ndescribe('razzle build', () => {\n  beforeAll(() => {\n    util.teardownStage(stageName);\n  });\n\n  it('should compile files into a build directory', () => {\n    util.setupStageWithFixture(stageName, 'build-default');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    // Create server.js\n    expect(fileExists('build/server.js')).toBeTruthy();\n    expect(fileExists('build/server.js.map')).toBeTruthy();\n\n    // Should copy static assets from src/public directory\n    expect(fileExists('build/public/nothing.txt')).toBeTruthy();\n\n    // Should compile client bundle to js directory\n    expect(directoryExists('build/public/static/js')).toBeTruthy();\n    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);\n    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);\n\n    // should compile client image assets to media directory\n    expect(directoryExists('build/public/static/media')).toBeTruthy();\n    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);\n\n    // should compile client css to css directory\n    expect(directoryExists('build/public/static/css')).toBeTruthy();\n    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile files with a custom .babelrc', () => {\n    util.setupStageWithFixture(stageName, 'build-with-babelrc');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    // Create server.js\n    expect(fileExists('build/server.js')).toBeTruthy();\n    expect(fileExists('build/server.js.map')).toBeTruthy();\n\n    // Should copy static assets from src/public directory\n    expect(fileExists('build/public/nothing.txt')).toBeTruthy();\n\n    // Should compile client bundle to js directory\n    expect(directoryExists('build/public/static/js')).toBeTruthy();\n    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);\n    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);\n\n    // should compile client image assets to media directory\n    expect(directoryExists('build/public/static/media')).toBeTruthy();\n    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);\n\n    // should compile client css to css directory\n    expect(directoryExists('build/public/static/css')).toBeTruthy();\n    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile files with a custom razzle.config.js', () => {\n    util.setupStageWithFixture(stageName, 'build-with-custom-config');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    // We modify the default server output filename -> custom.js\n    expect(fileExists('build/custom.js')).toBeTruthy();\n    expect(fileExists('build/custom.js.map')).toBeTruthy();\n\n    // Should compile client bundle to js directory\n    expect(directoryExists('build/public/static/js')).toBeTruthy();\n    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);\n    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);\n\n    // should compile client image assets to media directory\n    expect(directoryExists('build/public/static/media')).toBeTruthy();\n    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);\n\n    // should compile client css to css directory\n    expect(directoryExists('build/public/static/css')).toBeTruthy();\n    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile files with a plugin in razzle.config.js', () => {\n    util.setupStageWithExample(stageName, 'with-scss');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    // Should compile client bundle to js directory\n    expect(directoryExists('build/public/static/js')).toBeTruthy();\n    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);\n    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);\n\n    // should compile client css to css directory\n    expect(directoryExists('build/public/static/css')).toBeTruthy();\n    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile files in spa mode', () => {\n    util.setupStageWithFixture(stageName, 'build-default-spa');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    // Create index.html\n    expect(fileExists('build/public/index.html')).toBeTruthy();\n\n    // SHOULD NOT Create server.js\n    expect(fileExists('build/server.js')).toBeFalsy();\n    expect(fileExists('build/server.js.map')).toBeFalsy();\n\n    // Should copy static assets from src/public directory\n    expect(fileExists('build/public/nothing.txt')).toBeTruthy();\n\n    // Should compile client bundle to js directory\n    expect(directoryExists('build/public/static/js')).toBeTruthy();\n    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);\n    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);\n\n    // should compile client image assets to media directory\n    expect(directoryExists('build/public/static/media')).toBeTruthy();\n    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);\n\n    // should compile client css to css directory\n    expect(directoryExists('build/public/static/css')).toBeTruthy();\n    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile with plugin options', () => {\n    const stagePath = util.setupStageWithExample(stageName, 'with-scss-options');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    const assets = JSON.parse(fs.readFileSync(path.join(stagePath, 'build/assets.json')));\n    const css = fs.readFileSync(path.join(stagePath, 'build', 'public', assets.client.css[0]));\n\n    expect(css.toString().includes(\"razzle-scss-prepend\")).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile with promise config', () => {\n    const stagePath = util.setupStageWithExample(stageName, 'with-promise-config');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    // We modify the default server output filename -> custom.js\n    expect(fileExists('build/custom.js')).toBeTruthy();\n    expect(fileExists('build/custom.js.map')).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should compile with jsconfig paths', () => {\n    const stagePath = util.setupStageWithExample(stageName, 'with-jsconfig-paths');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    const assets = JSON.parse(fs.readFileSync(path.join(stagePath, 'build/assets.json')));\n    const js = fs.readFileSync(path.join(stagePath, 'build', 'public', assets.client.js[0]));\n\n    expect(js.toString().includes(\"Something Extra\")).toBeTruthy();\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should exit with an error code when the custom config is invalid', () => {\n    util.setupStageWithFixture(stageName, 'build-with-custom-config-invalid');\n    const output = shell.exec('yarn build', {\n      silent: true,\n    });\n\n    expect(output.code).toBe(1);\n  });\n\n\n  it('should compile with development build', () => {\n    const stagePath = util.setupStageWithExample(stageName, 'with-development-build');\n    const output = shell.exec('yarn build --noninteractive');\n    // Create asset manifest\n    expect(fileExists('build/assets.json')).toBeTruthy();\n\n    const assets = JSON.parse(fs.readFileSync(path.join(stagePath, 'build/assets.json')));\n    const js = fs.readFileSync(path.join(stagePath, 'build', 'public', assets.client.js[0]));\n\n    expect(output.code).toBe(0);\n  });\n\n  it('should exit with an error code when the custom config is invalid', () => {\n    util.setupStageWithFixture(stageName, 'build-with-custom-config-invalid');\n    const output = shell.exec('yarn build', {\n      silent: true,\n    });\n\n    expect(output.code).toBe(1);\n  });\n\n  afterEach(() => {\n    util.teardownStage(stageName);\n  });\n});\n"
  },
  {
    "path": "test/e2e/razzle-start-spa.test.js",
    "content": "/**\n * @jest-environment node\n */\n\"use strict\";\n\nconst shell = require(\"shelljs\");\nconst util = require(\"../fixtures/util\");\nconst kill = require(\"../utils/psKill\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\nconst silent = !process.env.NOISY_TESTS;\nshell.config.verbose = !silent;\nshell.config.silent = silent;\n\nprocess.env.RAZZLE_NONINTERACTIVE = \"true\";\n\nconst spew = false;\n\nconst stageName = 'stage-start-spa';\n\ndescribe('razzle start', () => {\n  describe('razzle basic example', () => {\n\n    beforeAll(() => {\n      util.teardownStage(stageName);\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef\n\n    it('should start a dev server for spa mode', () => {\n      util.setupStageWithExample(stageName, 'basic-spa');\n      let outputTest;\n      const run = new Promise(resolve => {\n        const child = shell.exec(\n          `${path.join('../node_modules/.bin/razzle')} start`,\n          () => {\n            resolve(outputTest);\n          }\n        );\n        child.stdout.on('data', data => {\n          if (!silent) console.log(data);\n          if (data.includes('> SPA Started on port 3000') && typeof outputTest == 'undefined') {\n            shell.exec('sleep 5');\n            const devServerOutput = shell.exec(\n              'curl -sb -o \"\" localhost:3000/static/js/bundle.js'\n            );\n            if (spew) console.log('devServerOutput:' + devServerOutput.stdout);\n            outputTest = devServerOutput.stdout.includes(\"React\");\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          if (!silent) console.log('stderr:' + data);\n        });\n      });\n      return run.then((test) => expect(test).toBeTruthy());\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 400000; // eslint-disable-line no-undef\n\n    it('should build and run in spa mode', () => {\n      util.setupStageWithExample(stageName, 'basic-spa');\n      let outputTest;\n      shell.exec(`${path.join('../node_modules/.bin/razzle')} build --noninteractive`);\n      const run = new Promise(resolve => {\n        const child = shell.exec(\n          `${path.join('../node_modules/.bin/serve')} -s ${path.join('build/public')}`,\n          () => {\n            shell.exec('sleep 5');\n            resolve(outputTest);\n          }\n        );\n        child.stdout.on('data', data => {\n          if (!silent) console.log(data);\n          if (data.includes('http://localhost:5000') && typeof outputTest == 'undefined') {\n            shell.exec('sleep 5');\n            // we use serve package and it will run in prot 5000\n            const output = shell.exec(\"curl -I localhost:5000\");\n            if (spew) console.log('serverOutput:' + output.stdout);\n            outputTest = output.stdout.includes(\"200\");\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          if (!silent) console.log('stderr:' + data);\n        });\n      });\n      return run.then((test) => expect(test).toBeTruthy());\n    });\n\n    afterEach(() => {\n      util.teardownStage(stageName);\n    });\n\n  });\n});\n"
  },
  {
    "path": "test/e2e/razzle-start.test.js",
    "content": "/**\n * @jest-environment node\n */\n'use strict';\n\nconst fs = require('fs');\nconst shell = require('shelljs');\nconst util = require('../fixtures/util');\nconst kill = require('../utils/psKill');\nconst path = require('path');\n\nconst silent = !process.env.NOISY_TESTS;\nshell.config.verbose = !silent;\nshell.config.silent = silent;\n\nprocess.env.RAZZLE_NONINTERACTIVE = \"true\";\n\nconst spew = false;\n\nconst stageName = 'stage-start';\n\ndescribe('razzle start', () => {\n  describe('razzle basic example', () => {\n    beforeAll(() => {\n      util.teardownStage(stageName);\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef\n\n    it('should start a dev server', () => {\n      util.setupStageWithExample(stageName, 'basic');\n      let outputTest;\n      const run = new Promise(resolve => {\n        const child = shell.exec(`${path.join('../node_modules/.bin/razzle')} start --verbose`, () => {\n          resolve(outputTest);\n        });\n        child.stdout.on('data', data => {\n          if (!silent) console.log(data);\n          if (data.includes('Server-side HMR Enabled!') && typeof outputTest == 'undefined') {\n            shell.exec('sleep 5');\n            const devServerOutput = shell.exec(\n              'curl -sb -o \"\" localhost:3001/static/js/client.js'\n            );\n            if (spew) console.log('devServerOutput:' + devServerOutput.stdout);\n            outputTest = devServerOutput.stdout.includes('React');\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          if (!silent) console.log('stderr:' + data);\n        });\n      });\n      return run.then(test => expect(test).toBeTruthy());\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef\n\n    it('should start a dev server on different port', () => {\n      util.setupStageWithExample(stageName, 'with-custom-devserver-options');\n      let outputTest;\n      const run = new Promise(resolve => {\n        const child = shell.exec(`${path.join('../node_modules/.bin/razzle')} start --verbose`, () => {\n          resolve(outputTest);\n        });\n        child.stdout.on('data', data => {\n          if (!silent) console.log(data);\n          if (data.includes('Server-side HMR Enabled!') && typeof outputTest == 'undefined') {\n            shell.exec('sleep 5');\n            const devServerOutput = shell.exec(\n              'curl -sb -o \"\" localhost:3002/static/js/client.js'\n            );\n            if (spew) console.log('devServerOutput:' + devServerOutput.stdout);\n            outputTest = devServerOutput.stdout.includes(\n              'index.js?http://localhost:3002'\n            );\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          if (!silent) console.log('stderr:' + data);\n        });\n      });\n      return run.then(test => expect(test).toBeTruthy());\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef\n\n    it('should start a dev server with custom environment variables on different port', () => {\n      util.setupStageWithExample(stageName, 'with-custom-environment-variables');\n      let outputTest;\n      const run = new Promise(resolve => {\n        const child = shell.exec(`node ${path.join('./node_modules/razzle/bin/razzle.js')} start --verbose`, () => {\n          resolve(outputTest);\n        });\n        child.stdout.on('data', data => {\n          if (data.includes('Server-side HMR Enabled!')) {\n            shell.exec('sleep 5');\n            const devServerOutput = shell.exec(\n              'curl -sb -o \"\" localhost:4001/static/js/client.js'\n            );\n            outputTest = devServerOutput.stdout.includes(\n              'index.js?http://localhost:4001'\n            );\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          console.log(data);\n        });\n      });\n      return run.then(test => expect(test).toBeTruthy());\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 400000; // eslint-disable-line no-undef\n\n    it('should start a dev server with react refresh', () => {\n      util.setupStageWithExample(stageName, 'with-experimental-refresh');\n      let outputTest;\n      const run = new Promise(resolve => {\n        const child = shell.exec(`node ${path.join('./node_modules/razzle/bin/razzle.js')} start --verbose`, () => {\n          resolve(outputTest);\n        });\n        child.stdout.on('data', data => {\n          if (data.includes('Server-side HMR Enabled!')) {\n            shell.exec('sleep 5');\n            const devServerOutput = shell.exec(\n              'curl -sb -o \"\" localhost:3001/static/js/client.js'\n            );\n            outputTest = devServerOutput.stdout.includes(\n              'index.js?http://localhost:3001'\n            );\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          console.log(data);\n        });\n      });\n      return run.then(test => expect(test).toBeTruthy());\n    });\n\n    jasmine.DEFAULT_TIMEOUT_INTERVAL = 400000; // eslint-disable-line no-undef\n\n    it('should build and run', () => {\n      util.setupStageWithExample(stageName, 'basic');\n      let outputTest;\n      shell.exec(`${path.join('../node_modules/.bin/razzle')} build --noninteractive`);\n      const run = new Promise(resolve => {\n        const child = shell.exec(`node ${path.join('build/server.js')}`, () => {\n          resolve(outputTest);\n        });\n        child.stdout.on('data', data => {\n          if (!silent) console.log(data);\n          if (data.includes('> Started on port 3000') && typeof outputTest == 'undefined') {\n            shell.exec('sleep 5');\n            const output = shell.exec('curl -I localhost:3000');\n            if (spew) console.log('serverOutput:' + output.stdout);\n            outputTest = output.stdout.includes('200');\n            kill(child.pid, 'SIGINT');\n          }\n        });\n        child.stderr.on('data', data => {\n          if (!silent) console.log('stderr:' + data);\n        });\n      });\n      return run.then(test => expect(test).toBeTruthy());\n    });\n\n    it('should exit with an error code and display the error when the custom config throws an error', () => {\n      const stagePath = util.setupStageWithExample(stageName, 'basic');\n      fs.writeFileSync(\n        path.join(stagePath, 'razzle.config.js'),\n        `\n        module.exports = {\n          modifyWebpackConfig() {\n            throw new Error(\"Oops\");\n          }\n        }\n      `\n      );\n\n      return new Promise((resolve, reject) => {\n        shell.exec(\n          `node ${path.join(\n            '../node_modules/razzle/bin/razzle.js'\n          )} start --verbose`,\n          { timeout: 5000 },\n          (returnCode, stdout) => {\n            if (returnCode === 1 && stdout.includes('Error: Oops')) {\n              resolve();\n            } else {\n              reject('Unexpected successful return code.');\n            }\n          }\n        );\n      });\n    });\n\n    afterEach(() => {\n      util.teardownStage(stageName);\n    });\n  });\n});\n"
  },
  {
    "path": "test/examples/isomorphic-examples.test.js",
    "content": "/**\n* @jest-environment node\n*\n* Theese test checks that the examples installs with packages from npm,\n* that they build, the dev server runs as expected and is reachable at port 3000\n*/\n'use strict';\n//\n//\n//\n// require('leaked-handles').set({\n//     fullStack: true, // use full stack traces\n//     timeout: 30000, // run every 30 seconds instead of 5.\n//     debugSockets: true // pretty print tcp thrown exceptions.\n// });\n\n\nconst puppeteer = require('puppeteer');\nconst terminate = require('terminate');\nconst semver = require('semver');\nconst assert = require('assert');\nconst os = require('os');\nconst fs = require('fs-extra');\nconst rfs = require('fs');\nconst execa = require('execa');\nconst util = require('util');\nconst glob = util.promisify(require('glob'));\nconst axios = require('axios');\nconst isDocker = require('is-docker');\nconst razzleUtil = require('../fixtures/util');\n\n\nconst path = require(\"path\");\nconst copy = require('recursive-copy');\nconst mkdtemp = util.promisify(fs.mkdtemp);\nconst mkdtempTpl = path.join(os.tmpdir(), 'example-');\n\nconst directoryExists = (dirPath) => fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();\nconst fileExists = (dirPath) => fs.existsSync(dirPath);\n\nconst rootDir = path.join(path.resolve(__dirname), '..', '..');\nconst testArtifactsDir = path.join(rootDir, 'test-artifacts');\n\nconst silent = !process.env.NOISY_TESTS;\nconst stdio = 'pipe';\n\nconst useCra = process.env.NPM_TAG !== 'development';\n\nconst use_package_manager = typeof process.env.PACKAGE_MANAGER === 'undefined' ? 'default' : process.env.PACKAGE_MANAGER;\n\nconst useYalc = use_package_manager === 'yalc';\n\nconst package_manager = use_package_manager === 'default' || useYalc ? 'yarn' : use_package_manager;\n\nconst cra_package_manager = use_package_manager === 'default' ? false : use_package_manager;\n\nconst install_deps_args = ['yarn', 'yalc'].indexOf(package_manager) !== -1 ?\n[ \"install\", \"--ignore-engines\" ] :\n[ \"install\" ];\n\nconst webpack_deps = typeof process.env.WEBPACK_DEPS !== 'undefined' ? process.env.WEBPACK_DEPS.split(' ') : false;\n\nconst add_webpack_deps_args = package_manager === 'yarn' ?\n[ \"add\", \"--dev\", \"-W\"].concat(webpack_deps).concat([ \"--ignore-engines\" ]) :\n[ \"install\", \"--save-dev\"].concat(webpack_deps);\n\nconst use_npm_tag = typeof process.env.NPM_TAG === 'undefined' || process.env.NPM_TAG === 'latest' ? '' : `@${process.env.NPM_TAG}`;\n\nconst writeLogs = true;\n\nlet examples =\n    { simple: [\n      { example: 'basic', path: 'examples/basic' },\n      { example: 'basic-server', path: 'examples/basic-server' },\n      { example: 'basic-spa', path: 'examples/basic-spa' },\n      {\n        example: 'with-custom-babel-config',\n        path: 'examples/with-custom-babel-config'\n      },\n      {\n        example: 'with-custom-devserver-options',\n        path: 'examples/with-custom-devserver-options'\n      },\n      {\n        example: 'with-custom-environment-variables',\n        path: 'examples/with-custom-environment-variables'\n      },\n      {\n        example: 'with-custom-target-babel-config',\n        path: 'examples/with-custom-target-babel-config'\n      },\n      {\n        example: 'with-custom-webpack-config',\n        path: 'examples/with-custom-webpack-config'\n      },\n      { example: 'with-eslint', path: 'examples/with-eslint' },\n      {\n        example: 'with-experimental-refresh',\n        path: 'examples/with-experimental-refresh'\n      },\n      {\n        example: 'with-firebase-functions',\n        path: 'examples/with-firebase-functions'\n      },\n      { example: 'with-heroku', path: 'examples/with-heroku' },\n      { example: 'with-hyperapp', path: 'examples/with-hyperapp' },\n      { example: 'with-inferno', path: 'examples/with-inferno' },\n      {\n        example: 'with-jest-snapshots',\n        path: 'examples/with-jest-snapshots'\n      },\n      {\n        example: 'with-jsconfig-paths',\n        path: 'examples/with-jsconfig-paths'\n      },\n      { example: 'with-jsxstyle', path: 'examples/with-jsxstyle' },\n      { example: 'with-koa', path: 'examples/with-koa' },\n      { example: 'with-less', path: 'examples/with-less' },\n      {\n        example: 'with-loadable-components',\n        path: 'examples/with-loadable-components'\n      },\n      { example: 'with-material-ui', path: 'examples/with-material-ui' },\n      { example: 'with-mdx', path: 'examples/with-mdx' },\n      { example: 'with-now', path: 'examples/with-now' },\n      { example: 'with-now-v2', path: 'examples/with-now-v2' },\n      { example: 'with-polka', path: 'examples/with-polka' },\n      { example: 'with-preact', path: 'examples/with-preact' },\n      {\n        example: 'with-promise-config',\n        path: 'examples/with-promise-config'\n      },\n      {\n        example: 'with-react-native-web',\n        path: 'examples/with-react-native-web'\n      },\n      { example: 'with-react-router', path: 'examples/with-react-router' },\n      !semver.satisfies(process.version, '~10||~13') && {\n        example: 'with-react-server-components',\n        path: 'examples/with-react-server-components'\n      },\n      { example: 'with-redux', path: 'examples/with-redux' },\n      { example: 'with-scss', path: 'examples/with-scss' },\n      { example: 'with-scss-options', path: 'examples/with-scss-options' },\n      {\n        example: 'with-single-exposed-port',\n        path: 'examples/with-single-exposed-port'\n      },\n      {\n        example: 'with-styled-components',\n        path: 'examples/with-styled-components'\n      },\n      { example: 'with-svelte', path: 'examples/with-svelte' },\n      !semver.satisfies(process.version, '~10') && {\n        example: 'with-tailwindcss', path: 'examples/with-tailwindcss' },\n      { example: 'with-typescript', path: 'examples/with-typescript' },\n      {\n        example: 'with-typescript-plugin',\n        path: 'examples/with-typescript-plugin'\n      },\n      {\n        example: 'with-vendor-bundle',\n        path: 'examples/with-vendor-bundle'\n      },\n      { example: 'with-vue', path: 'examples/with-vue' },\n      { example: 'with-vue-router', path: 'examples/with-vue-router' },\n      {\n        example: 'with-webpack-public-path',\n        path: 'examples/with-webpack-public-path'\n      }\n    ].filter(x=>x), complex: [\n    { example: 'with-monorepo', path: 'examples/with-monorepo' }, // test timing ssues\n    { example: 'with-monorepo-without-workspaces', path: 'examples/with-monorepo-without-workspaces' }, // test timing ssues\n    {\n      example: 'with-module-federation', // test timing ssues\n      path: 'examples/with-module-federation'\n    },\n    { example: 'with-reason-react', path: 'examples/with-reason-react' }, // test timing ssues\n    {\n      example: 'with-typeorm-graphql', // test timing ssues\n      path: 'examples/with-typeorm-graphql'\n    },\n    // { example: 'with-elm', path: 'examples/with-elm' }, // requires elm binary\n    // {\n    //   example: 'with-devcert-https', // may not be possible to test\n    //   path: 'examples/with-devcert-https'\n    // }\n  ]\n};\n\nlet browser;\nlet page;\n\nbeforeAll(async function(done) {\n  if (isDocker()) {\n    const response = await axios.get(\n      \"http://localhost:9222/json/version\"\n    );\n    const browserWSEndpoint = response.data.webSocketDebuggerUrl;\n    browser = await puppeteer.connect({ browserWSEndpoint  });\n  } else {\n    browser = await puppeteer.launch({ headless: process.env.HEADLESS !== \"false\"  });\n  }\n  page = await browser.newPage();\n  await fs.ensureDir(testArtifactsDir);\n\n  if (useYalc) {\n    razzleUtil.yalcPublishAll();\n  }\n  // const res = await glob('examples/*')\n  // examples=res.map(ex=>({example: ex.split('/')[1], path: ex}))\n  // console.log(examples)\n  done();\n});\n\nafterAll(async function(done) {\n  if (!isDocker()) {\n    await browser.close();\n  }\n  await new Promise((r) => setTimeout(r, 3000));\n  done();\n});\nObject.keys(examples).forEach((exampleType) => {\n\n\n  describe(`tests for ${exampleType} isomorphic examples`, () => {\n\n    console.log(`Testing ${exampleType} examples:\\n${examples[exampleType].map(e=>e.example).join(\"\\n\")}`);\n\n    examples[exampleType].forEach(exampleinfo => {\n      const example=exampleinfo.example;\n\n      describe(`tests for the ${example} example`, () => {\n        let tempDir;\n        let craDir;\n        let razzleMeta;\n\n        beforeAll(async function(done) {\n\n          razzleMeta = JSON.parse(await fs.readFile(\n            path.join(rootDir, exampleinfo.path, 'package.json'))).razzle_meta||{};\n\n          mkdtemp(mkdtempTpl, (err, directory) => {\n            tempDir = directory;\n            craDir = path.join(directory, 'example');\n            console.log('Using tempdir: ' + tempDir);\n\n            if (!useCra) {\n              copy(path.join(rootDir, exampleinfo.path), tempDir, { dot: true },async function(error, results) {\n                if (error) {\n                  console.error('Copy failed: ' + error);\n                } else {\n                  // console.info('Copied ' + results.length + ' files');\n                }\n                if (useYalc) {\n                  const packages = razzleUtil.removeWorkspacePackages(tempDir);\n                  razzleUtil.yalcAddAll(packages, tempDir);\n                }\n                done();\n              })\n            } else {\n              done();\n            }\n          })\n        });\n\n        afterAll(async function(done) {\n          fs.remove(tempDir, err => {\n            assert(!err)\n            done();\n          });\n        });\n\n        jest.setTimeout(300000);\n\n        it(`should install packages`, async function(done) {\n          if (!useCra) {\n            const subprocess = execa(package_manager,\n              install_deps_args,\n              {stdio: stdio, cwd: tempDir, all: writeLogs })\n\n            if (writeLogs) {\n              const write = rfs.createWriteStream(\n                path.join(testArtifactsDir, `${example}-${package_manager}-install.txt`));\n              subprocess.all.pipe(write);\n            }\n\n            subprocess.then(({exitCode})=>{\n              assert.equal(exitCode, 0)\n              done();\n            })\n            await subprocess;\n          } else {\n            console.log(\"Skipped install packages\");\n            done();\n          }\n        }, 300000);\n\n        jest.setTimeout(300000);\n\n        it(`should run create-razzle-app successfully`, async function(done) {\n\n          if (useCra) {\n            const subprocess = execa(\"npx\", [\n              `create-razzle-app${use_npm_tag}`,,\n              cra_package_manager && `--${cra_package_manager}`,\n              \"--verbose\",\n              \"--example\",\n              example,\n              \"example\"\n            ].filter(x=>x), {stdio: stdio, cwd: tempDir, all: writeLogs });\n            if (writeLogs) {\n              const write = rfs.createWriteStream(\n                path.join(testArtifactsDir, `${example}-create-razzle-app.txt`));\n              subprocess.all.pipe(write);\n            }\n\n            subprocess.then(async ({exitCode})=>{\n              assert.equal(exitCode, 0)\n              done();\n            })\n            await subprocess;\n          } else {\n            console.log(\"Skipped run create-razzle-app successfully\");\n            done();\n          }\n        }, 300000);\n\n        jest.setTimeout(300000);\n\n        it(`should use specific webpack and html-webpack-plugin`, async function(done) {\n          if (webpack_deps && !razzleMeta.forceWebpack) {\n            console.log(`Installing ${webpack_deps.join(' ')} using ${package_manager}`);\n            const subprocess = execa(package_manager,\n              add_webpack_deps_args\n            , {stdio: stdio, cwd: useCra ? craDir : tempDir, all: writeLogs });\n            if (writeLogs) {\n              const write = rfs.createWriteStream(\n                path.join(testArtifactsDir, `${example}-add-deps.txt`));\n              subprocess.all.pipe(write);\n            }\n\n            subprocess.then(({exitCode})=>{\n              assert.equal(exitCode, 0)\n              done();\n            })\n            await subprocess;\n          } else {\n            console.log(\"Skipped use specific webpack and html-webpack-plugin\");\n            done();\n          }\n        }, 300000);\n\n        jest.setTimeout(300000);\n\n        it(`should build successfully`, async function(done) {\n          const subprocess = execa(package_manager, [\"build\", \"--noninteractive\"],\n          {stdio: stdio, cwd: useCra ? craDir : tempDir, all: writeLogs })\n\n          if (writeLogs) {\n            const write = rfs.createWriteStream(\n              path.join(testArtifactsDir, `${example}-${package_manager}-build.txt`));\n            subprocess.all.pipe(write);\n          }\n\n          subprocess.then(({exitCode})=>{\n            assert.equal(exitCode, 0)\n            done();\n          })\n          await subprocess;\n        }, 300000);\n\n        jest.setTimeout(300000);\n\n        it(`should start devserver and exit`, async function(done) {\n\n          const subprocess = execa(package_manager, [\"start\"],\n          {stdio: stdio, cwd: useCra ? craDir : tempDir, all: writeLogs })\n\n          if (writeLogs) {\n            const write = rfs.createWriteStream(\n              path.join(testArtifactsDir, `${example}-${package_manager}-start.txt`));\n            subprocess.all.pipe(write);\n          }\n\n          let resolved = false;\n          let timer;\n\n          try {\n            await new Promise(async (resolve, reject) =>{\n              console.info(`${package_manager} start for ${example} `);\n              const waitForData = data => {\n                if (data.toString().includes('Server-side HMR Enabled!') || data.toString().includes('> SPA Started on port')) {\n                  resolved = true;\n                  subprocess.off('data', waitForData)\n                  clearTimeout(timer);\n                  resolve();\n                }\n              }\n              timer = setTimeout(function() {\n                subprocess.off('data', waitForData)\n                reject();\n              }, 30000)\n              subprocess.stdout.on('data', waitForData);\n            })\n          } catch {\n          }\n          if (razzleMeta.yarnStartDelay) {\n            await new Promise((r) => setTimeout(r, razzleMeta.yarnStartDelay));\n          }\n          if (resolved) {\n            try {\n              await page.goto(`${razzleMeta.protocol||'http'}://localhost:${razzleMeta.port||'3000'}/`);\n              await page.screenshot({ path: path.join(testArtifactsDir, `${example}.png`) });\n            } catch {\n\n            }\n          }\n\n          await new Promise((r) => setTimeout(r, 2000));\n\n          terminate(subprocess.pid, 'SIGINT', { timeout: 3000 }, async () => {\n            terminate(subprocess.pid);\n            assert.ok(resolved, `yarn start for ${example} failed`);\n            done();\n          });\n\n        }, 300000);\n\n      });\n    });\n  });\n\n});\n"
  },
  {
    "path": "test/fixtures/build-default/package.json",
    "content": "{\n  \"scripts\": {\n    \"build\": \"razzle build\"\n  },\n  \"name\": \"build-default\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "test/fixtures/build-default/public/nothing.txt",
    "content": "nothing"
  },
  {
    "path": "test/fixtures/build-default/src/client.css",
    "content": "body {\n  margin: 0;\n}\n"
  },
  {
    "path": "test/fixtures/build-default/src/client.js",
    "content": "require('./client.css');\nconst logo = require('./logo.png');\n\nmodule.exports = { client: true, logo };\n"
  },
  {
    "path": "test/fixtures/build-default/src/index.js",
    "content": "module.exports = { server: true };\n"
  },
  {
    "path": "test/fixtures/build-default-spa/package.json",
    "content": "{\n  \"scripts\": {\n    \"build\": \"razzle build\"\n  },\n  \"name\": \"build-default-spa\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "test/fixtures/build-default-spa/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n  <meta name=\"theme-color\" content=\"#000000\" />\n  <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n  <title>React App</title>\n</head>\n\n<body>\n  <noscript>You need to enable JavaScript to run this app.</noscript>\n  <div id=\"root\"></div>\n  <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n</body>\n\n</html>"
  },
  {
    "path": "test/fixtures/build-default-spa/public/nothing.txt",
    "content": "nothing"
  },
  {
    "path": "test/fixtures/build-default-spa/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  options: {\n    buildType: 'spa',\n  }\n};\n"
  },
  {
    "path": "test/fixtures/build-default-spa/src/client.css",
    "content": "body {\n  margin: 0;\n}\n"
  },
  {
    "path": "test/fixtures/build-default-spa/src/client.js",
    "content": "require('./client.css');\nconst logo = require('./logo.png');\n\nmodule.exports = { client: true, logo };\n"
  },
  {
    "path": "test/fixtures/build-with-babelrc/.babelrc",
    "content": "{\n  \"presets\": [\n    [\n      \"@babel/preset-env\",\n      {\n        \"modules\": false\n      }\n    ]\n  ]\n}"
  },
  {
    "path": "test/fixtures/build-with-babelrc/package.json",
    "content": "{\n  \"scripts\": {\n    \"build\": \"razzle build\"\n  },\n  \"name\": \"build-with-babelrc\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "test/fixtures/build-with-babelrc/public/nothing.txt",
    "content": "nothing"
  },
  {
    "path": "test/fixtures/build-with-babelrc/src/client.css",
    "content": "body {\n  margin: 0;\n}\n"
  },
  {
    "path": "test/fixtures/build-with-babelrc/src/client.js",
    "content": "require('./client.css');\nconst logo = require('./logo.png');\n\nmodule.exports = { client: true, logo };\n"
  },
  {
    "path": "test/fixtures/build-with-babelrc/src/index.js",
    "content": "module.exports = { server: true };\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config/package.json",
    "content": "{\n  \"scripts\": {\n    \"build\": \"razzle build\"\n  },\n  \"name\": \"build-with-custom-config\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config/public/nothing.txt",
    "content": "nothing"
  },
  {
    "path": "test/fixtures/build-with-custom-config/razzle.config.js",
    "content": "'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    if (opts.env.target === 'node' && !opts.env.dev) {\n      config.output.filename = 'custom.js';\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config/src/client.css",
    "content": "body {\n  margin: 0;\n}\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config/src/client.js",
    "content": "require('./client.css');\nconst logo = require('./logo.png');\n\nmodule.exports = { client: true, logo };\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config/src/index.js",
    "content": "module.exports = { server: true };\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config-invalid/package.json",
    "content": "{\n  \"scripts\": {\n    \"build\": \"razzle build\"\n  },\n  \"name\": \"build-with-custom-config-invalid\",\n  \"license\": \"MIT\"\n}\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config-invalid/public/nothing.txt",
    "content": "nothing"
  },
  {
    "path": "test/fixtures/build-with-custom-config-invalid/razzle.config.js",
    "content": "'use strict';\n// Package is not installed in order to simulate bad config\nconst BundleAnalyzerPlugin = require('somethingnothere')\n  .BundleAnalyzerPlugin;\n\nmodule.exports = {\n  modifyWebpackConfig(opts) {\n    const config = opts.webpackConfig;\n    if (opts.env.target === 'web') {\n      config.plugins = [...config.plugins, new BundleAnalyzerPlugin()];\n    }\n\n    return config;\n  },\n};\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config-invalid/src/client.css",
    "content": "body {\n  margin: 0;\n}\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config-invalid/src/client.js",
    "content": "require('./client.css');\nconst logo = require('./logo.png');\n\nmodule.exports = { client: true, logo };\n"
  },
  {
    "path": "test/fixtures/build-with-custom-config-invalid/src/index.js",
    "content": "module.exports = { server: true };\n"
  },
  {
    "path": "test/fixtures/util.js",
    "content": "'use strict';\n\nconst shell = require('shelljs');\nconst path = require('path');\nconst glob = require('glob');\n\nconst rootDir = path.join(path.resolve(__dirname), '..', '..');\n\nconst fs = require('fs-extra');\n\nconst silent = true;\n\nfunction flatten(arr) {\n  return arr.reduce(function (flat, toFlatten) {\n    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);\n  }, []);\n}\n\nconst getWorkspaceDirs = (absolute = false) => {\n  const rootJson = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json')));\n  const workspaceDirs = flatten(rootJson.workspaces.map(item =>\n    glob.sync(item, {cwd: rootDir, absolute: absolute})\n  ));\n  return workspaceDirs;\n};\n\nconst getWorkspacePackages = () => {\n  const packages = getWorkspaceDirs(true)\n    .map(item => JSON.parse(fs.readFileSync(path.join(item, 'package.json'))).name);\n  return packages;\n};\n\nconst removeWorkspacePackages = (fromPath) => {\n  const stagePath = fromPath || process.cwd();\n  const workspacePackages = getWorkspacePackages();\n  const packageJson = path.join(stagePath, 'package.json');\n\n  if (fs.existsSync(packageJson)) {\n    const packageJsonData = JSON.parse(fs.readFileSync(packageJson));\n\n    const newPackageJsonData = [\"dependencies\", \"devDependencies\"].reduce((acc, depType) => {\n      if (acc.packageJsonData[depType]) {\n        acc.packageJsonData[depType] = Object.keys(acc.packageJsonData[depType]).reduce((depsAcc, dep) => {\n          if (workspacePackages.includes(dep)) {\n            acc.removedPackages.push(dep);\n            delete depsAcc[dep];\n          }\n          return depsAcc;\n        }, acc.packageJsonData[depType]);\n      }\n      return acc;\n    }, { packageJsonData: packageJsonData, removedPackages: []});\n\n    fs.writeFileSync(packageJson, JSON.stringify(newPackageJsonData.packageJsonData, null, '  '));\n    return newPackageJsonData.removedPackages;\n  }\n};\n\nconst resolutionsYalc = (fromPath) => {\n  const stagePath = fromPath || process.cwd();\n  const packageJson = path.join(stagePath, 'package.json');\n\n  if (fs.existsSync(packageJson)) {\n    const packageJsonData = JSON.parse(fs.readFileSync(packageJson));\n\n    const newPackageJsonData = [\"dependencies\", \"devDependencies\"].reduce((acc, depType) => {\n      acc.resolutions = acc.resolutions || {};\n      if (acc[depType]) {\n        Object.keys(acc[depType]).reduce((depsAcc, dep) => {\n          if (acc[depType][dep].indexOf('.yalc') !== -1) {\n            acc.resolutions[dep] = acc[depType][dep];\n          }\n          return depsAcc;\n        }, acc[depType]);\n      }\n      return acc;\n    }, packageJsonData);\n\n    return fs.writeFileSync(packageJson, JSON.stringify(newPackageJsonData, null, '  '));\n  }\n};\n\nconst scriptsYalc = (fromPath) => {\n  const stagePath = fromPath || process.cwd();\n  const packageJson = path.join(stagePath, 'package.json');\n\n  if (fs.existsSync(packageJson)) {\n    const packageJsonData = JSON.parse(fs.readFileSync(packageJson));\n    packageJsonData.scripts = packageJsonData.scripts || {};\n    packageJsonData.scripts['updateyalc'] = `cd ${rootDir} && yarn yalc-publish-all`;\n    return fs.writeFileSync(packageJson, JSON.stringify(packageJsonData, null, '  '));\n  }\n};\n\nconst copyExample = (exampleName, stageName) => {\n  const stagePath = path.join(process.cwd(), stageName);\n  fs.copySync(path.join(rootDir, 'examples', exampleName), stagePath);\n  return stagePath;\n};\n\nconst yalcPublishAll = () => {\n  return getWorkspaceDirs().map(dir=>shell.exec(`yalc publish ${dir}`))\n};\n\nconst yalcPublishPushAll = () => {\n  return getWorkspaceDirs().map(dir=>shell.exec(`yalc publish --push ${dir}`))\n};\n\nconst yalcAddAll = (packages, cwd) => {\n  if (packages) {\n    console.log('Installing ' + packages + ' with yalc');\n  }\n  return (packages ? packages : getWorkspacePackages()).map(pkg=>shell.exec(`yalc add --no-pure ${pkg}`, { cwd: cwd ? cwd : process.cwd() }))\n};\n\nconst setupStageWithExample = (\n  stageName,\n  exampleName,\n  symlink=true,\n  yarnlink=false,\n  install=false,\n  test=false\n) => {\n  const packagesPath = path.join(rootDir, 'packages');\n\n  let silentState = shell.config.silent; // save old silent state\n  let verboseState = shell.config.verbose; // save old silent state\n\n  shell.config.verbose = !silent;\n  shell.config.silent = silent;\n\n  const stagePath = copyExample(exampleName, stageName);\n\n  shell.cd(stagePath);\n  if (install) {\n    shell.exec(\"yarn install\", { env: Object.assign(process.env, {NODE_ENV:\"development\"}) });\n  }\n  if (symlink) {\n    fs.ensureSymlinkSync(\n      path.join(rootDir, 'node_modules'),\n      path.join(stagePath, 'node_modules')\n    );\n    fs.ensureSymlinkSync(\n      path.join(rootDir, 'node_modules', '.bin'),\n      path.join(stagePath, 'node_modules', '.bin')\n    );\n    fs.ensureSymlinkSync(\n      packagesPath,\n      path.join(stagePath, 'packages')\n    );\n  }\n  if (yarnlink) {\n    const dirs = fs.readdirSync(packagesPath, { withFileTypes:true })\n      .map(dir=>{ return dir.isDirectory ? dir.name: dir });\n    for (const packageName of dirs) {\n      const packagePath = path.join(packagesPath, packageName);\n      shell.cd(packagePath);\n      shell.exec(`yarn link`);\n      shell.cd(stagePath);\n      shell.exec(`yarn link ${packageName}`);\n      if (!silent) console.log(`Linked ${packageName} to ${stagePath}`);\n    }\n  }\n  if (test) {\n    shell.exec(\"yarn run test\", { env: Object.assign(process.env, {CI:\"true\"}) });\n  }\n\n  shell.config.verbose = verboseState;\n  shell.config.silent = silentState;\n\n  return stagePath;\n};\n\nmodule.exports = {\n\n  getWorkspaceDirs: getWorkspaceDirs,\n\n  getWorkspacePackages: getWorkspacePackages,\n\n  removeWorkspacePackages: removeWorkspacePackages,\n\n  yalcPublishAll: yalcPublishAll,\n\n  yalcPublishPushAll: yalcPublishPushAll,\n\n  yalcAddAll: yalcAddAll,\n\n  yalcSetupStageWithExample: (\n    stageName,\n    exampleName\n  ) => {\n\n    let silentState = shell.config.silent; // save old silent state\n    let verboseState = shell.config.verbose; // save old silent state\n\n    shell.config.verbose = true;\n    shell.config.silent = false;\n\n    yalcPublishAll();\n    const stagePath = copyExample(exampleName, stageName);\n    removeWorkspacePackages(stagePath);\n\n    shell.cd(stagePath);\n\n    yalcAddAll();\n\n    resolutionsYalc(stagePath);\n\n    scriptsYalc(stagePath);\n\n    shell.exec(\"yarn install\", { env: Object.assign(process.env, {NODE_ENV:\"development\"}) });\n\n    shell.config.verbose = verboseState;\n    shell.config.silent = silentState;\n\n    return stagePath;\n  },\n\n\n  copyExample: copyExample,\n\n  setupStage: (stageName) => {\n    const stagePath = path.join(rootDir, stageName);\n    fs.ensureDirSync(stagePath);\n    shell.cd(stagePath);\n  },\n\n  setupStageWithFixture: (stageName, fixtureName) => {\n    const stagePath = path.join(rootDir, stageName);\n\n    fs.copySync(path.join(rootDir, 'test', 'fixtures', fixtureName), stagePath);\n\n    fs.ensureSymlinkSync(\n      path.join(rootDir, 'node_modules'),\n      path.join(stagePath, 'node_modules')\n    );\n    fs.ensureSymlinkSync(\n      path.join(rootDir, 'packages'),\n      path.join(stagePath, 'packages')\n    );\n    shell.cd(stagePath);\n  },\n\n  setupStageWithExample: setupStageWithExample,\n\n  teardownStage: stageName => {\n    shell.cd(rootDir);\n    fs.removeSync(path.join(rootDir, stageName));\n  },\n\n  rootDir,\n};\n"
  },
  {
    "path": "test/jest.e2e.config.json",
    "content": "{\n  \"roots\": [\"<rootDir>/e2e\"],\n  \"collectCoverageFrom\": [\"**/*.js\"],\n  \"testMatch\": [\n      \"<rootDir>/e2e/**/*(*.)@(spec|test).(ts|js)?(x)\"\n  ]\n}\n"
  },
  {
    "path": "test/jest.examples.config.js",
    "content": "const testType = process.env.COMPLEX !== \"true\" ? \"simple\" : \"complex\";\n\nmodule.exports = {\n  roots: [\"<rootDir>/examples\"],\n  collectCoverageFrom: [\"**/*.js\"],\n  testMatch: [\n    \"<rootDir>/examples/**/*(*.)@(spec|test).(ts|js)?(x)\"\n  ],\n  reporters: [\n    \"default\",\n    [\"jest-html-reporters\", {\n      pageTitle: `${testType} examples tests report.html`,\n      filename: `test-artifacts/${testType}-examples-report.html`,\n    }]\n  ]\n};\n"
  },
  {
    "path": "test/utils/psKill.js",
    "content": "'use strict';\n\nconst psTree = require('ps-tree');\n\n// Loops through processes and kills them\nmodule.exports = (pid, signal = 'SIGKILL', callback) => {\n  psTree(pid, (err, children) => {\n    let arr = [pid].concat(children.map(p => p.PID));\n    arr = arr.filter((item, poss) => arr.indexOf(item) === poss);\n    arr.forEach(tpid => {\n      try {\n        process.kill(tpid, signal);\n      } catch (ex) {\n        const logger = console;\n        logger.log('Could not kill process', tpid, ex);\n      }\n    });\n    if (callback) {\n      callback();\n    }\n  });\n};\n"
  },
  {
    "path": "website/.babelrc",
    "content": "{\n  \"presets\": [\"next/babel\"],\n  \"plugins\": [\"babel-plugin-macros\", \"./.nextra/babel-plugin-nextjs-mdx-patch\"]\n}"
  },
  {
    "path": "website/.github/CODEOWNERS",
    "content": "* @jaredpalmer\n"
  },
  {
    "path": "website/.gitignore",
    "content": "node_modules\n.next\n.DS_Store\nyarn-error.log"
  },
  {
    "path": "website/.nextra/arrow-right.js",
    "content": "export default ({ width = 24, height = 24, ...props }) => {\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      {...props}\n    >\n      <path\n        d=\"M3 12h18m0 0l-6.146-6M21 12l-6.146 6\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n"
  },
  {
    "path": "website/.nextra/babel-plugin-nextjs-mdx-patch.js",
    "content": "/**\n * Currently it's not possible to export data fetching functions from MDX pages\n * because MDX includes them in `layoutProps`, and Next.js removes them at some\n * point, causing a `ReferenceError`.\n *\n * https://github.com/mdx-js/mdx/issues/742#issuecomment-612652071\n *\n * This plugin can be removed once MDX removes `layoutProps`, at least that\n * seems to be the current plan.\n */\n\n// https://nextjs.org/docs/basic-features/data-fetching\nconst DATA_FETCH_FNS = ['getStaticPaths', 'getStaticProps', 'getServerProps']\n\nmodule.exports = () => {\n  return {\n    visitor: {\n      ObjectProperty(path) {\n        if (\n          DATA_FETCH_FNS.includes(path.node.value.name) &&\n          path.findParent(\n            (path) =>\n              path.isVariableDeclarator() &&\n              path.node.id.name === 'layoutProps',\n          )\n        ) {\n          path.remove()\n        }\n      },\n    },\n  }\n}\n\n// https://github.com/vercel/next.js/issues/12053#issuecomment-622939046\n"
  },
  {
    "path": "website/.nextra/config.js",
    "content": "import userConfig from '../nextra.config';\n\nconst defaultConfig = {\n  nextLinks: true,\n  prevLinks: true,\n  search: true,\n};\n\nexport default () => {\n  return { ...defaultConfig, ...userConfig };\n};\n"
  },
  {
    "path": "website/.nextra/directories.js",
    "content": "import preval from 'preval.macro'\nimport title from 'title'\n\nconst excludes = ['/_app.js', '/_document.js', '/_error.js']\n\n// watch all meta files\nconst meta = {}\nfunction importAll(r) {\n  return r.keys().forEach(key => {\n    meta[key.slice(1)] = r(key)\n  })\n}\nimportAll(require.context('../pages/', true, /meta\\.json$/))\n\n// use macro to load the file list\nconst items = preval`\n  const { readdirSync, readFileSync } = require('fs')\n  const { resolve, join } = require('path')\n  const extension = /\\.(mdx?|jsx?)$/\n  \n  function getFiles(dir, route) {\n    const files = readdirSync(dir, { withFileTypes: true })\n\n    // go through the directory\n    const items = files\n      .map(f => {\n        const filePath = resolve(dir, f.name)\n        const fileRoute = join(route, f.name.replace(extension, '').replace(/^index$/, ''))\n\n        if (f.isDirectory()) {\n          const children = getFiles(filePath, fileRoute)\n          if (!children.length) return null\n          return { name: f.name, children, route: fileRoute }\n        } else if (f.name === 'meta.json') {\n          return null\n        } else if (extension.test(f.name)) {\n          return { name: f.name.replace(extension, ''), route: fileRoute }\n        }\n      })\n      .map(item => {\n        if (!item) return\n        return { ...item, metaPath: join(route, 'meta.json') }\n      })\n      .filter(Boolean)\n\n    return items\n  }\n  module.exports = getFiles(join(process.cwd(), 'pages'), '/')\n`\n\nconst attachPageConfig = function (items) {\n  let folderMeta = null\n  let fnames = null\n\n  return items\n    .filter(item => !excludes.includes(item.name))\n    .map(item => {\n      const { metaPath, ...rest } = item\n      folderMeta = meta[metaPath]\n      if (folderMeta) {\n        fnames = Object.keys(folderMeta)\n      }\n\n      const pageConfig = folderMeta?.[item.name]\n\n      if (rest.children) rest.children = attachPageConfig(rest.children)\n\n      if (pageConfig) {\n        if (typeof pageConfig === 'string') {\n          return { ...rest, title: pageConfig }\n        }\n        return { ...rest, ...pageConfig }\n      } else {\n        if (folderMeta) {\n          return null\n        }\n        return { ...rest, title: title(item.name) }\n      }\n    })\n    .filter(Boolean)\n    .sort((a, b) => {\n      if (folderMeta) {\n        return fnames.indexOf(a.name) - fnames.indexOf(b.name)\n      }\n      // by default, we put directories first\n      if (!!a.children !== !!b.children) {\n        return !!a.children ? -1 : 1\n      }\n      // sort by file name\n      return a.name < b.name ? -1 : 1\n    })\n}\n\nexport default () => {\n  return attachPageConfig(items)\n}\n"
  },
  {
    "path": "website/.nextra/docsearch.js",
    "content": "import { useRef, useEffect } from 'react'\n\nexport default function () {\n  const input = useRef(null)\n\n  useEffect(() => {\n    const inputs = ['input', 'select', 'button', 'textarea']\n\n    const down = (e) => {\n      if (\n        document.activeElement &&\n        inputs.indexOf(document.activeElement.tagName.toLowerCase() !== -1)\n      ) {\n        if (e.key === '/') {\n          e.preventDefault()\n          input.current?.focus()\n        }\n      }\n    }\n\n    window.addEventListener('keydown', down)\n    return () => window.removeEventListener('keydown', down)\n  }, [])\n\n  useEffect(() => {\n    if (window.docsearch) {\n      window.docsearch({\n        apiKey: '247dd86c8ddbbbe6d7a2d4adf4f3a68a',\n        indexName: 'vercel_swr',\n        inputSelector: 'input#algolia-doc-search'\n      })\n    }\n  }, [])\n\n  return <div className=\"relative w-full md:w-64 mr-2\">\n    <input\n      id=\"algolia-doc-search\"\n      className=\"appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full\"\n      type=\"search\"\n      placeholder='Search (\"/\" to focus)'\n      ref={input}\n    />\n  </div>\n}\n"
  },
  {
    "path": "website/.nextra/github-icon.js",
    "content": "export default ({ height = 40 }) => {\n  return <svg height={height} viewBox=\"0 0 24 24\" fill=\"none\">\n    <path fillRule=\"evenodd\" clipRule=\"evenodd\" d=\"M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z\" fill=\"currentColor\"/>\n  </svg>\n}"
  },
  {
    "path": "website/.nextra/layout.js",
    "content": "import React, {\n  useState,\n  useEffect,\n  useMemo,\n  useContext,\n  createContext,\n} from 'react';\nimport { useRouter } from 'next/router';\nimport Head from 'next/head';\nimport Link from 'next/link';\nimport slugify from '@sindresorhus/slugify';\nimport 'focus-visible';\nimport cn from 'classnames';\nimport { SkipNavContent } from '@reach/skip-nav';\n\nimport Theme from './theme';\nimport SSGContext from './ssg';\nimport Search from './search';\n// import DocSearch from './docsearch'\nimport GitHubIcon from './github-icon';\nimport ArrowRight from './arrow-right';\n\nimport getDirectories from './directories';\nimport getConfig from './config';\n\nconst config = getConfig();\nconst directories = getDirectories();\nconst TreeState = new Map();\nconst titleType = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];\nconst MenuContext = createContext(false);\n\nconst flatten = (list) => {\n  return list.reduce((flat, toFlatten) => {\n    return flat.concat(\n      toFlatten.children ? flatten(toFlatten.children) : toFlatten\n    );\n  }, []);\n};\n\nconst flatDirectories = flatten(directories);\n\nfunction Folder({ item, anchors }) {\n  const route = useRouter().route + '/';\n  const active = route.startsWith(item.route + '/');\n  const open = TreeState[item.route] ?? item?.open ?? false;\n  const [_, render] = useState(false);\n\n  useEffect(() => {\n    if (active) {\n      TreeState[item.route] = true;\n    }\n  }, [active]);\n\n  return (\n    <li\n      className={cn({\n        'active-route': active,\n        active: open,\n      })}\n    >\n      <button\n        onClick={() => {\n          if (active) return;\n          TreeState[item.route] = !open;\n          render((x) => !x);\n        }}\n        className=\"focus:shadow-outline\"\n      >\n        {item.title}\n      </button>\n      <div\n        style={{\n          display: open ? '' : 'none',\n        }}\n      >\n        <Menu dir={item.children} base={item.route} anchors={anchors} />\n      </div>\n    </li>\n  );\n}\n\nfunction File({ item, anchors }) {\n  const { setMenu } = useContext(MenuContext);\n  const route = useRouter().route + '/';\n  const active = route.startsWith(item.route + '/');\n\n  let title = item.title;\n  // if (item.title.startsWith('> ')) {\n  // title = title.substr(2)\n  if (anchors?.length) {\n    if (active) {\n      return (\n        <li className={active ? 'active' : ''}>\n          <Link href={item.route}>\n            <a>{title}</a>\n          </Link>\n          <ul>\n            {anchors.map((anchor) => {\n              const slug = slugify(anchor || '');\n              return (\n                <li key={`a-${slug}`}>\n                  <a\n                    href={'#' + slug}\n                    onClick={() => setMenu(false)}\n                    className=\"focus:shadow-outline\"\n                  >\n                    <span className=\"flex\">\n                      <span className=\"mr-2 opacity-25\">#</span>\n                      <span className=\"inline-block\">{anchor}</span>\n                    </span>\n                  </a>\n                </li>\n              );\n            })}\n          </ul>\n        </li>\n      );\n    }\n  }\n\n  return (\n    <li className={active ? 'active' : ''}>\n      <Link href={item.route}>\n        <a onClick={() => setMenu(false)} className=\"focus:shadow-outline\">\n          {title}\n        </a>\n      </Link>\n    </li>\n  );\n}\n\nfunction Menu({ dir, anchors }) {\n  return (\n    <ul>\n      {dir.map((item) => {\n        if (item.children) {\n          return <Folder key={item.name} item={item} anchors={anchors} />;\n        }\n        return <File key={item.name} item={item} anchors={anchors} />;\n      })}\n    </ul>\n  );\n}\n\nfunction Sidebar({ show, anchors }) {\n  return (\n    <aside\n      className={`h-screen bg-white flex-shrink-0 w-full md:w-64 md:border-r md:block fixed md:sticky z-10 ${\n        show ? '' : 'hidden'\n      }`}\n      style={{\n        top: '4rem',\n        height: 'calc(100vh - 4rem)',\n      }}\n    >\n      <div className=\"sidebar w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto\">\n        <Menu dir={directories} anchors={anchors} />\n      </div>\n    </aside>\n  );\n}\n\nconst NextLink = ({ currentIndex }) => {\n  let next = flatDirectories[currentIndex + 1];\n\n  if (!config.nextLinks || !next) {\n    return null;\n  }\n\n  return (\n    <Link href={next.route}>\n      <a className=\"text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center ml-2\">\n        {next.title}\n        <ArrowRight className=\"inline ml-1 flex-shrink-0\" />\n      </a>\n    </Link>\n  );\n};\n\nconst PrevLink = ({ currentIndex }) => {\n  let prev = flatDirectories[currentIndex - 1];\n\n  if (!config.prevLinks || !prev) {\n    return null;\n  }\n\n  return (\n    <Link href={prev.route}>\n      <a className=\"text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center mr-2\">\n        <ArrowRight className=\"transform rotate-180 inline mr-1 flex-shrink-0\" />\n        {prev.title}\n      </a>\n    </Link>\n  );\n};\n\nconst Layout = ({ filename, full, title: _title, ssg = {}, children }) => {\n  const [menu, setMenu] = useState(false);\n  const router = useRouter();\n  const { route, pathname } = router;\n\n  const filepath = route.slice(0, route.lastIndexOf('/') + 1);\n  const titles = React.Children.toArray(children).filter((child) =>\n    titleType.includes(child.props.mdxType)\n  );\n  const anchors = titles\n    .filter((child) => child.props.mdxType === 'h2')\n    .map((child) => child.props.children);\n\n  useEffect(() => {\n    if (menu) {\n      document.body.classList.add('overflow-hidden');\n    } else {\n      document.body.classList.remove('overflow-hidden');\n    }\n  }, [menu]);\n\n  const currentIndex = useMemo(\n    () => flatDirectories.findIndex((dir) => dir.route === pathname),\n    [flatDirectories, pathname]\n  );\n\n  const title =\n    flatDirectories[currentIndex]?.title ||\n    titles.find((child) => child.props.mdxType === 'h1')?.props.children ||\n    'Untitled';\n\n  const props = {\n    filepath: filepath + filename,\n    route,\n  };\n\n  return (\n    <>\n      <Head>\n        <title>\n          {title}\n          {config.titleSuffix || ''}\n        </title>\n        {config.head ? config.head(props) : null}\n      </Head>\n      <div className=\"main-container flex flex-col\">\n        <nav className=\"flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b px-6 \">\n          <div className=\"mr-6 md:mr-0 md:w-full flex items-center\">\n            <Link href=\"/\">\n              <a className=\"no-underline text-current inline-flex items-center p-2 -m-2 hover:opacity-75\">\n                {config.logo}\n              </a>\n            </Link>\n          </div>\n\n          {config.search && <Search directories={flatDirectories} />}\n          {/* <DocSearch /> */}\n\n          {config.github ? (\n            <a\n              className=\"text-current p-2 -mr-2\"\n              href={config.github}\n              target=\"_blank\"\n              rel=\"noopener\"\n              aria-label=\"GitHub Repository\"\n            >\n              <GitHubIcon height={28} />\n            </a>\n          ) : null}\n          <button\n            className=\"block md:hidden p-2 -mr-2 ml-2\"\n            onClick={() => setMenu(!menu)}\n          >\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            >\n              <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"></line>\n              <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"></line>\n              <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"></line>\n            </svg>\n          </button>\n        </nav>\n        <div className=\"flex flex-1 h-full\">\n          <MenuContext.Provider value={{ setMenu }}>\n            <Sidebar show={menu} anchors={anchors} />\n          </MenuContext.Provider>\n          <SSGContext.Provider value={ssg}>\n            {full ? (\n              <content className=\"relative pt-16 w-full overflow-x-hidden\">\n                {children}\n              </content>\n            ) : (\n              <>\n                <SkipNavContent />\n                <content className=\"relative pt-20 pb-16 px-6 md:px-8 w-full max-w-full overflow-x-hidden\">\n                  <main className=\"max-w-screen-md\">\n                    <Theme>{children}</Theme>\n                    <footer className=\"mt-24\">\n                      <nav className=\"flex flex-row items-center justify-between\">\n                        <div>\n                          <PrevLink currentIndex={currentIndex} />\n                        </div>\n\n                        <div>\n                          <NextLink currentIndex={currentIndex} />\n                        </div>\n                      </nav>\n\n                      <hr />\n\n                      {config.footer ? config.footer(props) : null}\n                    </footer>\n                  </main>{' '}\n                </content>\n              </>\n            )}\n          </SSGContext.Provider>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default (filename) => {\n  return (props) => <Layout filename={filename} {...props} />;\n};\n"
  },
  {
    "path": "website/.nextra/nextra-loader.js",
    "content": "module.exports = function(source, map) {\n  this.cacheable()\n  const fileName = this.resourcePath.slice(this.resourcePath.lastIndexOf('/') + 1)\n  const prefix = `import withNextraLayout from '.nextra/layout'\\n\\n`\n  const suffix = `\\n\\nexport default withNextraLayout(\"${fileName}\")`\n  source = prefix + source + suffix\n  this.callback(null, source, map)\n}\n"
  },
  {
    "path": "website/.nextra/nextra.js",
    "content": "const path = require('path')\n\nmodule.exports = (pluginOptions = {\n  extension: /\\.mdx?$/\n}) => (nextConfig = {\n  pageExtensions: ['js', 'jsx', 'md', 'mdx']\n}) => {\n  const extension = pluginOptions.extension || /\\.mdx$/\n\n  return Object.assign({}, nextConfig, {\n    webpack(config, options) {\n      \n      config.resolve.symlinks = false\n\n      config.module.rules.push({\n        test: extension,\n        use: [\n          options.defaultLoaders.babel,\n          {\n            loader: '@mdx-js/loader',\n            options: pluginOptions.options\n          },\n          {\n            loader: path.resolve('.nextra', 'nextra-loader.js')\n          }\n        ]\n      })\n\n      if (typeof nextConfig.webpack === 'function') {\n        return nextConfig.webpack(config, options)\n      }\n\n      return config\n    }\n  })\n}\n"
  },
  {
    "path": "website/.nextra/search.js",
    "content": "import { useMemo, useCallback, useRef, useState, useEffect } from 'react';\nimport matchSorter from 'match-sorter';\nimport cn from 'classnames';\nimport { useRouter } from 'next/router';\nimport Link from 'next/link';\n\nconst Item = ({ title, active, href, onMouseOver, search }) => {\n  const highlight = title.toLowerCase().indexOf(search.toLowerCase());\n\n  return (\n    <Link href={href}>\n      <a className=\"block no-underline\" onMouseOver={onMouseOver}>\n        <li\n          className={cn('py-2 px-3 text-gray-800', {\n            'bg-gray-100': active,\n          })}\n        >\n          {title.substring(0, highlight)}\n          <span className=\"bg-teal-300\">\n            {title.substring(highlight, highlight + search.length)}\n          </span>\n          {title.substring(highlight + search.length)}\n        </li>\n      </a>\n    </Link>\n  );\n};\n\nconst Search = ({ directories }) => {\n  const router = useRouter();\n  const [show, setShow] = useState(false);\n  const [search, setSearch] = useState('');\n  const [active, setActive] = useState(0);\n  const input = useRef(null);\n\n  const results = useMemo(() => {\n    if (!search) return [];\n\n    // Will need to scrape all the headers from each page and search through them here\n    // (similar to what we already do to render the hash links in sidebar)\n    // We could also try to search the entire string text from each page\n    return matchSorter(directories, search, { keys: ['title'] });\n  }, [search]);\n\n  const handleKeyDown = useCallback(\n    (e) => {\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          if (active + 1 < results.length) {\n            setActive(active + 1);\n          }\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          if (active - 1 >= 0) {\n            setActive(active - 1);\n          }\n          break;\n        }\n        case 'Enter': {\n          router.push(results[active].route);\n          break;\n        }\n      }\n    },\n    [active, results, router]\n  );\n\n  useEffect(() => {\n    setActive(0);\n  }, [search]);\n\n  useEffect(() => {\n    const inputs = ['input', 'select', 'button', 'textarea'];\n\n    const down = (e) => {\n      if (\n        document.activeElement &&\n        inputs.indexOf(document.activeElement.tagName.toLowerCase() !== -1)\n      ) {\n        if (e.key === '/') {\n          e.preventDefault();\n          input.current.focus();\n        } else if (e.key === 'Escape') {\n          setShow(false);\n        }\n      }\n    };\n\n    window.addEventListener('keydown', down);\n    return () => window.removeEventListener('keydown', down);\n  }, []);\n\n  const renderList = show && results.length > 0;\n\n  return (\n    <div className=\"relative w-full md:w-64 mr-2\">\n      {renderList && (\n        <div className=\"search-overlay z-1\" onClick={() => setShow(false)} />\n      )}\n      <div className=\"absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none\">\n        <svg\n          fill=\"none\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          strokeWidth=\"2\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          className=\"h-4 w-4 text-gray-400\"\n        >\n          <path d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"></path>\n        </svg>\n      </div>\n      <input\n        onChange={(e) => {\n          setSearch(e.target.value);\n          setShow(true);\n        }}\n        className=\"appearance-none pl-8 border rounded-md py-2 pr-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full\"\n        type=\"search\"\n        placeholder='Search (\"/\" to focus)'\n        onKeyDown={handleKeyDown}\n        onFocus={() => setShow(true)}\n        ref={input}\n        aria-label=\"Search documentation\"\n      />\n      {renderList && (\n        <ul className=\"shadow-md list-none p-0 m-0 absolute left-0 md:right-0 bg-white rounded-md mt-1 border top-100 divide-y divide-gray-300 z-2\">\n          {results.map((res, i) => {\n            return (\n              <Item\n                key={`search-item-${i}`}\n                title={res.title}\n                href={res.route}\n                active={i === active}\n                search={search}\n                onMouseOver={() => setActive(i)}\n              />\n            );\n          })}\n        </ul>\n      )}\n    </div>\n  );\n};\n\nexport default Search;\n"
  },
  {
    "path": "website/.nextra/ssg.js",
    "content": "import { createContext, useContext } from 'react'\n\nconst SSGContext = createContext({})\n\nexport default SSGContext\nexport const useSSG = () => useContext(SSGContext)\n"
  },
  {
    "path": "website/.nextra/styles.css",
    "content": "@tailwind base;\n\nhtml {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',\n    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n}\n@supports (font-variation-settings: normal) {\n  html {\n    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',\n      'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',\n      'Helvetica Neue', sans-serif;\n  }\n}\n\nhtml {\n  @apply subpixel-antialiased;\n  font-size: 16px;\n  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;\n}\nbody {\n  @apply bg-white;\n}\n\nh1 {\n  @apply text-4xl font-bold tracking-tight;\n}\nh2 {\n  @apply text-3xl font-semibold tracking-tight mt-10;\n  @apply border-b;\n}\nh3 {\n  @apply text-2xl font-semibold tracking-tight mt-8;\n}\nh4 {\n  @apply text-xl font-semibold tracking-tight mt-8;\n}\nh5 {\n  @apply text-lg font-semibold tracking-tight mt-8;\n}\nh6 {\n  @apply text-base font-semibold tracking-tight mt-8;\n}\na {\n  @apply text-blue-600 underline;\n}\np {\n  @apply mt-6 leading-7;\n}\nhr {\n  @apply my-8;\n}\ncode {\n  @apply p-1 text-sm text-gray-800 bg-gray-500 bg-opacity-25 rounded;\n}\npre {\n  @apply p-4 bg-gray-200 rounded-lg mt-6 mb-4 overflow-x-auto scrolling-touch;\n}\npre code {\n  @apply p-0 text-black bg-transparent rounded-none;\n}\na code {\n  @apply text-current no-underline;\n}\nfigure {\n  @apply mb-8 relative;\n}\nvideo {\n  @apply absolute top-0 left-0;\n  cursor: pointer;\n}\nfigure figcaption {\n  @apply text-sm text-gray-600;\n}\n@media (min-width: 768px) {\n  figure {\n    /* allow figures to overflow, but not exceeding the viewport width */\n    @apply -mr-56;\n    max-width: calc(100vw - 20rem);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n.main-container {\n  min-height: 100vh;\n}\n\n.sidebar {\n  @apply select-none;\n}\n.sidebar ul ul {\n  @apply ml-5;\n}\n.sidebar a:focus-visible,\n.sidebar button:focus-visible {\n  @apply shadow-outline;\n}\n.sidebar li.active > a {\n  @apply font-semibold text-black bg-gray-200;\n}\n.sidebar button,\n.sidebar a {\n  @apply block w-full text-left text-base text-black no-underline text-gray-600 mt-1 p-2 rounded select-none outline-none;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n}\n.sidebar a:hover,\n.sidebar button:hover {\n  @apply text-gray-900 bg-gray-100;\n}\n\n.sidebar .active-route > button {\n  @apply text-black font-medium;\n}\n\n.sidebar .active-route > button:hover {\n  @apply text-current bg-transparent cursor-default;\n}\n\ncontent ul {\n  @apply list-disc ml-6 mt-6;\n}\ncontent li {\n  @apply mt-2;\n}\n.subheading-anchor {\n  margin-top: -84px;\n  display: inline-block;\n  position: absolute;\n  width: 1px;\n}\n\n.subheading-anchor + a:hover .anchor-icon,\n.subheading-anchor + a:focus .anchor-icon {\n  opacity: 1;\n}\n.anchor-icon {\n  opacity: 0;\n  @apply ml-2 text-gray-500;\n}\n\nh2 a {\n  @apply no-underline;\n}\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n\n.search-overlay {\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n\n.algolia-autocomplete .algolia-docsearch-suggestion--category-header span {\n  display: inline-block;\n}\n.algolia-autocomplete .ds-dropdown-menu {\n  width: 500px;\n  min-width: 300px;\n  max-width: calc(100vw - 50px);\n}\n\n[data-reach-skip-link] {\n  @apply sr-only;\n}\n\n[data-reach-skip-link]:focus {\n  @apply not-sr-only fixed ml-6 top-0 bg-white text-lg px-6 py-2 mt-2 outline-none shadow-outline z-50;\n}\n"
  },
  {
    "path": "website/.nextra/theme.js",
    "content": "import { MDXProvider } from '@mdx-js/react'\nimport slugify from '@sindresorhus/slugify'\nimport Link from 'next/link'\nimport Highlight, { defaultProps } from 'prism-react-renderer'\n\nconst THEME = {\n  plain: {\n    color: '#000',\n    backgroundColor: 'transparent',\n  },\n  styles: [\n    {\n      types: ['keyword'],\n      style: {\n        color: '#ff0078',\n        fontWeight: 'bold',\n      },\n    },\n    {\n      types: ['comment'],\n      style: {\n        color: '#999',\n        fontStyle: 'italic',\n      },\n    },\n    {\n      types: ['string', 'url', 'attr-value'],\n      style: {\n        color: '#028265',\n      },\n    },\n    {\n      types: ['builtin', 'char', 'constant', 'language-javascript'],\n      style: {\n        color: '#000',\n      },\n    },\n    {\n      types: ['attr-name'],\n      style: {\n        color: '#d9931e',\n        fontStyle: 'normal',\n      },\n    },\n    {\n      types: ['punctuation', 'operator'],\n      style: {\n        color: '#333',\n      },\n    },\n    {\n      types: ['number', 'function', 'tag'],\n      style: {\n        color: '#0076ff',\n      },\n    },\n    {\n      types: ['boolean', 'regex'],\n      style: {\n        color: '#d9931e',\n      },\n    },\n  ],\n}\n\n// Anchor links\n\nconst HeaderLink = ({ tag: Tag, children, ...props }) => {\n  const slug = slugify(children || '')\n  return (\n    <Tag {...props}>\n      <span className=\"subheading-anchor\" id={slug} />\n      <a href={'#' + slug} className=\"text-current no-underline no-outline\">\n        {children}\n        <span className=\"anchor-icon select-none\" aria-hidden>#</span>\n      </a>\n    </Tag>\n  )\n}\n\nconst H2 = ({ children, ...props }) => {\n  return (\n    <HeaderLink tag=\"h2\" {...props}>\n      {children}\n    </HeaderLink>\n  )\n}\n\nconst H3 = ({ children, ...props }) => {\n  return (\n    <HeaderLink tag=\"h3\" {...props}>\n      {children}\n    </HeaderLink>\n  )\n}\n\nconst H4 = ({ children, ...props }) => {\n  return (\n    <HeaderLink tag=\"h4\" {...props}>\n      {children}\n    </HeaderLink>\n  )\n}\n\nconst H5 = ({ children, ...props }) => {\n  return (\n    <HeaderLink tag=\"h5\" {...props}>\n      {children}\n    </HeaderLink>\n  )\n}\n\nconst H6 = ({ children, ...props }) => {\n  return (\n    <HeaderLink tag=\"h6\" {...props}>\n      {children}\n    </HeaderLink>\n  )\n}\n\nconst A = ({ children, ...props }) => {\n  const isExternal = props.href?.startsWith('https://')\n  if (isExternal) {\n    return (\n      <a target=\"_blank\" rel=\"noopener\" {...props}>\n        {children}\n      </a>\n    )\n  }\n  return (\n    <Link href={props.href}>\n      <a {...props}>{children}</a>\n    </Link>\n  )\n}\n\nconst Code = ({ children, className, highlight, ...props }) => {\n  if (!className) return <code {...props}>{children}</code>\n\n  const highlightedLines = highlight ? highlight.split(',').map(Number) : []\n\n  // https://mdxjs.com/guides/syntax-highlighting#all-together\n  const language = className.replace(/language-/, '')\n  return (\n    <Highlight\n      {...defaultProps}\n      code={children.trim()}\n      language={language}\n      theme={THEME}\n    >\n      {({ className, style, tokens, getLineProps, getTokenProps }) => (\n        <code className={className} style={{ ...style }}>\n          {tokens.map((line, i) => (\n            <div\n              key={i}\n              {...getLineProps({ line, key: i })}\n              style={\n                highlightedLines.includes(i + 1)\n                  ? {\n                      background: '#cce0f5',\n                      margin: '0 -1rem',\n                      padding: '0 1rem',\n                    }\n                  : null\n              }\n            >\n              {line.map((token, key) => (\n                <span key={key} {...getTokenProps({ token, key })} />\n              ))}\n            </div>\n          ))}\n        </code>\n      )}\n    </Highlight>\n  )\n}\n\nconst components = {\n  h2: H2,\n  h3: H3,\n  h4: H4,\n  h5: H5,\n  h6: H6,\n  a: A,\n  code: Code,\n}\n\nexport default ({ children }) => {\n  return <MDXProvider components={components}>{children}</MDXProvider>\n}\n"
  },
  {
    "path": "website/components/features.js",
    "content": "import React from 'react';\nexport default () => (\n  <div>\n    <p className=\"text-lg mb-2 text-gray-600 md:text-xl\">\n      Build modern JavaScript applications. From zero to production.\n    </p>\n  </div>\n);\n"
  },
  {
    "path": "website/components/logo.js",
    "content": "import React from 'react';\n\nexport const Logo = ({ height }) => (\n  <svg height={height} viewBox=\"0 0 728 131\">\n    <title>{'Group 4'}</title>\n    <defs>\n      <linearGradient\n        x1=\".258%\"\n        y1=\"49.75%\"\n        x2=\"101.258%\"\n        y2=\"49.75%\"\n        id=\"prefix__c\"\n      >\n        <stop stopColor=\"#3023AE\" offset=\"0%\" />\n        <stop stopColor=\"#53A0FD\" offset=\"70.741%\" />\n        <stop stopColor=\"#B4EC51\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        x1=\"101.258%\"\n        y1=\"49.75%\"\n        x2=\".258%\"\n        y2=\"49.75%\"\n        id=\"prefix__d\"\n      >\n        <stop stopColor=\"#3023AE\" offset=\"0%\" />\n        <stop stopColor=\"#53A0FD\" offset=\"70.741%\" />\n        <stop stopColor=\"#B4EC51\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        x1=\".258%\"\n        y1=\"49.75%\"\n        x2=\"101.258%\"\n        y2=\"49.75%\"\n        id=\"prefix__e\"\n      >\n        <stop stopColor=\"#3023AE\" offset=\"0%\" />\n        <stop stopColor=\"#53A0FD\" offset=\"70.741%\" />\n        <stop stopColor=\"#B4EC51\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        x1=\".258%\"\n        y1=\"49.75%\"\n        x2=\"101.258%\"\n        y2=\"49.75%\"\n        id=\"prefix__f\"\n      >\n        <stop stopColor=\"#3023AE\" offset=\"0%\" />\n        <stop stopColor=\"#53A0FD\" offset=\"70.741%\" />\n        <stop stopColor=\"#B4EC51\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        x1=\".258%\"\n        y1=\"49.75%\"\n        x2=\"101.258%\"\n        y2=\"49.75%\"\n        id=\"prefix__g\"\n      >\n        <stop stopColor=\"#3023AE\" offset=\"0%\" />\n        <stop stopColor=\"#53A0FD\" offset=\"70.741%\" />\n        <stop stopColor=\"#B4EC51\" offset=\"100%\" />\n      </linearGradient>\n      <linearGradient\n        x1=\".258%\"\n        y1=\"49.75%\"\n        x2=\"101.258%\"\n        y2=\"49.75%\"\n        id=\"prefix__h\"\n      >\n        <stop stopColor=\"#3023AE\" offset=\"0%\" />\n        <stop stopColor=\"#53A0FD\" offset=\"70.741%\" />\n        <stop stopColor=\"#B4EC51\" offset=\"100%\" />\n      </linearGradient>\n      <path\n        d=\"M.492 131V.903h63.116c2.738 0 5.602.452 8.592 1.356 2.99.903 5.53 2.114 7.619 3.631.72.579 1.657 1.374 2.81 2.386l3.35 3.469 3.134 3.36c1.009 1.085 1.801 1.988 2.378 2.711 1.44 1.951 2.486 4.228 3.134 6.83.648 2.602.973 5.096.973 7.48v18.431c0 5.348-1.37 10.046-4.107 14.094-.505.795-1.243 1.734-2.216 2.819a88.323 88.323 0 01-3.188 3.36 71.348 71.348 0 01-3.458 3.253c-1.153 1.012-2.09 1.77-2.81 2.276-.865.723-1.73 1.301-2.594 1.735l-2.594 1.301 4.215 7.806 4.647 8.565 4.756 8.564 4.43 8.24L102.732 131H73.334L47.613 81.346h-20.75V131H.492zm26.37-75.022h36.746c.144 0 .468-.163.972-.488a11.581 11.581 0 001.621-1.301 36.787 36.787 0 001.676-1.68c.54-.579.99-1.157 1.35-1.735V31.476c-.576-.867-1.386-1.807-2.431-2.819-1.045-1.011-2.108-1.807-3.188-2.385H26.862v29.706zM127.252 131L172.21.903h29.18L246.133 131h-28.1l-8.645-24.935h-45.175L155.35 131h-28.1zm44.958-50.304h29.18l-14.698-41.848-14.482 41.848zM277.138 131v-19.298l55.55-85.43h-54.685V.903h89.053v19.515l-54.902 85.213h54.902V131h-89.918zm123.95 0v-19.298l55.55-85.43h-54.686V.903h89.053v19.515l-54.901 85.213h54.901V131h-89.918zm124.813 0V.903h26.37v104.511h57.496V131H525.9zm116.384 0V.903h85.163v25.37h-58.793v26.67h56.847V78.31h-56.847v27.32h58.793V131h-85.163z\"\n        id=\"prefix__a\"\n      />\n    </defs>\n    <g fill=\"none\" fillRule=\"evenodd\">\n      <mask id=\"prefix__b\" fill=\"#fff\">\n        <use xlinkHref=\"#prefix__a\" />\n      </mask>\n      <use fill=\"#FFF\" xlinkHref=\"#prefix__a\" />\n      <g mask=\"url(#prefix__b)\">\n        <path\n          fill=\"#000\"\n          d=\"M-321.581-241.135L820.96 418.512l-17.452 30.229-1142.542-659.647z\"\n        />\n        <path\n          fill=\"url(#prefix__c)\"\n          d=\"M0 34.905h1319.293V69.81H0z\"\n          transform=\"rotate(30 289.173 -720.646)\"\n        />\n        <path\n          fill=\"#000\"\n          d=\"M-356.486-180.677L786.055 478.969l-17.452 30.229L-373.94-150.45zM-391.391-120.22L751.15 539.426l-17.452 30.23L-408.844-89.992z\"\n        />\n        <path\n          fill=\"url(#prefix__c)\"\n          d=\"M0 69.81h1319.293v34.905H0z\"\n          transform=\"rotate(30 93.772 -773.003)\"\n        />\n        <path\n          fill=\"url(#prefix__d)\"\n          d=\"M-40.981-10.981h1319.293v34.905H-40.981z\"\n          transform=\"rotate(30 93.772 -773.003)\"\n        />\n        <path\n          fill=\"#000\"\n          d=\"M-426.296-59.763L716.245 599.884l-17.452 30.228L-443.75-29.534z\"\n        />\n        <g>\n          <path\n            fill=\"#000\"\n            d=\"M14.65-432.364L1157.19 227.282l-17.452 30.229L-2.803-402.136z\"\n          />\n          <path\n            fill=\"url(#prefix__c)\"\n            d=\"M0 34.905h1319.293V69.81H0z\"\n            transform=\"rotate(30 814.128 -188.845)\"\n          />\n          <path\n            fill=\"#000\"\n            d=\"M-20.255-371.907l1142.541 659.646-17.452 30.229L-37.708-341.679z\"\n          />\n          <g>\n            <path\n              fill=\"#000\"\n              d=\"M-55.16-311.45L1087.38 348.197l-17.452 30.228L-72.613-281.22z\"\n            />\n            <path\n              fill=\"url(#prefix__c)\"\n              d=\"M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z\"\n              transform=\"rotate(30 618.727 -241.203)\"\n            />\n            <path\n              fill=\"#000\"\n              d=\"M-90.065-250.993l1142.541 659.647-17.452 30.229-1142.542-659.647z\"\n            />\n          </g>\n        </g>\n        <g>\n          <path\n            fill=\"#000\"\n            d=\"M-36.824-203.173l1239.73 451.224-11.939 32.8-1239.73-451.224z\"\n          />\n          <path\n            fill=\"url(#prefix__c)\"\n            d=\"M0 34.905h1319.293V69.81H0z\"\n            transform=\"rotate(20 557.715 -206.007)\"\n          />\n          <path\n            fill=\"#000\"\n            d=\"M-60.7-137.573L1179.03 313.65l-11.939 32.8-1239.73-451.225z\"\n          />\n          <g>\n            <path\n              fill=\"#000\"\n              d=\"M-84.577-71.974l1239.73 451.225-11.938 32.8L-96.515-39.174z\"\n            />\n            <path\n              fill=\"url(#prefix__c)\"\n              d=\"M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z\"\n              transform=\"rotate(20 260.78 -258.365)\"\n            />\n            <path\n              fill=\"#000\"\n              d=\"M-108.454-6.374l1239.73 451.225-11.938 32.8-1239.73-451.225z\"\n            />\n          </g>\n        </g>\n        <g>\n          <path\n            fill=\"#000\"\n            d=\"M-231.11 351.479l267-462.458 21.45 12.384-267 462.458z\"\n          />\n          <path\n            fill=\"url(#prefix__e)\"\n            d=\"M0 24.768h534v24.768H0z\"\n            transform=\"rotate(-60 188.835 375.886)\"\n          />\n          <path\n            fill=\"#000\"\n            d=\"M-188.21 376.247l267-462.458 21.45 12.384-267 462.458z\"\n          />\n          <g>\n            <path\n              fill=\"#000\"\n              d=\"M-157.487 420.414L132.675-82.161l23.382 13.5-290.161 502.575z\"\n            />\n            <path\n              fill=\"url(#prefix__f)\"\n              d=\"M25 52.726h534.39v24.863H25z\"\n              transform=\"rotate(-60 264.083 361.22)\"\n            />\n            <path\n              fill=\"url(#prefix__g)\"\n              d=\"M.534.402h580.323v27H.534z\"\n              transform=\"rotate(-60 264.083 361.22)\"\n            />\n            <path\n              fill=\"#000\"\n              d=\"M-101.09 426.456L166.107-36.34l21.532 12.432-267.195 462.796z\"\n            />\n          </g>\n        </g>\n        <g>\n          <path\n            fill=\"#000\"\n            d=\"M341.875-524.215l1142.54 659.647-17.452 30.228-1142.54-659.646z\"\n          />\n          <path\n            fill=\"url(#prefix__c)\"\n            d=\"M0 34.905h1319.293V69.81H0z\"\n            transform=\"rotate(30 1149.136 375.84)\"\n          />\n          <path\n            fill=\"#000\"\n            d=\"M306.97-463.758L1449.51 195.89l-17.452 30.228-1142.54-659.646z\"\n          />\n          <g>\n            <path\n              fill=\"#000\"\n              d=\"M272.065-403.3l1142.54 659.646-17.452 30.229-1142.54-659.647z\"\n            />\n            <path\n              fill=\"url(#prefix__c)\"\n              d=\"M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z\"\n              transform=\"rotate(30 953.735 323.482)\"\n            />\n            <path\n              fill=\"#000\"\n              d=\"M237.16-342.843L1379.7 316.803l-17.452 30.229-1142.54-659.647z\"\n            />\n          </g>\n        </g>\n        <g>\n          <path\n            fill=\"#000\"\n            d=\"M746.149-263.604l527.77 628.972-29.331 24.612-527.77-628.972z\"\n          />\n          <path\n            fill=\"url(#prefix__h)\"\n            d=\"M0 38.289h821.064v38.289H0z\"\n            transform=\"rotate(50 655.724 668.259)\"\n          />\n          <path\n            fill=\"#000\"\n            d=\"M687.487-214.38l527.77 628.971-29.332 24.612-527.77-628.972z\"\n          />\n          <g>\n            <path\n              fill=\"#000\"\n              d=\"M628.825-165.157l527.77 628.972-29.332 24.611-527.77-628.971z\"\n            />\n            <path\n              fill=\"url(#prefix__h)\"\n              d=\"M0 76.578h821.064v38.289H0zM0 0h821.064v38.289H0z\"\n              transform=\"rotate(50 532.558 610.825)\"\n            />\n            <path\n              fill=\"#000\"\n              d=\"M570.162-115.934l527.77 628.972-29.33 24.612-527.77-628.972z\"\n            />\n          </g>\n        </g>\n      </g>\n    </g>\n  </svg>\n);\n"
  },
  {
    "path": "website/components/video.js",
    "content": "import { useRef, useCallback, useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\nimport 'intersection-observer'\n\nexport default ({ src, caption, ratio }) => {\n  const [inViewRef, inView] = useInView({\n    threshold: 1,\n  })\n  const videoRef = useRef()\n\n  const setRefs = useCallback(\n    (node) => {\n      // Ref's from useRef needs to have the node assigned to `current`\n      videoRef.current = node\n      // Callback refs, like the one from `useInView`, is a function that takes the node as an argument\n      inViewRef(node)\n\n      if (node) {\n        node.addEventListener('click', function () {\n          if (this.paused) {\n            this.play()\n          } else {\n            this.pause()\n          }\n        })\n      }\n    },\n    [inViewRef]\n  )\n\n  useEffect(() => {\n    if (!videoRef || !videoRef.current) {\n      return\n    }\n\n    if (inView) {\n      videoRef.current.play()\n    } else {\n      videoRef.current.pause()\n    }\n  }, [inView])\n\n  return (\n    <figure>\n      <div style={{ paddingBottom: ratio * 100 + '%' }}/>\n      <video loop muted autoPlay playsInline ref={setRefs}>\n        <source src={src} type=\"video/mp4\" />\n      </video>\n      {caption && <figcaption>{caption}</figcaption>}\n    </figure>\n  )\n}\n"
  },
  {
    "path": "website/jsconfig.json",
    "content": "{\n  \"compilerOptions\": {\n    \"baseUrl\": \".\"\n  }\n}"
  },
  {
    "path": "website/next.config.js",
    "content": "const withNextra = require('./.nextra/nextra')();\nmodule.exports = withNextra();\n"
  },
  {
    "path": "website/nextra.config.js",
    "content": "import { Logo } from 'components/logo';\n\nexport default {\n  github: 'https://github.com/jaredpalmer/razzle',\n  titleSuffix: ' – Razzle',\n  logo: (\n    <>\n      <Logo height={22} />\n      <span className=\" font-extrabold hidden md:inline sr-only\">Razzle</span>\n      <span className=\"mx-3 text-gray-600 font-normal hidden md:inline whitespace-no-wrap\">\n        React applications. From zero to <em>production.</em>\n      </span>\n    </>\n  ),\n  head: () => (\n    <>\n      {/* Favicons, meta */}\n      <link\n        rel=\"apple-touch-icon\"\n        sizes=\"180x180\"\n        href=\"/favicon/apple-touch-icon.png\"\n      />\n      <link\n        rel=\"icon\"\n        type=\"image/png\"\n        sizes=\"32x32\"\n        href=\"/favicon/favicon-32x32.png\"\n      />\n      <link\n        rel=\"icon\"\n        type=\"image/png\"\n        sizes=\"16x16\"\n        href=\"/favicon/favicon-16x16.png\"\n      />\n      <link rel=\"manifest\" href=\"/favicon/site.webmanifest\" />\n\n      <meta name=\"msapplication-TileColor\" content=\"#ffffff\" />\n      <meta name=\"theme-color\" content=\"#ffffff\" />\n      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n      <meta httpEquiv=\"Content-Language\" content=\"en\" />\n      <meta\n        name=\"description\"\n        content=\"Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications.\"\n      />\n      <meta\n        name=\"og:description\"\n        content=\"Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications.\"\n      />\n      <meta name=\"twitter:card\" content=\"summary_large_image\" />\n      <meta name=\"twitter:site\" content=\"@jaredpalmer\" />\n      <meta name=\"twitter:image\" content=\"https://razzlejs.org/og_image.png\" />\n      <meta name=\"og:title\" content=\"Razzle: React Apps. Zero to Production.\" />\n      <meta name=\"og:url\" content=\"https://razzlejs.org\" />\n      <meta name=\"og:image\" content=\"https://razzlejs.org/og_image.png\" />\n      <meta name=\"apple-mobile-web-app-title\" content=\"Razzle\" />\n      {/* <link\n        rel=\"stylesheet\"\n        href=\"https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css\"\n        media=\"print\"\n        onload=\"this.media='all'\"\n      /> */}\n    </>\n  ),\n  footer: ({ filepath }) => (\n    <>\n      <div className=\"mt-24 flex justify-between flex-col-reverse md:flex-row items-center md:items-end\">\n        <a\n          href=\"https://jaredpalmer.com/?utm_source=razzle\"\n          target=\"_blank\"\n          rel=\"noopener\"\n          className=\"inline-flex items-center no-underline text-current font-semibold\"\n        >\n          <span className=\"mr-1\">A Jared Palmer Project</span>\n        </a>\n        <div className=\"mt-6\" />\n        <a\n          className=\"text-sm\"\n          href={\n            'https://github.com/jaredpalmer/razzle/tree/master/website/pages' +\n            filepath\n          }\n          target=\"_blank\"\n          rel=\"noopener\"\n        >\n          Edit this page on GitHub\n        </a>\n      </div>\n    </>\n  ),\n};\n"
  },
  {
    "path": "website/package.json",
    "content": "{\n  \"name\": \"razzle-site\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"dev\": \"next\",\n    \"start\": \"next\",\n    \"build\": \"rm -fr .next && next build\"\n  },\n  \"author\": \"Jared Palmer\",\n  \"license\": \"MIT\",\n  \"dependencies\": {\n    \"@reach/skip-nav\": \"^0.10.5\",\n    \"@sindresorhus/slugify\": \"^1.0.0\",\n    \"classnames\": \"^2.2.6\",\n    \"focus-visible\": \"^5.1.0\",\n    \"intersection-observer\": \"^0.10.0\",\n    \"markdown-to-jsx\": \"^6.11.4\",\n    \"match-sorter\": \"^4.1.0\",\n    \"next\": \"^9.4.4\",\n    \"next-google-fonts\": \"^1.1.0\",\n    \"prism-react-renderer\": \"^1.1.1\",\n    \"react\": \"^16.13.1\",\n    \"react-dom\": \"^16.13.1\",\n    \"react-intersection-observer\": \"^8.26.2\"\n  },\n  \"devDependencies\": {\n    \"@mdx-js/loader\": \"^1.6.5\",\n    \"babel-plugin-macros\": \"^2.8.0\",\n    \"postcss-preset-env\": \"^6.7.0\",\n    \"preval.macro\": \"^5.0.0\",\n    \"tailwindcss\": \"^1.4.6\",\n    \"title\": \"^3.4.2\"\n  }\n}\n"
  },
  {
    "path": "website/pages/_app.js",
    "content": "import '.nextra/styles.css'\nimport GoogleFonts from 'next-google-fonts'\n\nexport default function Nextra({ Component, pageProps }) {\n  return (\n    <>\n      <GoogleFonts\n        href=\"https://fonts.googleapis.com/css2?family=Inter&display=swap\"\n        rel=\"stylesheet\"\n      />\n      <Component {...pageProps} />\n    </>\n  )\n}\n"
  },
  {
    "path": "website/pages/_document.js",
    "content": "import React from 'react'\nimport Document, { Html, Head, Main, NextScript } from 'next/document'\nimport { SkipNavLink } from '@reach/skip-nav'\n\nclass MyDocument extends Document {\n  render() {\n    return (\n      <Html lang=\"en\">\n        <Head />\n        <SkipNavLink />\n        <body>\n          <Main />\n          <NextScript />\n          <script\n            src=\"https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js\"\n            async\n            defer\n          />\n        </body>\n      </Html>\n    )\n  }\n}\n\nexport default MyDocument\n"
  },
  {
    "path": "website/pages/change-log.mdx",
    "content": "import { useContext } from 'react';\nimport Markdown from 'markdown-to-jsx';\n\nimport { useSSG } from '.nextra/ssg';\n\nexport const getStaticProps = ({ params }) => {\n  return (\n    fetch('https://api.github.com/repos/jaredpalmer/razzle/releases')\n      .then((res) => res.json())\n      // we keep the most recent 3 releases here\n      .then((releases) => ({ props: { ssg: releases.slice(0, 10) } }))\n  );\n};\n\nexport const ReleasesRenderer = () => {\n  const releases = useSSG();\n  return (\n    <Markdown>\n      {releases\n        .map((release) => {\n          return `## <a href=\"${\n            release.html_url\n          }\" target=\"_blank\" rel=\"noopener\">${\n            release.tag_name\n          }</a>\\n\\nPublished on ${new Date(\n            release.published_at\n          ).toDateString()}.\\n\\n${release.body}`;\n        })\n        .join('\\n\\n')}\n    </Markdown>\n  );\n};\n\n# Change Log\n\nPlease visit the [Razzle release page](https://github.com/jaredpalmer/razzle/releases) for all historical releases.\n\n<ReleasesRenderer />\n"
  },
  {
    "path": "website/pages/deployment-options/aws.md",
    "content": "# Deploy Razzle on AWS\n\n\nAdd razzle config.\n\n```js\n// razzle.config.js\n'use strict';\nconst path = require('path');\n\nmodule.exports = {\n  options: {\n    buildType: 'serverless'\n  },\n  modifyPaths({\n    paths,\n  }) {\n    paths.prodAppServerIndexJs = path.join(paths.appSrc, 'index.prod');\n    return paths;\n  },\n  modifyWebpackConfig({\n    env: {\n      target,\n      dev,\n    },\n    webpackConfig,\n    paths,\n  }) {\n    if (target === 'node') {\n      if (!dev) {\n        webpackConfig.entry.server = [paths.prodAppServerIndexJs];\n      }\n    }\n    return webpackConfig;\n  },\n};\n```\n\nModify `src/server.js` like so:\n\n```js\nconst public_bucket_domain = process.env.PUBLIC_BUCKET_DOMAIN || '';\nconst public_bucket_url = public_bucket_domain ? `https://${public_bucket_domain}` : '';\n\nconst cssLinksFromAssets = (assets, entrypoint) => {\n  return assets[entrypoint] ? assets[entrypoint].css ?\n  assets[entrypoint].css.map(asset=>\n    `<link rel=\"stylesheet\" href=\"${public_bucket_url}${asset}\">`\n  ).join('') : '' : '';\n};\n\nconst jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {\n  return assets[entrypoint] ? assets[entrypoint].js ?\n  assets[entrypoint].js.map(asset=>\n    `<script src=\"${public_bucket_url}${asset}\"${extra}></script>`\n  ).join('') : '' : '';\n};\n```\n\nAdd this to `src/index.prod.js`\n\n```js\nconst serverless = require('serverless-http');\n\nmodule.exports = {\n  handler: serverless(require('./server').default)\n};\n```\n\nAdd serverless-http dependency\n\n```bash\nyarn add serverless-http\n```\n\nBuild the Razzle project\n\n```bash\nyarn build\n```\n\nInit cdk app\n\n```bash\nmkdir razzle-cdk\ncd razzle-cdk\n\ncdk init app --language typescript\n```\n\nAdd `razzle-cdk` dependencies in `razzle-cdk` directory\n\n```bash\nyarn add @aws-cdk/aws-s3 @aws-cdk/aws-s3-deployment @aws-cdk/aws-lambda @aws-cdk/aws-apigateway @aws-cdk/aws-ssm @aws-cdk/aws-secretsmanager --dev\n```\n\nAdd `razzle-cdk/bin/razzle-cdk.ts`\n\n```typescript\n// bin/cdk.ts\n#!/usr/bin/env node\nimport 'source-map-support/register';\nimport * as cdk from '@aws-cdk/core';\nimport { RazzleCdkStack } from '../lib/razzle-cdk-stack';\n\nconst app = new cdk.App();\nnew RazzleCdkStack(app, 'RazzleCdkStack', {name:'basic'});\n```\n\nAdd `razzle-cdk/lib/helpers.ts`\n\n```typescript\n// razzle-cdk/lib/helpers.ts\nimport * as SSM from '@aws-cdk/aws-ssm';\nimport * as CDK from '@aws-cdk/core';\n\nexport const getParam = (scope: CDK.Construct, name: string) => {\n  return SSM.StringParameter.valueForStringParameter(scope, name);\n};\n\nexport interface ConfigProps extends CDK.StackProps {\n  name: string;\n}\n\nexport class ModeStack extends CDK.Stack {\n  public readonly mode: string = this.node.tryGetContext('mode') || 'development';\n  public readonly Mode: string =\n    this.mode.replace(/^\\w/, (c: string) => c.toUpperCase());\n\n  constructor(scope: CDK.Construct, id: string, props?: ConfigProps) {\n    super(scope, id, props);\n  }\n}\n```\n\nAdd `razzle-cdk/lib/razzle-cdk-stack.ts`\n\n```typescript\n// razzle-cdk/lib/razzle-cdk-stack.ts\nimport * as CDK from '@aws-cdk/core';\nimport * as S3 from '@aws-cdk/aws-s3';\nimport * as S3Deployment from '@aws-cdk/aws-s3-deployment';\nimport * as Lambda from '@aws-cdk/aws-lambda';\nimport * as APIGateway from '@aws-cdk/aws-apigateway';\nimport * as SSM from '@aws-cdk/aws-ssm';\nimport * as SecretsManager from '@aws-cdk/aws-secretsmanager';\n\nimport { ConfigProps, getParam, ModeStack } from './helpers';\n\nexport class RazzleCdkStack extends ModeStack {\n  constructor(app: CDK.App, id: string, props: ConfigProps) {\n    super(app, id, props);\n\n    /**\n     * S3 bucket to the /public folder\n     */\n    const publicBucketName = `my-razzle-app-bucket-public-files-${this.mode}`;\n    const bucketPublicFiles = new S3.Bucket(this, publicBucketName, {\n      publicReadAccess: true,\n      bucketName: publicBucketName.toLowerCase(),\n    });\n\n    /**\n     * Store S3 bucket name\n     */\n    new SSM.StringParameter(this, `MyRazzleAppBucketAssetsName${this.Mode}`, {\n      description: `My Razzle App S3 Bucket Name for Assets on ${this.Mode}`,\n      parameterName: `/${props.name}/S3/Assets/Name`,\n      stringValue: bucketPublicFiles.bucketName,\n    });\n\n    /**\n     * Store S3 domainName name\n     */\n    new SSM.StringParameter(this, `MyRazzleAppBucketAssetsDomainName${this.Mode}`, {\n      description: `My Razzle App S3 Bucket DomainName for Assets on ${this.Mode}`,\n      parameterName: `/${props.name}/S3/Assets/DomainName`,\n      stringValue: bucketPublicFiles.bucketDomainName,\n    });\n\n    /**\n     * Deploy public folder of build to `my-razzle-app-bucket-public-files-${this.mode}` bucket\n     */\n    new S3Deployment.BucketDeployment(this, `${publicBucketName}-deploy`, {\n      sources: [S3Deployment.Source.asset('../build/public')],\n      destinationBucket: bucketPublicFiles,\n    });\n\n    /**\n     * Environment Variables for SSR Function\n     */\n    const environmentKeys = [\n      'NODE_ENV',\n    ];\n\n    const environmentSecret = SecretsManager.Secret.fromSecretAttributes(\n      this,\n      `MyRazzleAppEnvironmentSecret${this.Mode}`,\n      {\n        secretArn: getParam(this, `MyRazzleAppSecretsArn${this.Mode}`),\n      },\n    );\n\n    let environment: { [key: string]: string } = {};\n    for (const key of environmentKeys) {\n      environment[key] = environmentSecret.secretValueFromJson(key).toString();\n    }\n\n    environment['PUBLIC_BUCKET_DOMAIN'] = bucketPublicFiles.bucketRegionalDomainName;\n\n    /**\n     * Razzle SSR Function\n     */\n    const myRazzleAppSsrFunction = new Lambda.Function(this, `MyRazzleAppSSRFunction${this.Mode}`, {\n      description: `Lambda Function that runs My Razzle App SSR on ${this.Mode}`,\n      code: Lambda.Code.fromAsset('../build', {\n        exclude: ['public', 'static', '*.json'],\n      }),\n      handler: 'server.handler',\n      runtime: Lambda.Runtime.NODEJS_12_X,\n      memorySize: 512,\n      timeout: CDK.Duration.seconds(5),\n      environment,\n      tracing: Lambda.Tracing.ACTIVE,\n    });\n\n    /**\n     * Razzle ApiGateway\n     */\n    const razzleSsrApiGatewayName = `MyRazzleAppSSRApiGateway${this.Mode}`;\n    const api = new APIGateway.RestApi(this, razzleSsrApiGatewayName, {\n      description: `ApiGateway that exposes My Razzle App SSR on ${this.Mode}`,\n      binaryMediaTypes: ['*/*'],\n      endpointTypes: [APIGateway.EndpointType.REGIONAL],\n      deployOptions: {\n        stageName: this.mode,\n      },\n    });\n    const integration = new APIGateway.LambdaIntegration(myRazzleAppSsrFunction);\n    const root = api.root;\n    const pathApi = api.root.addResource('{proxy+}');\n\n    root.addMethod('GET', integration);\n    pathApi.addMethod('ANY', integration);\n\n    /**\n     * Razzle ApiGateway ID\n     */\n    new SSM.StringParameter(this, `MyRazzleAppAPIGatewayRestId${this.Mode}`, {\n      description: `My Razzle App ApiGateway ID on ${this.Mode}`,\n      parameterName: `/${props.name}/APIGateway/ApiId`,\n      stringValue: api.restApiId,\n    });\n  }\n}\n```\n\nBootstrap and deploy\n\n```bash\naws configure\necho '{\"NODE_ENV\": \"development\" }' | jq '.' > mycreds.json\naws secretsmanager create-secret --name MyRazzleAppEnvironmentSecretDevelopment \\\n    --description \"My Development secrets created with the CLI\" \\\n    --secret-string file://mycreds.json > arn.json\narn=($(cat arn.json | jq --raw-output '.ARN'))\necho $arn\naws ssm put-parameter --name=MyRazzleAppSecretsArnDevelopment --value=$arn\nyarn cdk bootstrap\nyarn cdk deploy\n```\n"
  },
  {
    "path": "website/pages/deployment-options/azure.md",
    "content": "# Deploy Razzle on Azure\n\n[Install the Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli)\n\nAdd razzle config\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  options: {\n    forceRuntimeEnvVars: ['HOST', 'PORT']\n  }\n};\n```\n\nCreate web.config\n\n```xml\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<!--\n     web.config\n     This configuration file is required if iisnode is used to run node processes behind\n     IIS or IIS Express.  For more information, visit:\n     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config\n-->\n\n<configuration>\n  <system.webServer>\n    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->\n    <webSocket enabled=\"false\" />\n    <handlers>\n      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->\n      <add name=\"iisnode\" path=\"build/server.js\" verb=\"*\" modules=\"iisnode\"/>\n    </handlers>\n    <rewrite>\n      <rules>\n        <!-- Do not interfere with requests for node-inspector debugging -->\n        <rule name=\"NodeInspector\" patternSyntax=\"ECMAScript\" stopProcessing=\"true\">\n          <match url=\"^build/server.js\\/debug[\\/]?\" />\n        </rule>\n\n        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->\n        <rule name=\"StaticContent\">\n          <action type=\"Rewrite\" url=\"build/public{REQUEST_URI}\"/>\n        </rule>\n\n        <!-- All other URLs are mapped to the node.js site entry point -->\n        <rule name=\"DynamicContent\">\n          <conditions>\n            <add input=\"{REQUEST_FILENAME}\" matchType=\"IsFile\" negate=\"True\"/>\n          </conditions>\n          <action type=\"Rewrite\" url=\"build/server.js\"/>\n        </rule>\n      </rules>\n    </rewrite>\n\n    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->\n    <security>\n      <requestFiltering>\n        <hiddenSegments>\n          <remove segment=\"bin\"/>\n        </hiddenSegments>\n      </requestFiltering>\n    </security>\n\n    <!-- Make sure error responses are left untouched -->\n    <httpErrors existingResponse=\"PassThrough\" />\n\n    <!--\n      You can control how Node is hosted within IIS using the following options:\n        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server\n        * node_env: will be propagated to node as NODE_ENV environment variable\n        * debuggingEnabled - controls whether the built-in debugger is enabled\n      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options\n    -->\n    <iisnode watchedFiles=\"web.config;*.js\"/>\n  </system.webServer>\n</configuration>\n```\n\nZip the Razzle project\n\n```bash\nzip -r site.zip * -x \"build/*\" \"node_modules/*\"\n```\n\nLogin to Azure\n\n```bash\naz login\n```\n\nDeploy the Razzle project to Azure\n\n```bash\nwebappname=myRazzle$RANDOM\n\n# Create a resource group.\naz group create \\\n  --location westeurope \\\n  --name myResourceGroup\n\n# Create an App Service plan in `FREE` tier.\naz appservice plan create \\\n  --name myAppServicePlan \\\n  --resource-group myResourceGroup \\\n  --sku FREE \\\n  --is-linux\n\n# Create a web app.\naz webapp create \\\n  --name $webappname \\\n  --resource-group myResourceGroup \\\n  --plan myAppServicePlan \\\n  --runtime \"node|12-lts\"\n\n# Enable building with zip deploy\naz webapp config appsettings set \\\n  --name $webappname \\\n  --resource-group myResourceGroup \\\n  --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true\n\n# Get ZipDeploy publishing profile and query for publish URL and credentials\ncreds=($(az webapp deployment list-publishing-profiles \\\n  --name $webappname \\\n  --resource-group myResourceGroup \\\n  --query \"[?contains(publishMethod, 'ZipDeploy')].[publishUrl,userName,userPWD]\" \\\n  --output tsv))\n\n# Use cURL to perform http zip upload. You can use any http tool to do this instead.\ncurl -X POST \\\n  -u ${creds[1]}:${creds[2]} \\\n  --data-binary @\"site.zip\" \\\n  https://${creds[0]}/api/zipdeploy\n\n# Copy the result of the following command into a browser to see the static HTML site.\necho https://$webappname.azurewebsites.net\n```\n"
  },
  {
    "path": "website/pages/deployment-options/layer0.md",
    "content": "# Deploy Razzle on Layer0\n  \n- Install Layer0 CLI by the following command:\n```bash\nnpm i -g @layer0/cli\n```\n\n- Initialize the Razzle project with Layer0 by the following command:\n```bash\n0 init\n```\n\n- Run `layer0 deploy` to get deploying right away.\n"
  },
  {
    "path": "website/pages/deployment-options/meta.json",
    "content": "{\n  \"aws\": \"AWS\",\n  \"azure\": \"Azure\",\n  \"plesk\": \"Plesk\",\n  \"vercel\": \"Vercel\",\n  \"layer0\": \"Layer0\"\n}\n"
  },
  {
    "path": "website/pages/deployment-options/plesk.md",
    "content": "# Deploy Razzle on Plesk\n\nFirst make sure your Plesk install supports Node.js\n\nGo into the domain manager for your domain. Look on the icons below next to `Hosting Settings` there should be a green icon with `Node.js`.\n\nIf this is not the case it may be disabled for you or not installed. Ask your host to enable it or install it like so:\n\nUnder home click `Add or Remove Components`.\n\nThen click `Add/Remove Components` - Under `Web hosting` set `NodeJS support` and\n`Phusion Passenger server` to `install` and click continue.\n\nAfter you made sure your Plesk supports Node.js add razzle config.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  options: {\n    forceRuntimeEnvVars: ['HOST', 'PORT']\n  }\n};\n```\n\nCreate `handler.js` in the app root\n\n```js\n// handler.js\nmodule.exports = require('./build/server.js');\n```\n\nBuild the Razzle project and make a tar archive\n\n```bash\nyarn build\ntar czvf site.tar.gz build package.json handler.js\n```\n\nGo into `File Manager` for your domain on Plesk.\n\nCreate a `site` directory in the `Home directory` upload the site.tar.gz here and extract it.\n\nGo into the domain manager for your domain. Click the `Node.js` icon.\n\nSet `Document Root` to `/site/build/public`,  `Application Root` to `/site` and `Application Startup File` to `handler.js`.   \n\nThen click `Enable Node.js` followed by `NPM Install` at the top.\n\nGo into the domain manager for your domain. Click `Open in web`.\n"
  },
  {
    "path": "website/pages/deployment-options/vercel.md",
    "content": "# Deploy Razzle on Vercel\n\nCreate this vercel.json in the root directory of your project:\n\n```json\n{\n    \"name\": \"my-razzle-app\",\n    \"version\": 2,\n    \"builds\": [\n        {\n            \"src\": \"build/public/**\",\n            \"use\": \"@vercel/static\"\n        },\n        {\n            \"src\": \"build/server.js\",\n            \"use\": \"@vercel/node\"\n        }\n    ],\n    \"routes\": [\n        { \"src\": \"/favicon.ico\", \"dest\": \"build/public/favicon.ico\" },\n        { \"src\": \"/robots.txt\", \"dest\": \"build/public/robots.txt\" },\n        { \"src\": \"/static/(.*)\", \"dest\": \"build/public/static/$1\" },\n        { \"src\": \"/(.*)\", \"dest\": \"build/server.js\" }\n\n    ]\n}\n```\n\nThen do a local build with 'yarn build'.\n\nAfterwards deploy from a local terminal with 'vercel'\n"
  },
  {
    "path": "website/pages/docs/customization.md",
    "content": "# Customization\n\n## Options\n\nAs of Razzle 3.2, you can modify some parts of Razzle with options.\n\nWe show the default options here:\n\n```js\n//./razzle.config.js\nmodule.exports = {\n  options: {\n    verbose: false, // set to true to get more info/error output\n    debug: { // debug flags\n      options: false, // print webpackOptions that will be used in webpack config\n      config: false, // print webpack config\n      nodeExternals: false // print node externals debug info \n    },\n    buildType: 'iso', // or 'spa', 'serveronly', 'iso-serverless' and 'serveronly-serverless'\n    cssPrefix: 'static/css',\n    jsPrefix: 'static/js',\n    mediaPrefix: 'static/media',\n    staticCssInDev: false, // static css in development build (incompatible with css hot reloading)\n    browserslist: undefined, // or what your apps package.json says\n    enableSourceMaps: true,\n    enableReactRefresh: false,\n    enableTargetBabelrc: false, // enable to use .babelrc.node and .babelrc.web\n    enableBabelCache: true,\n    forceRuntimeEnvVars: [], // force env vars to be read from env e.g. ['HOST', 'PORT']\n    disableWebpackbar: false, // can be true to disable all environments or target to disable specific environment such as \"node\" or \"web\"\n    staticExport: {\n      parallel: 5, // how many pages to render at a time\n      routesExport: 'routes',\n      renderExport: 'render',\n      scriptInline: false,\n      windowRoutesVariable: 'RAZZLE_STATIC_ROUTES',\n      windowRoutesDataVariable: 'RAZZLE_STATIC_DATA_ROUTES'\n    },\n  },\n};\n```\n\nMore options will be added in the future, some options now in experimental will be moved here.\n\n## Plugins\n\nAs of Razzle 2.0, you can add your plugins to modify your setup.\n\n- [TypeScript](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-typescript)\n- [Vue](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-vue)\n- [Elm](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-elm)\n- [MDX](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-mdx)\n- [See All](https://www.npmjs.com/search?q=razzle-plugin)\n\n### Using Plugins\n\nYou can use Razzle plugins by installing in your project and adding them to your `razzle.config.js`. See the README.md of the specific plugin, but generally speaking, the flow is something like...\n\n```bash\nyarn add razzle-plugin-xxxx\n```\n\n```js\n//./razzle.config.js\nmodule.exports = {\n  plugins: ['xxxx'],\n};\n```\n\n\n### Writing Plugins\n\nPlugins are simply a collection of functions that modify and return Razzle/webpack/jest configuration.\n\nThere are five functions that can be used to hook into Razzle configuration.\n\n- modifyOptions - modifies default Razzle options and options passed to Razzle in the `options` key in `razzle.config.js`.\n- modifyPaths - modifies default Razzle paths.\n- modifyWebpackOptions - modifies some default options that will be used to configure webpack/ webpack loaders and plugins.\n- modifyWebpackConfig - modifies the created webpack config.\n- modifyJestConfig - modifies jest config that is used to run tests for yor app.\n\nHere is a complete plugin that uses all five functions, usually you just need `modifyWebpackConfig` and/or `modifyWebpackOptions`.\n\n```js\n'use strict';\n\nmodule.exports = {\n  modifyOptions({\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the default options/ options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n    },\n  }) {\n    // Do some stuff...\n    return razzleOptions;\n  },\n  modifyPaths({\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n    },\n    paths, // the default paths that will be used by Razzle.\n  }) {\n    // Do some stuff...\n    return paths;\n  },\n  modifyWebpackOptions({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the default options that will be used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    if (target === 'web') {\n      // client only\n    }\n\n    if (target === 'node') {\n      // server only\n    }\n\n    if (dev) {\n      // dev only\n    } else {\n      // prod only\n    }\n\n    // Do some stuff...\n    return webpackOptions;\n  },\n  modifyWebpackConfig({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackConfig, // the created webpack config\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    if (target === 'web') {\n      // client only\n    }\n\n    if (target === 'node') {\n      // server only\n    }\n\n    if (dev) {\n      // dev only\n    } else {\n      // prod only\n    }\n\n    // Do some stuff...\n    return webpackConfig;\n  },\n  modifyJestConfig({\n    jestConfig, // the created jest config\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    // Do some stuff...\n    return jestConfig;\n  },\n};\n```\n\nPlugins also support using promises, this example uses `modifyWebpackConfig` but promises are supported in all hooks.\n\n```js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig({\n    env: { target, dev },\n    webpackConfig,\n    webpackObject,\n    options: { pluginOptions, razzleOptions, webpackOptions },\n    paths,\n  }) {\n    return new Promise(async resolve => {\n      if (target === 'web') {\n        // client only\n      }\n\n      if (target === 'node') {\n        // server only\n      }\n\n      if (dev) {\n        // dev only\n        await getDevcert();\n      } else {\n        // prod only\n      }\n\n      // Do some stuff...\n      resolve(webpackConfig);\n    });\n  },\n};\n```\n\n### Using scoped packages\n\nRazzle supports plugins using scoped packages.\n\nName your plugin `@scope-name/razzle-plugin-<name>`\n\nAnd reference it in your `razzle.config.js` as follows\n\n```\n//./razzle.config.js\nmodule.exports = {\n  plugins: ['@scope-name/name'],\n};\n```\n\nNote that `razzle-plugin-` is omitted\n\n## Customizing Babel Config\n\nRazzle includes the `razzle/babel` preset to your app, it includes everything needed to compile React applications and server-side code. But if you want to extend the default Babel configs, it's also possible.\n\nTo start, you only need to define a `.babelrc` file at the top of your app, if such file is found, we're going to consider it the _source of truth_, therefore it needs to define what Razzle needs as well, which is the `razzle/babel` preset.\n\nHere's an example `.babelrc` file:\n\n```json\n{\n  \"presets\": [\"razzle/babel\"],\n  \"plugins\": []\n}\n```\n\nYou can [take a look at this file](https://github.com/jaredpalmer/razzle/blob/finch/packages/babel-preset-razzle/index.js) to learn about the presets included by `razzle/babel`.\n\nTo add presets/plugins **without configuring them**, you can do it this way:\n\n```json\n{\n  \"presets\": [\"razzle/babel\"],\n  \"plugins\": [\"@babel/plugin-proposal-do-expressions\"]\n}\n```\n\nTo add presets/plugins **with custom configuration**, do it on the `razzle/babel` preset like so:\n\n```json\n{\n  \"presets\": [\n    [\n      \"razzle/babel\",\n      {\n        \"preset-env\": {},\n        \"transform-runtime\": {},\n        \"class-properties\": {}\n      }\n    ]\n  ],\n  \"plugins\": []\n}\n```\n\nTo learn more about the available options for each config, visit their documentation site.\n\n> Razzle uses the **current** Node.js version for server-side compilations.\n\n> The `modules` option on `\"preset-env\"` should be kept to `false`, otherwise webpack code splitting is turned off.\n\n## Extending Webpack\n\nYou can also extend the underlying webpack config. Create a file called `razzle.config.js` in your project's root.\n\nAll the hook functions supported in plugins is also supported here. We show only one function here for brevity.\n\nIn Razzle 3.3 `modify` was deprecated. In Razzle 4.0 it was replaced with `modifyWebpackConfig`.\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  modifyWebpackConfig({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackConfig, // the created webpack config\n    webpackObject, // the imported webpack node module\n    options: {\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that will be used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    if (target === 'web') {\n      // client only\n    }\n\n    if (target === 'node') {\n      // server only\n    }\n\n    if (dev) {\n      // dev only\n    } else {\n      // prod only\n    }\n\n    // Do some stuff...\n    return webpackConfig;\n  },\n};\n```\n\nA word of advice: `razzle.config.js` is an escape hatch. However, since it's just JavaScript, you can and should publish your `modify*` functions to npm to make it reusable across your projects. For example, imagine you added some custom webpack loaders and published it as a package to npm as `my-razzle-modifications`. You could then write your `razzle.config.js` like so:\n\n```js\n// razzle.config.js\nconst modifications = require('my-razzle-modifictions');\n\nmodule.exports = modifications;\n```\n\nLast but not least, if you find yourself needing a more customized setup, Razzle is _very_ forkable. There is one webpack configuration factory that is 1000 lines of code, and 5 scripts (`build`, `start`, `test`, `export` and `init`). The paths setup is shamelessly taken from [create-react-app](https://github.com/facebookincubator/create-react-app), and the rest of the code related to logging.\n\n#### New in razzle 3.2\n\n`razzle.config.js` modify also support using promises\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  modifyWebpackConfig({\n    env: { target, dev },\n    webpackConfig,\n    webpackObject,\n    options: { razzleOptions, webpackOptions },\n    paths,\n  }) {\n    return new Promise(async resolve => {\n      if (target === 'web') {\n        // client only\n      }\n\n      if (target === 'node') {\n        // server only\n      }\n\n      if (dev) {\n        // dev only\n        await getDevcert();\n      } else {\n        // prod only\n      }\n\n      // Do some stuff...\n      resolve(webpackConfig);\n    });\n  },\n};\n```\n\n## CSS Modules\n\nRazzle supports [CSS Modules](https://github.com/css-modules/css-modules) using Webpack's [css-loader](https://github.com/webpack-contrib/css-loader). Simply import your CSS file with the extension `.module.css` and Razzle will process the file using `css-loader`.\n\n```jsx\nimport React from 'react';\nimport styles from './style.module.css';\n\nconst Component = () => <div className={styles.className} />;\n\nexport default Component;\n```\n\n## Polyfills\n\nPolyfills for IE 9, IE 10, and IE 11 are no longer included by default (but you can opt in!)\nWe have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.\n\nFirst, install `react-app-polyfill`:\n\n`npm install react-app-polyfill`\nor\n\n`yarn add react-app-polyfill`\nNext, place one of the following lines at the very top of `src/client.js:`\n\n```javascript\nimport 'react-app-polyfill/ie9'; // For IE 9-11 support\nimport 'react-app-polyfill/ie11'; // For IE 11 support\n```\n\n## Transpilation of external modules\n\nIf you need to transpile external modules with arrow functions etc.\n\nMake sure the modules are not externalized and are added to the babelRule include.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackOptions({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    options: {\n      webpackOptions, // the default options that will be used to configure webpack/ webpack loaders and plugins\n    }\n  }) {\n    webpackOptions.notNodeExternalResMatch = (request, context) => {\n       return /themodule|anothermodule/.test(request)\n    };\n    webpackOptions.babelRule.include = webpackOptions.babelRule.include.concat([\n      /themodule/,\n      /anothermodule/\n    ]);\n    return webpackOptions;\n  }\n};\n```\n\n## Absolute Imports\n\nYou can configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.\n\nBelow is an example jsconfig.json file for a JavaScript project (or tsconfig.json if you're using TypeScript). You can create the file if it doesn't already exist:\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\"\n  },\n  \"include\": [\"src\"]\n}\n```\n\nTo make the Jest test runner work with absolute imports, you'll need to add a `jest` configuration option to your package.json:\n\n```jsonc\n{\n  \"name\": \"my-razzle-app\",\n  \"version\": \"1.0.0\",\n  \"license\": \"MIT\",\n  /* ...dependencies, etc... */\n  \"jest\": {\n    \"moduleDirectories\": [\"node_modules\", \"src\"]\n  }\n}\n```\n\nNow that you've configured your project to support absolute imports, if you want to import a module located at src/components/Button.js, you can import the module like so:\n\n```js\nimport Button from 'components/Button';\n```\n\n## Aliased Paths/ Modules\n\nYou can configure your application to support importing modules using aliased paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.\n\n```json\n{\n  \"compilerOptions\": {\n    \"baseUrl\": \"src\",\n    \"paths\": {\n      \"@extra/*\": [\"../extra/*\"]\n    }\n  }\n}\n```\n\nNow that you've configured your project to support aliased imports, if you want to import a module located at extra/components/Button.js, you can import the module like so:\n\n```js\nimport Button from '@extra/components/Button';\n```\n\n## Experimental\n\nRazzle has support for some experimental features. Coming soon.\n"
  },
  {
    "path": "website/pages/docs/environment-variables.md",
    "content": "# Environment Variables\n\n## Build-time Variables\n\n**The following environment variables are embedded during the build time.**\n\n- `process.env.RAZZLE_PUBLIC_DIR`: Absolute path to the public directory in the server's filesystem.\n- `process.env.RAZZLE_ASSETS_MANIFEST`: Path to a file containing compiled asset outputs\n- `process.env.REACT_BUNDLE_PATH`: Relative path to where React will be bundled during development. Unless you are modifying the output path of your webpack config, you can safely ignore this. This path is used by `react-error-overlay` and webpack to power up the fancy runtime error iframe. For example, if you are using common chunks and an extra entry to create a vendor bundle with stuff like react, react-dom, react-router, etc. called `vendor.js`, and you've changed webpack's output to `[name].js` in development, you'd want to set this environment variable to `/static/js/vendor.js`. If you do not make this change, nothing bad will happen, you will simply not get the cool error overlay when there are runtime errors. You'll just see them in the console. Note: This does not impact production bundling.\n- `process.env.VERBOSE`: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).\n- `process.env.PORT`: The `BUILD_TARGET=server` build listens on this port for all NODE_ENVs. default is `3000`\n- `process.env.HOST`: The IP address that the server will bind to. default is `0.0.0.0`, for INADDR_ANY\n- `process.env.NODE_ENV`: `'development'` or `'production'`\n- `process.env.BUILD_TYPE`: `'iso'` for isomorphic/universal applications or `'spa'` for single page applications. The default is `'iso'`. This is set by CLI arguments.\n- `process.env.BUILD_TARGET`: either `'client'` or `'server'`\n- `process.env.PUBLIC_PATH`: Only used in `razzle build`. You can alter the `webpack.config.output.publicPath` of the client assets (bundle, css, and images). This is useful if you plan to serve your assets from a CDN. Make sure to _include_ a trailing slash (e.g. `PUBLIC_PATH=https://cdn.example.com/`). If you are using React and altering the public path, make sure to also [include the `crossorigin` attribute](https://reactjs.org/docs/cdn-links.html#why-the-crossorigin-attribute) on your `<script>` tag in `src/server.js`.\n- `process.env.CLIENT_PUBLIC_PATH`: The `NODE_ENV=development` build's `BUILD_TARGET=client` has a different `PUBLIC_PATH` than `BUILD_TARGET=server`. Default is `http://${process.env.HOST}:${process.env.PORT + 1}/`\n\nYou can create your own custom environment variables that will be inlined during the build. They must start\nwith `RAZZLE_`. Any other variables except the ones listed above will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.\n\nThese environment variables will be defined for you on `process.env`. For example, having an environment variable named `RAZZLE_SECRET_CODE` will be exposed in your JS as `process.env.RAZZLE_SECRET_CODE`.\n\n## Runtime Variables\n\nUsing the dotenv package, or by defining variables in your shell (see below), you can get access to runtime environment variables. This is useful for services like Heroku which dynamically set `process.env.PORT` for example. Be careful when referencing runtime variables in isomorphic code as they will be `undefined` in the browser, but defined when running in Node. This can lead to weird behavior. If you need to make runtime variables available to the browser, it is up to you to deliver them. You can stringify them and place them on `window`...\n\n```js\n// config.js\nexport const runtimeConfig =\n  typeof window !== 'undefined'\n    ? {\n        // client\n        myThing: window.env.myThing,\n        anotherThing: window.env.anotherThing,\n      }\n    : {\n        // server\n        myThing: process.env.MY_THING,\n        anotherThing: process.env.ANOTHER_THING,\n      };\n```\n\nNow we set `window.env` as `runtimeConfig` when we go to render the HTML.\n\n```js\nimport App from './App';\nimport React from 'react';\nimport express from 'express';\nimport { renderToString } from 'react-dom/server';\nimport serialize from 'serialize-javascript'; // Safer stringify, prevents XSS attacks\nimport { runtimeConfig } from './config';\nconst chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);\n\nconst server = express();\n\nserver\n  .disable('x-powered-by')\n  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))\n  .get('/*', (req, res) => {\n    const markup = renderToString(<App />);\n    res.send(\n      // prettier-ignore\n      `<!doctype html>\n    <html lang=\"\">\n    <head>\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n        <meta charSet='utf-8' />\n        <title>Welcome to Razzle</title>\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n        ${chunks.client.css.map(path => `<link rel=\"stylesheet\" href=\"${path}\">`)}\n    </head>\n    <body>\n        <div id=\"root\">${markup}</div>\n        <script>window.env = ${serialize(runtimeConfig)};</script>\n        ${chunks.client.js.map(path => `<script src=\"${path}\" defer crossorigin></script>`)}        \n    </body>\n</html>`\n    );\n  });\n\nexport default server;\n```\n\n## Adding Temporary Environment Variables In Your Shell\n\nDefining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the\nlife of the shell session.\n\n### Windows (cmd.exe)\n\n```cmd\nset RAZZLE_SECRET_CODE=abcdef&&npm start\n```\n\n(Note: the lack of whitespace is intentional.)\n\n### Linux, macOS (Bash)\n\n```bash\nRAZZLE_SECRET_CODE=abcdef npm start\n```\n\n## Adding Environment Variables In .env\n\nTo define permanent environment variables, create a file called .env in the root of your project:\n\n```\nRAZZLE_SECRET_CODE=abcdef\n```\n\n## Expanding Environment Variables In .env\n\nExpand variables already on your machine for use in your `.env` file.\n\nFor example, to get the environment variable `npm_package_version`:\n\n```\nRAZZLE_VERSION=$npm_package_version\n# also works:\n# RAZZLE_VERSION=${npm_package_version}\n```\n\nOr expand variables local to the current `.env` file:\n\n```\nDOMAIN=www.example.com\nRAZZLE_FOO=$DOMAIN/foo\nRAZZLE_BAR=$DOMAIN/bar\n```\n\n### What other .env files are can be used?\n\n- `.env`: Default.\n- `.env.local`: Local overrides. **This file is loaded for all environments except test.**\n- `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.\n- `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.\n\nFiles on the left have more priority than files on the right:\n\n- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`\n- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`\n- `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)\n\nThese variables will act as the defaults if the machine does not explicitly set them.<br/>\nPlease refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.\n\n> Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need\n> these defined as well. Consult their documentation how to do this. For example, see the documentation for [Travis CI](https://docs.travis-ci.com/user/environment-variables/) or [Heroku](https://devcenter.heroku.com/articles/config-vars).\n"
  },
  {
    "path": "website/pages/docs/experimental-features.md",
    "content": "# Experimental Features\n\nRazzle has support for some experimental features. Coming soon.\n"
  },
  {
    "path": "website/pages/docs/how-it-works.md",
    "content": "# How Razzle Works\n\n**TL;DR**: 2 configs, 2 ports, 2 webpack instances, both watching and hot reloading the same filesystem, in parallel during development and a little `webpack.output.publicPath` magic.\n\nIn development mode (`razzle start`), Razzle bundles both your client and server code using two different webpack instances running with Hot Module Replacement in parallel. While your server is bundled and run on whatever port you specify in `src/index.js` (`3000` is the default), the client bundle (i.e. entry point at `src/client.js`) is served via `webpack-dev-server` on a different port (`3001` by default) with its `publicPath` explicitly set to `localhost:3001` (and not `/` like many other setups do). Then the server's html template just points to the absolute url of the client JS: `localhost:3001/static/js/client.js`. Since both webpack instances watch the same files, whenever you make edits, they hot reload at _exactly_ the same time. Best of all, because they use the same code, the same webpack loaders, and the same babel transformations, you never run into a React checksum mismatch error.\n"
  },
  {
    "path": "website/pages/docs/meta.json",
    "content": "{\n  \"customization\": \"Customization\",\n  \"single-page-applications\": \"Single Page Applications\",\n  \"environment-variables\": \"Environment Variables\",\n  \"static-export\": \"Static Site Generation\",\n  \"experimental-features\": \"Experimental Features\",\n  \"how-it-works\": \"How Razzle Works\",\n  \"upgrade-guide\": \"Upgrade guide\"\n}\n"
  },
  {
    "path": "website/pages/docs/single-page-applications.md",
    "content": "# [Single Page Applications](https://github.com/jaredpalmer/razzle/blob/master/examples/basic-spa/)\n\nIn addition to universal/isomorphic applications, Razzle can build single page (or client-only) applications. To do this, remove `index.js` and `server.js` from the src folder, and create an `index.html` file inside the public folder with the following template:\n\n```\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\" />\n  <link rel=\"icon\" href=\"<%= process.env.PUBLIC_PATH %>favicon.ico\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\" />\n  <meta name=\"theme-color\" content=\"#000000\" />\n  <%= htmlWebpackPlugin.tags.headTags %>\n  <!--\n      Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"<%= process.env.PUBLIC_PATH %>/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n  <title>React App</title>\n</head>\n<body>\n  <noscript>You need to enable JavaScript to run this app.</noscript>\n  <div id=\"root\"></div>\n  <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n    <%= htmlWebpackPlugin.tags.bodyTags %>\n</body>\n</html>\n```\n\nFinally, pass `buildType` to your `razzle.config.js` options like so:\n\n```js\n'use strict';\n\nmodule.exports = {\n  options: {\n    buildType: 'spa',\n  }\n};\n```\n\nThis effectively turns Razzle into [create-react-app](https://create-react-app.dev).\n"
  },
  {
    "path": "website/pages/docs/static-export.md",
    "content": "# Static Site Generation\n\n## What is Static Site Generation (SSG)?\n\nThink of a static site generator as a script which takes in data, content and templates, processes them, and outputs a folder full of all the resultant pages and assets.\n\n## How To Enable SSG:\n\nAdd `export` to your `package.json`'s scripts like so:\n\n```diff\n\"scripts\": {\n+  \"export\": \"razzle export\",\n}\n```\n\nAdd a `static_export.js` to your src dir:\n\n```js\n// ./src/static_export.js\n\nimport { renderApp } from './server';\n\nexport const render = (req, res) => {\n  const { html } = renderApp(req, res);\n\n  res.json({ html });\n};\n\nexport const routes = () => {\n  return ['/', '/about'];\n};\n```\n\nRun `npm export` or `yarn export`:\n\nRenders a static version of specified routes to the build folder based on the built production app.\nYour prerendered app is ready to be served!\n\n## How Razzle SSG Works?\n\nBasically in the SSG proccess we SSR the app and then save result of the SSR into a html file, so if you enable SSR you can also have SSG.\n\n## Can I use Razzle SSG with X?\n\nRazzle not only works with React, but also Reason, Elm, Vue, Angular, Svelte, and most importantly......whatever comes next\n\n#### render()\n\nBehind the scenes razzle calls a `render` function that is exposed from `static_export` module and saves a html string that you pass to `res.json()` into a html file. or `req` object there is only one property that is needed `url` which contains the url that we are going to render and save it's result to the html file.\nThe html file destination is relative to the `req.url`, for example if the url is `/product/A` html is going to get saved at `/build/product/A/index.html`.\n\nYou should call `renderToString()` (or what ever your framework gives you to do SSR) in this function and then pass the result to `res.json()`\n\n```js\nexport const render = (req, res) => {\n  const html = ReactDOMServer.renderToString(\n    <StaticRouter location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  res.json({ html });\n};\n```\n\n(You can re-export your SRR logic from server.js file and use it `static_export`)\n\n#### routes()\n\nYou should also export a function called `routes` that returns an array of strings or a promise that will resolve array of strings. razzle will take the urls and will pass them one by one to `render`.\nYou should get all paths that your app has from your CMS in this method and then return it:\n\n```js\nexport const routes = async () => {\n  // data should be an array of strings [\"/\", \"/product/A\", \"/blog/1\", \"/blog/2\"]\n  const { data } = await getAppPaths();\n  return data;\n};\n```\n\n#### Page data\n\nYou may also need to save the data that your page uses to re-hydrate the app on the client side.\nYou can pass the `data` along the `html` to `res.json({ html, data })` and contents of `data` object will get saved in the `page-data.json` next to the related `index.html` file.\n\n```js\nexport const render = async (req, res) => {\n  const data = await getDataForRoute(req.url);\n\n  const html = ReactDOMServer.renderToString(\n    <StaticRouter location={req.url}>\n      <App />\n    </StaticRouter>\n  );\n\n  res.json({ html, data });\n};\n```\n\n(NOTE: You should change how your app fetches data on client-side, to read data from `page-data.json`)\n\n## TypeScript Support\n\nStatic export comes with typescript support out of the box, in order to use typescript rename `static_export.js` to `static_export.ts` and you are good to go!\n\n## Advanced Configuration\n\n```js\n// razzle.config.js\n\nmodule.exports = {\n  options: {\n    staticExport: {\n      parallel: 5, // how many pages to render at a time\n      routesExport: 'routes',\n      renderExport: 'render',\n      scriptInline: false,\n      windowRoutesVariable: 'RAZZLE_STATIC_ROUTES',\n      windowRoutesDataVariable: 'RAZZLE_STATIC_DATA_ROUTES',\n    },\n  },\n};\n```\n"
  },
  {
    "path": "website/pages/docs/upgrade-guide.md",
    "content": "# Upgrade guide from 3.x to 4.x\n\n## Dependencies\n\nUpdate/add razzle core dependencies\n\n```bash\nyarn add --dev \\\n  razzle \\\n  razzle-dev-utils \\\n  babel-preset-razzle\n```\n\n... and Razzle peerDependencies\n\nUpdate/add razzle peerdependencies\n\n```bash\nyarn add --dev \\\n  webpack-dev-server@3.11.0 \\\n  mini-css-extract-plugin@0.9.0 \\\n  postcss@8.2.4\n```\n\nChoose your webpack version\n\n```bash\nyarn add --dev webpack@5.24.0 html-webpack-plugin@5.2.0\n# or\nyarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2\n```\n\nUpdate/add razzle plugins if you use any\n\n```bash\nyarn add --dev razzle-plugin-scss\n```\n\n## Spa apps\n\nRemove `--type=spa` from scripts\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"razzle start --type=spa\",\n    \"build\": \"razzle build --type=spa\"\n  }\n}\n```\n\nAdd Options\n\n```js\n//./razzle.config.js\nmodule.exports = {\n  options: {\n    buildType: 'spa'\n  },\n};\n```\n\nUpdate the [template](https://razzlejs.org/docs/single-page-applications)\n\n## Plugins\n\nPlugins are now multiple functions as opposed to one before.\n\nE.g. change:\n\n```js\n'use strict';\n\nmodule.exports = function myRazzlePlugin(config, { target, dev }, webpack, options) {\n  // Do some stuff to config\n  return config;\n};\n```\n\nTo:\n\n```js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackConfig, // the created webpack config\n    webpackObject, // the imported webpack node module\n    options: {\n      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    // Do some stuff to webpackConfig\n    return webpackConfig;\n  }\n};\n```\n\nYou can also make use of `modifyOptions`, `modifyPaths`, `modifyWebpackOptions` and `modifyJestConfig`.\n\nTo make plugins simpler and more composable.\n\n## Extending Webpack\n\nModify is now multiple functions as opposed to one before.\n\nE.g. change:\n\n```js\n'use strict';\n// razzle.config.js\n\nmodule.exports = {\n  modify: (config, { target, dev }, webpack) => {\n    // do something to config\n    return config;\n  },\n};\n```\n\nTo:\n\n```js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackConfig({\n    env: {\n      target, // the target 'node' or 'web'\n      dev, // is this a development build? true or false\n    },\n    webpackConfig, // the created webpack config\n    webpackObject, // the imported webpack node module\n    options: {\n      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    },\n    paths, // the modified paths that will be used by Razzle.\n  }) {\n    // Do some stuff to webpackConfig\n    return webpackConfig;\n  }\n};\n```\n\nYou can also make use of `modifyOptions`, `modifyPaths`, `modifyWebpackOptions` and `modifyJestConfig`.\n\nTo make extending webpack simpler.\n"
  },
  {
    "path": "website/pages/getting-started.mdx",
    "content": "import Link from 'next/link';\n\n# Getting Started\n\n## Quick Start\n\n```sh\nnpx create-razzle-app my-app\ncd my-app\nnpm start\n```\n\n> If you've previously installed `create-razzle-app` globally via `npm install -g create-razzle-app`, we recommend you uninstall the package using `npm uninstall -g create-razzle-app` or `yarn global remove create-razzle-app` to ensure that `npx` always uses the latest version.\n\n_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_\n\nThen open http://localhost:3000/ to see your app. Your console should look like this:\n\n<img\n  src=\"https://cloud.githubusercontent.com/assets/4060187/26324663/b31788c4-3f01-11e7-8e6f-ffa48533af54.png\"\n  width=\"500px\"\n  alt=\"Razzle Development Mode\"\n/>\n\n**That's it**. You don't need to worry about setting up multiple webpack configs or other build tools. Just start editing `src/App.js` and go!\n\n## Razzle has many examples, we might have one that fits your needs\n\nSee: [The examples](https://github.com/jaredpalmer/razzle/tree/master/examples)\n\n## Commands\n\nBelow is a list of commands you will probably find useful.\n\n### npm start\n\nRuns the project in development mode.\nYou can view your application at `http://localhost:3000`\n\nThe page will reload if you make edits.\n\n### npm run build\n\nBuilds the app for production to the build folder.\n\nThe build is minified and the filenames include the hashes.\nYour app is ready to be deployed!\n\nBy default this uses NODE_ENV=production and asks if you want to run it.\n\nIf you don't want the confirmation add --noninteractive to your build command.\n\nIf you want to use a different env file e.g. .env.something-staging file you can add --node-env=something-staging\n\n### npm run start:prod\n\nRuns the compiled app in production.\n\nYou can again view your application at `http://localhost:3000`\n\n### npm test\n\nRuns the test watcher (Jest) in an interactive mode.\nBy default, runs tests related to files changed since the last commit.\n\n### npm export\n\nExports a static version of the application in production mode. Must add the `export` command to `package.json`'s scripts along with a `static_export.js` file in the `src` directory. See [Static Site Generation](https://razzlejs.org/docs/static-export/) for more details.\n\n### rs\n\nIf your application is running, and you need to manually restart your server, you do not need to completely kill and rebundle your application. Instead you can just type `rs` and press enter in terminal.\n\n<img\n  src=\"https://user-images.githubusercontent.com/4060187/37915268-209644d0-30e7-11e8-8ef7-086b529ede8c.png\"\n  width=\"500px\"\n  alt=\"Razzle Hot Restart\"\n/>\n\n## Dependencies\n\nTo make sure Razzle is installed properly make sure Razzle devDependencies are installed, run:\n\n```bash\nyarn add --dev \\\n  razzle \\\n  razzle-dev-utils \\\n  babel-preset-razzle\n```\n\n... and Razzle peerDependencies are installed, run:\n\n```bash\nyarn add --dev \\\n  webpack-dev-server@3.11.0 \\\n  mini-css-extract-plugin@0.9.0 \\\n  postcss@8.2.4\n```\n\nChoose your webpack version\n\n```bash\nyarn add --dev webpack@5.65.0 html-webpack-plugin@5.2.0\n# or\nyarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2\n```\n\nAlso if there are issues, try adding specific package versions to resolutions in `package.json`.\n\n## Common issues\n\nIf you have issues with css this might be related to postcss being resolved wrong.\n\nTo fix this add:\n\n```json\n{\n  \"postcss\": \"8.2.4\"\n}\n```\nTo resolutions in your package.json. For npm see [here](https://stackoverflow.com/questions/52416312/npm-equivalent-of-yarn-resolutions).\n\nIf you get an error like this:\n\n```\nnode_modules/react-images-upload/index.css:1\n.fileUploader {\n^\n\nSyntaxError: Unexpected token '.'\n    at wrapSafe (internal/modules/cjs/loader.js:1072:16)\n```\n\nIt means node tries to use `index.css` as a node module.\n\nTo fix this make sure the module with the css is not externalized.\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  modifyWebpackOptions({\n    options: {\n      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins\n    }\n  }) {\n\n      webpackOptions.notNodeExternalResMatch = (request, context) => {\n         return /react-images-upload/.test(request)\n      };\n\n    return webpackOptions;\n  },\n};\n```\n\nDev server not starting and no errors show up\n\nMake razzle more verbose:\n\n```js\n// razzle.config.js\n'use strict';\n\nmodule.exports = {\n  options: {\n    verbose: true\n  }\n};\n```\n\n## Debugging with Inspector\n\n- `npm start -- --inspect=[host:port]` or `yarn start --inspect=[host:port]` This will start the node server and enable the inspector agent. The `=[host:port]` is optional and defaults to `=127.0.0.1:9229`. For more information, see [this](https://nodejs.org/en/docs/guides/debugging-getting-started/).\n\n- `npm start -- --inspect-brk=[host:port]` or `yarn start --inspect-brk=[host:port]` This is the same as `--inspect`, but will also break before user code starts. (to give a debugger time to attach before early code runs) For more information, see [this](https://nodejs.org/en/docs/guides/debugging-getting-started/).\n\n- `npm test -- --inspect=[host:port]` or `yarn test --inspect=[host:port]` This will start the tests server and enable the inspector agent. The `=[host:port]` is optional and defaults to `=127.0.0.1:9229`. For more information, see [this](https://nodejs.org/en/docs/guides/debugging-getting-tested/).\n\n- `npm test -- --inspect-brk=[host:port]` or `yarn test --inspect-brk=[host:port]` This is the same as `--inspect`, but will also break before user code starts. (to give a debugger time to attach before early code runs) For more information, see [this](https://nodejs.org/en/docs/guides/debugging-getting-started/).\n"
  },
  {
    "path": "website/pages/index.mdx",
    "content": "import Features from 'components/features';\n\n# Razzle\n\n<Features />\n\nJavaScript applications are tough to setup. Either you buy into a framework, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for both SPA's and SSR applications into a single dependency--giving you the awesome developer experience of [create-react-app](https://github.com/facebook/create-react-app), but then leaving the rest of your app's architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Preact, Vue, Svelte, and Angular, and most importantly......whatever comes next.\n\n**Razzle comes with the \"battery-pack included\"**:\n\n- 🔥 Universal Hot Module Replacement, so both the client and server update whenever you make edits. No annoying restarts necessary\n- Comes with your favorite ES6 JavaScript goodies (through `babel-preset-razzle`)\n- Comes with the same CSS setup as [create-react-app](https://github.com/facebook/create-react-app)\n- Works with [React](https://github.com/facebook/react), [Preact](https://github.com/preactjs/preact), and [Reason-React](https://github.com/jaredpalmer/razzle/tree/master/examples/with-reason-react) as well as [Angular](https://github.com/angular/angular) and [Vue](https://github.com/vuejs/vue) if that's your thing\n- Escape hatches for customization via `.babelrc` and `razzle.config.js`\n- [Jest](https://github.com/facebook/jest) test runner setup with sensible defaults via `razzle test`\n- SPA mode, build client side apps with razzle\n\n## Not ready for Razzle 4.0?\n\n[Razzle 3 docs](https://razzle-git-three-jared.vercel.app/)\n\n## Getting help\n\nIf you get stuck, check out Razzle's [GitHub Discussions](https://github.com/jaredpalmer/razzle/discussions). In addition, #razzle-afterjs on [Formium Community Discord Server](https://discord.gg/pJSg287) is a great way to get help quickly too.\n"
  },
  {
    "path": "website/pages/meta.json",
    "content": "{\n  \"index\": \"Introduction\",\n  \"getting-started\": \"Getting Started\",\n  \"docs\": { \"title\": \"Documentation\", \"open\": true },\n  \"deployment-options\": \"Deployment Options\",\n  \"plugins\": \"Razzle plugins\",\n  \"change-log\": \"Change Log\",\n  \"contributing\": \"Contributing\"\n}\n"
  },
  {
    "path": "website/pages/plugins/meta.json",
    "content": "{\n  \"razzle-plugin-bundle-analyzer\": \"razzle-plugin-bundle-analyzer\",\n  \"razzle-plugin-graphql\": \"razzle-plugin-graphql\",\n  \"razzle-plugin-less\": \"razzle-plugin-less\",\n  \"razzle-plugin-mdx\": \"razzle-plugin-mdx\",\n  \"razzle-plugin-php\": \"razzle-plugin-php\",\n  \"razzle-plugin-scss\": \"razzle-plugin-scss\",\n  \"razzle-plugin-svelte\": \"razzle-plugin-svelte\",\n  \"razzle-plugin-typescript\": \"razzle-plugin-typescript\",\n  \"razzle-plugin-vue\": \"razzle-plugin-vue\"\n}\n"
  },
  {
    "path": "website/postcss.config.js",
    "content": "module.exports = {\n  plugins: ['tailwindcss', 'postcss-preset-env']\n}"
  },
  {
    "path": "website/public/favicon/site.webmanifest",
    "content": "{\"name\":\"\",\"short_name\":\"\",\"icons\":[{\"src\":\"/android-chrome-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"},{\"src\":\"/android-chrome-512x512.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],\"theme_color\":\"#ffffff\",\"background_color\":\"#ffffff\",\"display\":\"standalone\"}"
  },
  {
    "path": "website/tailwind.config.js",
    "content": "module.exports = {\n  purge: ['./components/**/*.js', './pages/**/*.md', './pages/**/*.mdx', './.nextra/**/*.js', './nextra.config.js'],\n  theme: {\n    screens: {\n      sm: '640px',\n      md: '768px',\n      lg: '1024px',\n      xl: '1280px',\n    },\n    fontFamily: {\n      display: ['inter', 'sans-serif'],\n    },\n    letterSpacing: {\n      tight: '-0.015em'\n    }\n  }\n}\n"
  }
]