Repository: jaredpalmer/razzle
Branch: master
Commit: 54724b7bb810
Files: 1039
Total size: 1.1 MB

Directory structure:
gitextract__2juu5zg/

├── .all-contributorsrc
├── .changeset/
│   └── config.json
├── .eslintignore
├── .eslintrc
├── .github/
│   ├── CODE_OF_CONDUCT.md
│   ├── CONTRIBUTING.md
│   ├── FUNDING.yml
│   ├── ISSUE_TEMPLATE/
│   │   ├── Bug_report.md
│   │   ├── Documentation.md
│   │   ├── Feature_request.md
│   │   └── Question.md
│   ├── labels.yml
│   ├── stale.yml
│   └── workflows/
│       ├── examples.yml
│       ├── examples_node14.yml
│       ├── label.yml
│       ├── nodejs.yml
│       ├── release.yml
│       └── test-examples.yml
├── .gitignore
├── .prettierrc
├── LICENSE
├── examples/
│   ├── .gitignore
│   ├── basic/
│   │   ├── README.md
│   │   ├── gitignore
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── basic-server/
│   │   ├── README.md
│   │   ├── gitignore
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── index.js
│   │       └── server.js
│   ├── basic-serverless/
│   │   ├── README.md
│   │   ├── gitignore
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── basic-spa/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   ├── index.html
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       └── client.js
│   ├── with-afterjs/
│   │   └── README.md
│   ├── with-custom-babel-config/
│   │   ├── .babelrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── Home.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-custom-devserver-options/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-custom-environment-variables/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-custom-target-babel-config/
│   │   ├── .babelrc.node
│   │   ├── .babelrc.web
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── Home.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-custom-webpack-config/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-devcert-https/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-development-build/
│   │   ├── README.md
│   │   ├── gitignore
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-elm/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── elm-package.json
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.elm
│   │       ├── Main.elm
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-esbuild-loader/
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── src/
│   │   │   ├── App.css
│   │   │   ├── App.test.tsx
│   │   │   ├── App.tsx
│   │   │   ├── Home.css
│   │   │   ├── Home.tsx
│   │   │   ├── client.tsx
│   │   │   ├── index.ts
│   │   │   └── server.tsx
│   │   ├── tsconfig.json
│   │   └── typings/
│   │       └── index.d.ts
│   ├── with-eslint/
│   │   ├── .eslintrc.json
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-experimental-refresh/
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── components/
│   │       │   ├── ClickCount.js
│   │       │   └── ClickCount.module.css
│   │       ├── global.css
│   │       ├── index.js
│   │       └── server.js
│   ├── with-fastify/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── src/
│   │   │   ├── App.css
│   │   │   ├── App.test.tsx
│   │   │   ├── App.tsx
│   │   │   ├── Home.css
│   │   │   ├── Home.tsx
│   │   │   ├── client.tsx
│   │   │   ├── index.ts
│   │   │   ├── server.tsx
│   │   │   └── setupTests.ts
│   │   ├── tsconfig.json
│   │   └── typings/
│   │       └── svg.d.ts
│   ├── with-firebase-functions/
│   │   ├── .firebaserc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── firebase.json
│   │   ├── index.js
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-heroku/
│   │   ├── .gitignore
│   │   ├── Procfile
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-hyperapp/
│   │   ├── .babelrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── main.js
│   │       ├── main.test.js
│   │       └── server.js
│   ├── with-inferno/
│   │   ├── .babelrc
│   │   ├── .eslintrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-jest-snapshots/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.js
│   │       ├── Home.js
│   │       ├── __tests__/
│   │       │   ├── App.test.js
│   │       │   ├── Home.test.js
│   │       │   └── __snapshots__/
│   │       │       ├── App.test.js.snap
│   │       │       └── Home.test.js.snap
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-jsconfig-paths/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── here-is-extra/
│   │   │   └── extra.js
│   │   ├── jsconfig.json
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-jsxstyle/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── About.js
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── Home.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-koa/
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── Home.css
│   │       ├── Home.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-less/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── App.less
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── other.less
│   │       └── server.js
│   ├── with-loadable-components/
│   │   ├── .babelrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── Body.js
│   │       ├── BodyPart.js
│   │       ├── Footer.js
│   │       ├── Header.js
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── server.js
│   │       └── static_export.js
│   ├── with-material-ui/
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── server.js
│   │       └── theme.js
│   ├── with-mdx/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── example.md
│   │       ├── index.js
│   │       └── server.js
│   ├── with-module-federation/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── basic-1/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   ├── index.html
│   │   │   │   └── robots.txt
│   │   │   ├── razzle.config.js
│   │   │   └── src/
│   │   │       ├── App.js
│   │   │       ├── Button.js
│   │   │       ├── bootstrap.js
│   │   │       └── client.js
│   │   ├── basic-2/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   ├── index.html
│   │   │   │   └── robots.txt
│   │   │   ├── razzle.config.js
│   │   │   └── src/
│   │   │       ├── App.js
│   │   │       ├── Button.js
│   │   │       ├── bootstrap.js
│   │   │       └── client.js
│   │   └── package.json
│   ├── with-monorepo/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── basic-1/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   └── robots.txt
│   │   │   └── src/
│   │   │       ├── App.css
│   │   │       ├── App.js
│   │   │       ├── App.test.js
│   │   │       ├── client.js
│   │   │       ├── index.js
│   │   │       └── server.js
│   │   ├── basic-2/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   └── robots.txt
│   │   │   └── src/
│   │   │       ├── App.css
│   │   │       ├── App.js
│   │   │       ├── App.test.js
│   │   │       ├── client.js
│   │   │       ├── index.js
│   │   │       └── server.js
│   │   └── package.json
│   ├── with-monorepo-without-workspaces/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── basic-1/
│   │   │   ├── public/
│   │   │   │   └── robots.txt
│   │   │   └── src/
│   │   │       ├── App.css
│   │   │       ├── App.js
│   │   │       ├── App.test.js
│   │   │       ├── client.js
│   │   │       ├── index.js
│   │   │       └── server.js
│   │   ├── basic-2/
│   │   │   ├── public/
│   │   │   │   └── robots.txt
│   │   │   └── src/
│   │   │       ├── App.css
│   │   │       ├── App.js
│   │   │       ├── App.test.js
│   │   │       ├── client.js
│   │   │       ├── index.js
│   │   │       └── server.js
│   │   └── package.json
│   ├── with-now/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-now-v2/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── now.json
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-polka/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-preact/
│   │   ├── .babelrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-promise-config/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-react-native-web/
│   │   ├── .babelrc
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-react-router/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── About.js
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── Home.js
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── server.js
│   │       └── static_export.js
│   ├── with-react-server-components/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── babel.config.js
│   │   ├── notes/
│   │   │   ├── .gitkeep
│   │   │   ├── 1.md
│   │   │   ├── 2.md
│   │   │   ├── 3.md
│   │   │   └── 4.md
│   │   ├── package.json
│   │   ├── plugin/
│   │   │   ├── ReactFlightWebpackLoader.js
│   │   │   ├── ReactFlightWebpackLoader.ts
│   │   │   ├── ReactFlightWebpackNodeLoader.js
│   │   │   ├── ReactFlightWebpackNodeLoader.ts
│   │   │   ├── ReactFlightWebpackNodeRegister.js
│   │   │   ├── ReactFlightWebpackNodeRegister.ts
│   │   │   ├── ReactFlightWebpackPlugin.js
│   │   │   ├── ReactFlightWebpackPlugin.ts
│   │   │   └── __tests__/
│   │   │       ├── ReactFlightWebpackPlugin.spec.ts
│   │   │       └── fixture/
│   │   │           ├── Form.client.js
│   │   │           ├── FormServer.server.js
│   │   │           ├── entry.js
│   │   │           └── package.json
│   │   ├── public/
│   │   │   ├── index.html
│   │   │   ├── robots.txt
│   │   │   └── style.css
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   ├── scripts/
│   │   │   └── seed.js
│   │   └── src/
│   │       ├── App.server.tsx
│   │       ├── Cache.client.tsx
│   │       ├── EditButton.client.tsx
│   │       ├── LocationContext.client.tsx
│   │       ├── Note.server.tsx
│   │       ├── NoteEditor.client.tsx
│   │       ├── NoteList.server.tsx
│   │       ├── NoteListSkeleton.tsx
│   │       ├── NotePreview.tsx
│   │       ├── NoteSkeleton.tsx
│   │       ├── Root.client.tsx
│   │       ├── SearchField.client.tsx
│   │       ├── SidebarNote.client.tsx
│   │       ├── SidebarNote.tsx
│   │       ├── Spinner.tsx
│   │       ├── TextWithMarkdown.tsx
│   │       ├── cli.server.js
│   │       ├── db.server.ts
│   │       ├── index.client.tsx
│   │       └── index.server.ts
│   ├── with-reason-react/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── bsconfig.json
│   │   ├── jsconfig.json
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.re
│   │       ├── CommentList.css
│   │       ├── CommentList.re
│   │       ├── CommentsPage.css
│   │       ├── CommentsPage.re
│   │       ├── NotFound.css
│   │       ├── NotFound.re
│   │       ├── StoryData.re
│   │       ├── StoryListItem.css
│   │       ├── StoryListItem.re
│   │       ├── TopStoriesPage.re
│   │       ├── Utils.re
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── index.re
│   │       ├── link.re
│   │       ├── registerServiceWorker.js
│   │       └── server.js
│   ├── with-redux/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── client/
│   │       │   └── index.js
│   │       ├── common/
│   │       │   ├── actions/
│   │       │   │   └── index.js
│   │       │   ├── api/
│   │       │   │   └── counter.js
│   │       │   ├── components/
│   │       │   │   └── Counter.js
│   │       │   ├── containers/
│   │       │   │   └── App.js
│   │       │   ├── reducers/
│   │       │   │   ├── counter.js
│   │       │   │   └── index.js
│   │       │   └── store/
│   │       │       └── configureStore.js
│   │       ├── index.js
│   │       └── server/
│   │           └── index.js
│   ├── with-scss/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── App.scss
│   │       ├── App.test.js
│   │       ├── app.module.scss
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── other.scss
│   │       └── server.js
│   ├── with-scss-options/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── App.scss
│   │       ├── App.test.js
│   │       ├── app.module.scss
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── other.scss
│   │       ├── prepend.scss
│   │       └── server.js
│   ├── with-single-exposed-port/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-styled-components/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-svelte/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-tailwindcss/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-typeorm-graphql/
│   │   ├── .babelrc
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── .prettierrc
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── src/
│   │   │   ├── App.css
│   │   │   ├── App.test.tsx
│   │   │   ├── App.tsx
│   │   │   ├── Home.css
│   │   │   ├── Home.tsx
│   │   │   ├── client.tsx
│   │   │   ├── database/
│   │   │   │   └── init_db.ts
│   │   │   ├── declarations.d.ts
│   │   │   ├── index.ts
│   │   │   ├── models/
│   │   │   │   ├── Abilities.ts
│   │   │   │   ├── Pokemon.ts
│   │   │   │   ├── PokemonAbilities.ts
│   │   │   │   ├── Types.ts
│   │   │   │   └── index.ts
│   │   │   ├── schema/
│   │   │   │   ├── Resolvers.ts
│   │   │   │   └── index.ts
│   │   │   ├── server.tsx
│   │   │   └── setupTests.ts
│   │   └── tsconfig.json
│   ├── with-typescript/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── src/
│   │   │   ├── App.css
│   │   │   ├── App.test.tsx
│   │   │   ├── App.tsx
│   │   │   ├── Home.css
│   │   │   ├── Home.tsx
│   │   │   ├── client.tsx
│   │   │   ├── declarations.d.ts
│   │   │   ├── index.ts
│   │   │   ├── server.tsx
│   │   │   └── setupTests.ts
│   │   └── tsconfig.json
│   ├── with-typescript-plugin/
│   │   ├── .eslintrc.js
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── src/
│   │   │   ├── App.css
│   │   │   ├── App.test.tsx
│   │   │   ├── App.tsx
│   │   │   ├── Home.css
│   │   │   ├── Home.tsx
│   │   │   ├── client.tsx
│   │   │   ├── index.ts
│   │   │   └── server.tsx
│   │   ├── tsconfig.json
│   │   └── typings/
│   │       └── index.d.ts
│   ├── with-vendor-bundle/
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-vue/
│   │   ├── .eslintrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── App.js
│   │       ├── App.vue
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   ├── with-vue-router/
│   │   ├── .eslintrc
│   │   ├── .gitignore
│   │   ├── README.md
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   └── src/
│   │       ├── About.vue
│   │       ├── App.js
│   │       ├── App.vue
│   │       ├── Home.vue
│   │       ├── PageNotFound.vue
│   │       ├── client.js
│   │       ├── index.js
│   │       ├── router.js
│   │       └── server.js
│   ├── with-webpack-dev-server-v4/
│   │   ├── README.md
│   │   ├── gitignore
│   │   ├── package.json
│   │   ├── public/
│   │   │   └── robots.txt
│   │   ├── razzle.config.js
│   │   ├── sandbox.config.json
│   │   └── src/
│   │       ├── App.css
│   │       ├── App.js
│   │       ├── App.test.js
│   │       ├── client.js
│   │       ├── index.js
│   │       └── server.js
│   └── with-webpack-public-path/
│       ├── README.md
│       ├── package.json
│       ├── public/
│       │   └── robots.txt
│       ├── sandbox.config.json
│       └── src/
│           ├── App.css
│           ├── App.js
│           ├── App.test.js
│           ├── client.js
│           ├── index.js
│           ├── init.client.js
│           ├── init.server.js
│           ├── real.client.js
│           ├── real.server.js
│           └── server.js
├── lerna.json
├── package.json
├── package.meta.json
├── packages/
│   ├── babel-preset-razzle/
│   │   ├── CHANGELOG.md
│   │   ├── LICENSE
│   │   ├── README.md
│   │   ├── babel-plugins/
│   │   │   ├── commonjs.js
│   │   │   ├── jsx-pragma.js
│   │   │   ├── no-anonymous-default-export.js
│   │   │   └── optimize-hook-destructuring.js
│   │   ├── index.js
│   │   └── package.json
│   ├── create-razzle-app/
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── bin/
│   │   │   └── create-razzle-app
│   │   ├── index.js
│   │   ├── lib/
│   │   │   ├── index.js
│   │   │   ├── messages.js
│   │   │   ├── officialExamples.js
│   │   │   └── utils/
│   │   │       ├── copy-dir.js
│   │   │       ├── get-install-cmd.js
│   │   │       ├── install.js
│   │   │       ├── load-example.js
│   │   │       ├── load-git-example.js
│   │   │       ├── load-github-example.js
│   │   │       ├── load-npm-example.js
│   │   │       └── output.js
│   │   ├── package.json
│   │   └── templates/
│   │       └── default/
│   │           ├── README.md
│   │           ├── gitignore
│   │           ├── package.json
│   │           ├── public/
│   │           │   └── robots.txt
│   │           ├── sandbox.config.json
│   │           └── src/
│   │               ├── App.css
│   │               ├── App.js
│   │               ├── App.test.js
│   │               ├── Home.css
│   │               ├── Home.js
│   │               ├── client.js
│   │               ├── index.js
│   │               └── server.js
│   ├── razzle/
│   │   ├── .gitignore
│   │   ├── CHANGELOG.md
│   │   ├── LICENSE
│   │   ├── README.md
│   │   ├── babel.js
│   │   ├── bin/
│   │   │   └── razzle.js
│   │   ├── config/
│   │   │   ├── babel-loader/
│   │   │   │   └── razzle-babel-loader.js
│   │   │   ├── createConfigAsync.js
│   │   │   ├── createJestConfig.js
│   │   │   ├── createRazzleTestConfig.js
│   │   │   ├── defaultOptions.js
│   │   │   ├── env.js
│   │   │   ├── jest/
│   │   │   │   ├── babelTransform.js
│   │   │   │   ├── cssTransform.js
│   │   │   │   └── fileTransform.js
│   │   │   ├── loadPlugins.js
│   │   │   ├── loadRazzleConfig.js
│   │   │   ├── modules.js
│   │   │   ├── paths.js
│   │   │   └── razzleDevServer.js
│   │   ├── package.json
│   │   └── scripts/
│   │       ├── build.js
│   │       ├── export.js
│   │       ├── start.js
│   │       └── test.js
│   ├── razzle-dev-utils/
│   │   ├── CHANGELOG.md
│   │   ├── FileSizeReporter.js
│   │   ├── FriendlyErrorsPlugin.js
│   │   ├── README.md
│   │   ├── WebpackConfigHelpers.js
│   │   ├── devServerMajor.js
│   │   ├── formatWebpackMessages.js
│   │   ├── logger.js
│   │   ├── makeLoaderFinder.js
│   │   ├── package.json
│   │   ├── prettyNodeErrors.js
│   │   ├── printErrors.js
│   │   ├── printWarnings.js
│   │   ├── resolveRequest.js
│   │   ├── setPorts.js
│   │   ├── webpackHotDevClient.js
│   │   ├── webpackHotDevClientV4.js
│   │   └── webpackMajor.js
│   ├── razzle-plugin-bundle-analyzer/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-css/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-devcert/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-elm/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-eslint/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-graphql/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── helpers.js
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-inferno/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-less/
│   │   ├── .eslintrc
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── helpers.js
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-manifest/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-mdx/
│   │   ├── .eslintrc
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── helpers.js
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-php/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-preact/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-react/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   ├── razzle-plugin-scss/
│   │   ├── .eslintrc
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── helpers.js
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-svelte/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── helpers.js
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-typescript/
│   │   ├── .eslintrc
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── helpers.js
│   │   ├── index.js
│   │   ├── package.json
│   │   └── tests/
│   │       └── index.test.js
│   ├── razzle-plugin-vue/
│   │   ├── CHANGELOG.md
│   │   ├── README.md
│   │   ├── index.js
│   │   └── package.json
│   └── razzle-start-server-webpack-plugin/
│       ├── .babelrc
│       ├── .nvmrc
│       ├── CHANGELOG.md
│       ├── LICENSE
│       ├── README.md
│       ├── dist/
│       │   ├── StartServerPlugin.js
│       │   ├── monitor-loader.js
│       │   └── monitor.js
│       ├── package.json
│       ├── src/
│       │   ├── StartServerPlugin.js
│       │   ├── monitor-loader.js
│       │   └── monitor.js
│       └── tests/
│           ├── SilentPlugin.js
│           ├── cases/
│           │   ├── test-project/
│           │   │   ├── index.js
│           │   │   └── webpack.config.js
│           │   └── test-project-hmr/
│           │       ├── index.js
│           │       └── webpack.config.js
│           ├── index.test.js
│           ├── js/
│           │   ├── test-project/
│           │   │   └── server.js
│           │   └── test-project-hmr/
│           │       └── server.js
│           ├── test-project.sh
│           └── utils.js
├── scripts/
│   ├── bootstrap-examples.js
│   ├── build-docs.js
│   ├── exampleDependencyVersions.json
│   ├── internalPeerDependencyVersions.json
│   ├── new-example.js
│   ├── publish-all.js
│   ├── publish-to-npm.js
│   ├── release-notes.js
│   ├── try-example.js
│   ├── update-examples.js
│   └── yalc-publish-all.js
├── test/
│   ├── e2e/
│   │   ├── create-razzle-app.test.js
│   │   ├── razzle-build.test.js
│   │   ├── razzle-start-spa.test.js
│   │   └── razzle-start.test.js
│   ├── examples/
│   │   └── isomorphic-examples.test.js
│   ├── fixtures/
│   │   ├── build-default/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   └── nothing.txt
│   │   │   └── src/
│   │   │       ├── client.css
│   │   │       ├── client.js
│   │   │       └── index.js
│   │   ├── build-default-spa/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   ├── index.html
│   │   │   │   └── nothing.txt
│   │   │   ├── razzle.config.js
│   │   │   └── src/
│   │   │       ├── client.css
│   │   │       └── client.js
│   │   ├── build-with-babelrc/
│   │   │   ├── .babelrc
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   └── nothing.txt
│   │   │   └── src/
│   │   │       ├── client.css
│   │   │       ├── client.js
│   │   │       └── index.js
│   │   ├── build-with-custom-config/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   └── nothing.txt
│   │   │   ├── razzle.config.js
│   │   │   └── src/
│   │   │       ├── client.css
│   │   │       ├── client.js
│   │   │       └── index.js
│   │   ├── build-with-custom-config-invalid/
│   │   │   ├── package.json
│   │   │   ├── public/
│   │   │   │   └── nothing.txt
│   │   │   ├── razzle.config.js
│   │   │   └── src/
│   │   │       ├── client.css
│   │   │       ├── client.js
│   │   │       └── index.js
│   │   └── util.js
│   ├── jest.e2e.config.json
│   ├── jest.examples.config.js
│   └── utils/
│       └── psKill.js
└── website/
    ├── .babelrc
    ├── .github/
    │   └── CODEOWNERS
    ├── .gitignore
    ├── .nextra/
    │   ├── arrow-right.js
    │   ├── babel-plugin-nextjs-mdx-patch.js
    │   ├── config.js
    │   ├── directories.js
    │   ├── docsearch.js
    │   ├── github-icon.js
    │   ├── layout.js
    │   ├── nextra-loader.js
    │   ├── nextra.js
    │   ├── search.js
    │   ├── ssg.js
    │   ├── styles.css
    │   └── theme.js
    ├── components/
    │   ├── features.js
    │   ├── logo.js
    │   └── video.js
    ├── jsconfig.json
    ├── next.config.js
    ├── nextra.config.js
    ├── package.json
    ├── pages/
    │   ├── _app.js
    │   ├── _document.js
    │   ├── change-log.mdx
    │   ├── deployment-options/
    │   │   ├── aws.md
    │   │   ├── azure.md
    │   │   ├── layer0.md
    │   │   ├── meta.json
    │   │   ├── plesk.md
    │   │   └── vercel.md
    │   ├── docs/
    │   │   ├── customization.md
    │   │   ├── environment-variables.md
    │   │   ├── experimental-features.md
    │   │   ├── how-it-works.md
    │   │   ├── meta.json
    │   │   ├── single-page-applications.md
    │   │   ├── static-export.md
    │   │   └── upgrade-guide.md
    │   ├── getting-started.mdx
    │   ├── index.mdx
    │   ├── meta.json
    │   └── plugins/
    │       └── meta.json
    ├── postcss.config.js
    ├── public/
    │   └── favicon/
    │       └── site.webmanifest
    └── tailwind.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .all-contributorsrc
================================================
{
  "projectName": "razzle",
  "projectOwner": "jaredpalmer",
  "files": [
    "README.md"
  ],
  "imageSize": 100,
  "commit": true,
  "contributors": [
    {
      "login": "jaredpalmer",
      "name": "Jared Palmer",
      "avatar_url": "https://avatars2.githubusercontent.com/u/4060187?v=4",
      "profile": "http://jaredpalmer.com",
      "contributions": [
        "question",
        "code",
        "design",
        "doc",
        "example",
        "ideas",
        "review",
        "test",
        "tool"
      ]
    },
    {
      "login": "Nimaa77",
      "name": "Nima Arefi",
      "avatar_url": "https://avatars1.githubusercontent.com/u/49443619?v=4",
      "profile": "https://github.com/Nimaa77",
      "contributions": [
        "question",
        "code",
        "doc",
        "example",
        "ideas",
        "review",
        "test",
        "tool"
      ]
    },
    {
      "login": "fivethreeo",
      "name": "Øyvind Saltvik",
      "avatar_url": "https://avatars2.githubusercontent.com/u/410?v=4",
      "profile": "https://github.com/fivethreeo/",
      "contributions": [
        "question",
        "code",
        "example",
        "ideas",
        "review",
        "test",
        "tool"
      ]
    },
    {
      "login": "jariz",
      "name": "Jari Zwarts",
      "avatar_url": "https://avatars3.githubusercontent.com/u/1415847?v=4",
      "profile": "https://jari.io",
      "contributions": [
        "question",
        "code",
        "ideas",
        "plugin",
        "review"
      ]
    },
    {
      "login": "gaearon",
      "name": "Dan Abramov",
      "avatar_url": "https://avatars0.githubusercontent.com/u/810438?v=4",
      "profile": "http://twitter.com/dan_abramov",
      "contributions": [
        "code",
        "ideas"
      ]
    },
    {
      "login": "ericclemmons",
      "name": "Eric Clemmons",
      "avatar_url": "https://avatars0.githubusercontent.com/u/15182?v=4",
      "profile": "http://ericclemmons.github.com/",
      "contributions": [
        "code",
        "ideas"
      ]
    },
    {
      "login": "HofmannZ",
      "name": "Zino Hofmann",
      "avatar_url": "https://avatars3.githubusercontent.com/u/17142193?v=4",
      "profile": "https://www.linkedin.com/in/zinohofmann/",
      "contributions": [
        "example"
      ]
    },
    {
      "login": "lucasterra",
      "name": "Lucas Terra",
      "avatar_url": "https://avatars2.githubusercontent.com/u/441058?v=4",
      "profile": "https://www.linkedin.com/in/lucasterra7/",
      "contributions": [
        "code",
        "example",
        "plugin"
      ]
    },
    {
      "login": "rayandrews",
      "name": "Ray Andrew",
      "avatar_url": "https://avatars1.githubusercontent.com/u/4437323?v=4",
      "profile": "https://www.linkedin.com/in/ray-andrew/",
      "contributions": [
        "code",
        "example",
        "plugin"
      ]
    },
    {
      "login": "heithemmoumni",
      "name": "Heithem Moumni",
      "avatar_url": "https://avatars0.githubusercontent.com/u/18581851?v=4",
      "profile": "https://www.linkedin.com/in/heithemmoumni/",
      "contributions": [
        "code",
        "example",
        "plugin"
      ]
    },
    {
      "login": "silviubogan",
      "name": "Silviu Bogan",
      "avatar_url": "https://avatars.githubusercontent.com/u/198924?v=4",
      "profile": "https://silviubogan.ro/",
      "contributions": [
        "code",
        "example"
      ]
    }
  ],
  "repoType": "github",
  "commitConvention": "none"
}


================================================
FILE: .changeset/config.json
================================================
{
    "commit": false,
    "updateInternalDependencies": "minor",
    "linked": [],
    "fixed": [["babel-preset-razzle","create-razzle-app","razzle", "razzle-*"]],
    "access": "public",
    "baseBranch": "master",
    "ignore": [],
    "changelog": ["@changesets/changelog-github", { "repo": "jaredpalmer/razzle" }]
  }

================================================
FILE: .eslintignore
================================================
node_modules/
build
my-app*
test/fixtures
test/tests
packages/create-razzle-app/templates
examples

================================================
FILE: .eslintrc
================================================
{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es6": false
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"],
    "curly": "warn"
  }
}


================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================

# Contributor Covenant Code of Conduct

<!-- INSERT doctoc generated TOC please keep comment here to allow auto update -->
<!-- START doctoc generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->
- [Contributor Covenant Code of Conduct](#contributor-covenant-code-of-conduct)
  - [Our Pledge](#our-pledge)
  - [Our Standards](#our-standards)
  - [Our Responsibilities](#our-responsibilities)
  - [Scope](#scope)
  - [Enforcement](#enforcement)
  - [Attribution](#attribution)
<!-- END doctoc generated instructions please keep comment here to allow auto update -->

## Our Pledge

In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.


## Our Standards

Examples of behavior that contributes to creating a positive environment
include:

* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
  address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
  professional setting

## Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.

## Scope

This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.

## Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at [info@palmer.net](mailto:info@palmer.net). All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.

## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]

[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/


================================================
FILE: .github/CONTRIBUTING.md
================================================

# Contributing to Razzle

Hi there! Thanks for your interest in Razzle. This guide will help you get started contributing.

<!-- INSERT doctoc generated TOC please keep comment here to allow auto update -->
<!-- START doctoc generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->
- [Contributing to Razzle](#contributing-to-razzle)
  - [Developing locally](#developing-locally)
- [optionally install add-dependencies](#optionally-install-add-dependencies)
    - [Commands](#commands)
    - [Workflow for working on razzle core with examples](#workflow-for-working-on-razzle-core-with-examples)
- [or](#or)
- [git checkout -b my-feature-branch master](#git-checkout--b-my-feature-branch-master)
- [git checkout -b my-feature-branch three](#git-checkout--b-my-feature-branch-three)
- [/home/oyvind/Documents/GitHub/razzle/](#homeoyvinddocumentsgithubrazzle)
- [to make sure tests pass](#to-make-sure-tests-pass)
- [to add a new example](#to-add-a-new-example)
- [to work on a example](#to-work-on-a-example)
- [if it is a example with webpack5 you need to do](#if-it-is-a-example-with-webpack5-you-need-to-do)
- [switch back to webpack4 later to work with webpack4](#switch-back-to-webpack4-later-to-work-with-webpack4)
- [then](#then)
- [if you want to add dependencies to the example](#if-you-want-to-add-dependencies-to-the-example)
- [if you make changes to startserver plugin](#if-you-make-changes-to-startserver-plugin)
- [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)
- [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)
- [Trouble with puppeteer?](#trouble-with-puppeteer)
    - [Updating your fork](#updating-your-fork)
  - [Adding examples](#adding-examples)
    - [Use examples/basic as template](#use-examplesbasic-as-template)
    - [Naming examples](#naming-examples)
    - [How to get your example merged](#how-to-get-your-example-merged)
    - [Guidelines](#guidelines)
  - [Why wasn't my PR merged?](#why-wasnt-my-pr-merged)
  - [Getting recognition](#getting-recognition)
  - [Getting help](#getting-help)
<!-- END doctoc generated instructions please keep comment here to allow auto update -->

Razzle is monorepo made up of a several npm packages powered by Lerna.

- `examples`: All examples go in here.
- `packages`: This is where the magic happens
  - `babel-preset-razzle`: Razzle's default Babel preset.
  - `create-razzle-app`: Razzle's CLI tool responsible for initialization of new projects
  - `razzle`: The core library
  - `razzle-dev-utils`: Utilities and helpers
- `scripts`: Utility scripts related to cleaning and bootstrapping the repo
- `test`: End-to-end tests

## Developing locally

First, fork the repo to your GitHub account. Then clone your fork to your local
machine 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.

```
git clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git
cd razzle
git checkout -B <my-branch>
NODE_ENV=development yarn install ---ignore-engines
# optionally install add-dependencies
sudo npm install add-dependencies -g
```

This will install all `node_modules` in all the packages and symlink
inter-dependencies. Thus when you make local changes in any of the packages you can try them
immediately in all the examples. `add-dependencies` can be used to just add packages to `package.json`.

### Commands

- `yarn clean`: Clean up all `node_modules` and remove all symlinks from packages and examples.
- `yarn test --runInBand`: Runs all tests
- `yarn test:packages`: Runs tests for packages
- `yarn test:e2e`: Runs end-to-end tests
- `yarn build-docs`: Builds docs/ updates doc TOC
- `yarn publish-all-canary`: Does a `razzle@canary` release.
- `yarn publish-all-stable`: Does a a stable release(uses the npm version released of the packages)
- `yarn new-example`: Creates a new example from another example. `yarn new-example basic new-example`.
- `yarn bootstrap-examples`: Run `yarn` with specific examples as workspaces. Automatically symlinks inter-dependent modules. Run `yarn restrap` in the example to reinstall.
- `yarn test:examples:simple`: Runs tests for all simple examples (uses the npm version released of the packages)
- `yarn test:examples:complex`: Runs tests for all complex examples (uses the npm version released of the packages)
- `yarn test:examples`: Runs tests for all examples (uses the npm version released of the packages)

### Workflow for working on razzle core with examples

```bash

git clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git
cd razzle
git checkout -b my-feature-branch canary

# or
# git checkout -b my-feature-branch master
# git checkout -b my-feature-branch three

sudo npm install add-dependencies yalc -g

pwd
# /home/oyvind/Documents/GitHub/razzle/

NODE_ENV=development yarn install ---ignore-engines

# to make sure tests pass
yarn test --runInBand

# to add a new example
yarn new-example existingexample with-somefeature

# to work on a example
cd examples/basic
example="$(basename $PWD)"
pushd ../..

# if it is a example with webpack5 you need to do
yarn add -W webpack@5.24.0 html-webpack-plugin@5.2.0

# switch back to webpack4 later to work with webpack4
yarn add -W webpack@4.46.0 html-webpack-plugin@4.5.2

# then
yarn bootstrap-examples $example
popd
yarn build

# if you want to add dependencies to the example
add-dependencies somedependency
yarn restrap

# if you make changes to startserver plugin
pushd ../..
cd packages/razzle-start-server-webpack-plugin
yarn build
popd

# to run example tests with unreleased razzle packages with specific webpack and specific tests

WEBPACK_DEPS="webpack@5.24.0 html-webpack-plugin@5.2.0" PACKAGE_MANAGER="yalc" NPM_TAG="development" yarn test:examples --runInBand -t with-tailwindcss
WEBPACK_DEPS="webpack@4.46.0 html-webpack-plugin@4.5.2" PACKAGE_MANAGER="yalc" NPM_TAG="development" yarn test:examples --runInBand -t with-tailwindcss

# Commands being run during testing puts output and puppeteer screenshots in test-artifacts/
# Trouble with puppeteer?

sudo sysctl -w kernel.unprivileged_userns_clone=1
```

### Updating your fork

When you want to pull down changes to your fork enter the following into your terminal:

```bash
git checkout master
git pull origin master
```

## Adding examples

### Use examples/basic as template
If 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`.

### Naming examples

All 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>`.

### How to get your example merged

- Make sure to comment the important parts of your code and include a **well-written**
"Idea behind the example" section. This is more important to me than your actual code.
- 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.
- Your example **MUST** implement Hot Module Replacement. If it does not update when you make edits, you have broken something.
- 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).

### Guidelines

[Commit message guidelines](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-guidelines)

## Why wasn't my PR merged?

I will do my best to write out my reasoning before closing a PR, but 80% of the time it falls under one of these...

- You did not read this document
- Your code breaks an internal application (I will be transparent about this)
- Your code conflicts with some future plans (I will be transparent about this too)
- You've said something inappropriate or have broken the Code of Conduct

## Getting recognition

We use the project README to recognize the contributions of members of the project community.

To add a contributor: `all-contributors add github_username doc,code`

[Valid contributing keys](https://allcontributors.org/docs/en/emoji-key)

## Getting help

Tweet / DM [@jaredpalmer](https://twitter.com/jaredpalmer)
Tweet / DM [@nima_arf](https://twitter.com/nima_arf)
Tweet / DM [@fivethreeo](https://twitter.com/fivethreeo)


================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms

open_collective: razzle


================================================
FILE: .github/ISSUE_TEMPLATE/Bug_report.md
================================================
---
name: "\U0001F41B Bug report"
about: Create a report to help make Razzle better
---

## 🐛 Bug report

### Current Behavior

<!-- If applicable, add screenshots to help explain your problem. -->

### Expected behavior

<!-- A clear and concise description of what you expected to happen. -->

### Reproducible example

<!-- Create A github repo and Send a link here -->


### Suggested solution(s)

<!-- How could we solve this bug? What changes would need to made to Razzle? -->

### Additional context

<!-- Add any other context about the problem here.  -->

### Your environment

<!-- PLEASE FILL THIS OUT -->

| Software         | Version(s) |
| ---------------- | ---------- |
| Razzle           |
| Razzle Plugins   |
| Node             |
| Browser          |
| npm/Yarn         |
| Operating System |
| TypeScript       |
| React            |


================================================
FILE: .github/ISSUE_TEMPLATE/Documentation.md
================================================
---
name: "\U0001F41B Documentation"
about: Imrovements or suggestions of Razzle documentation
---

## 📖 Documentation


================================================
FILE: .github/ISSUE_TEMPLATE/Feature_request.md
================================================
---
name: "\U0001F680Feature request"
about: Suggest an idea for Razzle
---

## 🚀 Feature request

### Current Behavior

<!-- A clear and concise description of what is the current behavior / use.  -->

### Desired Behavior

<!-- A clear and concise description of what you want to happen.  -->

### Suggested Solution

<!-- Suggest a solution that the community/maintainers/you may take to enable the desired behavior  -->

<!-- NOTE: Feature Requests without suggested solutions may not be addressed or treated with the same level of urgency as those that have suggested solutions. -->

### Who does this impact? Who is this for?

<!-- Who is this for? All users? TypeScript users? Beginners? Advanced? Yourself? People using X, Y, X, etc.? -->

### Describe alternatives you've considered

<!-- A clear and concise description of any alternative solutions or features you've considered.  -->

### Additional context

<!-- Add any other context or links about the feature request here. -->


================================================
FILE: .github/ISSUE_TEMPLATE/Question.md
================================================
---
name: "❓Question"
about: 'Ask a Question!'
---

## ❓Question




================================================
FILE: .github/labels.yml
================================================
examples:
  - examples/*
  - examples/**/*

razzle: 
  - packages/razzle/*
  - packages/razzle/**/*

webpack: 
  - packages/razzle/*
  - packages/razzle/**/*

plugins: 
  - packages/razzle-plugin-*/*
  - packages/razzle-plugin-*/**/*

repo:
  - ./*

================================================
FILE: .github/stale.yml
================================================
# Number of days of inactivity before an issue becomes stale
daysUntilStale: 60
# Number of days of inactivity before a stale issue is closed
daysUntilClose: 14
# Issues with these labels will never be considered stale
exemptLabels:
  - pinned
  - security
# Label to use when marking an issue as stale
staleLabel: stale
# Comment to post when marking an issue as stale. Set to `false` to disable
markComment: false
# Comment to post when closing a stale issue. Set to `false` to disable
closeComment: 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!


================================================
FILE: .github/workflows/examples.yml
================================================
name: Test examples on trigger

on:
  workflow_dispatch:
    inputs:
      npm_tag:
        description: 'The npm tag for create razzle app'
        default: 'development'
      jest_filter:
        description: 'The filter for jest tests'
        default: 'simple'
      package_manager:
        description: 'The package manager to use, yalc with yarn default'
        default: 'yalc'


jobs:
  build:

    runs-on: ${{ matrix.os }}

    strategy:
      fail-fast: false
      matrix:
        node-version: [10.x, 12.x, 13.x, 14.x]
        os: [ubuntu-latest, windows-latest, macOS-latest]
        webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]

    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}

    steps:

    - name: Get current date
      id: date
      run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"

    - name: Log date
      run: echo "${{ steps.date.outputs.date }}"

    - name: Set default run status
      run: echo "::set-output name=last_run_status::default" > last_run_status

    - name: Restore last run status
      id: last_run
      uses: actions/cache@v2
      with:
        path: |
          last_run_status
        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
        restore-keys: |
          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-

    - name: Set last run status
      id: last_run_status
      run: cat last_run_status

    - name: Checkout ref
      uses: actions/checkout@v2
      with:
        ref: ${{ github.event.workflow_dispatch.ref }}

    - name: Use Node.js ${{ matrix.node-version }}
      if: steps.last_run_status.outputs.last_run_status != 'success'
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install yalc globally
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: npm install -g yalc

    - name: Install elm globally
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn global add elm

    - name: Restore lerna
      if: steps.last_run_status.outputs.last_run_status != 'success'
      id: cache
      uses: actions/cache@v2
      with:
        path: |
          node_modules
          */*/node_modules
        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}

    - name: Install and bootstrap packages
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000

    - name: Install ${{ matrix.webpack }}
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000

    - name: Run tests
      id: test_run
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn test:examples -t ${{ github.event.inputs.jest_filter }} --runInBand
      env:
        WEBPACK_DEPS: "${{ matrix.webpack }}"
        NPM_TAG: "${{ github.event.inputs.npm_tag }}"
        PACKAGE_MANAGER: "${{ github.event.inputs.package_manager }}"
        WARNINGS_ERRORS_DISABLE: true

    - name: Upload test artifacts
      uses: actions/upload-artifact@v2
      if: ${{ always() && steps.last_run_status.outputs.last_run_status != 'success' }}
      with:
        name: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ github.event.inputs.npm_tag }}-${{ github.event.inputs.jest_filter }}-${{ github.event.inputs.package_manager }}
        path: test-artifacts/

    - name: Save run status
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status


================================================
FILE: .github/workflows/examples_node14.yml
================================================
name: Test examples on trigger using node 14.x


on:
  workflow_dispatch:
    inputs:
      npm_tag:
        description: 'The npm tag for create razzle app'
        default: 'development'
      jest_filter:
        description: 'The filter for jest tests'
        default: 'simple'
      package_manager:
        description: 'The package manager to use, yalc with yarn default'
        default: 'yalc'



jobs:
  build:

    runs-on: ${{ matrix.os }}

    strategy:
      fail-fast: false
      matrix:
        node-version: [14.x]
        os: [ubuntu-latest, windows-latest, macOS-latest]
        webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]

    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}

    steps:

    - name: Get current date
      id: date
      run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"

    - name: Log date
      run: echo "${{ steps.date.outputs.date }}"

    - name: Set default run status
      run: echo "::set-output name=last_run_status::default" > last_run_status

    - name: Restore last run status
      id: last_run
      uses: actions/cache@v2
      with:
        path: |
          last_run_status
        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
        restore-keys: |
          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-

    - name: Set last run status
      id: last_run_status
      run: cat last_run_status

    - name: Checkout ref
      uses: actions/checkout@v2
      with:
        ref: ${{ github.event.workflow_dispatch.ref }}

    - name: Use Node.js ${{ matrix.node-version }}
      if: steps.last_run_status.outputs.last_run_status != 'success'
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install yalc globally
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: npm install -g yalc

    - name: Install elm globally
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn global add elm

    - name: Restore lerna
      if: steps.last_run_status.outputs.last_run_status != 'success'
      id: cache
      uses: actions/cache@v2
      with:
        path: |
          node_modules
          */*/node_modules
        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}

    - name: Install and bootstrap packages
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000

    - name: Install ${{ matrix.webpack }}
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000

    - name: Run tests
      id: test_run
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn test:examples -t ${{ github.event.inputs.jest_filter }} --runInBand
      env:
        WEBPACK_DEPS: "${{ matrix.webpack }}"
        NPM_TAG: "${{ github.event.inputs.npm_tag }}"
        PACKAGE_MANAGER: "${{ github.event.inputs.package_manager }}"
        WARNINGS_ERRORS_DISABLE: true

    - name: Upload test artifacts
      uses: actions/upload-artifact@v2
      if: ${{ always() && steps.last_run_status.outputs.last_run_status != 'success' }}
      with:
        name: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ github.event.inputs.npm_tag }}-${{ github.event.inputs.jest_filter }}-${{ github.event.inputs.package_manager }}
        path: test-artifacts/

    - name: Save run status
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status


================================================
FILE: .github/workflows/label.yml
================================================
# Automatically label PRs every hour based on your .github/labels.yaml:
#
# This workflow will triage pull requests and apply a label based on the
# paths that are modified in the pull request.
#
# To use this workflow, you will need to set up a .github/labeler.yml
# file with configuration.  For more information, see:
# https://github.com/actions/labeler/blob/master/README.md

name: "Label PRs from globs"
on:
  schedule:
  - cron: "0 1 * * *"

jobs:
  execute:
    runs-on: ubuntu-latest
    steps:
      - name: Label PRs
        uses: jpmcb/prow-github-actions@v1.0.0
        with:
          jobs: 'pr-labeler'
          github-token: "${{ secrets.GITHUB_TOKEN }}"


================================================
FILE: .github/workflows/nodejs.yml
================================================
name: Run tests on push

on: [push]

jobs:
  build:

    runs-on: ${{ matrix.os }}

    strategy:
      fail-fast: false
      matrix:
        node-version: [10.x, 12.x, 13.x, 14.x]
        os: [ubuntu-latest, windows-latest, macOS-latest]
        webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]

    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}

    steps:

    - name: Get current date
      id: date
      run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"

    - name: Log date
      run: echo "${{ steps.date.outputs.date }}"

    - name: Set default run status
      run: echo "::set-output name=last_run_status::default" > last_run_status

    - name: Restore last run status
      id: last_run
      uses: actions/cache@v2
      with:
        path: |
          last_run_status
        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
        restore-keys: |
          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-

    - name: Set last run status
      id: last_run_status
      run: cat last_run_status

    - name: Log last run status
      run: echo "${{ steps.last_run_status.outputs.last_run_status }}"

    - uses: actions/checkout@v1
      if: steps.last_run_status.outputs.last_run_status != 'success'

    - name: Use Node.js ${{ matrix.node-version }}
      if: steps.last_run_status.outputs.last_run_status != 'success'
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install elm globally
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn global add elm

    - name: Restore lerna
      id: cache
      if: steps.last_run_status.outputs.last_run_status != 'success'
      uses: actions/cache@v2
      with:
        path: |
          node_modules
          */*/node_modules
        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}

    - name: Install and bootstrap packages
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000

    - name: Install ${{ matrix.webpack }}
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000

    - name: Run tests
      id: test_run
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn test --runInBand --coverage
      env:
        CI: true
        WARNINGS_ERRORS_DISABLE: true

    - name: Save run status
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status


================================================
FILE: .github/workflows/release.yml
================================================
name: Release

on:
  push:
    branches:
      - master

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2
        with:
          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
          fetch-depth: 0

      - name: Setup Node.js 12.x
        uses: actions/setup-node@v2
        with:
          node-version: 12.x

      - name: Install Dependencies
        run: yarn --frozen-lockfile

      - name: Create Release Pull Request or Publish
        uses: changesets/action@master
        with:
          publish: yarn changeset publish
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

================================================
FILE: .github/workflows/test-examples.yml
================================================
name: Test examples on trigger


on:
  workflow_dispatch:
    inputs:
      logLevel:
        description: 'Log level'
        required: true
        default: 'warning'
      tags:
        description: 'Test scenario tags'

jobs:
  build:

    runs-on: ${{ matrix.os }}

    strategy:
      fail-fast: false
      matrix:
        node-version: [8.x, 10.x, 12.x, 13.x, 14.x]
        os: [ubuntu-latest, windows-latest, macOS-latest]
        webpack: ["webpack@4.46.0 html-webpack-plugin@4.5.2" , "webpack@5.24.0 html-webpack-plugin@5.2.0"]

    name: Test on node ${{ matrix.node-version }} and ${{ matrix.os }} with ${{ matrix.webpack }}

    steps:

    - name: Get current date
      id: date
      run: echo "::set-output name=date::$(date +'%Y-%m-%dT%H:%M:%S')"

    - name: Log date
      run: echo "${{ steps.date.outputs.date }}"

    - name: Set default run status
      run: echo "::set-output name=last_run_status::default" > last_run_status

    - name: Restore last run status
      id: last_run
      uses: actions/cache@v2
      with:
        path: |
          last_run_status
        key: ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ steps.date.outputs.date }}
        restore-keys: |
          ${{ github.run_id }}-${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-
    - name: Set last run status
      id: last_run_status
      run: cat last_run_status

    - name: Log last run status
      run: echo "${{ steps.last_run_status.outputs.last_run_status }}"

    - uses: actions/checkout@v1
      if: steps.last_run_status.outputs.last_run_status != 'success'

    - name: Use Node.js ${{ matrix.node-version }}
      if: steps.last_run_status.outputs.last_run_status != 'success'
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install elm globally
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn global add elm

    - name: Restore lerna
      id: cache
      if: steps.last_run_status.outputs.last_run_status != 'success'
      uses: actions/cache@v2
      with:
        path: |
          node_modules
          */*/node_modules
        key: ${{ matrix.os }}-${{ matrix.node-version }}-${{ matrix.webpack }}-${{ hashFiles('**/yarn.lock') }}

    - name: Install and bootstrap packages
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn install --frozen-lockfile --ignore-engines --network-timeout 1000000

    - name: Install ${{ matrix.webpack }}
      if: steps.cache.outputs.cache-hit != 'true' && steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn add -WD ${{ matrix.webpack }} --ignore-engines --network-timeout 1000000

    - name: Run tests
      id: test_run
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: yarn test --runInBand --coverage
      env:
        CI: true
        WARNINGS_ERRORS_DISABLE: true

    - name: Save run status
      if: steps.last_run_status.outputs.last_run_status != 'success'
      run: echo "::set-output name=last_run_status::${{ steps.test_run.outcome }}" > last_run_status


================================================
FILE: .gitignore
================================================

# Logs
logs
*.log
npm-debug.log*
.DS_Store
stage-*
example/
# Runtime data
pids
*.pid
*.seed

test-artifacts
examples/*/cache
examples/*/build
*.sqlite3


# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
.yarn

# node-waf configuration
.lock-wscript


# Dependency directory
node_modules

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

# Build Output
build
.vscode

# Editors
**/.idea

.vercel


================================================
FILE: .prettierrc
================================================
{
  "trailingComma": "es5",
  "singleQuote": true,
  "semi": true
}


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 Jared Palmer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: examples/.gitignore
================================================
yarn.lock
package-lock.json


================================================
FILE: examples/basic/README.md
================================================
# Razzle Basic Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example basic basic

cd basic
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/basic/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/basic/package.json
================================================
{
  "name": "razzle-examples-basic",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/basic/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/basic/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/basic/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/basic/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/basic/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/basic/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/basic/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/basic/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/basic-server/README.md
================================================
# Razzle Basic Server Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example basic-server basic-server

cd basic-server
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry point
`src/index.js` for the server.


================================================
FILE: examples/basic-server/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/basic-server/package.json
================================================
{
  "name": "razzle-examples-basic-server",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/basic-server/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/basic-server/razzle.config.js
================================================
'use strict';

module.exports = {
  options: {
    buildType: 'server-only',
  }
};


================================================
FILE: examples/basic-server/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/basic-server/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/basic-server/src/App.js
================================================

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/basic-server/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/basic-server/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/basic-server/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';


export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
      <div id="root">${markup}</div>
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/basic-serverless/README.md
================================================
# Razzle Basic Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example basic basic

cd basic
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/basic-serverless/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/basic-serverless/package.json
================================================
{
  "name": "razzle-examples-basic-serverless",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/basic-serverless/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/basic-serverless/razzle.config.js
================================================
'use strict';

const path = require('path');

module.exports = {
  options: {
    buildType: 'iso-serverless'
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    if (opts.env.target === 'node') {
      config.plugins.push(
        new opts.webpackObject.ContextReplacementPlugin(
                                             // we want to replace context
          /express\/lib/,                    // and replace all searches in
                                             // express/lib/*
          path.resolve('node_modules'),      // to look in folder 'node_modules'
          {                                  // and return a map
            'ejs': 'ejs'                     // which resolves request for 'ejs'
          }                                  // to module 'ejs'
        )                                    // __webpack_require__(...)(mod)
        // we set `mod = 'ejs'`
      )
    }
    return config;
  }
};


================================================
FILE: examples/basic-serverless/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/basic-serverless/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/basic-serverless/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/basic-serverless/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/basic-serverless/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/basic-serverless/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/basic-serverless/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/basic-spa/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/basic-spa/README.md
================================================
# Razzle Single Page App Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example basic-spa basic-spa

cd basic-spa
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This 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`.


================================================
FILE: examples/basic-spa/package.json
================================================
{
  "name": "razzle-examples-basic-spa",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "serve -s build/public"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "html-webpack-plugin": "5.2.0",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "serve": "^11.3.2",
    "webpack": "5.24.0",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/basic-spa/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <%= htmlWebpackPlugin.tags.headTags %>
    <!--
        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
        Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      -->
    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      -->
      <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>

</html>


================================================
FILE: examples/basic-spa/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/basic-spa/razzle.config.js
================================================
'use strict';

module.exports = {
  options: {
    buildType: 'single-page-application',
  }
};


================================================
FILE: examples/basic-spa/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/basic-spa/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/basic-spa/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/basic-spa/src/client.js
================================================
import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-afterjs/README.md
================================================
# with-afterjs example

This example have been moved here: [jaredpalmer/after.js](https://github.com/jaredpalmer/after.js/blob/master/examples/basic)


================================================
FILE: examples/with-custom-babel-config/.babelrc
================================================
{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    "@babel/plugin-proposal-do-expressions"
  ]
}

================================================
FILE: examples/with-custom-babel-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-custom-babel-config/README.md
================================================
# Razzle Custom Babel Configuration Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-custom-babel-config with-custom-babel-config

cd with-custom-babel-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is an example of how to extend Razzle with a custom `.babelrc` file.


================================================
FILE: examples/with-custom-babel-config/package.json
================================================
{
  "name": "razzle-examples-with-custom-babel-config",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2",
    "serialize-javascript": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-do-expressions": "^7.8.3",
    "babel-preset-razzle": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-custom-babel-config/razzle.config.js
================================================
module.exports = {
  options: {
    verbose: true
  },
}


================================================
FILE: examples/with-custom-babel-config/src/App.js
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';

const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-custom-babel-config/src/Home.js
================================================
import React from "react";

export default class MyLuckNo extends React.Component {
  state = { randomNo: null };

  componentDidMount() {
    this.recalculate();
  }

  recalculate() {
    this.setState({
      randomNo: Math.ceil(Math.random() * 100),
    });
  }

  render() {
    const { randomNo } = this.state;

    if (randomNo === null) {
      return <p>Please wait..</p>;
    }

    // This is an experimental JavaScript feature where we can get with
    // using babel-preset-stage-0
    const message = do {
      if (randomNo < 30) {
        // eslint-disable-next-line no-unused-expressions
        ("Do not give up. Try again.");
      } else if (randomNo < 60) {
        // eslint-disable-next-line no-unused-expressions
        ("You are a lucky guy");
      } else {
        // eslint-disable-next-line no-unused-expressions
        ("You are soooo lucky!");
      }
    };

    return (
      <div>
        <h3>Your Lucky number is: "{randomNo}"</h3>
        <p>{message}</p>
        <button onClick={() => this.recalculate()}>Try Again</button>
      </div>
    );
  }
}


================================================
FILE: examples/with-custom-babel-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-custom-babel-config/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-custom-babel-config/src/server.js
================================================
import { StaticRouter } from 'react-router-dom';

import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const context = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
    </head>
    <body>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    return { html };
  }
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html = '', redirect = false } = renderApp(req, res);
    if (redirect) {
      res.redirect(redirect);
    } else {
      res.send(html);
    }
  });

export default server;


================================================
FILE: examples/with-custom-devserver-options/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-custom-devserver-options/README.md
================================================
# Razzle Custom Webpack Configuration Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-custom-devserver-options with-custom-devserver-options

cd with-custom-devserver-options
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying webpack devServer configuration. It modifies the port of the devServer
in dev (`razzle start`).

Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.port = 3002;
      // If behind a proxy on a public domain
      // config.devServer.public = 'example.com:8080';
    }

    return config;
  },
};
```


================================================
FILE: examples/with-custom-devserver-options/package.json
================================================
{
  "name": "razzle-examples-with-custom-devserver-options",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "cross-env CLIENT_PUBLIC_PATH=http://localhost:3002/ razzle start",
    "start:proxied": "cross-env CLIENT_PUBLIC_PATH=http://example.com:8080/ razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-custom-devserver-options/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-custom-devserver-options/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.port = 3002;
      // If behind a proxy on a public domain
      // config.devServer.public = 'example.com:8080';
    }

    return config;
  },
};


================================================
FILE: examples/with-custom-devserver-options/src/App.js
================================================
import React from 'react';

const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-custom-devserver-options/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-custom-devserver-options/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-custom-devserver-options/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-custom-environment-variables/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-custom-environment-variables/README.md
================================================
# Razzle Custom Environment Variables Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-custom-environment-variables with-custom-environment-variables

cd with-custom-environment-variables
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This example shows how you can use `.env` files to set environment-specific
**build-time** variables.

> 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).

```bash
# .env
HOST=10.69.107.189  # HOST sets the host IP address
PORT=4000 # Serve on :4000
VERBOSE=true # Show verbose logging output (will not clear console between compiles)

RAZZLE_MY_CUSTOM_VARIABLE=XXXXXX  # Will be available on server and client as process.env.RAZZLE_MY_CUSTOM_VARIABLE
```


================================================
FILE: examples/with-custom-environment-variables/package.json
================================================
{
  "name": "razzle-examples-with-custom-environment-variables",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  },
  "razzle_meta": {
    "port": "4000"
  }
}


================================================
FILE: examples/with-custom-environment-variables/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-custom-environment-variables/src/App.js
================================================
import React from 'react';

const App = () => <div>{process.env.RAZZLE_CUSTOM_VAR}</div>;

export default App;


================================================
FILE: examples/with-custom-environment-variables/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-custom-environment-variables/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-custom-environment-variables/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-custom-target-babel-config/.babelrc.node
================================================
{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    "@babel/plugin-proposal-do-expressions"
  ]
}

================================================
FILE: examples/with-custom-target-babel-config/.babelrc.web
================================================
{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    "@babel/plugin-proposal-do-expressions"
  ]
}

================================================
FILE: examples/with-custom-target-babel-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-custom-target-babel-config/README.md
================================================
# Razzle Custom Target Babel Configuration Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-custom-target-babel-config with-custom-target-babel-config

cd with-custom-target-babel-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is an example of how to extend Razzle with a custom `.babelrc.node` and a `.babelrc.web` file.


================================================
FILE: examples/with-custom-target-babel-config/package.json
================================================
{
  "name": "razzle-examples-with-custom-target-babel-config",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2",
    "serialize-javascript": "^3.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-do-expressions": "^7.8.3",
    "babel-preset-razzle": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-custom-target-babel-config/razzle.config.js
================================================
module.exports = {
  options: {
    verbose: true,
    enableTargetBabelrc: true
  },
}


================================================
FILE: examples/with-custom-target-babel-config/src/App.js
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';

const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-custom-target-babel-config/src/Home.js
================================================
import React from "react";

export default class MyLuckNo extends React.Component {
  state = { randomNo: null };

  componentDidMount() {
    this.recalculate();
  }

  recalculate() {
    this.setState({
      randomNo: Math.ceil(Math.random() * 100),
    });
  }

  render() {
    const { randomNo } = this.state;

    if (randomNo === null) {
      return <p>Please wait..</p>;
    }

    // This is an experimental JavaScript feature where we can get with
    // using babel-preset-stage-0
    const message = do {
      if (randomNo < 30) {
        // eslint-disable-next-line no-unused-expressions
        ("Do not give up. Try again.");
      } else if (randomNo < 60) {
        // eslint-disable-next-line no-unused-expressions
        ("You are a lucky guy");
      } else {
        // eslint-disable-next-line no-unused-expressions
        ("You are soooo lucky!");
      }
    };

    return (
      <div>
        <h3>Your Lucky number is: "{randomNo}"</h3>
        <p>{message}</p>
        <button onClick={() => this.recalculate()}>Try Again</button>
      </div>
    );
  }
}


================================================
FILE: examples/with-custom-target-babel-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-custom-target-babel-config/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-custom-target-babel-config/src/server.js
================================================
import { StaticRouter } from 'react-router-dom';

import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  
  const context = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );
  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-custom-webpack-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-custom-webpack-config/README.md
================================================
# Razzle Custom Webpack Configuration Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-custom-webpack-config with-custom-webpack-config

cd with-custom-webpack-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying webpack configuration. It modifies the name of the server's output file
in production (`razzle build`).

Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    // Change the name of the server output file in production
    if (opts.env.target === 'node' && !opts.env.dev) {
      config.output.filename = 'custom.js';
    }

    return config;
  },
};
```


================================================
FILE: examples/with-custom-webpack-config/package.json
================================================
{
  "name": "razzle-examples-with-custom-webpack-config",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/custom.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-custom-webpack-config/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-custom-webpack-config/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    // Change the name of the server output file in production
    if (opts.env.target === 'node' && !opts.env.dev) {
      config.output.filename = 'custom.js';
    }

    return config;
  },
};


================================================
FILE: examples/with-custom-webpack-config/src/App.js
================================================
import React from 'react';

const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-custom-webpack-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-custom-webpack-config/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-custom-webpack-config/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-devcert-https/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-devcert-https/README.md
================================================
# Razzle Devcert Https Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-devcert-https with-devcert-https

cd with-devcert-https
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying configuration using a promise. It modifies the name of the server's output file
in production (`razzle build`).

Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackOptions(opts) {
    const options = opts.webpackOptions;
    return new Promise(async (resolve) => {
      const httpsCredentials = await devcert.certificateFor('localhost');
      const stringHttpsCredentials = {
        key: httpsCredentials.key.toString(),
        cert: httpsCredentials.cert.toString()
      };
      if (opts.env.target === 'node' && opts.env.dev) {
        options.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(stringHttpsCredentials);
      }
      if (opts.env.target === 'web' && opts.env.dev) {
        options.HTTPS_CREDENTIALS = httpsCredentials;
      }
      resolve(options);
    });
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    const options = opts.webpackOptions;
    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.https = options.HTTPS_CREDENTIALS;
    }
    return config;
  },
};

```


================================================
FILE: examples/with-devcert-https/package.json
================================================
{
  "name": "razzle-examples-with-devcert-https",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/custom.js"
  },
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "https": "^1.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "devcert": "^1.1.3",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-devcert-https/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-devcert-https/razzle.config.js
================================================
'use strict';

const devcert = require('devcert');

const cors = require('cors');

const whitelist = ['https://localhost:3000', 'https://localhost:3001']; //white list consumers
const corsOptions = {
  origin: '*',
  // function (origin, callback) {
  //   console.log(origin);
  //   if (whitelist.indexOf(origin) !== -1) {
  //     callback(null, true);
  //   } else {
  //     callback(null, false);
  //   }
  // },
  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
  credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']
};

module.exports = {
  modifyOptions(opts) { // use modifyOptions so certificateFor is called once
    const options = opts.options.razzleOptions;
    return new Promise(async (resolve) => {
      const httpsCredentials = await devcert.certificateFor('localhost');
      const stringHttpsCredentials = {
        key: httpsCredentials.key.toString(),
        cert: httpsCredentials.cert.toString()
      };
      options.HTTPS_CREDENTIALS = stringHttpsCredentials;
      resolve(options);
    });
  },
  modifyWebpackOptions(opts) {
    const razzleOptions = opts.options.razzleOptions;
    const webpackOptions = opts.options.webpackOptions;
    if (opts.env.target === 'node' && opts.env.dev) {
      webpackOptions.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(razzleOptions.HTTPS_CREDENTIALS);
    }
    return webpackOptions;
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    const options = opts.options.razzleOptions;
    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.https = options.HTTPS_CREDENTIALS;
      // config.devServer.before = function (app, server, compiler) {
      //   app.use(cors('*'));    console.log('web');
      //
      // }
      config.devServer.headers = {
        "Access-Control-Allow-Origin": "*",
        https: true
      }
    }
    return config;
  },
};


================================================
FILE: examples/with-devcert-https/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-devcert-https/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-devcert-https/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-devcert-https/src/index.js
================================================
import express from 'express';
import https from 'https';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

const credentials = HTTPS_CREDENTIALS || {};

export default https.createServer(credentials,app)
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-devcert-https/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import cors from 'cors';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};


const whitelist = ['https://localhost:3000', 'https://localhost:3001']; //white list consumers
const corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true);
    } else {
      callback(null, false);
    }
  },
  methods: ['GET', 'PUT', 'POST', 'DELETE', 'OPTIONS'],
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
  credentials: true, //Credentials are cookies, authorization headers or TLS client certificates.
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'device-remember-token', 'Access-Control-Allow-Origin', 'Origin', 'Accept']
};

const server = express();

server
  .disable('x-powered-by')
  .use(cors(corsOptions))
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-development-build/README.md
================================================
# Razzle Basic Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->
This is the canary release documentation for this example

Create and start the example:

```bash
npx create-razzle-app@canary --example basic basic

cd basic
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle to produce a development build. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.

The 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.

You 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.


================================================
FILE: examples/with-development-build/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-development-build/package.json
================================================
{
  "name": "razzle-examples-with-development-build",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build --node-env=development",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js",
    "start:dev": "NODE_ENV=development node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-development-build/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-development-build/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-development-build/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-development-build/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-development-build/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-development-build/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-development-build/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-development-build/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-elm/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

coverage
node_modules
build
.env.local
.env.development.local
.env.test.local
.env.production.local
.elm-static-html
build

# Optional npm cache directory
.npm
yarn.lock

# Optional REPL history
.node_repl_history

# elm-package generated files
elm-stuff/
# elm-repl generated files
repl-temp-*

ignore
dist

================================================
FILE: examples/with-elm/README.md
================================================
# Razzle Elm Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-elm with-elm

cd with-elm
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This is a basic example of how to use Razzle and Elm, it uses:

* [elm-static-html](https://github.com/eeue56/elm-static-html-lib) to convert Elm views into raw html
* [elm-webpack-loader](https://github.com/elm-community/elm-webpack-loader) load elm files and import them into javascript
* [elm-hot-loader](https://github.com/fluxxu/elm-hot-loader) hot reload all Elm files while dev

`src/client.js` contains all the js code required to load Elm, you can configure Elm ports here
`src/server.js` the server side, here call `elm-static-html-lib` with the respective module to render the view

---

If you want to activate the Elm debug mode or other tooling and debug utilites of Elm edit `razzle.config.js`:

```js
{
    loader: 'elm-webpack-loader',
    options: { //Edit here
        verbose: true,
        warn: true,
        pathToMake: require('elm/platform').executablePaths['elm-make'],
        forceWatch: true
    }
}
```

As 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.


================================================
FILE: examples/with-elm/elm-package.json
================================================
{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "src"
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0",
        "eeue56/elm-html-in-elm":"2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}


================================================
FILE: examples/with-elm/package.json
================================================
{
  "name": "razzle-examples-with-elm",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "postinstall": "elm-package install -y",
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "set NODE_ENV=production&&node build/server.js"
  },
  "dependencies": {
    "elm-static-html-lib": "^0.1.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "elm-hot-loader": "^0.5.4",
    "elm-webpack-loader": "4.5.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-elm/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-elm/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackOptions({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    webpackOptions.fileLoaderExclude.push(/\.(elm)$/);
    return webpackOptions;
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;


    config.module.noParse = [/.elm$/];
    config.resolve.extensions.push('.elm');

    if (opts.env.dev) {
      config.module.rules.push({
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          {
            loader: 'elm-webpack-loader',
            options: {
              verbose: true,
              warn: true,
              pathToMake: require('elm/platform').executablePaths['elm-make'],
              forceWatch: true,
            },
          },
        ],
      });
    } else {
      // Production
      config.module.rules.push({
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          {
            loader: 'elm-webpack-loader',
            options: {
              pathToMake: require('elm/platform').executablePaths['elm-make'],
            },
          },
        ],
      });
    }

    return config;
  },
};


================================================
FILE: examples/with-elm/src/App.elm
================================================
module App exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Json.Decode


type alias Model =
    {counter: Int}


init : ( Model, Cmd Msg )
init =
    ( Model 0, Cmd.none )

decodeModel : Json.Decode.Decoder Model
decodeModel =
    Json.Decode.map Model
        (Json.Decode.field "counter" Json.Decode.int)

-- UPDATE


type Msg
    = Inc


update : Msg -> Model -> ( Model, Cmd Msg )
update message model =
    case message of
        Inc ->
            {model | counter = model.counter + 1} ! []



-- VIEW


view : Model -> Html Msg
view model =
    div [ class "container" ]
        [ h1 []
            [ text "Elm SSR example"
            ]
        , p [] [ text "Click on the button below to increment the state." ]
        , div []
            [ button
                [ class "btn btn-primary"
                , onClick Inc
                ]
                [ text "+ 1" ]
            , text <| toString model
            ]
        , p [] [ text "A simple example of how to make Razzle and Elm work together!" ]
        ]


================================================
FILE: examples/with-elm/src/Main.elm
================================================
module Main exposing (main)

import Html
import App exposing (init, update, view)
 
main : Program Never App.Model App.Msg
main =
    Html.program
        { init = init
        , update = update
        , view = view
        , subscriptions = always Sub.none
        }


================================================
FILE: examples/with-elm/src/client.js
================================================
import Elm from './Main';

// We need embed the Elm app to the div, if we call fullscreen we will have duplicated html
Elm.Main.embed(document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-elm/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-elm/src/server.js
================================================
import elmStaticHtml from "elm-static-html-lib";
import express from 'express';
require('./Main');

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const model = { counter: 5 };
const options = { model : model, decoder: "App.decodeModel" };

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  return new Promise((resolve, reject) {
    elmStaticHtml(process.cwd(), "App.view", options)
    .then((markup) => {
      const html =
        // prettier-ignore
        `<!doctype html>
      <html lang="">
      <head>
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta charSet='utf-8' />
          <title>Welcome to Razzle</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          ${cssLinksFromAssets(assets, 'client')}
      </head>
      <body>
          <div id="root">${markup}</div>
          ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
      </body>
    </html>`;


      resolve({ html, status: 200 });
    }).catch((error) => {
      resolve({ html: `<h1>An error ocurred on server, please try later, or contact support</h1>`, status: 500 });
    });
  })
};


const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', async (req, res) => {
    const { html, status } = await renderApp(req, res);
    res.status(status).send(html);
  });

export default server;


================================================
FILE: examples/with-esbuild-loader/.eslintrc.js
================================================
module.exports =
{
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
};


================================================
FILE: examples/with-esbuild-loader/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-esbuild-loader/README.md
================================================
# Razzle Esbuild Loader Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-esbuild-loader with-esbuild-loader

cd with-esbuild-loader
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).
In `razzle.config.js`, we locate the part of the webpack configuration
that is running `babel-loader` and swap it out for `ts-loader`.
Additionally, we make sure Razzle knows how to resolve `.ts` and `.tsx` files.

Lastly, we also need to modify our Jest configuration to handle typescript files.
Thus 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`.

```json
// package.json

{
  ...
  "jest": {
    "transform": {
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
      "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
    },
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ]
  }
}
```

The `tslint.json` and `tsconfig.json` are taken from Microsoft's official
[TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter).

Note: You do not techincally _need_ to fully replace `babel-loader` with
`ts-loader` to use TypeScript. Both TS and Babel transpile ES6 code,
so when you run both webpack loaders you are making Razzle do twice the work. From our testing,
this can make HMR extremely slow on larger apps. Thus, this example overwrites
`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`:

```
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/razzle/config/jest/babelTransform.js",
```
This will continue to transform .js files through babel.


================================================
FILE: examples/with-esbuild-loader/package.json
================================================
{
  "name": "razzle-examples-with-typescript",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.0",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.22",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/webpack-env": "^1.14.0",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "esbuild-loader": "^2.11.1",
    "eslint": "^7.18.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "prettier": "^2.2.1",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-typescript": "4.2.15",
    "ts-jest": "^26.5.0",
    "typescript": "^4.1.3",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  },
  "jest": {
    "transform": {
      "\\.(ts|tsx)$": "ts-jest",
      "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
    },
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ]
  }
}


================================================
FILE: examples/with-esbuild-loader/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-esbuild-loader/razzle.config.js
================================================
'use strict';

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];

    // Safely locate Babel-Loader in Razzle's webpack internals
    const babelLoaderFinder = makeLoaderFinder('babel-loader');
    const babelLoader = config.module.rules.find(babelLoaderFinder);

    // Get the correct `include` option, since that hasn't changed.
    // This tells Razzle which directories to transform.
    const { include } = babelLoader;

    // Configure esbuild-loader
    const esbuildLoader = {
      include,
      test: /\.tsx?$/,
      use: [
        {
          loader: require.resolve('esbuild-loader'),
          options: {
            loader: 'tsx',
            target: opts.env.target === 'web' ? 'es6' : 'node12',
            tsconfigRaw: require('./tsconfig.json'),
          },
        },
      ],
    };

    // Remove babel
    config.module.rules = config.module.rules.filter(
      (rule) => !babelLoaderFinder(rule)
    );

    config.module.rules.push(esbuildLoader);

    // Do typechecking in a separate process,
    // We can run it only in client builds.
    if (opts.env.target === 'web') {
      config.plugins.push(
        new ForkTsCheckerWebpackPlugin({
          typescript: {
            build: true,
            configFile: './tsconfig.json',
          },
        })
      );
      if (opts.env.dev) {
        // As suggested by Microsoft's Outlook team, these optimizations
        // crank up Webpack x TypeScript perf.
        // @see https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15
        config.output.pathinfo = false;
        config.optimization = {
          removeAvailableModules: false,
          removeEmptyChunks: false,
          splitChunks: false,
        };
      }
    }

    return config;
  },
};


================================================
FILE: examples/with-esbuild-loader/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

================================================
FILE: examples/with-esbuild-loader/src/App.test.tsx
================================================
import React from 'react';
import { render } from 'react-dom';

import App from './App';

import { MemoryRouter } from 'react-router-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    render(
      <MemoryRouter>
        <App />
      </MemoryRouter>,
      div
    );
  });
});


================================================
FILE: examples/with-esbuild-loader/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';

import './App.css';

const App = () => (
  <Switch>
    <Route exact={true} path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-esbuild-loader/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  animation: Home-logo-spin infinite 20s linear;
  height: 80px;
}

.Home-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.Home-intro {
  font-size: large;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}

@keyframes Home-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

================================================
FILE: examples/with-esbuild-loader/src/Home.tsx
================================================
import React from 'react';
import logo from './react.svg';

import './Home.css';

class Home extends React.Component<{}, {}> {
  public render() {
    return (
      <div className="Home">
        <div className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <h2>Welcome to Razzle</h2>
        </div>
        <p className="Home-intro">
          To get started, edit <code>src/App.tsx</code> or{' '}
          <code>src/Home.tsx</code> and save to reload.
        </p>
        <ul className="Home-resources">
          <li>
            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
          </li>
          <li>
            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
          </li>
          <li>
            <a href="https://palmer.chat">Community Slack</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Home;


================================================
FILE: examples/with-esbuild-loader/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-esbuild-loader/src/index.ts
================================================
import express from 'express';

// this require is necessary for server HMR to recover from error
// tslint:disable-next-line:no-var-requires
let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, (err: Error) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-esbuild-loader/src/server.tsx
================================================
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

import App from './App';

let assets: any;

const syncLoadAssets = () => {
  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
};
syncLoadAssets();

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req: express.Request, res: express.Response) => {
  const context: any = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
    </head>
    <body>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    return { html };
  }
};

const server = express()
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
  .get('/*', (req: express.Request, res: express.Response) => {
    const { html = '', redirect = false } = renderApp(req, res);
    if (redirect) {
      res.redirect(redirect);
    } else {
      res.send(html);
    }
  });

export default server;


================================================
FILE: examples/with-esbuild-loader/tsconfig.json
================================================
{
  "compilerOptions": {
    "allowJs": true,
    "allowUnreachableCode": false,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["es6", "es2015", "es2017", "dom"],
    "module": "commonjs",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": false,
    "sourceMap": true,
    "strictNullChecks": true,
    "strict": false,
    "pretty": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "razzle.config.js"
  ],
  "types": ["typePatches", "node", "webpack-env"]
}


================================================
FILE: examples/with-esbuild-loader/typings/index.d.ts
================================================
declare module '*.svg' {
    const content: any;
    export default content;
}

================================================
FILE: examples/with-eslint/.eslintrc.json
================================================
{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "commonjs": true,
    "node": true,
    "es6": false
  },
  "parserOptions": {
    "ecmaVersion": 6
  },
  "rules": {
    "no-console": "off",
    "strict": ["error", "global"],
    "curly": "warn"
  }
}


================================================
FILE: examples/with-eslint/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-eslint/README.md
================================================
# Razzle Basic Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-eslint with-eslint

cd with-eslint
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/with-eslint/package.json
================================================
{
  "name": "razzle-examples-with-eslint",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.0.0",
    "@typescript-eslint/parser": "^4.14.1",
    "babel-eslint": "^10.1.0",
    "babel-preset-razzle": "4.2.15",
    "eslint": "^7.18.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^2.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-eslint": "4.2.15",
    "react-dev-utils": "^11.0.1",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-eslint/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-eslint/razzle.config.js
================================================
'use strict';

module.exports = {
  options: { verbose: true },
  plugins: ['eslint'],
};


================================================
FILE: examples/with-eslint/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-eslint/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-eslint/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-eslint/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-eslint/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-eslint/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-eslint/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-experimental-refresh/README.md
================================================
# Razzle Experimental React Refresh Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-experimental-refresh with-experimental-refresh

cd with-experimental-refresh
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.

This is an **experimental** demo of React Fast Refresh.
Please do not use these features in your application or project (yet).


================================================
FILE: examples/with-experimental-refresh/package.json
================================================
{
  "name": "razzle-examples-with-experimental-refresh",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start --verbose",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-experimental-refresh/razzle.config.js
================================================
module.exports = {
  options: {
    enableReactRefresh: true,
  },
}


================================================
FILE: examples/with-experimental-refresh/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-experimental-refresh/src/App.js
================================================
import * as React from 'react'
import { useCallback, useEffect, useState } from 'react'
import ClickCount from './components/ClickCount'
import './global.css'
import styles from './components/ClickCount.module.css'

function a() {
  console.log(
    // hello
    document.body()
  )
}

function foo() {
  a()
}

function App() {
  const [count, setCount] = useState(0)
  const increment = useCallback(() => {
    setCount(v => v + 1)
  }, [setCount])

  useEffect(() => {
    const r = setInterval(() => {
      increment()
    }, 250)
    return () => {
      clearInterval(r)
    }
  }, [increment])

  return (
    <main>
      <h1>Home</h1>
      <div>
        <p>Auto Incrementing Value</p>
        <p>Current value: {count}</p>
      </div>
      <hr />
      <div>
        <p>Component with State</p>
        <ClickCount />
      </div>
      <hr />
      <div>
        <button
          className={styles.btn}
          type="button"
          onClick={e => {
            setTimeout(() => document.parentNode(), 0)
            foo()
          }}
        >
          Throw an Error
        </button>
      </div>
    </main>
  )
}

export default App;


================================================
FILE: examples/with-experimental-refresh/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-experimental-refresh/src/client.js
================================================
import * as React from 'react'
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-experimental-refresh/src/components/ClickCount.js
================================================
import * as React from 'react'
import { useCallback, useState } from 'react'
import styles from './ClickCount.module.css'

export default function ClickCount() {
  const [count, setCount] = useState(0)
  const increment = useCallback(() => {
    setCount(v => v + 1)
  }, [setCount])

  return (
    <button className={styles.btn} type="button" onClick={increment}>
      Clicks: {count}
    </button>
  )
}


================================================
FILE: examples/with-experimental-refresh/src/components/ClickCount.module.css
================================================
button.btn {
  margin: 0;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
  padding: 0.5em;
  vertical-align: middle;
  white-space: normal;
  background: none;
  line-height: 1;
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.2s ease;
}

button.btn {
  padding: 0.65em 1em;
  background: #0076ff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}
button.btn:focus {
  outline: 0;
  border-color: #0076ff;
}
button.btn:hover {
  background: rgba(0, 118, 255, 0.8);
}
button.btn:focus {
  box-shadow: 0 0 0 2px rgba(0, 118, 255, 0.5);
}


================================================
FILE: examples/with-experimental-refresh/src/global.css
================================================
body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.65;
  word-break: break-word;
  font-kerning: auto;
  font-variant: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  hyphens: auto;
}

h2,
h3,
h4 {
  margin-top: 1.5em;
}

code,
pre {
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace, serif;
  font-size: 0.92em;
  color: #d400ff;
}

code:before,
code:after {
  content: '`';
}

hr {
  border: none;
  border-bottom: 1px solid #efefef;
  margin: 5em auto;
}


================================================
FILE: examples/with-experimental-refresh/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-experimental-refresh/src/server.js
================================================
import App from './App';
import * as React from 'react'
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-fastify/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-fastify/README.md
================================================
# Razzle Fastify Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-fastify with-fastify

cd with-fastify
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This is an example of how to use Razzle with [Fastify](https://www.fastify.io/) and includes [TypeScript](https://github.com/Microsoft/TypeScript).

It 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).

### TypeScript

Basic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.

Razzle knows how to resolve `.ts` and `.tsx` files out of the box.


================================================
FILE: examples/with-fastify/package.json
================================================
{
  "name": "razzle-examples-with-fastify",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "fastify": "^3.20.2",
    "fastify-static": "^4.2.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "@testing-library/dom": "^7.29.4",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/express": "^4.17.6",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-router-dom": "^5.1.4",
    "@types/webpack-env": "^1.15.2",
    "babel-preset-razzle": "4.2.15",
    "cross-env": "^7.0.3",
    "express": "^4.17.1",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "typescript": "^4.0.3",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-fastify/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-fastify/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


================================================
FILE: examples/with-fastify/src/App.test.tsx
================================================
import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  );
  const linkElement = getByText(/welcome to razzles/i);
  expect(linkElement).toBeInTheDocument();
});


================================================
FILE: examples/with-fastify/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import './App.css';
import Home from './Home';


const App = () => (
  <Switch>
    <Route exact={true} path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-fastify/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  animation: Home-logo-spin infinite 20s linear;
  height: 80px;
}

.Home-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.Home-intro {
  font-size: large;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}

@keyframes Home-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


================================================
FILE: examples/with-fastify/src/Home.tsx
================================================
import React from 'react';
import './Home.css';
import logo from './react.svg';


class Home extends React.Component<{}, {}> {
  public render() {
    return (
      <div className="Home">
        <div className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <h2>Welcome to Razzle</h2>
        </div>
        <p className="Home-intro">
          To get started, edit <code>src/App.tsx</code> or{' '}
          <code>src/Home.tsx</code> and save to reload.
        </p>
        <ul className="Home-resources">
          <li>
            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
          </li>
          <li>
            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
          </li>
          <li>
            <a href="https://palmer.chat">Community Slack</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Home;


================================================
FILE: examples/with-fastify/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';


hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-fastify/src/index.ts
================================================
import http from 'http';

/**
 * This implementation is similar to the `with-koa` example,
 * but Fastify does not have a `app#callback()` method.
 * Thus, this import implements a similar implementation.
 * See `./server.tsx` for more information.
 */
let currentHandler: http.RequestListener = require('./server').default;

const server = http.createServer(currentHandler);

const port = process.env.PORT || 3000;

server.listen(port, () => {
  console.log(`🚀 Server Started on Port ${port}`);
});

if (module.hot) {
  module.hot.accept('./server', async function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      const newHandler: http.RequestListener = require('./server').default;
      server.removeListener('request', currentHandler);
      server.on('request', newHandler);
      currentHandler = newHandler;
    } catch (error) {
      console.error('ERROR', error);
    }
    console.log('🚀 Server-side HMR Complete');
  });
  console.info('✅  Server-side HMR Enabled!');
}


================================================
FILE: examples/with-fastify/src/server.tsx
================================================
import fastify from "fastify";
import fastifyStatic from "fastify-static";
import type { IncomingMessage, ServerResponse } from "http";
import React from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router-dom";
import App from "./App";

let assetsImport: Record<string, any>;
import(process.env.RAZZLE_ASSETS_MANIFEST!).then((res) => {
  assetsImport = res.default;
});

const cssLinksFromAssets = (assets: Record<string, any>, entryPoint: string) =>
  (assets && assets[entryPoint]?.css?.map((asset: string) => `<link rel="stylesheet" href="${asset}">`).join("")) || "";

const jsScriptTagsFromAssets = (assets: Record<string, any>, entryPoint: string, extra = "") =>
  (assets && assets[entryPoint]?.js.map((asset: string) => `<script src="${asset}"${extra}></script>`).join("")) || "";

const app = fastify()
  .register(fastifyStatic, { root: process.env.RAZZLE_PUBLIC_DIR!, prefix: "/public" })
  .get("/*", async (req, res) => {
    const context: { url?: string } = {};
    const markup = renderToString(
      <StaticRouter context={context} location={req.url}>
        <App />
      </StaticRouter>,
    );

    if (context.url) {
      return res.redirect(context.url);
    }
    res
      .status(200)
      .type("text/html")
      .send(
        `
        <!doctype html>
        <html lang="en-GB">
          <head>
              <meta http-equiv="X-UA-Compatible" content="IE=edge" />
              <meta charset="utf-8" />
              <title>Welcome to Razzle</title>
              <meta name="viewport" content="width=device-width, initial-scale=1">
              ${cssLinksFromAssets(assetsImport, "client")}
          </head>
          <body>
              <div id="root">${markup}</div>
              ${jsScriptTagsFromAssets(assetsImport, "client", " defer crossorigin")}
          </body>
        </html>
`,
      );
  });

/**
 * This is a similar implementation to the one found in the Fastify docs,
 * which can be found [here]{@link https://www.fastify.io/docs/latest/Serverless/#should-you-use-fastify-in-a-serverless-platform#Vercel}.
 * The `app#ready()` is to indicate that all plugins have been loaded and the server is ready,
 * then the `app#server#emit()` method is called to handle the incoming request and Fastify handles it from there.
 */
export default async (req: IncomingMessage, res: ServerResponse): Promise<void> => {
  await app.ready();
  app.server.emit("request", req, res);
};


================================================
FILE: examples/with-fastify/src/setupTests.ts
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';


================================================
FILE: examples/with-fastify/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "typeRoots": ["node_modules/@types", "typings"]
  },
  "include": ["src", "typings/*"]
}


================================================
FILE: examples/with-fastify/typings/svg.d.ts
================================================
// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules

declare module '*.svg' {
  const src: string;
  export default src;
}


================================================
FILE: examples/with-firebase-functions/.firebaserc
================================================
{
  "projects": {
    "default": "<firebase-project-id>"
  }
}


================================================
FILE: examples/with-firebase-functions/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-firebase-functions/README.md
================================================
# Razzle with Cloud Functions for Firebase example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-firebase-functions with-firebase-functions

cd with-firebase-functions
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


Build client and server

```bash
yarn build
```

Deploy to firebase

```bash
yarn deploy
```

Access your app at `<firebase-project-id>.firebaseapp.com`

## Idea behind the example
This is a basic example of how to use razzle with firebase functions and firebase hosting.


================================================
FILE: examples/with-firebase-functions/firebase.json
================================================
{
  "hosting": {
    "public": "build/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**/**",
        "function": "app"
      }
    ]
  },
  "functions": {
    "source": "."
  }
}


================================================
FILE: examples/with-firebase-functions/index.js
================================================
'use strict'
const functions = require('firebase-functions');
const app = require('./server/build/server.bundle.js').default;

exports.app = functions.https.onRequest(app)


================================================
FILE: examples/with-firebase-functions/package.json
================================================
{
  "name": "razzle-examples-with-firebase-functions",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "predeploy": "npm run build",
    "deploy": "firebase deploy"
  },
  "dependencies": {
    "express": "^4.17.1",
    "firebase-admin": "^8.11.0",
    "firebase-functions": "^3.6.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-firebase-functions/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-firebase-functions/razzle.config.js
================================================
'use strict';
const path = require('path');
module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    if (opts.env.target === 'node' && !opts.env.dev) {
      config.entry = path.resolve(__dirname, './src/server.js');
      config.output.filename = 'server.bundle.js';
      config.output.path = path.resolve(__dirname, './server/build');
      config.output.libraryTarget = 'commonjs2';
    }

    return config;
  },
}


================================================
FILE: examples/with-firebase-functions/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-firebase-functions/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-firebase-functions/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-firebase-functions/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-firebase-functions/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-firebase-functions/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-heroku/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-heroku/Procfile
================================================
web: yarn start:prod


================================================
FILE: examples/with-heroku/README.md
================================================
# Razzle Heroku Deployment example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-heroku with-heroku

cd with-heroku
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

### Deploy to Heroku:

[Heroku](https://www.heroku.com/) manages app deployments with [Git](https://devcenter.heroku.com/articles/git) so:

#### Setup Git:

```bash
git init
git add
git commit -m "Heroku deployment, first commit"
```

#### Setup Heroku:

* Create a Heroku [account](https://signup.heroku.com/)
* Install Heroku [CLI](https://devcenter.heroku.com/articles/heroku-cli) and [authenticate](https://devcenter.heroku.com/articles/authentication)
* Create Heroku app: `heroku create`
  * or `heroku create <appname>` if you want to specify an app name (checks for unique app name)
  * or `heroku git:remote -a <appname>` if you already created an App in the [dashboard](https://dashboard.heroku.com/apps)
* Verify with `git remote -v`:

```
heroku	https://git.heroku.com/<appname>.git (fetch)
heroku	https://git.heroku.com/<appname>.git (push)
```

#### Deployment

* `yarn deploy` or `git push heroku master`
  * or from another branch, other than **master**: `git push heroku <feature-branch>:master`
* Console should complete with: **_https://appname.herokuapp.com/ deployed to Heroku_**
* Verify app by opening **_https://appname.herokuapp.com/_**

#### 👉 Please note

* 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.

## Idea behind the example

This 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).


================================================
FILE: examples/with-heroku/package.json
================================================
{
  "name": "razzle-examples-with-heroku",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build --noninteractive",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js",
    "deploy": "git push heroku master"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-heroku/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-heroku/razzle.config.js
================================================
'use strict';

module.exports = {
  options: {
    forceRuntimeEnvVars: ['HOST', 'PORT']
  }
};


================================================
FILE: examples/with-heroku/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-heroku/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-heroku/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-heroku/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-heroku/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-heroku/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-hyperapp/.babelrc
================================================
{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
}

================================================
FILE: examples/with-hyperapp/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-hyperapp/README.md
================================================
# Razzle Hyperapp Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-hyperapp with-hyperapp

cd with-hyperapp
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This shows how to setup [Hyperapp](https://github.com/hyperapp/hyperapp/) with Razzle.

Here is a list of changes from Razzle's base template:

1.  Install `babel-plugin-transform-react-jsx` as a devDependency.
2.  Extend Razzle's babel config with a custom `.babelrc`
3.  Install `hyperapp` and `"@hyperapp/render`
4.  Remove `react`, `react-dom`, `react-router-dom` entirely
5.  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.
6.  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.


================================================
FILE: examples/with-hyperapp/package.json
================================================
{
  "name": "razzle-examples-with-hyperapp",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "@hyperapp/render": "^2.1.0",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "hyperapp": "^1.2.5"
  },
  "devDependencies": {
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-hyperapp/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/


================================================
FILE: examples/with-hyperapp/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}


================================================
FILE: examples/with-hyperapp/src/App.js
================================================
/** @jsx h */
import { h } from 'hyperapp';

import HyperappLogo from './hyperapp.svg';
import './App.css';

const App = ({ state, actions }) => (
  <div class="App">
    <img src={HyperappLogo} alt="Hyperapp Logo" />
    <p>Hello Hyperapp!</p>

    <h3>Count is {state.count}</h3>

    <button onclick={() => actions.up(1)}>up</button>
    <button onclick={() => actions.down(1)}>down</button>
  </div>
);
export default App;


================================================
FILE: examples/with-hyperapp/src/App.test.js
================================================
/** @jsx h */
import { h } from 'hyperapp';
import { renderToString } from '@hyperapp/render';
import App from './App';

describe('<App />', () => {
  test('renders without exploding', () => {
    const body = document.createElement('body');
    const markup = renderToString(<App state={{}} actions={{}} />);

    expect(markup).toContain('App');
  });
});


================================================
FILE: examples/with-hyperapp/src/client.js
================================================
/** @jsx h */
import { app } from 'hyperapp';

import { state, actions, view } from './main';

app(state, actions, view, document.body);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-hyperapp/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-hyperapp/src/main.js
================================================
/** @jsx h */
import { h } from 'hyperapp';
import App from './App';

/* MODEL */
const state = { count: 0 };

/* UPDATE */
const actions = {
  down: value => state => ({ count: state.count - value }),
  up: value => state => ({ count: state.count + value }),
};

/* VIEW */
const view = (state, actions) => <App state={state} actions={actions} />;

export { state, actions, view };


================================================
FILE: examples/with-hyperapp/src/main.test.js
================================================
import { app } from 'hyperapp';
import { withRender } from '@hyperapp/render';
import { state, actions, view } from './main';

describe('main app', () => {
  test('renders without exploding', () => {
    const body = document.createElement('body');
    const markup = withRender(app)(state, actions, view, body).toString();

    expect(markup).toContain('Hello Hyperapp');
  });
});


================================================
FILE: examples/with-hyperapp/src/server.js
================================================
/** @jsx h */
import express from 'express';
import { app } from 'hyperapp';

import { withRender } from '@hyperapp/render';

import { state, actions, view } from './main';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = withRender(app)(state, actions, view).toString();

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-inferno/.babelrc
================================================
{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    "inferno"
  ]
}

================================================
FILE: examples/with-inferno/.eslintrc
================================================
{
  "extends": ["plugin:inferno/recommended"],
  "plugins": ["inferno"],
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": 0
  }
}


================================================
FILE: examples/with-inferno/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-inferno/README.md
================================================
# Razzle Inferno Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-inferno with-inferno

cd with-inferno
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This shows how to use [Inferno](https://github.com/infernojs) instead of React in a Razzle project.

Here is a list of changes from Razzle's base template:
  1. Install `babel-plugin-inferno` as a devDependency.
  2. Extend Razzle's babel config with a custom `.babelrc`
  3. Install `inferno`, `inferno-server`, `inferno-devtools`, `inferno-component` as dependencies
  4. Remove `react`, `react-dom`, `react-router-dom` entirely
  5. Update `server/server.js` to use `inferno-server`'s `renderToString` function.
  6. Update `client.js` to configure Inferno for HMR.


================================================
FILE: examples/with-inferno/package.json
================================================
{
  "name": "razzle-examples-with-inferno",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "inferno": "7.4.2",
    "inferno-component": "7.4.2",
    "inferno-hydrate": "^7.4.2",
    "inferno-server": "7.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "eslint": "^7.18.0",
    "eslint-plugin-inferno": "^7.20.1",
    "babel-plugin-inferno": "6.1.0",
    "inferno-devtools": "7.4.2",
    "html-webpack-plugin": "^4.5.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-inferno/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/


================================================
FILE: examples/with-inferno/src/App.js
================================================
import Inferno from "inferno";
import Component from "inferno-component";
import InfernoLogo from "./inferno.svg";

class App extends Component {
  render() {
    return (
      <div class="inferno">
        <img src={InfernoLogo} alt="Inferno Logo" />
        Hello Inferno!
      </div>
    );
  }
}

export default App;


================================================
FILE: examples/with-inferno/src/client.js
================================================
import { hydrate } from "inferno-hydrate";
import App from "./App";

if (module.hot) {
  require("inferno-devtools");
}

hydrate(<App />, document.getElementById("root"));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-inferno/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-inferno/src/server.js
================================================
import App from './App';
import Inferno from 'inferno';
import { renderToString } from 'inferno-server';
import express from 'express';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-jest-snapshots/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-jest-snapshots/README.md
================================================
# Using Razzle and Jest Snapshots

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-jest-snapshots with-jest-snapshots

cd with-jest-snapshots
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This 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.

> Snapshot tests are a very useful tool whenever you want to make sure your UI does not change unexpectedly.
> 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.


```js
// src/__tests__/Home.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import Home from '../Home';

it('renders Home correctly', () => {
  const tree = renderer.create(<Home />).toJSON();
  expect(tree).toMatchSnapshot();
});
```

When you run `yarn test`, a snapshot file is generated that looks like:

```
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders Home correctly 1`] = `
<div>
  Hello World!
</div>
`;
```

Refer to the [Jest documentation](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) for more information.


================================================
FILE: examples/with-jest-snapshots/package.json
================================================
{
  "name": "razzle-examples-with-jest",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "test": "razzle test --env=jsdom",
    "build": "razzle build",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "react-test-renderer": "^16.13.1",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-jest-snapshots/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/


================================================
FILE: examples/with-jest-snapshots/src/App.js
================================================
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";

const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-jest-snapshots/src/Home.js
================================================
import React from 'react';

const Home = () => {
  return (
    <div>
      Hello World!
    </div>
  );
};

export default Home;


================================================
FILE: examples/with-jest-snapshots/src/__tests__/App.test.js
================================================
import React from "react";
import renderer from "react-test-renderer";
import { MemoryRouter } from "react-router-dom";
import App from "../App";

it("renders App correctly", () => {
  const tree = renderer
    .create(
      <MemoryRouter>
        <App />
      </MemoryRouter>
    )
    .toJSON();
  expect(tree).toMatchSnapshot();
});

test("hello", async () => {
  const yo = await Promise.resolve("hello");
  expect(yo).toEqual("hello");
});


================================================
FILE: examples/with-jest-snapshots/src/__tests__/Home.test.js
================================================
import React from 'react';
import renderer from 'react-test-renderer';
import Home from '../Home';

it('renders Home correctly', () => {
  const tree = renderer.create(<Home />).toJSON();
  expect(tree).toMatchSnapshot();
});


================================================
FILE: examples/with-jest-snapshots/src/__tests__/__snapshots__/App.test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders App correctly 1`] = `
<div>
  Hello World!
</div>
`;


================================================
FILE: examples/with-jest-snapshots/src/__tests__/__snapshots__/Home.test.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders Home correctly 1`] = `
<div>
  Hello World!
</div>
`;


================================================
FILE: examples/with-jest-snapshots/src/client.js
================================================
import React from "react";
import { hydrate } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-jest-snapshots/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-jest-snapshots/src/server.js
================================================
import { StaticRouter } from 'react-router-dom';

import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );
  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-jsconfig-paths/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-jsconfig-paths/README.md
================================================
# Razzle With Jsconfig Paths Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-jsconfig-paths with-jsconfig-paths

cd with-jsconfig-paths
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is a basic, bare-bones example of how to use razzle with jsconfig paths, this also works with tsconfig.
It satisfies the entry points `src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/with-jsconfig-paths/here-is-extra/extra.js
================================================
import React from 'react';
const Extra = () => <div>Something Extra.</div>;

export default Extra;


================================================
FILE: examples/with-jsconfig-paths/jsconfig.json
================================================
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "extra/*": ["../here-is-extra/*"]
    }
  }
}


================================================
FILE: examples/with-jsconfig-paths/package.json
================================================
{
  "name": "razzle-with-jsconfig-paths",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-jsconfig-paths/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-jsconfig-paths/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-jsconfig-paths/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-jsconfig-paths/src/App.js
================================================
import './App.css';

import React from 'react';
import Extra from 'extra/extra';

const App = () => <div>Welcome to Razzle.<Extra /></div>;

export default App;


================================================
FILE: examples/with-jsconfig-paths/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-jsconfig-paths/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-jsconfig-paths/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-jsconfig-paths/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-jsxstyle/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-jsxstyle/README.md
================================================
# Razzle JSXStyle Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-jsxstyle with-jsxstyle

cd with-jsxstyle
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is demo shows how to use [JSXXtyle](https://github.com/smyte/jsxstyle) and the new server rendering API
with Razzle. On each request, JSXStyle will extract out styles into a variable called `styles` will all the critical CSS in the render
tree that we can then just drop into our `<head>`

```js
import { injectAddRule, resetCache } from 'jsxstyle/lib/styleCache';

// ..

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    resetCache();
    let styles = '';
    const context = {};
    injectAddRule(rule => (styles += rule + '\n'));

    const markup = renderToString(
      <StaticRouter context={context} location={req.url}>
        <App />
      </StaticRouter>
    );

    if (context.url) {
      res.redirect(context.url);
    } else {
      res.send(
        `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">${styles || ''}</style>
        ${assets.client.css
          ? `<link rel="stylesheet" href="${assets.client.css}">`
          : ''}
        <script src="${assets.client.js}" defer></script>
    </head>
    <body>
        <div id="root">${markup}</div>
    </body>
</html>`
      );
    }
  });
```


================================================
FILE: examples/with-jsxstyle/package.json
================================================
{
  "name": "razzle-examples-with-jsxstyle",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "jsxstyle": "^2.3.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-jsxstyle/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-jsxstyle/src/About.js
================================================
import { Block, InlineBlock } from 'jsxstyle';
import React, { Component } from 'react';

class About extends Component {
  render() {
    return (
      <Block textAlign="center">
        <Block margin="4rem auto">
          <Block>
            To get started, edit <code>src/App.js</code> or{' '}
            <code>src/About.js</code> and save to reload.
          </Block>

          <Block component="ul" margin="2rem auto">
            <InlineBlock component="li" marginRight="1rem">
              <a href="https://github.com/jaredpalmer/razzle">Docs</a>
            </InlineBlock>
            <InlineBlock component="li" marginRight="1rem">
              <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
            </InlineBlock>
            <InlineBlock component="li">
              <a href="https://palmer.chat">Community Slack</a>
            </InlineBlock>
          </Block>
        </Block>
      </Block>
    );
  }
}

export default About;


================================================
FILE: examples/with-jsxstyle/src/App.css
================================================
* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

div {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-width: 0;
  align-items: stretch;
}


================================================
FILE: examples/with-jsxstyle/src/App.js
================================================
import "./App.css";

import { Block, InlineBlock } from "jsxstyle";

import About from "./About";
import Home from "./Home";
import { Link, Route, Switch } from "react-router-dom";
import React from "react";

const App = () => (
  <Block>
    <Block component="ul" margin="2rem auto">
      <InlineBlock component={Link} props={{ to: "/about" }}>
        About
      </InlineBlock>
      <InlineBlock component={Link} props={{ to: "/" }}>
        Home
      </InlineBlock>
    </Block>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />
    </Switch>
  </Block>
);

export default App;


================================================
FILE: examples/with-jsxstyle/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import { MemoryRouter } from 'react-router-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(
      <MemoryRouter>
        <App />
      </MemoryRouter>,
      div
    );
  });
});


================================================
FILE: examples/with-jsxstyle/src/Home.js
================================================
import { Block, InlineBlock } from 'jsxstyle';
import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      <Block textAlign="center">
        <Block backgroundColor="#222">
          <Block fontSize="3rem" color="#fff" padding="6rem 0" fontWeight="800">
            Razzle x JSXStyle
          </Block>
        </Block>
        <Block margin="4rem auto">
          <Block>
            To get started, edit <code>src/App.js</code> or{' '}
            <code>src/Home.js</code> and save to reload.
          </Block>

          <Block component="ul" margin="2rem auto">
            <InlineBlock component="li" marginRight="1rem">
              <a href="https://github.com/jaredpalmer/razzle">Docs</a>
            </InlineBlock>
            <InlineBlock component="li" marginRight="1rem">
              <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
            </InlineBlock>
            <InlineBlock component="li">
              <a href="https://palmer.chat">Community Slack</a>
            </InlineBlock>
          </Block>
        </Block>
      </Block>
    );
  }
}

export default Home;


================================================
FILE: examples/with-jsxstyle/src/client.js
================================================
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import React from "react";
import { hydrate } from "react-dom";

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-jsxstyle/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-jsxstyle/src/server.js
================================================
import { cache } from 'jsxstyle';
import App from './App';
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  cache.reset();
  let styles = '';
  cache.injectOptions({
    onInsertRule(css) {
      styles += css;
    },
  });

  const context = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
        ${styles ? `<style type="text/css">${styles}</style>` : ''}
    </head>
    <body>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    return { html };
  }
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html = '', redirect = false } = renderApp(req, res);
    if (redirect) {
      res.redirect(redirect);
    } else {
      res.send(html);
    }
  });

export default server;


================================================
FILE: examples/with-koa/README.md
================================================
# Using Razzle and Koa

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-koa with-koa

cd with-koa
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This 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.

Being 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.

- `koa-static` ([docs][koa-static])

Static file serving middleware. Used to serve resources under `process.env.RAZZLE_PUBLIC_DIR`.

- `koa-router` ([docs][koa-router])

Express-styling router middleware for [Koa][koa]. Will direct `HTTP GET` requests to your React client.

- `koa-helmet` ([docs][koa-helmet])

Provides 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].

---

For additional information, refer to [Koa offical documentation][koa-docs].

[razzle-repo]: https://github.com/jaredpalmer/razzle.git
[koa]: http://koajs.com
[express]: https://expressjs.com/
[koa-static]: https://github.com/koajs/static
[koa-router]: https://github.com/alexmingoia/koa-router
[koa-helmet]: https://github.com/venables/koa-helmet
[hide-powered-by]: https://helmetjs.github.io/docs/hide-powered-by/
[koa-docs]: https://github.com/koajs/koa/tree/master/docs


================================================
FILE: examples/with-koa/package.json
================================================
{
  "name": "razzle-examples-with-koa",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "test": "razzle test --env=jsdom",
    "build": "razzle build",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "koa": "^2.13.1",
    "koa-helmet": "^6.1.0",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-koa/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-koa/src/App.css
================================================
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font: 17px/1.5 "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  background: white;
  color: #33333d;
  overflow-y: scroll;
  overflow-x: hidden;
}

a {
  color: #33a0c0;
}

================================================
FILE: examples/with-koa/src/App.js
================================================
import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import "./App.css";

const App = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-koa/src/App.test.js
================================================
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";
import { MemoryRouter } from "react-router-dom";

describe("<App />", () => {
  test("renders without exploding", () => {
    const div = document.createElement("div");
    ReactDOM.render(
      <MemoryRouter>
        <App />
      </MemoryRouter>,
      div
    );
  });
});


================================================
FILE: examples/with-koa/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  height: 80px;
}

.Home-header {
  height: 150px;
  padding: 20px;
}

.Home-header h2 {
  font-size: 1.2em;
}

.Home-intro {
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 25px;
  overflow-x: auto;
  font-size: .9em;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}



================================================
FILE: examples/with-koa/src/Home.js
================================================
import React from 'react';
import logo from './koajs-logo.png';
import './Home.css';

class Home extends React.Component {
  render() {
    return (
      <div className="Home">
        <div className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <h2>Welcome to Razzle + Koa</h2>
        </div>
        <pre className="Home-intro">
          To get started, edit <b>src/App.js</b> or{' '}
          <b>src/Home.js</b> and save to reload.
        </pre>
        <ul className="Home-resources">
          <li>
            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
          </li>
          <li>
            <a href="http://koajs.com">Koa official site</a>
          </li>
          <li>
            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
          </li>
          <li>
            <a href="https://palmer.chat">Community Slack</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Home;


================================================
FILE: examples/with-koa/src/client.js
================================================
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import React from "react";
import { hydrate } from "react-dom";

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-koa/src/index.js
================================================
import http from 'http';

let app = require('./server').default;

// Use `app#callback()` method here instead of directly
// passing `app` as an argument to `createServer` (or use `app#listen()` instead)
// @see https://github.com/koajs/koa/blob/master/docs/api/index.md#appcallback
let currentHandler = app.callback();
const server = http.createServer(currentHandler);

server.listen(process.env.PORT || 3000, error => {
  if (error) {
    console.log(error);
  }

  console.log('🚀 started');
});

if (module.hot) {
  console.log('✅  Server-side HMR Enabled!');

  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');

    try {
      const newHandler = require('./server').default.callback();
      server.removeListener('request', currentHandler);
      server.on('request', newHandler);
      currentHandler = newHandler;
    } catch (error) {
      console.error(error);
    }
  });
}


================================================
FILE: examples/with-koa/src/server.js
================================================
import App from './App';
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import Koa from 'koa';
import serve from 'koa-static';
import helmet from 'koa-helmet';
import Router from 'koa-router';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (ctx) => {

  const context = {};
  const markup = renderToString(
    <StaticRouter context={context} location={ctx.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

    return { html };
  }

};

// Initialize `koa-router` and setup a route listening on `GET /*`
// Logic has been splitted into two chained middleware functions
// @see https://github.com/alexmingoia/koa-router#multiple-middleware
const router = new Router();
router.get(
  '(.*)',
  (ctx, next) => {
    const { html = '', redirect = false } = renderApp(ctx);
    ctx.state.markup = html;
    return redirect ? ctx.redirect(redirect) : next();
  },
  ctx => {
    ctx.status = 200;
    ctx.body = ctx.state.markup;
  }
);

// Intialize and configure Koa application
const server = new Koa();
server
  // `koa-helmet` provides security headers to help prevent common, well known attacks
  // @see https://helmetjs.github.io/
  .use(helmet())
  // Serve static files located under `process.env.RAZZLE_PUBLIC_DIR`
  .use(serve(process.env.RAZZLE_PUBLIC_DIR))
  .use(router.routes())
  .use(router.allowedMethods());

export default server;


================================================
FILE: examples/with-less/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-less/README.md
================================================
# Razzle With LESS Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-less with-less

cd with-less
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use less as styling language
You can import anything from node_modules or other less files, like Ant Design, etc.
`src/index.js` for the server, `src/client.js` for the browser, and `src/App.less` for LESS style.


================================================
FILE: examples/with-less/package.json
================================================
{
  "name": "razzle-examples-with-less",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "resolutions": {
    "postcss": "8.2.4"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "less": "^4.1.0",
    "mini-css-extract-plugin": "^0.9.0",
    "postcss": "^8.2.4",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-less": "4.2.15",
    "style-loader": "^2.0.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-less/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-less/razzle.config.js
================================================
'use strict';

module.exports = {
  plugins: ['less'],
};


================================================
FILE: examples/with-less/src/App.js
================================================
import './App.less';

import React from 'react';

const App = () => (
  <div>
    <div>Welcome to Razzle.</div>
    <div className="info">Hot reload enabled!!</div>
  </div>
);

export default App;


================================================
FILE: examples/with-less/src/App.less
================================================
@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans');
@import './other';
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}


================================================
FILE: examples/with-less/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-less/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-less/src/index.js
================================================
import express from 'express';
import app from './server';

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-less/src/other.less
================================================
@info-color: darkmagenta;

.info {
  color: @info-color;
  font-size: 14pt;
}


================================================
FILE: examples/with-less/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-loadable-components/.babelrc
================================================
{
  "presets": ["razzle/babel"],
  "plugins": ["@loadable/babel-plugin"]
}


================================================
FILE: examples/with-loadable-components/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-loadable-components/README.md
================================================
# Razzle loadable-components Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-loadable-components with-loadable-components

cd with-loadable-components
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This sample has the full SSR setup as described in the [loadable-components docs](https://github.com/smooth-code/loadable-components#server-side-rendering).
It demonstrates simple dynamic imports using [loadable-components](https://github.com/smooth-code/loadable-components) on top of SSR with razzle.


================================================
FILE: examples/with-loadable-components/package.json
================================================
{
  "name": "razzle-examples-with-loadable-components",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "export": "razzle export",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "@loadable/component": "^5.15.0",
    "@loadable/server": "^5.15.0",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@loadable/babel-plugin": "^5.13.2",
    "@loadable/webpack-plugin": "^5.15.0",
    "babel-preset-razzle": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-loadable-components/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-loadable-components/razzle.config.js
================================================
const LoadableWebpackPlugin = require("@loadable/webpack-plugin");
const path = require("path");

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    // add loadable webpack plugin only
    // when we are building the client bundle
    if (opts.env.target === "web") {
      const filename = path.resolve(__dirname, "build");

      // saving stats file to build folder
      // without this, stats files will go into
      // build/public folder
      config.plugins.push(
        new LoadableWebpackPlugin({
          outputAsset: false,
          writeToDisk: { filename },
        })
      );
    }
    return config;
  },
};


================================================
FILE: examples/with-loadable-components/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-loadable-components/src/App.js
================================================
import "./App.css";
import React from "react";
import loadable from "@loadable/component";

const Header = loadable(() => import("./Header"));
const Body = loadable(() => import("./Body"));
const Footer = loadable(() => import("./Footer"));

const App = () => (
  <div>
    <h3>Welcome to the Razzle</h3>
    <Header />
    <Body />
    <Footer />
  </div>
);

export default App;


================================================
FILE: examples/with-loadable-components/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-loadable-components/src/Body.js
================================================
import React from "react";
import loadable from "@loadable/component";

const BodyPart = loadable(() => import("./BodyPart"));

const Body = () => (
  <div>
    This is my Body <BodyPart />
  </div>
);

export default Body;


================================================
FILE: examples/with-loadable-components/src/BodyPart.js
================================================
import React from 'react';

const BodyPart = () => <span>This is an inner BodyPart</span>;

export default BodyPart;


================================================
FILE: examples/with-loadable-components/src/Footer.js
================================================
import React from 'react';

const Footer = () => <div>This is my Footer</div>;

export default Footer;


================================================
FILE: examples/with-loadable-components/src/Header.js
================================================
import React from 'react';

const Header = () => <div>This is my Header</div>;

export default Header;


================================================
FILE: examples/with-loadable-components/src/client.js
================================================
import React from "react";
import { hydrate } from "react-dom";
import { loadableReady } from "@loadable/component";
import App from "./App";

// Load all components needed before rendering
loadableReady().then(() => {
  hydrate(<App />, document.getElementById("root"));
});

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-loadable-components/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-loadable-components/src/server.js
================================================
import App from "./App";
import React from "react";
import express from "express";
import { renderToString } from "react-dom/server";
import { ChunkExtractor, ChunkExtractorManager } from "@loadable/server";
import path from "path";

const server = express();

export const renderApp = async (req) => {
  // We create an extractor from the statsFile
  const extractor = new ChunkExtractor({
    statsFile: path.resolve("build/loadable-stats.json"),
    // razzle client bundle entrypoint is client.js
    entrypoints: ["client"],
  });

  const markup = renderToString(
    <ChunkExtractorManager extractor={extractor}>
      <App />
    </ChunkExtractorManager>
  );

  // collect script tags
  const scriptTags = extractor.getScriptTags();

  // collect "preload/prefetch" links
  const linkTags = extractor.getLinkTags();

  // collect style tags
  const styleTags = extractor.getStyleTags();

  const html =
    // prettier-ignore
    `<!doctype html>
<html lang="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charSet='utf-8' />
    <title>Welcome to Razzle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ${linkTags}
    ${styleTags}
</head>
<body>
    <div id="root">${markup}</div>
    ${scriptTags}
</body>
</html>`;

  return { html };
}

server
  .disable("x-powered-by")
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get("/*", async (req, res, next) => {
    try {
      const { html } = await renderApp(req);
      res.send(html);
    } catch (error) {
      next(error);
    }
  });

export default server;


================================================
FILE: examples/with-loadable-components/src/static_export.js
================================================
import { renderApp } from './server';

export const render = async (req, res) => {
  const { html } = await renderApp(req);

  res.json({ html });
};

export const routes = () => {
  return ['/'];
};


================================================
FILE: examples/with-material-ui/README.md
================================================
# Razzle and Material UI Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-material-ui with-material-ui

cd with-material-ui
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is a basic example of how to use Material UI with razzle.


================================================
FILE: examples/with-material-ui/package.json
================================================
{
  "name": "razzle-examples-with-material-ui",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "@material-ui/core": "^4.9.11",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@material-ui/styles": "^4.11.3",
    "babel-preset-razzle": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "prop-types": "^15.7.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-material-ui/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-material-ui/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-material-ui/src/App.js
================================================
import "./App.css";
import React from "react";
import PropTypes from "prop-types";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: theme.mixins.gutters({
    paddingTop: 16,
    paddingBottom: 16,
    margin: theme.spacing(3),
  }),
}));

const App = () => {
  const classes = useStyles();
  return (
    <Paper className={classes.root} elevation={4}>
      <Typography type="headline" component="h3">
        This is a sheet of paper.
      </Typography>
      <Typography type="body1" component="p">
        Paper can be used to build surface or other elements for your
        application.
      </Typography>
    </Paper>
  );
};

export default App;


================================================
FILE: examples/with-material-ui/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-material-ui/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import theme from './theme';
import { ThemeProvider } from '@material-ui/styles';
import App from './App';

hydrate(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById('root'),
  () => {
    // [ReHydratation](https://github.com/cssinjs/jss/blob/master/docs/ssr.md)
    const jssStyles = document.getElementById('jss-ssr');
    if (jssStyles && jssStyles.parentNode)
      jssStyles.parentNode.removeChild(jssStyles);
  }
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-material-ui/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-material-ui/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import theme from './theme';
import { ServerStyleSheets, ThemeProvider } from '@material-ui/styles';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {

  const sheets = new ServerStyleSheets();
  const markup = renderToString(
    sheets.collect(
      <ThemeProvider theme={theme}>
        <App />
      </ThemeProvider>
    )
  );

  const css = sheets.toString();

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500">
      ${cssLinksFromAssets(assets, 'client')}
      ${css ? `<style id='jss-ssr'>${css}</style>` : ''}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-material-ui/src/theme.js
================================================
import { createMuiTheme } from '@material-ui/core/styles';
import { indigo, orange } from '@material-ui/core/colors';

// Configure Material UI theme
const theme = createMuiTheme({
  palette: {
    primary: indigo,
    accent: orange,
    type: 'light',
  },
});

export default theme;


================================================
FILE: examples/with-mdx/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-mdx/README.md
================================================
# MDX + Razzle

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-mdx with-mdx

cd with-mdx
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This 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.

[See documentation](https://mdxjs.com/getting-started/razzle)


================================================
FILE: examples/with-mdx/package.json
================================================
{
  "name": "razzle-examples-with-mdx",
  "version": "4.2.15",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "remark-emoji": "^2.1.0"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-mdx": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-mdx/razzle.config.js
================================================
'use strict';

const emoji = require('remark-emoji');

module.exports = {
  plugins: [
    {
      name: 'mdx',
      options: {
        mdPlugins: [emoji],
      },
    },
  ],
};


================================================
FILE: examples/with-mdx/src/App.js
================================================
import React from 'react';
import Doc from './example.md';

export default () => <Doc />;


================================================
FILE: examples/with-mdx/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-mdx/src/example.md
================================================
An h1 header
============

Paragraphs are separated by a blank line.

2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
look like:

  * this one
  * that one
  * the other one

Note that --- not considering the asterisk --- the actual text
content starts at 4-columns in.

> Block quotes are
> written like so.
>
> They can span multiple paragraphs,
> if you like.

Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., "it's all
in chapters 12--14"). Three dots ... will be converted to an ellipsis.
Unicode is supported. ☺



An h2 header
------------

Here's a numbered list:

 1. first item
 2. second item
 3. third item

Note again how the actual text starts at 4 columns in (4 characters
from the left side). Here's a code sample:

    # Let me re-iterate ...
    for i in 1 .. 10 { do-something(i) }

As you probably guessed, indented 4 spaces. By the way, instead of
indenting the block, you can use delimited blocks, if you like:

~~~
define foobar() {
    print "Welcome to flavor country!";
}
~~~

(which makes copying & pasting easier). You can optionally mark the
delimited block for Pandoc to syntax highlight it:

~~~python
import time
# Quick, count to ten!
for i in range(10):
    # (but not *too* quick)
    time.sleep(0.5)
    print(i)
~~~



### An h3 header ###

Now a nested list:

 1. First, get these ingredients:

      * carrots
      * celery
      * lentils

 2. Boil some water.

 3. Dump everything in the pot and follow
    this algorithm:

        find wooden spoon
        uncover pot
        stir
        cover pot
        balance wooden spoon precariously on pot handle
        wait 10 minutes
        goto first step (or shut off burner when done)

    Do not bump wooden spoon or it will fall.

Notice again how text always lines up on 4-space indents (including
that last line which continues item 3 above).

Here's a link to [a website](http://foo.bar), to a [local
doc](local-doc.html), and to a [section heading in the current
doc](#an-h2-header). Here's a footnote [^1].

[^1]: Some footnote text.

Tables can look like this:

Name           Size  Material      Color
------------- -----  ------------  ------------
All Business      9  leather       brown
Roundabout       10  hemp canvas   natural
Cinderella       11  glass         transparent

Table: Shoes sizes, materials, and colors.

(The above is the caption for the table.) Pandoc also supports
multi-line tables:

--------  -----------------------
Keyword   Text
--------  -----------------------
red       Sunsets, apples, and
          other red or reddish
          things.

green     Leaves, grass, frogs
          and other things it's
          not easy being.
--------  -----------------------

A horizontal rule follows.

***

Here's a definition list:

apples
  : Good for making applesauce.

oranges
  : Citrus!

tomatoes
  : There's no "e" in tomatoe.

Again, text is indented 4 spaces. (Put a blank line between each
term and  its definition to spread things out more.)

Here's a "line block" (note how whitespace is honored):

| Line one
|   Line too
| Line tree


Inline math equation: $\omega = d\phi / dt$. Display
math should get its own line like so:

$$I = \int \rho R^{2} dV$$

And note that you can backslash-escape any punctuation characters
which you wish to be displayed literally, ex.: \`foo\`, \*bar\*, etc.


================================================
FILE: examples/with-mdx/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-mdx/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-module-federation/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-module-federation/README.md
================================================
# Razzle Module Federation Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-module-federation with-module-federation

cd with-module-federation
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle with-module-federation. It satisfies the entry point
 `src/client.js` for the browser in both apps..


================================================
FILE: examples/with-module-federation/basic-1/package.json
================================================
{
  "name": "razzle-examples-basic-1",
  "version": "4.0.0-canary.25",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}


================================================
FILE: examples/with-module-federation/basic-1/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <%= htmlWebpackPlugin.tags.headTags %>
    <!--
        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
        Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      -->
    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      -->
      <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>

</html>


================================================
FILE: examples/with-module-federation/basic-1/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-module-federation/basic-1/razzle.config.js
================================================
'use strict';

const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  options: {
    buildType: 'spa',
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    const url = opts.env.dev ?
      process.env.FEDERATED_URL_DEV : process.env.FEDERATED_URL;

    config.plugins.push(
      new ModuleFederationPlugin({
        name: "app1",
        filename: "remoteEntry.js",
        remotes: {
          app2: `app2@${url}remoteEntry.js`,
        },
        exposes: {
          "./Button": "./src/Button",
        },
        shared: [
          {
            ...deps,
            react: {
              // eager: true,
              singleton: true,
              requiredVersion: deps.react,
            },
            "react-dom": {
              // eager: true,
              singleton: true,
              requiredVersion: deps["react-dom"],
            },
          },
        ],
      })
    )

    return config;
  },
};


================================================
FILE: examples/with-module-federation/basic-1/src/App.js
================================================
import LocalButton from "./Button";
import React from "react";

const RemoteButton = React.lazy(() => import("app2/Button"));

const App = () => (
  <div>
    <h1>Bi-Directional</h1>
    <h2>App 1</h2>
    <LocalButton />
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  </div>
);

export default App;


================================================
FILE: examples/with-module-federation/basic-1/src/Button.js
================================================
import React from "react";

const style = {
  background: "#800",
  color: "#fff",
  padding: 12,
};

const Button = () => <button style={style}>App 1 Button</button>;

export default Button;


================================================
FILE: examples/with-module-federation/basic-1/src/bootstrap.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-module-federation/basic-1/src/client.js
================================================
import("./bootstrap");


================================================
FILE: examples/with-module-federation/basic-2/package.json
================================================
{
  "name": "razzle-examples-basic-2",
  "version": "4.0.0-canary.25",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}


================================================
FILE: examples/with-module-federation/basic-2/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <%= htmlWebpackPlugin.tags.headTags %>
    <!--
        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
        Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      -->
    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      -->
      <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>

</html>


================================================
FILE: examples/with-module-federation/basic-2/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-module-federation/basic-2/razzle.config.js
================================================
'use strict';

const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  options: {
    buildType: 'spa',
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    const url = opts.env.dev ?
      process.env.FEDERATED_URL_DEV : process.env.FEDERATED_URL;

    config.plugins.push(
      new ModuleFederationPlugin({
        name: "app2",
        filename: "remoteEntry.js",
        remotes: {
          app1: `app1@${url}remoteEntry.js`,
        },
        exposes: {
          "./Button": "./src/Button",
        },
        shared: [
          {
            ...deps,
            react: {
              // eager: true,
              singleton: true,
              requiredVersion: deps.react,
            },
            "react-dom": {
              // eager: true,
              singleton: true,
              requiredVersion: deps["react-dom"],
            },
          },
        ],
      })
    )

    return config;
  },
};


================================================
FILE: examples/with-module-federation/basic-2/src/App.js
================================================
import LocalButton from "./Button";
import React from "react";

const RemoteButton = React.lazy(() => import("app1/Button"));

const App = () => (
  <div>
    <h1>Bi-Directional</h1>
    <h2>App 2</h2>
    <LocalButton />
    <React.Suspense fallback="Loading Button">
      <RemoteButton />
    </React.Suspense>
  </div>
);

export default App;


================================================
FILE: examples/with-module-federation/basic-2/src/Button.js
================================================
import React from "react";

const style = {
  background: "#00c",
  color: "#fff",
  padding: 12,
};

const Button = () => <button style={style}>App 2 Button</button>;

export default Button;


================================================
FILE: examples/with-module-federation/basic-2/src/bootstrap.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-module-federation/basic-2/src/client.js
================================================
import("./bootstrap");


================================================
FILE: examples/with-module-federation/package.json
================================================
{
  "private": true,
  "name": "razzle-examples-with-module-federation",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle start",
    "build-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle build",
    "test-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle test --env=jsdom",
    "start:prod-1": "cross-env RAZZLE_APP_PATH=basic-1 PORT=3000 NODE_ENV=production serve -s basic-1/build/public",
    "start-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle start",
    "build-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle build",
    "test-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle test --env=jsdom",
    "start:prod-2": "cross-env RAZZLE_APP_PATH=basic-2 PORT=3001 NODE_ENV=production serve -s basic-2/build/public",
    "start": "concurrently \"yarn start-1\" \"yarn start-2\"",
    "start:prod": "concurrently \"yarn start:prod-1\" \"yarn start:prod-2\"",
    "build": "concurrently \"yarn build-1 --noninteractive\" \"yarn build-2 --noninteractive\""
  },
  "workspaces": [
    "basic-1",
    "basic-2"
  ],
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^5.2.0",
    "webpack": "^5.24.0",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  },
  "razzle_meta": {
    "forceWebpack": true
  }
}


================================================
FILE: examples/with-monorepo/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-monorepo/README.md
================================================
# Razzle Monorepo Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-monorepo with-monorepo

cd with-monorepo
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle in a monorepo. It satisfies the entry points
`src/index.js` for the server and `src/client.js` for the browser in both apps.


================================================
FILE: examples/with-monorepo/basic-1/package.json
================================================
{
  "name": "razzle-examples-basic-1",
  "version": "4.0.0-canary.25",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}


================================================
FILE: examples/with-monorepo/basic-1/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-monorepo/basic-1/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-monorepo/basic-1/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-monorepo/basic-1/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-monorepo/basic-1/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-monorepo/basic-1/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-monorepo/basic-1/src/server.js
================================================
import path from 'path';
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-monorepo/basic-2/package.json
================================================
{
  "name": "razzle-examples-basic-2",
  "version": "4.0.0-canary.25",
  "license": "MIT",
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}


================================================
FILE: examples/with-monorepo/basic-2/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-monorepo/basic-2/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-monorepo/basic-2/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-monorepo/basic-2/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-monorepo/basic-2/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-monorepo/basic-2/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-monorepo/basic-2/src/server.js
================================================
import path from 'path';
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-monorepo/package.json
================================================
{
  "private": true,
  "name": "razzle-examples-with-monorepo",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle start",
    "build-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle build",
    "test-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle test --env=jsdom",
    "start:prod-1": "cross-env RAZZLE_APP_PATH=basic-1 NODE_ENV=production node basic-1/build/server.js",
    "start-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle start",
    "build-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle build",
    "test-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle test --env=jsdom",
    "start:prod-2": "cross-env RAZZLE_APP_PATH=basic-2 NODE_ENV=production node basic-2/build/server.js",
    "start": "concurrently \"yarn start-1\" \"yarn start-2\"",
    "start:prod": "concurrently \"yarn start:prod-1\" \"yarn start:prod-2\"",
    "build": "concurrently \"yarn build-1 --noninteractive\" \"yarn build-2 --noninteractive\""
  },
  "workspaces": [
    "basic-1",
    "basic-2"
  ],
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-monorepo-without-workspaces/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-monorepo-without-workspaces/README.md
================================================
# Razzle Monorepo without workspaces Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-monorepo-without-workspaces with-monorepo-without-workspaces

cd with-monorepo-without-workspaces
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example

This is similar to the monorepo example, but adapted for the case where you want
to build multiple separate applications that share the same dependencies (and
therefore share the same package.json in the root).

================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-monorepo-without-workspaces/basic-1/src/server.js
================================================
import path from 'path';
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-monorepo-without-workspaces/basic-2/src/server.js
================================================
import path from 'path';
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-monorepo-without-workspaces/package.json
================================================
{
  "private": true,
  "name": "razzle-examples-with-monorepo-without-workspaces",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle start",
    "build-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle build",
    "test-1": "cross-env RAZZLE_APP_PATH=basic-1 razzle test --env=jsdom",
    "start:prod-1": "cross-env RAZZLE_APP_PATH=basic-1 NODE_ENV=production node basic-1/build/server.js",
    "start-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle start",
    "build-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle build",
    "test-2": "cross-env RAZZLE_APP_PATH=basic-2 razzle test --env=jsdom",
    "start:prod-2": "cross-env RAZZLE_APP_PATH=basic-2 NODE_ENV=production node basic-2/build/server.js",
    "start": "concurrently \"yarn start-1\" \"yarn start-2\"",
    "start:prod": "concurrently \"yarn start:prod-1\" \"yarn start:prod-2\"",
    "build": "concurrently \"yarn build-1 --noninteractive\" \"yarn build-2 --noninteractive\""
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  }
}


================================================
FILE: examples/with-now/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-now/README.md
================================================
# Razzle Now Deployment example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-now with-now

cd with-now
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

### Setup Now:

[Now](https://zeit.co/now) manages app deployments with a [desktop](https://zeit.co/download) app or [CLI](https://zeit.co/download#now-cli).

* 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)
  * Or install only the CLI directly using: `npm install -g now`
* Create a Now [account](https://zeit.co/signup)
* Authenticate in the desktop app or CLI with `now login`

### Deploy:

* Deploy using `now` in the root of your app.
* Open your [Dashboard](https://zeit.co/dashboard/deployments) and test your deployment
  * Note: on the free plan your deployment and logs will be **_publicly visible_**

#### Additional Configuration:

* Additional build, deployment, and config steps available: [Zeit/Now](https://zeit.co/now#frequently-asked-questions)

## Idea behind the example

This is a basic example of how to use razzle and deploy to [Now](https://zeit.co/now).


================================================
FILE: examples/with-now/package.json
================================================
{
  "name": "razzle-examples-with-now",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js",
    "now-start": "yarn start:prod"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-now/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-now/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-now/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-now/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-now/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-now/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-now/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-now-v2/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-now-v2/README.md
================================================
# Razzle Now v2 Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-now-v2 with-now-v2

cd with-now-v2
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

Install now:

```
npm i -g now
```

Build and deploy:

```bash
yarn build
now
```

Open the link written in the console.

## Idea behind the example

Take 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.

```json
{
    "version": 2,
    "name": "example",
    "builds": [
        {
            "src": "build/public/**",
            "use": "@now/static"
        },
        {
            "src": "build/server.js",
            "use": "@now/node-server"
        }
    ],
    "routes": [
        { "src": "/assets.json", "dest": "build/assets.json" },
        { "src": "/favicon.ico", "dest": "build/public/favicon.ico" },
        { "src": "/robots.txt", "dest": "build/public/robots.txt" },
        { "src": "/static/(.*)", "dest": "build/public/static/$1" },
        { "src": "/(.*)", "dest": "build/server.js" }

    ],
    "env": {
      "NODE_ENV": "production"
    }
}
```

We 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.

## Documentation

* [Zeit Now v2 Documentation](https://zeit.co/docs/v2/)
  * [@now/node-server](https://zeit.co/docs/v2/deployments/official-builders/node-js-server-now-node-server/)
  * [Environment Variables and Secrets](https://zeit.co/docs/v2/deployments/environment-variables-and-secrets/)


================================================
FILE: examples/with-now-v2/now.json
================================================
{
  "version": 2,
  "builds": [{
      "src": "build/server.js",
      "use": "@now/node"
    },
    {
      "src": "build/public/**/*",
      "use": "@now/static"
    }
  ],
  "routes": [{
      "src": "/static/(.*)",
      "dest": "build/public/static/$1"
    },
    {
      "src": "/favicon.ico",
      "dest": "favicon.ico"
    },
    {
      "src": "/robots.txt",
      "dest": "robots.txt"
    },
    {
      "src": "/(.*)",
      "dest": "build/server.js"
    }
  ],
  "env": {
    "NODE_ENV": "production"
  }
}

================================================
FILE: examples/with-now-v2/package.json
================================================
{
  "name": "razzle-examples-now-v2",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "now-build": "razzle build",
    "now-start": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-now-v2/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-now-v2/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-now-v2/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-now-v2/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-now-v2/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-now-v2/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-now-v2/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-polka/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-polka/README.md
================================================
# Razzle Polka Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-polka with-polka

cd with-polka
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

An 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
`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.


================================================
FILE: examples/with-polka/package.json
================================================
{
  "name": "razzle-examples-with-polka",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "polka": "^0.5.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "serve-static": "^1.14.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-polka/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-polka/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-polka/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-polka/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-polka/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-polka/src/index.js
================================================
import http from "http";

let app = require("./server").default;

const server = http.createServer(app);

let currentApp = app;

server.listen(process.env.PORT || 3000, (error) => {
  if (error) {
    console.log(error);
  }

  console.log("🚀 started");
});

if (module.hot) {
  console.log("✅  Server-side HMR Enabled!");

  module.hot.accept("./server", () => {
    console.log("🔁  HMR Reloading `./server`...");

    try {
      app = require("./server").default;
      server.removeListener("request", currentApp);
      server.on("request", app);
      currentApp = app;
    } catch (error) {
      console.error(error);
    }
  });
}


================================================
FILE: examples/with-polka/src/server.js
================================================
import App from './App';
import React from 'react';
import polka from 'polka';
import serve from 'serve-static';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};


export default polka()
  .use(serve(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.end(html);
  }).handler;


================================================
FILE: examples/with-preact/.babelrc
================================================
{
  "presets": [
    "razzle/babel"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "h"
      }
    ]
  ]
}

================================================
FILE: examples/with-preact/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
cache


================================================
FILE: examples/with-preact/README.md
================================================
# Razzle Preact Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-preact with-preact

cd with-preact
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This shows how to setup [Preact](https://github.com/developit/preact) with Razzle.

Here is a list of changes from Razzle's base template:

  1. Install `babel-plugin-transform-react-jsx` as a devDependency.
  2. Extend Razzle's babel config with a custom `.babelrc`
  3. Install `preact` and `preact-render-to-string`
  4. Remove `react`, `react-dom`, `react-router-dom` entirely
  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.


================================================
FILE: examples/with-preact/package.json
================================================
{
  "name": "razzle-examples-with-preact",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "preact": "^10.4.1",
    "preact-render-to-string": "^5.1.6",
    "react": "^17.0.1"
  },
  "devDependencies": {
    "@prefresh/babel-plugin": "^0.2.0",
    "@prefresh/webpack": "^2.0.0",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "babel-preset-razzle": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "webpack": "^5.19.0",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-preact/public/robots.txt
================================================
User-agent: *
Disallow: /api/
Disallow: /publicapi/
Disallow: /query/


================================================
FILE: examples/with-preact/razzle.config.js
================================================
'use strict';

const Prefresh = require('@prefresh/webpack');

module.exports = {
  experimental: {
    reactRefresh: false,
  },
  modifyWebpackConfig(opts) {
    const { target, dev } = opts.env;
    const { webpackConfig: config } = opts;
    if (target !== 'node' && dev) {
      const jsRule = config.module.rules.find(loaderEntry =>
        String(loaderEntry.test).includes('(js|jsx|mjs|ts|tsx)')
      );

      const babelLoader = jsRule.use.find(useEntry =>
        useEntry.loader.includes('babel-loader')
      );

      if (babelLoader.options.plugins) {
        babelLoader.options.plugins.unshift('@prefresh/babel-plugin');
      } else {
        babelLoader.options.plugins = ['@prefresh/babel-plugin'];
      }

      config.plugins.unshift(new Prefresh());
    }

    return config;
  },
};

================================================
FILE: examples/with-preact/src/App.js
================================================
import { h } from 'preact';
import { useState } from 'preact/hooks';
import PreactLogo from './preact.svg';
/** @jsx h */

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <main class="Preact">
      <img src={PreactLogo} alt="Preact Logo" />
      Hello Preact!
      <p>Count: {count}</p>
      <button onClick={() => setCount(count - 1)}>-</button>
      <button onClick={() => setCount(count + 1)}>+</button>
    </main>
  );
};

export default App;


================================================
FILE: examples/with-preact/src/client.js
================================================
import { h, hydrate } from "preact";
import App from "./App";
/** @jsx h */

hydrate(<App />, document.body, document.body.firstElementChild);


================================================
FILE: examples/with-preact/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-preact/src/server.js
================================================
import App from './App';
import express from 'express';
import { h } from 'preact'; // eslint-disable-line
import render from 'preact-render-to-string';
/** @jsx h */

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = render(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-promise-config/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-promise-config/README.md
================================================
# Razzle Custom Promise Configuration Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-promise-config with-promise-config

cd with-promise-config
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying configuration using a promise. It modifies the name of the server's output file
in production (`razzle build`).

Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    return new Promise((resolve) => {
      setTimeout(() => {
        // Change the name of the server output file in production
        if (opts.env.target === 'node' && !opts.env.dev) {
          config.output.filename = 'custom.js';
        }
        resolve(config);
      }, 10);
    });
  },
};

```


================================================
FILE: examples/with-promise-config/package.json
================================================
{
  "name": "razzle-examples-with-promise-config",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/custom.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-promise-config/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-promise-config/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    return new Promise((resolve) => {
      setTimeout(() => {
        // Change the name of the server output file in production
        if (opts.env.target === 'node' && !opts.env.dev) {
          config.output.filename = 'custom.js';
        }
        resolve(config);
      }, 10);
    });
  },
};


================================================
FILE: examples/with-promise-config/src/App.js
================================================
import React from 'react';

const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-promise-config/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-promise-config/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-promise-config/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-react-native-web/.babelrc
================================================
{
  "presets": ["razzle/babel"],
  "plugins": [["react-native-web", { "commonjs": true }]]
}


================================================
FILE: examples/with-react-native-web/README.md
================================================
# Razzle React Native Web Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-react-native-web with-react-native-web

cd with-react-native-web
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This 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.

```
yarn add react-native-web
yarn add babel-plugin-react-native-web --dev
```

Next 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.

```json
{
  "presets": ["razzle/babel"],
  "plugins": ["react-native-web"]
}
```

In 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.

```js
// ./src/client.js
import React from 'react';
import App from './App';
import { AppRegistry } from 'react-native';

// register the app
AppRegistry.registerComponent('App', () => App);

AppRegistry.runApplication('App', {
  initialProps: {},
  rootTag: document.getElementById('root'),
});

// Allow HMR to work
if (module.hot) {
  module.hot.accept();
}
```

In `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.

```js
// ./src/server.js

import App from './App';
import express from 'express';
import ReactDOMServer from 'react-dom/server';
import { AppRegistry } from 'react-native';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    // register the app
    AppRegistry.registerComponent('App', () => App);

    // prerender the app
    const { element, getStyleElement } = AppRegistry.getApplication('App', {});
    // first the element
    const html = ReactDOMServer.renderToString(element);
    // then the styles
    const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());

    res.send(
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${css}
        ${
          process.env.NODE_ENV === 'production'
            ? `<script src="${assets.client.js}" defer></script>`
            : `<script src="${assets.client.js}" defer crossorigin></script>`
        }
    </head>
    <body>
        <div id="root">${html}</div>
    </body>
</html>`
    );
  });

export default server;
```

### Webpack setup

Like [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.

However, 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.

```js
'use strict';

module.exports = {
  modify(config, { target, dev }, webpack) {
    // Since RN web takes care of CSS, we should remove it for a #perf boost
    config.module.rules = config.module.rules
      .filter(
        rule =>
          !(rule.test && rule.test.exec && rule.test.exec('./something.css'))
      )
      .filter(
        rule =>
          !(
            rule.test &&
            rule.test.exec &&
            rule.test.exec('./something.module.css')
          )
      );

    return config;
  },
};
```


================================================
FILE: examples/with-react-native-web/package.json
================================================
{
  "name": "razzle-examples-with-react-native-web",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-native-web": "0.15.0"
  },
  "devDependencies": {
    "babel-plugin-react-native-web": "0.15.0",
    "babel-preset-razzle": "4.2.15",
    "extract-text-webpack-plugin": "^3.0.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "react-native": "^0.63.4",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-react-native-web/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-react-native-web/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    // Since RN web takes care of CSS, we should remove it for a #perf boost
    config.module.rules = config.module.rules
      .filter(
        rule =>
          !(rule.test && rule.test.exec && rule.test.exec('./something.css'))
      )
      .filter(
        rule =>
          !(
            rule.test &&
            rule.test.exec &&
            rule.test.exec('./something.module.css')
          )
      );

    return config;
  },
};


================================================
FILE: examples/with-react-native-web/src/App.js
================================================
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.box}>
        <Text style={styles.text}>Hello, world!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: { padding: 10 },
  text: { fontWeight: 'bold' },
});

export default App;


================================================
FILE: examples/with-react-native-web/src/client.js
================================================
/* eslint-disable */
import React from 'react';
import App from './App';
import { AppRegistry } from 'react-native';

// register the app
AppRegistry.registerComponent('App', () => App);

AppRegistry.runApplication('App', {
  initialProps: {},
  rootTag: document.getElementById('root'),
});

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-react-native-web/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-react-native-web/src/server.js
================================================
import App from './App';

import express from 'express';
import ReactDOMServer from 'react-dom/server';
import { AppRegistry } from 'react-native';


const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {

  // register the app
  AppRegistry.registerComponent('App', () => App);

  // prerender the app
  const { element, getStyleElement } = AppRegistry.getApplication('App', {});
  // first the element
  const markup = ReactDOMServer.renderToString(element);
  // then the styles
  const css = ReactDOMServer.renderToStaticMarkup(getStyleElement());

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${css}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-react-router/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-react-router/README.md
================================================
# Razzle x React Router

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-react-router with-react-router

cd with-react-router
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

This example can also be exported as a static website.

To try it out:

```bash
yarn build
yarn export
yarn start:static
```

Then open up http://localhost:5000/ in your browser.

## Idea behind the example

This is a basic, bare-bones example of how to use Razzle and React Router.


================================================
FILE: examples/with-react-router/package.json
================================================
{
  "name": "razzle-examples-with-react-router",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "export": "razzle export",
    "test": "razzle test --env=jsdom",
    "start:static": "serve -s build/public",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "serve": "^11.3.2",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-react-router/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-react-router/src/About.js
================================================
import React from "react";

const About = () => <p>about</p>;

export default About;


================================================
FILE: examples/with-react-router/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-react-router/src/App.js
================================================
import { Route, Switch } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import "./App.css";

import React from "react";
const App = () => {
  return (
    <>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </>
  );
};

export default App;


================================================
FILE: examples/with-react-router/src/App.test.js
================================================
import App from "./App";
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

describe("<App />", () => {
  test("renders without exploding", () => {
    const div = document.createElement("div");
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      div
    );
  });
});


================================================
FILE: examples/with-react-router/src/Home.js
================================================
import React from "react";
import { Link } from "react-router-dom";

const Home = () => {
  return (
    <>
      <p>Welcome to Razzle.</p>
      <Link to="about">About</Link>
    </>
  );
};

export default Home;


================================================
FILE: examples/with-react-router/src/client.js
================================================
import React from "react";
import { hydrate } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-react-router/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-react-router/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();

export const renderApp = (req, res) => {
  const context = {};
  const markup = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${
      assets.client.css
        ? `<link rel="stylesheet" href="${assets.client.css}">`
        : ''
      }
  </head>
  <body>
      <div id="root">${markup}</div>
      <!-- razzle_static_js -->
      <script src="${assets.client.js}" defer crossorigin></script>
  </body>
</html>`;

  return { html, context };
};

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html, context } = renderApp(req, res);

    if (context.url) {
      // Somewhere a `<Redirect>` was rendered
      return res.redirect(301, context.url);
    }

    res.send(html);
  });

export default server;


================================================
FILE: examples/with-react-router/src/static_export.js
================================================
import { renderApp } from './server';

export const render = (req, res) => {
  const { html } = renderApp(req, res);

  res.json({ html });
};

export const routes = () => {
  return ['/', '/about'];
};


================================================
FILE: examples/with-react-server-components/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-react-server-components/README.md
================================================
# Razzle With React Server Components Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-react-server-components with-react-server-components

cd with-react-server-components
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle With react server components. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/with-react-server-components/babel.config.js
================================================
module.exports = (api) => {
  api.cache.using(() => process.env.NODE_ENV);

  // const enableFastRefresh = !api.env('production') && !api.env('test');
  const enableFastRefresh = false;

  return {
    presets: [
      [
        '@babel/preset-react',
        {
          runtime: 'automatic',
        },
      ],
      [
        '@babel/preset-env',
        {
          targets: {
            node: 'current',
          },
        },
      ],
      '@babel/preset-typescript',
    ],
    plugins: [
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-export-default-from',
      '@babel/plugin-proposal-export-namespace-from',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-optional-chaining',
    ],
  };
};


================================================
FILE: examples/with-react-server-components/notes/.gitkeep
================================================


================================================
FILE: examples/with-react-server-components/notes/1.md
================================================
This is an example note. It contains **Markdown**!

================================================
FILE: examples/with-react-server-components/notes/2.md
================================================
It's very easy to make some words **bold** and other words *italic* with
Markdown. You can even [link to React's website!](https://www.reactjs.org).

================================================
FILE: examples/with-react-server-components/notes/3.md
================================================
You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)
notes in this app! These note live on the server in the `notes` folder.
![This app is powered by React](https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png)

================================================
FILE: examples/with-react-server-components/notes/4.md
================================================
It was an excellent note.54545

================================================
FILE: examples/with-react-server-components/package.json
================================================
{
  "name": "razzle-examples-with-react-server-components",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production babel-node --extensions \\\".es6,.js,.es,.jsx,.mjs,.ts,.tsx\\\" --conditions=react-server build/server.server",
    "plugin": "babel --extensions \\\".es6,.js,.es,.jsx,.mjs,.ts,.tsx\\\" --watch plugin/**.ts --out-dir ./plugin",
    "seed": "node ./scripts/seed.js"
  },
  "dependencies": {
    "babel-preset-react-app": "10.0.0",
    "better-sqlite3": "^7.1.2",
    "date-fns": "^2.16.1",
    "excerpts": "^0.0.3",
    "express": "^4.17.1",
    "marked": "^1.2.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-error-boundary": "^3.1.0",
    "react-fetch": "0.0.0-experimental-3310209d0",
    "react-fs": "0.0.0-experimental-3310209d0",
    "react-server-dom-webpack": "0.0.0-experimental-3310209d0",
    "resolve": "1.12.0",
    "rimraf": "^3.0.2",
    "sanitize-html": "^2.2.0"
  },
  "devDependencies": {
    "@babel/cli": "7.12.10",
    "@babel/node": "7.12.10",
    "@babel/core": "7.12.3",
    "cross-env": "^7.0.3",
    "webpack-stats-plugin": "^1.0.3",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-export-default-from": "7.12.1",
    "@babel/plugin-proposal-export-namespace-from": "7.12.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "7.12.1",
    "@babel/plugin-proposal-optional-chaining": "7.12.7",
    "@babel/plugin-transform-flow-strip-types": "7.12.10",
    "@babel/plugin-transform-react-jsx-source": "7.12.1",
    "@babel/preset-react": "7.12.10",
    "@babel/preset-typescript": "7.12.7",
    "@types/babel__core": "7.1.12",
    "@types/compression": "^1.7.0",
    "@types/concurrently": "5.2.1",
    "@types/express": "^4.17.9",
    "@types/jest": "26.0.19",
    "@types/marked": "^1.2.1",
    "@types/prettier": "2.1.6",
    "@types/react": "17.0.0",
    "@types/react-dom": "17.0.0",
    "@types/rimraf": "3.0.0",
    "@types/sanitize-html": "^1.27.0",
    "@types/webpack": "4.41.25",
    "@types/webpack-node-externals": "2.5.0",
    "prettier": "2.2.1",
    "rimraf": "3.0.2",
    "typescript": "4.1.3",
    "webpack-dev-server": "^3.11.2"
  },
  "razzle_meta": {
    "forceWebpack": true,
    "nohoist": [
      "react",
      "react-dom",
      "react-fetch",
      "react-fs",
      "react-server-dom-webpack",
      "webpack"
    ]
  }
}


================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackLoader.js
================================================
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

// eslint-disable-next-line
function _default(source) {
  let newSrc = "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n"; // TODO - extract names (export names) using acorn, check ReactFlightWebpackNodeLoader

  const names = ['default'];

  for (let i = 0; i < names.length; i++) {
    const name = names[i];

    if (name === 'default') {
      newSrc += 'export default ';
    } else {
      newSrc += 'export const ' + name + ' = ';
    }

    newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
    newSrc += `'file://${this.resourcePath}'`;
    newSrc += ', name: ';
    newSrc += JSON.stringify(name);
    newSrc += '};\n';
  }

  console.log({
    newSrc
  });
  return newSrc;
}

================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackLoader.ts
================================================
// eslint-disable-next-line
export default function (source) {
  let newSrc =
    "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";

  // TODO - extract names (export names) using acorn, check ReactFlightWebpackNodeLoader
  const names = ['default'];

  for (let i = 0; i < names.length; i++) {
    const name = names[i];
    if (name === 'default') {
      newSrc += 'export default ';
    } else {
      newSrc += 'export const ' + name + ' = ';
    }
    newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
    newSrc += `'file://${this.resourcePath}'`;
    newSrc += ', name: ';
    newSrc += JSON.stringify(name);
    newSrc += '};\n';
  }

  console.log({
    newSrc,
  });

  return newSrc;
}


================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackNodeLoader.js
================================================
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.resolve = resolve;
exports.getSource = getSource;
exports.transformSource = transformSource;

var _acorn = _interopRequireDefault(require("acorn"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
let warnedAboutConditionsFlag = false;
let stashedGetSource = null;
let stashedResolve = null;

async function resolve(specifier, context, defaultResolve) {
  // We stash this in case we end up needing to resolve export * statements later.
  stashedResolve = defaultResolve;

  if (!context.conditions.includes('react-server')) {
    context = { ...context,
      conditions: [...context.conditions, 'react-server']
    };

    if (!warnedAboutConditionsFlag) {
      warnedAboutConditionsFlag = true; // eslint-disable-next-line react-internal/no-production-logging

      console.warn('You did not run Node.js with the `--conditions react-server` flag. ' + 'Any "react-server" override will only work with ESM imports.');
    }
  }

  const resolved = await defaultResolve(specifier, context, defaultResolve);

  if (resolved.url.endsWith('.server.js')) {
    const parentURL = context.parentURL;

    if (parentURL && !parentURL.endsWith('.server.js')) {
      let reason;

      if (specifier.endsWith('.server.js')) {
        reason = `"${specifier}"`;
      } else {
        reason = `"${specifier}" (which expands to "${resolved.url}")`;
      }

      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.');
    }
  }

  return resolved;
}

async function getSource(url, context, defaultGetSource) {
  // We stash this in case we end up needing to resolve export * statements later.
  stashedGetSource = defaultGetSource;
  return defaultGetSource(url, context, defaultGetSource);
}

function addExportNames(names, node) {
  switch (node.type) {
    case 'Identifier':
      names.push(node.name);
      return;

    case 'ObjectPattern':
      for (let i = 0; i < node.properties.length; i++) addExportNames(names, node.properties[i]);

      return;

    case 'ArrayPattern':
      for (let i = 0; i < node.elements.length; i++) {
        const element = node.elements[i];
        if (element) addExportNames(names, element);
      }

      return;

    case 'Property':
      addExportNames(names, node.value);
      return;

    case 'AssignmentPattern':
      addExportNames(names, node.left);
      return;

    case 'RestElement':
      addExportNames(names, node.argument);
      return;

    case 'ParenthesizedExpression':
      addExportNames(names, node.expression);
      return;
  }
}

function resolveClientImport(specifier, parentURL) {
  // Resolve an import specifier as if it was loaded by the client. This doesn't use
  // the overrides that this loader does but instead reverts to the default.
  // This resolution algorithm will not necessarily have the same configuration
  // as the actual client loader. It should mostly work and if it doesn't you can
  // always convert to explicit exported names instead.
  const conditions = ['node', 'import'];

  if (stashedResolve === null) {
    throw new Error('Expected resolve to have been called before transformSource');
  }

  return stashedResolve(specifier, {
    conditions,
    parentURL
  }, stashedResolve);
}

async function loadClientImport(url, defaultTransformSource) {
  if (stashedGetSource === null) {
    throw new Error('Expected getSource to have been called before transformSource');
  } // TODO: Validate that this is another module by calling getFormat.


  const {
    source
  } = await stashedGetSource(url, {
    format: 'module'
  }, stashedGetSource);
  return defaultTransformSource(source, {
    format: 'module',
    url
  }, defaultTransformSource);
}

async function parseExportNamesInto(transformedSource, names, parentURL, defaultTransformSource) {
  const {
    body
  } = _acorn.default.parse(transformedSource, {
    ecmaVersion: '2019',
    sourceType: 'module'
  });

  for (let i = 0; i < body.length; i++) {
    const node = body[i];

    switch (node.type) {
      case 'ExportAllDeclaration':
        if (node.exported) {
          addExportNames(names, node.exported);
          continue;
        } else {
          const {
            url
          } = await resolveClientImport(node.source.value, parentURL);
          const {
            source
          } = await loadClientImport(url, defaultTransformSource);

          if (typeof source !== 'string') {
            throw new Error('Expected the transformed source to be a string.');
          }

          parseExportNamesInto(source, names, url, defaultTransformSource);
          continue;
        }

      case 'ExportDefaultDeclaration':
        names.push('default');
        continue;

      case 'ExportNamedDeclaration':
        if (node.declaration) {
          if (node.declaration.type === 'VariableDeclaration') {
            const declarations = node.declaration.declarations;

            for (let j = 0; j < declarations.length; j++) {
              addExportNames(names, declarations[j].id);
            }
          } else {
            addExportNames(names, node.declaration.id);
          }
        }

        if (node.specificers) {
          const specificers = node.specificers;

          for (let j = 0; j < specificers.length; j++) {
            addExportNames(names, specificers[j].exported);
          }
        }

        continue;
    }
  }
}

async function transformSource(source, context, defaultTransformSource) {
  const transformed = await defaultTransformSource(source, context, defaultTransformSource);

  if (context.format === 'module' && context.url.endsWith('.client.js')) {
    const transformedSource = transformed.source;

    if (typeof transformedSource !== 'string') {
      throw new Error('Expected source to have been transformed to a string.');
    }

    const names = [];
    await parseExportNamesInto(transformedSource, names, context.url, defaultTransformSource);
    let newSrc = "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";

    for (let i = 0; i < names.length; i++) {
      const name = names[i];

      if (name === 'default') {
        newSrc += 'export default ';
      } else {
        newSrc += 'export const ' + name + ' = ';
      }

      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
      newSrc += JSON.stringify(context.url);
      newSrc += ', name: ';
      newSrc += JSON.stringify(name);
      newSrc += '};\n';
    }

    return {
      source: newSrc
    };
  }

  return transformed;
}

================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackNodeLoader.ts
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import acorn from 'acorn';

type ResolveContext = {
  conditions: Array<string>;
  parentURL: string | void;
};

type ResolveFunction = (
  string,
  ResolveContext,
  ResolveFunction,
) => { url: string } | Promise<{ url: string }>;

type GetSourceContext = {
  format: string;
};

type GetSourceFunction = (
  string,
  GetSourceContext,
  GetSourceFunction,
) => Promise<{ source: Source }>;

type TransformSourceContext = {
  format: string;
  url: string;
};

type TransformSourceFunction = (
  Source,
  TransformSourceContext,
  TransformSourceFunction,
) => Promise<{ source: Source }>;

type Source = string | ArrayBuffer | Uint8Array;

let warnedAboutConditionsFlag = false;

let stashedGetSource: null | GetSourceFunction = null;
let stashedResolve: null | ResolveFunction = null;

export async function resolve(
  specifier: string,
  context: ResolveContext,
  defaultResolve: ResolveFunction,
): Promise<{ url: string }> {
  // We stash this in case we end up needing to resolve export * statements later.
  stashedResolve = defaultResolve;

  if (!context.conditions.includes('react-server')) {
    context = {
      ...context,
      conditions: [...context.conditions, 'react-server'],
    };
    if (!warnedAboutConditionsFlag) {
      warnedAboutConditionsFlag = true;
      // eslint-disable-next-line react-internal/no-production-logging
      console.warn(
        'You did not run Node.js with the `--conditions react-server` flag. ' +
          'Any "react-server" override will only work with ESM imports.',
      );
    }
  }
  const resolved = await defaultResolve(specifier, context, defaultResolve);
  if (resolved.url.endsWith('.server.js')) {
    const parentURL = context.parentURL;
    if (parentURL && !parentURL.endsWith('.server.js')) {
      let reason;
      if (specifier.endsWith('.server.js')) {
        reason = `"${specifier}"`;
      } else {
        reason = `"${specifier}" (which expands to "${resolved.url}")`;
      }
      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.',
      );
    }
  }
  return resolved;
}

export async function getSource(
  url: string,
  context: GetSourceContext,
  defaultGetSource: GetSourceFunction,
) {
  // We stash this in case we end up needing to resolve export * statements later.
  stashedGetSource = defaultGetSource;
  return defaultGetSource(url, context, defaultGetSource);
}

function addExportNames(names, node) {
  switch (node.type) {
    case 'Identifier':
      names.push(node.name);
      return;
    case 'ObjectPattern':
      for (let i = 0; i < node.properties.length; i++)
        addExportNames(names, node.properties[i]);
      return;
    case 'ArrayPattern':
      for (let i = 0; i < node.elements.length; i++) {
        const element = node.elements[i];
        if (element) addExportNames(names, element);
      }
      return;
    case 'Property':
      addExportNames(names, node.value);
      return;
    case 'AssignmentPattern':
      addExportNames(names, node.left);
      return;
    case 'RestElement':
      addExportNames(names, node.argument);
      return;
    case 'ParenthesizedExpression':
      addExportNames(names, node.expression);
      return;
  }
}

function resolveClientImport(
  specifier: string,
  parentURL: string,
): { url: string } | Promise<{ url: string }> {
  // Resolve an import specifier as if it was loaded by the client. This doesn't use
  // the overrides that this loader does but instead reverts to the default.
  // This resolution algorithm will not necessarily have the same configuration
  // as the actual client loader. It should mostly work and if it doesn't you can
  // always convert to explicit exported names instead.
  const conditions = ['node', 'import'];
  if (stashedResolve === null) {
    throw new Error(
      'Expected resolve to have been called before transformSource',
    );
  }
  return stashedResolve(specifier, { conditions, parentURL }, stashedResolve);
}

async function loadClientImport(
  url: string,
  defaultTransformSource: TransformSourceFunction,
): Promise<{ source: Source }> {
  if (stashedGetSource === null) {
    throw new Error(
      'Expected getSource to have been called before transformSource',
    );
  }
  // TODO: Validate that this is another module by calling getFormat.
  const { source } = await stashedGetSource(
    url,
    { format: 'module' },
    stashedGetSource,
  );
  return defaultTransformSource(
    source,
    { format: 'module', url },
    defaultTransformSource,
  );
}

async function parseExportNamesInto(
  transformedSource: string,
  names: Array<string>,
  parentURL: string,
  defaultTransformSource,
): Promise<void> {
  const { body } = acorn.parse(transformedSource, {
    ecmaVersion: '2019',
    sourceType: 'module',
  });
  for (let i = 0; i < body.length; i++) {
    const node = body[i];
    switch (node.type) {
      case 'ExportAllDeclaration':
        if (node.exported) {
          addExportNames(names, node.exported);
          continue;
        } else {
          const { url } = await resolveClientImport(
            node.source.value,
            parentURL,
          );
          const { source } = await loadClientImport(
            url,
            defaultTransformSource,
          );
          if (typeof source !== 'string') {
            throw new Error('Expected the transformed source to be a string.');
          }
          parseExportNamesInto(source, names, url, defaultTransformSource);
          continue;
        }
      case 'ExportDefaultDeclaration':
        names.push('default');
        continue;
      case 'ExportNamedDeclaration':
        if (node.declaration) {
          if (node.declaration.type === 'VariableDeclaration') {
            const declarations = node.declaration.declarations;
            for (let j = 0; j < declarations.length; j++) {
              addExportNames(names, declarations[j].id);
            }
          } else {
            addExportNames(names, node.declaration.id);
          }
        }
        if (node.specificers) {
          const specificers = node.specificers;
          for (let j = 0; j < specificers.length; j++) {
            addExportNames(names, specificers[j].exported);
          }
        }
        continue;
    }
  }
}

export async function transformSource(
  source: Source,
  context: TransformSourceContext,
  defaultTransformSource: TransformSourceFunction,
): Promise<{ source: Source }> {
  const transformed = await defaultTransformSource(
    source,
    context,
    defaultTransformSource,
  );
  if (context.format === 'module' && context.url.endsWith('.client.js')) {
    const transformedSource = transformed.source;
    if (typeof transformedSource !== 'string') {
      throw new Error('Expected source to have been transformed to a string.');
    }

    const names = [];
    await parseExportNamesInto(
      transformedSource,
      names,
      context.url,
      defaultTransformSource,
    );

    let newSrc =
      "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";
    for (let i = 0; i < names.length; i++) {
      const name = names[i];
      if (name === 'default') {
        newSrc += 'export default ';
      } else {
        newSrc += 'export const ' + name + ' = ';
      }
      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
      newSrc += JSON.stringify(context.url);
      newSrc += ', name: ';
      newSrc += JSON.stringify(name);
      newSrc += '};\n';
    }

    return { source: newSrc };
  }
  return transformed;
}


================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackNodeRegister.js
================================================
"use strict";

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
const url = require('url'); // $FlowFixMe


const Module = require('module');

module.exports = function register() {
  const MODULE_REFERENCE = Symbol.for('react.module.reference');
  const proxyHandlers = {
    get: function (target, name, receiver) {
      switch (name) {
        // These names are read by the Flight runtime if you end up using the exports object.
        case '$$typeof':
          // These names are a little too common. We should probably have a way to
          // have the Flight runtime extract the inner target instead.
          return target.$$typeof;

        case 'filepath':
          return target.filepath;

        case 'name':
          return target.name;
        // We need to special case this because createElement reads it if we pass this
        // reference.

        case 'defaultProps':
          return undefined;

        case '__esModule':
          // Something is conditionally checking which export to use. We'll pretend to be
          // an ESM compat module but then we'll check again on the client.
          target.default = {
            $$typeof: MODULE_REFERENCE,
            filepath: target.filepath,
            // This a placeholder value that tells the client to conditionally use the
            // whole object or just the default export.
            name: ''
          };
          return true;
      }

      let cachedReference = target[name];

      if (!cachedReference) {
        cachedReference = target[name] = {
          $$typeof: MODULE_REFERENCE,
          filepath: target.filepath,
          name: name
        };
      }

      return cachedReference;
    },
    set: function () {
      throw new Error('Cannot assign to a client module from a server module.');
    }
  };

  require.extensions['.client.js'] = function (module, path) {
    const moduleId = url.pathToFileURL(path).href;
    const moduleReference = {
      $$typeof: MODULE_REFERENCE,
      filepath: moduleId,
      name: '*' // Represents the whole object instead of a particular import.

    };
    module.exports = new Proxy(moduleReference, proxyHandlers);
  };

  const originalResolveFilename = Module._resolveFilename;

  Module._resolveFilename = function (request, parent, isMain, options) {
    const resolved = originalResolveFilename.apply(this, arguments);

    if (resolved.endsWith('.server.js')) {
      if (parent && parent.filename && !parent.filename.endsWith('.server.js')) {
        let reason;

        if (request.endsWith('.server.js')) {
          reason = `"${request}"`;
        } else {
          reason = `"${request}" (which expands to "${resolved}")`;
        }

        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.');
      }
    }

    return resolved;
  };
};

================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackNodeRegister.ts
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

const url = require('url');

// $FlowFixMe
const Module = require('module');

module.exports = function register() {
  const MODULE_REFERENCE = Symbol.for('react.module.reference');
  const proxyHandlers = {
    get: function (target, name, receiver) {
      switch (name) {
        // These names are read by the Flight runtime if you end up using the exports object.
        case '$$typeof':
          // These names are a little too common. We should probably have a way to
          // have the Flight runtime extract the inner target instead.
          return target.$$typeof;
        case 'filepath':
          return target.filepath;
        case 'name':
          return target.name;
        // We need to special case this because createElement reads it if we pass this
        // reference.
        case 'defaultProps':
          return undefined;
        case '__esModule':
          // Something is conditionally checking which export to use. We'll pretend to be
          // an ESM compat module but then we'll check again on the client.
          target.default = {
            $$typeof: MODULE_REFERENCE,
            filepath: target.filepath,
            // This a placeholder value that tells the client to conditionally use the
            // whole object or just the default export.
            name: '',
          };
          return true;
      }
      let cachedReference = target[name];
      if (!cachedReference) {
        cachedReference = target[name] = {
          $$typeof: MODULE_REFERENCE,
          filepath: target.filepath,
          name: name,
        };
      }
      return cachedReference;
    },
    set: function () {
      throw new Error('Cannot assign to a client module from a server module.');
    },
  };

  require.extensions['.client.js'] = function (module, path) {
    const moduleId = url.pathToFileURL(path).href;
    const moduleReference: { [string]: any } = {
      $$typeof: MODULE_REFERENCE,
      filepath: moduleId,
      name: '*', // Represents the whole object instead of a particular import.
    };
    module.exports = new Proxy(moduleReference, proxyHandlers);
  };

  const originalResolveFilename = Module._resolveFilename;

  Module._resolveFilename = function (request, parent, isMain, options) {
    const resolved = originalResolveFilename.apply(this, arguments);
    if (resolved.endsWith('.server.js')) {
      if (
        parent &&
        parent.filename &&
        !parent.filename.endsWith('.server.js')
      ) {
        let reason;
        if (request.endsWith('.server.js')) {
          reason = `"${request}"`;
        } else {
          reason = `"${request}" (which expands to "${resolved}")`;
        }
        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.',
        );
      }
    }
    return resolved;
  };
};


================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackPlugin.js
================================================
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _path = require("path");

var _url = require("url");

var _neoAsync = _interopRequireDefault(require("neo-async"));

var _ModuleDependency = _interopRequireDefault(require("webpack/lib/dependencies/ModuleDependency"));

var _NullDependency = _interopRequireDefault(require("webpack/lib/dependencies/NullDependency"));

var _AsyncDependenciesBlock = _interopRequireDefault(require("webpack/lib/AsyncDependenciesBlock"));

var _Template = _interopRequireDefault(require("webpack/lib/Template"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _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; }

class ClientReferenceDependency extends _ModuleDependency.default {
  constructor(request) {
    super(request);
  }

  get type() {
    return 'client-reference';
  }

} // This is the module that will be used to anchor all client references to.
// I.e. it will have all the client files as async deps from this point on.
// We use the Flight client implementation because you can't get to these
// without the client runtime so it's the first time in the loading sequence
// you might want them.
// TODO - fix this;
// const clientFileName = require.resolve('../');


const clientFileName = (0, _path.join)(__dirname, '../node_modules/react-server-dom-webpack/index.js');
const PLUGIN_NAME = 'React Server Plugin';

class ReactFlightWebpackPlugin {
  constructor(options) {
    _defineProperty(this, "clientReferences", void 0);

    _defineProperty(this, "chunkName", void 0);

    _defineProperty(this, "manifestFilename", void 0);

    if (!options || typeof options.isServer !== 'boolean') {
      throw new Error(PLUGIN_NAME + ': You must specify the isServer option as a boolean.');
    }

    if (options.isServer) {
      throw new Error('TODO: Implement the server compiler.');
    }

    if (!options.clientReferences) {
      this.clientReferences = [{
        directory: '.',
        recursive: true,
        include: /\.client\.(js|ts|jsx|tsx)$/
      }];
    } else if (typeof options.clientReferences === 'string' || !Array.isArray(options.clientReferences)) {
      this.clientReferences = options.clientReferences;
    } else {
      this.clientReferences = options.clientReferences;
    }

    if (typeof options.chunkName === 'string') {
      this.chunkName = options.chunkName;

      if (!/\[(index|request)\]/.test(this.chunkName)) {
        this.chunkName += '[index]';
      }
    } else {
      this.chunkName = 'client[index]';
    }

    this.manifestFilename = options.manifestFilename || 'react-client-manifest.json';
  }

  apply(compiler) {
    let resolvedClientReferences;

    const run = (params, callback) => {
      // First we need to find all client files on the file system. We do this early so
      // that we have them synchronously available later when we need them. This might
      // not be needed anymore since we no longer need to compile the module itself in
      // a special way. So it's probably better to do this lazily and in parallel with
      // other compilation.
      const contextResolver = compiler.resolverFactory.get('context', {});
      this.resolveAllClientFiles(compiler.context, contextResolver, compiler.inputFileSystem, compiler.createContextModuleFactory(), (err, resolvedClientRefs) => {
        if (err) {
          callback(err);
          return;
        }

        resolvedClientReferences = resolvedClientRefs;
        callback();
      });
    };

    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation, {
      normalModuleFactory
    }) => {
      compilation.dependencyFactories.set(ClientReferenceDependency, normalModuleFactory);
      compilation.dependencyTemplates.set(ClientReferenceDependency, new _NullDependency.default.Template());
      compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
        // We need to add all client references as dependency of something in the graph so
        // Webpack knows which entries need to know about the relevant chunks and include the
        // map in their runtime. The things that actually resolves the dependency is the Flight
        // client runtime. So we add them as a dependency of the Flight client runtime.
        // Anything that imports the runtime will be made aware of these chunks.
        // TODO: Warn if we don't find this file anywhere in the compilation.
        if (module.resource !== clientFileName) {
          return;
        }

        if (resolvedClientReferences) {
          for (let i = 0; i < resolvedClientReferences.length; i++) {
            const dep = resolvedClientReferences[i];
            const chunkName = this.chunkName.replace(/\[index\]/g, '' + i).replace(/\[request\]/g, _Template.default.toPath(dep.userRequest));
            const block = new _AsyncDependenciesBlock.default({
              name: chunkName
            }, module, null, dep.require);
            block.addDependency(dep);
            module.addBlock(block);
          }
        }
      });
    });
    compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
      const json = {};
      compilation.chunkGroups.forEach(chunkGroup => {
        const chunkIds = chunkGroup.chunks.map(c => c.id);

        function recordModule(id, mod) {
          // TODO: Hook into deps instead of the target module.
          // That way we know by the type of dep whether to include.
          // It also resolves conflicts when the same module is in multiple chunks.
          if (!/\.client\.(js|jsx|ts|tsx)$/.test(mod.resource)) {
            return;
          }

          const moduleExports = {};
          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
            moduleExports[name] = {
              id: id,
              chunks: chunkIds,
              name: name
            };
          });
          const href = (0, _url.pathToFileURL)(mod.resource).href;

          if (href !== undefined) {
            json[href] = moduleExports;
          }
        }

        chunkGroup.chunks.forEach(chunk => {
          chunk.getModules().forEach(mod => {
            recordModule(mod.id, mod); // If this is a concatenation, register each child to the parent ID.

            if (mod.modules) {
              mod.modules.forEach(concatenatedMod => {
                recordModule(mod.id, concatenatedMod);
              });
            }
          });
        });
      });
      const output = JSON.stringify(json, null, 2);
      compilation.assets[this.manifestFilename] = {
        source() {
          return output;
        },

        size() {
          return output.length;
        }

      };
    });
  } // This attempts to replicate the dynamic file path resolution used for other wildcard
  // resolution in Webpack is using.


  resolveAllClientFiles(context, contextResolver, fs, contextModuleFactory, callback) {
    _neoAsync.default.map(this.clientReferences, (clientReferencePath, cb) => {
      if (typeof clientReferencePath === 'string') {
        cb(null, [new ClientReferenceDependency(clientReferencePath)]);
        return;
      }

      const clientReferenceSearch = clientReferencePath;
      contextResolver.resolve({}, context, clientReferencePath.directory, {}, (err, resolvedDirectory) => {
        if (err) return cb(err);
        const options = {
          resource: resolvedDirectory,
          resourceQuery: '',
          recursive: clientReferenceSearch.recursive === undefined ? true : clientReferenceSearch.recursive,
          regExp: clientReferenceSearch.include,
          include: undefined,
          exclude: clientReferenceSearch.exclude
        };
        contextModuleFactory.resolveDependencies(fs, options, (err2, deps) => {
          if (err2) return cb(err2);
          const clientRefDeps = deps.map(dep => {
            const request = (0, _path.join)(resolvedDirectory, dep.request);
            const clientRefDep = new ClientReferenceDependency(request);
            clientRefDep.userRequest = dep.userRequest;
            return clientRefDep;
          });
          cb(null, clientRefDeps);
        });
      });
    }, (err, result) => {
      if (err) return callback(err);
      const flat = [];

      for (let i = 0; i < result.length; i++) {
        flat.push.apply(flat, result[i]);
      }

      callback(null, flat);
    });
  }

}

exports.default = ReactFlightWebpackPlugin;

================================================
FILE: examples/with-react-server-components/plugin/ReactFlightWebpackPlugin.ts
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import { join } from 'path';
import { pathToFileURL } from 'url';

import asyncLib from 'neo-async';

import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
import NullDependency from 'webpack/lib/dependencies/NullDependency';
import AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';
import Template from 'webpack/lib/Template';

class ClientReferenceDependency extends ModuleDependency {
  constructor(request) {
    super(request);
  }

  get type() {
    return 'client-reference';
  }
}

// This is the module that will be used to anchor all client references to.
// I.e. it will have all the client files as async deps from this point on.
// We use the Flight client implementation because you can't get to these
// without the client runtime so it's the first time in the loading sequence
// you might want them.
// TODO - fix this;
// const clientFileName = require.resolve('../');
const clientFileName = join(
  __dirname,
  '../node_modules/react-server-dom-webpack/index.js',
);

type ClientReferenceSearchPath = {
  directory: string;
  recursive?: boolean;
  include: RegExp;
  exclude?: RegExp;
};

type ClientReferencePath = string | ClientReferenceSearchPath;

type Options = {
  isServer: boolean;
  clientReferences?: ClientReferencePath | ReadonlyArray<ClientReferencePath>;
  chunkName?: string;
  manifestFilename?: string;
};

const PLUGIN_NAME = 'React Server Plugin';

export default class ReactFlightWebpackPlugin {
  clientReferences: ReadonlyArray<ClientReferencePath>;
  chunkName: string;
  manifestFilename: string;

  constructor(options: Options) {
    if (!options || typeof options.isServer !== 'boolean') {
      throw new Error(
        PLUGIN_NAME + ': You must specify the isServer option as a boolean.',
      );
    }
    if (options.isServer) {
      throw new Error('TODO: Implement the server compiler.');
    }
    if (!options.clientReferences) {
      this.clientReferences = [
        {
          directory: '.',
          recursive: true,
          include: /\.client\.(js|ts|jsx|tsx)$/,
        },
      ];
    } else if (
      typeof options.clientReferences === 'string' ||
      !Array.isArray(options.clientReferences)
    ) {
      this.clientReferences = options.clientReferences;
    } else {
      this.clientReferences = options.clientReferences;
    }
    if (typeof options.chunkName === 'string') {
      this.chunkName = options.chunkName;
      if (!/\[(index|request)\]/.test(this.chunkName)) {
        this.chunkName += '[index]';
      }
    } else {
      this.chunkName = 'client[index]';
    }
    this.manifestFilename =
      options.manifestFilename || 'react-client-manifest.json';
  }

  apply(compiler: any) {
    let resolvedClientReferences;
    const run = (params, callback) => {
      // First we need to find all client files on the file system. We do this early so
      // that we have them synchronously available later when we need them. This might
      // not be needed anymore since we no longer need to compile the module itself in
      // a special way. So it's probably better to do this lazily and in parallel with
      // other compilation.
      const contextResolver = compiler.resolverFactory.get('context', {});
      this.resolveAllClientFiles(
        compiler.context,
        contextResolver,
        compiler.inputFileSystem,
        compiler.createContextModuleFactory(),
        (err, resolvedClientRefs) => {
          if (err) {
            callback(err);
            return;
          }
          resolvedClientReferences = resolvedClientRefs;
          callback();
        },
      );
    };

    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
    compiler.hooks.compilation.tap(
      PLUGIN_NAME,
      (compilation, { normalModuleFactory }) => {
        compilation.dependencyFactories.set(
          ClientReferenceDependency,
          normalModuleFactory,
        );
        compilation.dependencyTemplates.set(
          ClientReferenceDependency,
          new NullDependency.Template(),
        );

        compilation.hooks.buildModule.tap(PLUGIN_NAME, (module) => {
          // We need to add all client references as dependency of something in the graph so
          // Webpack knows which entries need to know about the relevant chunks and include the
          // map in their runtime. The things that actually resolves the dependency is the Flight
          // client runtime. So we add them as a dependency of the Flight client runtime.
          // Anything that imports the runtime will be made aware of these chunks.
          // TODO: Warn if we don't find this file anywhere in the compilation.
          if (module.resource !== clientFileName) {
            return;
          }
          if (resolvedClientReferences) {
            for (let i = 0; i < resolvedClientReferences.length; i++) {
              const dep = resolvedClientReferences[i];
              const chunkName = this.chunkName
                .replace(/\[index\]/g, '' + i)
                .replace(/\[request\]/g, Template.toPath(dep.userRequest));

              const block = new AsyncDependenciesBlock(
                {
                  name: chunkName,
                },
                module,
                null,
                dep.require,
              );
              block.addDependency(dep);
              module.addBlock(block);
            }
          }
        });
      },
    );

    compiler.hooks.emit.tap(PLUGIN_NAME, (compilation) => {
      const json = {};
      compilation.chunkGroups.forEach((chunkGroup) => {
        const chunkIds = chunkGroup.chunks.map((c) => c.id);

        function recordModule(id, mod) {
          // TODO: Hook into deps instead of the target module.
          // That way we know by the type of dep whether to include.
          // It also resolves conflicts when the same module is in multiple chunks.
          if (!/\.client\.(js|jsx|ts|tsx)$/.test(mod.resource)) {
            return;
          }

          const moduleExports = {};
          ['', '*'].concat(mod.buildMeta.providedExports).forEach((name) => {
            moduleExports[name] = {
              id: id,
              chunks: chunkIds,
              name: name,
            };
          });
          const href = pathToFileURL(mod.resource).href;
          if (href !== undefined) {
            json[href] = moduleExports;
          }
        }

        chunkGroup.chunks.forEach((chunk) => {
          chunk.getModules().forEach((mod) => {
            recordModule(mod.id, mod);
            // If this is a concatenation, register each child to the parent ID.
            if (mod.modules) {
              mod.modules.forEach((concatenatedMod) => {
                recordModule(mod.id, concatenatedMod);
              });
            }
          });
        });
      });
      const output = JSON.stringify(json, null, 2);
      compilation.assets[this.manifestFilename] = {
        source() {
          return output;
        },
        size() {
          return output.length;
        },
      };
    });
  }

  // This attempts to replicate the dynamic file path resolution used for other wildcard
  // resolution in Webpack is using.
  resolveAllClientFiles(
    context: string,
    contextResolver: any,
    fs: any,
    contextModuleFactory: any,
    callback: (
      err: null | Error,
      result?: ReadonlyArray<ClientReferenceDependency>,
    ) => void,
  ) {
    asyncLib.map(
      this.clientReferences,
      (
        clientReferencePath: string | ClientReferenceSearchPath,
        cb: (
          err: null | Error,
          result?: ReadonlyArray<ClientReferenceDependency>,
        ) => void,
      ): void => {
        if (typeof clientReferencePath === 'string') {
          cb(null, [new ClientReferenceDependency(clientReferencePath)]);
          return;
        }
        const clientReferenceSearch: ClientReferenceSearchPath = clientReferencePath;
        contextResolver.resolve(
          {},
          context,
          clientReferencePath.directory,
          {},
          (err, resolvedDirectory) => {
            if (err) return cb(err);
            const options = {
              resource: resolvedDirectory,
              resourceQuery: '',
              recursive:
                clientReferenceSearch.recursive === undefined
                  ? true
                  : clientReferenceSearch.recursive,
              regExp: clientReferenceSearch.include,
              include: undefined,
              exclude: clientReferenceSearch.exclude,
            };

            contextModuleFactory.resolveDependencies(
              fs,
              options,
              (err2: null | Error, deps: Array<ModuleDependency>) => {
                if (err2) return cb(err2);

                const clientRefDeps = deps.map((dep) => {
                  const request = join(resolvedDirectory, dep.request);
                  const clientRefDep = new ClientReferenceDependency(request);
                  clientRefDep.userRequest = dep.userRequest;
                  return clientRefDep;
                });
                cb(null, clientRefDeps);
              },
            );
          },
        );
      },
      (
        err: null | Error,
        result: ReadonlyArray<ReadonlyArray<ClientReferenceDependency>>,
      ): void => {
        if (err) return callback(err);
        const flat = [];
        for (let i = 0; i < result.length; i++) {
          flat.push.apply(flat, result[i]);
        }
        callback(null, flat);
      },
    );
  }
}


================================================
FILE: examples/with-react-server-components/plugin/__tests__/ReactFlightWebpackPlugin.spec.ts
================================================
const path = require('path');
const os = require('os');

function getDependencies(mode) {
  jest.resetModuleRegistry();
  let webpack;
  if (mode === 'wp5') {
    webpack = jest.requireActual('webpack5');
    // The code we are testing (ReactFlightWebpackPlugin) directly imports `webpack`. It cannot depend upon `webpack5` as
    // consumers of `ReactFlightWebpackPlugin` are more likely to have installed wp5 just as `webpack`. So we fix this by mocking the
    // `webpack` module, and return the webpack 5 instance that we required.
    jest.mock('webpack', () => {
      return webpack;
    });
    // Sanity-check. If the webpack in package.json changes, this should catch that
    expect(webpack.version).toMatch(/5\.[0-9]*\.[0-9]*/);
  } else {
    webpack = jest.requireActual('webpack');
    // Sanity-check. If the webpack in package.json changes, this should catch that
    expect(webpack.version).toMatch(/4\.[0-9]*\.[0-9]*/);
  }

  const FlightPlugin = require('../ReactFlightWebpackPlugin').default;

  console.log({
    FlightPlugin,
  });
  return {
    FlightPlugin,
    webpack,
  };
}

// const fixturePath = './packages/react-server-dom-webpack/src/__tests__/fixture';
const fixturePath = './plugin/__tests__/fixture';

describe('ReactFlightWebpackPlugin', () => {
  // Running webpack can be slow, so we increase Jest's default timeout. These values are
  // "magic", and not backed by any kind of logic or reasoning.
  jest.setTimeout(5000 * 5);

  test('produces manifest - webpack v4', (done) => {
    const { webpack, FlightPlugin } = getDependencies('wp4');

    const entry = path.resolve(path.join(__dirname, 'fixture', 'entry.js'));

    const plugin = new FlightPlugin({ isServer: false });

    const output = webpack({
      entry: {
        main: entry,
        client: path.resolve(path.join(__dirname, 'fixture', 'Form.client.js')),
      },
      plugins: [plugin],
      output: {
        path: path.resolve(path.join(os.tmpdir(), 'output')),
      },
      mode: 'development',
    });

    output.run((err, stats) => {
      expect(err).toBeNull();
      // in webpack 4, we can read the assets of the compilation object. This doesn't work in webpack 5
      // as webpack 5 removes the source from the assets object, to prevent memory leaks.
      const fileName = plugin.manifestFilename;
      const pluginOutput = stats.compilation.assets[fileName];
      const producedManifest = pluginOutput.source();
      assert(producedManifest);

      done();
    });
  });

  test.only('produces manifest - webpack v4 using real code', (done) => {
    const { webpack, FlightPlugin } = getDependencies('wp4');

    const entry = path.resolve(
      path.join(__dirname, '../../src/', 'index.client.tsx'),
    );

    console.log('entry: ', entry);

    const plugin = new FlightPlugin({ isServer: false });

    const output = webpack({
      entry: [entry],
      plugins: [plugin],
      output: {
        path: path.resolve(path.join(os.tmpdir(), 'output')),
      },
      resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json', '.mjs'],
      },
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.(js|jsx|ts|tsx)?$/,
            // use: 'babel-loader',
            use: ['babel-loader?cacheDirectory'],
            exclude: /node_modules/,
          },
        ],
      },
    });

    output.run((err, stats) => {
      expect(err).toBeNull();
      // in webpack 4, we can read the assets of the compilation object. This doesn't work in webpack 5
      // as webpack 5 removes the source from the assets object, to prevent memory leaks.
      const fileName = plugin.manifestFilename;
      const pluginOutput = stats.compilation.assets[fileName];
      const producedManifest = pluginOutput.source();

      const key =
        'file://' +
        path.resolve(path.join(__dirname, '../../src', 'index.client.tsx'));
      const manifestObj = JSON.parse(producedManifest);

      console.log({
        key,
        manifestObj,
        m: manifestObj[key],
      });
      // file:///Users/sibelius/Dev/entria/feedback/rsc/server-components-boilerplate/src/index.client.tsx
      //   file:///Users/sibelius/Dev/entria/feedback/rsc/server-components-boilerplate/plugin/src/index.client.ts

      const clientPath = './src';

      expect(manifestObj[key]).toStrictEqual(
        expect.objectContaining({
          '': {
            chunks: ['main'],
            id: `${clientPath}/index.client.tsx`,
            name: '',
          },
          '*': {
            chunks: ['main'],
            id: `${clientPath}/index.client.tsx`,
            name: '*',
          },
        }),
      );

      done();
    });
  });

  test.skip('produces manifest - webpack v5', (done) => {
    const entry = path.resolve(path.join(__dirname, 'fixture', 'entry.js'));
    const { webpack, FlightPlugin } = getDependencies('wp5');

    const plugin = new FlightPlugin({ isServer: false });
    const fileName = plugin.manifestFilename;

    const output = webpack({
      entry: {
        main: entry,
        client: path.resolve(path.join(__dirname, 'fixture', 'Form.client.js')),
      },
      plugins: [plugin],
      cache: undefined,
      output: {
        // Output
        path: path.resolve(path.join(os.tmpdir(), 'output+2')),
        // Make webpack always want to emit files, regardless if they exist or not
        // This aids in development of the tests, as webpack 5 will not emit fi the file is already existing.
        compareBeforeEmit: false,
      },
      mode: 'development',
    });

    const originalFileSystem = output.outputFileSystem;

    output.outputFileSystem = {
      ...originalFileSystem,
      writeFile: jest.fn((dest, contents, cb) => {
        // Call the callback, but don't actually write anything.
        cb(null);
      }),
    };

    output.run((err, stats) => {
      expect(err).toBeNull();

      expect(output.outputFileSystem.writeFile).toHaveBeenCalledWith(
        expect.stringContaining(fileName),
        expect.anything(),
        expect.anything(),
      );
      const calls = output.outputFileSystem.writeFile.mock.calls;
      // Get the idx that was called with the fileName,
      const idx = calls.findIndex((val) => {
        return val[0].includes(fileName);
      });

      const contents = output.outputFileSystem.writeFile.mock.calls[
        idx
      ][1].toString();

      // Check that the contents match with what we expect
      assert(contents);
      done();
    });
  });
});

function assert(manifestContents) {
  const key =
    'file://' + path.resolve(path.join(__dirname, 'fixture', 'Form.client.js'));
  const manifestObj = JSON.parse(manifestContents);

  expect(manifestObj[key]).toStrictEqual(
    expect.objectContaining({
      '': {
        chunks: ['client'],
        id: `${fixturePath}/Form.client.js`,
        name: '',
      },
      '*': {
        chunks: ['client'],
        id: `${fixturePath}/Form.client.js`,
        name: '*',
      },
      Form: {
        chunks: ['client'],
        id: `${fixturePath}/Form.client.js`,
        name: 'Form',
      },
    }),
  );
}


================================================
FILE: examples/with-react-server-components/plugin/__tests__/fixture/Form.client.js
================================================
export function Form() {
  console.log('Form Rendered!');
}


================================================
FILE: examples/with-react-server-components/plugin/__tests__/fixture/FormServer.server.js
================================================
export default function Foo() {
  console.log('Form!');
}


================================================
FILE: examples/with-react-server-components/plugin/__tests__/fixture/entry.js
================================================
const ClientComponent = require('./Form.client').Form;
const ServerComponent = require('./FormServer.server.js');

console.log(ClientComponent, ServerComponent);


================================================
FILE: examples/with-react-server-components/plugin/__tests__/fixture/package.json
================================================
{
"name": "fixture"
}


================================================
FILE: examples/with-react-server-components/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="theme-color" content="#000000" />
    <link rel="stylesheet" href="<%= process.env.PUBLIC_PATH %>style.css" />
    <%= htmlWebpackPlugin.tags.headTags %>
    <!--
        Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
        It will be replaced with the URL of the `public` folder during the build.
        Only files inside the `public` folder can be referenced from the HTML.
        Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
        work correctly both with client-side routing and a non-root public URL.
        Learn how to configure a non-root public URL by running `npm run build`.
      -->
    <title>React App</title>
  </head>

  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
        This HTML file is a template.
        If you open it directly in the browser, you will see an empty page.
        You can add webfonts, meta tags, or analytics to this file.
        The build step will place the bundled scripts into the <body> tag.
        To begin the development, run `npm start` or `yarn start`.
        To create a production bundle, use `npm run build` or `yarn build`.
      -->
      <%= htmlWebpackPlugin.tags.bodyTags %>
  </body>

</html>


================================================
FILE: examples/with-react-server-components/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-react-server-components/public/style.css
================================================
/* -------------------------------- CSSRESET --------------------------------*/
/* CSS Reset adapted from https://dev.to/hankchizljaw/a-modern-css-reset-6p3 */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-block-start: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* -------------------------------- /CSSRESET --------------------------------*/

:root {
  /* Colors */
  --main-border-color: #ddd;
  --primary-border: #037dba;
  --gray-20: #404346;
  --gray-60: #8a8d91;
  --gray-70: #bcc0c4;
  --gray-80: #c9ccd1;
  --gray-90: #e4e6eb;
  --gray-95: #f0f2f5;
  --gray-100: #f5f7fa;
  --primary-blue: #037dba;
  --secondary-blue: #0396df;
  --tertiary-blue: #c6efff;
  --flash-blue: #4cf7ff;
  --outline-blue: rgba(4, 164, 244, 0.6);
  --navy-blue: #035e8c;
  --red-25: #bd0d2a;
  --secondary-text: #65676b;
  --white: #fff;
  --yellow: #fffae1;

  --outline-box-shadow: 0 0 0 2px var(--outline-blue);
  --outline-box-shadow-contrast: 0 0 0 2px var(--navy-blue);

  /* Fonts */
  --sans-serif: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Ubuntu, Helvetica, sans-serif;
  --monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console,
    monospace;
}

html {
  font-size: 100%;
}

body {
  font-family: var(--sans-serif);
  background: var(--gray-100);
  font-weight: 400;
  line-height: 1.75;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
}

h1 {
  font-size: 3.052rem;
}
h2 {
  font-size: 2.441rem;
}
h3 {
  font-size: 1.953rem;
}
h4 {
  font-size: 1.563rem;
}
h5 {
  font-size: 1.25rem;
}
small,
.text_small {
  font-size: 0.8rem;
}
pre,
code {
  font-family: var(--monospace);
  border-radius: 6px;
}
pre {
  background: var(--gray-95);
  padding: 12px;
  line-height: 1.5;
}
code {
  background: var(--yellow);
  padding: 0 3px;
  font-size: 0.94rem;
  word-break: break-word;
}
pre code {
  background: none;
}
a {
  color: var(--primary-blue);
}

.text-with-markdown h1,
.text-with-markdown h2,
.text-with-markdown h3,
.text-with-markdown h4,
.text-with-markdown h5 {
  margin-block: 2rem 0.7rem;
  margin-inline: 0;
}

.text-with-markdown blockquote {
  font-style: italic;
  color: var(--gray-20);
  border-left: 3px solid var(--gray-80);
  padding-left: 10px;
}

hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------------------------------*/
.main {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.col {
  height: 100%;
}
.col:last-child {
  flex-grow: 1;
}

.logo {
  height: 20px;
  width: 22px;
  margin-inline-end: 10px;
}

.edit-button {
  border-radius: 100px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 20px 8px;
  cursor: pointer;
  font-weight: 700;
  outline-style: none;
}
.edit-button--solid {
  background: var(--primary-blue);
  color: var(--white);
  border: none;
  margin-inline-start: 6px;
  transition: all 0.2s ease-in-out;
}
.edit-button--solid:hover {
  background: var(--secondary-blue);
}
.edit-button--solid:focus {
  box-shadow: var(--outline-box-shadow-contrast);
}
.edit-button--outline {
  background: var(--white);
  color: var(--primary-blue);
  border: 1px solid var(--primary-blue);
  margin-inline-start: 12px;
  transition: all 0.1s ease-in-out;
}
.edit-button--outline:disabled {
  opacity: 0.5;
}
.edit-button--outline:hover:not([disabled]) {
  background: var(--primary-blue);
  color: var(--white);
}
.edit-button--outline:focus {
  box-shadow: var(--outline-box-shadow);
}

ul.notes-list {
  padding: 16px 0;
}
.notes-list > li {
  padding: 0 16px;
}
.notes-empty {
  padding: 16px;
}

.sidebar {
  background: var(--white);
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.1), 0px 2px 2px rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
  z-index: 1000;
  flex-shrink: 0;
  max-width: 350px;
  min-width: 250px;
  width: 30%;
}
.sidebar-header {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 36px 16px 16px;
  display: flex;
  align-items: center;
}
.sidebar-menu {
  padding: 0 16px 16px;
  display: flex;
  justify-content: space-between;
}
.sidebar-menu > .search {
  position: relative;
  flex-grow: 1;
}
.sidebar-note-list-item {
  position: relative;
  margin-bottom: 12px;
  padding: 16px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-height: 100px;
  transition: max-height 250ms ease-out;
  transform: scale(1);
}
.sidebar-note-list-item.note-expanded {
  max-height: 300px;
  transition: max-height 0.5s ease;
}
.sidebar-note-list-item.flash {
  animation-name: flash;
  animation-duration: 0.6s;
}

.sidebar-note-open {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
  border: none;
  border-radius: 6px;
  text-align: start;
  background: var(--gray-95);
  cursor: pointer;
  outline-style: none;
  color: transparent;
  font-size: 0px;
}
.sidebar-note-open:focus {
  box-shadow: var(--outline-box-shadow);
}
.sidebar-note-open:hover {
  background: var(--gray-90);
}
.sidebar-note-header {
  z-index: 1;
  max-width: 85%;
  pointer-events: none;
}
.sidebar-note-header > strong {
  display: block;
  font-size: 1.25rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-note-toggle-expand {
  z-index: 2;
  border-radius: 50%;
  height: 24px;
  border: 1px solid var(--gray-60);
  cursor: pointer;
  flex-shrink: 0;
  visibility: hidden;
  opacity: 0;
  cursor: default;
  transition: visibility 0s linear 20ms, opacity 300ms;
  outline-style: none;
}
.sidebar-note-toggle-expand:focus {
  box-shadow: var(--outline-box-shadow);
}
.sidebar-note-open:hover + .sidebar-note-toggle-expand,
.sidebar-note-open:focus + .sidebar-note-toggle-expand,
.sidebar-note-toggle-expand:hover,
.sidebar-note-toggle-expand:focus {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0s, opacity 300ms;
}
.sidebar-note-toggle-expand img {
  width: 10px;
  height: 10px;
}

.sidebar-note-excerpt {
  pointer-events: none;
  z-index: 2;
  flex: 1 1 250px;
  color: var(--secondary-text);
  position: relative;
  animation: slideIn 100ms;
}

.search input {
  padding: 0 16px;
  border-radius: 100px;
  border: 1px solid var(--gray-90);
  width: 100%;
  height: 100%;
  outline-style: none;
}
.search input:focus {
  box-shadow: var(--outline-box-shadow);
}
.search .spinner {
  position: absolute;
  right: 10px;
  top: 10px;
}

.note-viewer {
  display: flex;
  align-items: center;
  justify-content: center;
}
.note {
  background: var(--white);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  height: 95%;
  width: 95%;
  min-width: 400px;
  padding: 8%;
  overflow-y: auto;
}
.note--empty-state {
  margin-inline: 20px 20px;
}
.note-text--empty-state {
  font-size: 1.5rem;
}
.note-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap-reverse;
  margin-inline-start: -12px;
}
.note-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}
.note-title {
  line-height: 1.3;
  flex-grow: 1;
  overflow-wrap: break-word;
  margin-inline-start: 12px;
}
.note-updated-at {
  color: var(--secondary-text);
  white-space: nowrap;
  margin-inline-start: 12px;
}
.note-preview {
  margin-block-start: 50px;
}

.note-editor {
  background: var(--white);
  display: flex;
  height: 100%;
  width: 100%;
  padding: 58px;
  overflow-y: auto;
}
.note-editor .label {
  margin-bottom: 20px;
}
.note-editor-form {
  display: flex;
  flex-direction: column;
  width: 400px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}
.note-editor-form input,
.note-editor-form textarea {
  background: none;
  border: 1px solid var(--gray-70);
  border-radius: 2px;
  font-family: var(--monospace);
  font-size: 0.8rem;
  padding: 12px;
  outline-style: none;
}
.note-editor-form input:focus,
.note-editor-form textarea:focus {
  box-shadow: var(--outline-box-shadow);
}
.note-editor-form input {
  height: 44px;
  margin-bottom: 16px;
}
.note-editor-form textarea {
  height: 100%;
  max-width: 400px;
}
.note-editor-menu {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 12px;
}
.note-editor-preview {
  margin-inline-start: 40px;
  width: 100%;
}
.note-editor-done,
.note-editor-delete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 100px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 20px 8px;
  cursor: pointer;
  font-weight: 700;
  margin-inline-start: 12px;
  outline-style: none;
  transition: all 0.2s ease-in-out;
}
.note-editor-done:disabled,
.note-editor-delete:disabled {
  opacity: 0.5;
}
.note-editor-done {
  border: none;
  background: var(--primary-blue);
  color: var(--white);
}
.note-editor-done:focus {
  box-shadow: var(--outline-box-shadow-contrast);
}
.note-editor-done:hover:not([disabled]) {
  background: var(--secondary-blue);
}
.note-editor-delete {
  border: 1px solid var(--red-25);
  background: var(--white);
  color: var(--red-25);
}
.note-editor-delete:focus {
  box-shadow: var(--outline-box-shadow);
}
.note-editor-delete:hover:not([disabled]) {
  background: var(--red-25);
  color: var(--white);
}
/* Hack to color our svg */
.note-editor-delete:hover:not([disabled]) img {
  filter: grayscale(1) invert(1) brightness(2);
}
.note-editor-done > img {
  width: 14px;
}
.note-editor-delete > img {
  width: 10px;
}
.note-editor-done > img,
.note-editor-delete > img {
  margin-inline-end: 12px;
}
.note-editor-done[disabled],
.note-editor-delete[disabled] {
  opacity: 0.5;
}

.label {
  display: inline-block;
  border-radius: 100px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 14px;
}
.label--preview {
  background: rgba(38, 183, 255, 0.15);
  color: var(--primary-blue);
}

.text-with-markdown p {
  margin-bottom: 16px;
}
.text-with-markdown img {
  width: 100%;
}

/* https://codepen.io/mandelid/pen/vwKoe */
.spinner {
  display: inline-block;
  transition: opacity linear 0.1s;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(80, 80, 80, 0.5);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  opacity: 0;
}
.spinner--active {
  opacity: 1;
}

.skeleton::after {
  content: 'Loading...';
}
.skeleton {
  height: 100%;
  background-color: #eee;
  background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  border-radius: 4px;
  display: block;
  line-height: 1;
  width: 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  color: transparent;
}
.skeleton:first-of-type {
  margin: 0;
}
.skeleton--button {
  border-radius: 100px;
  padding: 6px 20px 8px;
  width: auto;
}
.v-stack + .v-stack {
  margin-block-start: 0.8em;
}

.offscreen {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  position: absolute;
}

/* ---------------------------------------------------------------------------*/
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes slideIn {
  0% {
    top: -10px;
    opacity: 0;
  }
  100% {
    top: 0;
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


================================================
FILE: examples/with-react-server-components/razzle.config.js
================================================
'use strict';

const path = require('path');
const { StatsWriterPlugin } = require("webpack-stats-plugin")
const ReactServerWebpackPlugin = require('./plugin/ReactFlightWebpackPlugin')
  .default;

module.exports = {
  options: {
    verbose: true,
    enableBabelCache: false,
  },
  modifyPaths(opts) {
    const paths = opts.paths;
    paths.appServerIndexJs = path.join(paths.appPath, 'src/cli.server');
    paths.appClientIndexJs = path.join(paths.appPath, 'src/index.client');
    return paths;
  },
  modifyWebpackOptions(opts) {
    const options = opts.options.webpackOptions;

    // Enable HtmlWebpackPlugin in iso app
    if (opts.env.target === 'web') {
      options.enableHtmlWebpackPlugin = true;
    }
    if (opts.env.target === 'node' && opts.env.dev) {
      options.startServerOptions.nodeArgs.push('--conditions=react-server');
    }
    if (opts.env.target === 'node') {
      options.jsOutputFilename = `[name].server.js`;
      options.jsOutputChunkFilename = `[name].chunk.server.js`;
    }
    return options;
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    const options = opts.options.webpackOptions;

    config.output.futureEmitAssets = true;

    // Enable StatsWriterPlugin
    if (opts.env.target === 'web') {
      config.plugins = config.plugins.concat([
        new ReactServerWebpackPlugin({isServer: false})
      ]);
    }

    if (opts.env.target === 'node') {
      config.module.rules.unshift({
        ...options.babelRule,
        test: /\.client.(js|jsx|ts|tsx)?$/,
        use: [...[
          {
            loader: require.resolve('./plugin/ReactFlightWebpackLoader'),
          }],...options.babelRule.use]
      })
    }
    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.writeToDisk = true;
    }

    if (!opts.env.dev) {
      config.optimization = {...config.optimization, ...{minimize: false}};
    }
    return config;
  },
}


================================================
FILE: examples/with-react-server-components/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-react-server-components/scripts/seed.js
================================================

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

'use strict';

const fs = require('fs');
const path = require('path');
const {readdir, unlink, writeFile} = require('fs/promises');
const startOfYear = require('date-fns/startOfYear');
const sqlite  =   require('better-sqlite3');

const NOTES_PATH = './notes';

const db = sqlite(path.join(process.cwd(), 'db.sqlite3'))

const now = new Date();
const startOfThisYear = startOfYear(now);
// Thanks, https://stackoverflow.com/a/9035732
function randomDateBetween(start, end) {
  return new Date(
    start.getTime() + Math.random() * (end.getTime() - start.getTime())
  );
}

const dropTableStatement = 'DROP TABLE IF EXISTS notes;';
const createTableStatement = `CREATE TABLE notes (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  created_at TIMESTAMP NOT NULL,
  updated_at TIMESTAMP NOT NULL,
  title TEXT,
  body TEXT
);`;
const insertNoteStatement = `INSERT INTO notes(title, body, created_at, updated_at)
  VALUES (?, ?, ?, ?)`;

const selectTable = 'SELECT * FROM notes';

const seedData = [
  [
    'Meeting Notes',
    'This is an example note. It contains **Markdown**!',
    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],
    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],
  ],
  [
    'Make a thing',
    `It's very easy to make some words **bold** and other words *italic* with
Markdown. You can even [link to React's website!](https://www.reactjs.org).`,
    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],
    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],
  ],
  [
    'A note with a very long title because sometimes you need more words',
    `You can write all kinds of [amazing](https://en.wikipedia.org/wiki/The_Amazing)
notes in this app! These note live on the server in the \`notes\` folder.
![This app is powered by React](https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/React_Native_Logo.png/800px-React_Native_Logo.png)`,
    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],
    randomDateBetween(startOfThisYear, now).toISOString().split('T')[0],
  ],
  ['I wrote this note today', 'It was an excellent note.', now.toISOString().split('T')[0], now.toISOString().split('T')[0]],
];

async function seed() {
  db.exec(dropTableStatement);
  db.exec(createTableStatement);
  seedData.map((row) => db.prepare(insertNoteStatement).run(row))

  const res = db.prepare(selectTable).all();
  console.log(res)
  const oldNotes = await readdir(path.resolve(NOTES_PATH));
  await Promise.all(
    oldNotes
      .filter((filename) => filename.endsWith('.md'))
      .map((filename) => unlink(path.resolve(NOTES_PATH, filename)))
  );

  await Promise.all(
    res.map((row) => {
      const id = row.id;
      const content = row.body;
      const data = new Uint8Array(Buffer.from(content));
      return writeFile(path.resolve(NOTES_PATH, `${id}.md`), data, (err) => {
        if (err) {
          throw err;
        }
      });
    })
  );
}

seed();


================================================
FILE: examples/with-react-server-components/src/App.server.tsx
================================================
import { Suspense } from 'react';

import Note from './Note.server';
import NoteList from './NoteList.server';
import EditButton from './EditButton.client';
import SearchField from './SearchField.client';
import NoteSkeleton from './NoteSkeleton';
import NoteListSkeleton from './NoteListSkeleton';

export default function App({ selectedId, isEditing, searchText }) {
  return (
    <div className="main">
      <section className="col sidebar">
        <section className="sidebar-header">
          <img
            className="logo"
            src="logo.svg"
            width="22px"
            height="20px"
            alt=""
            role="presentation"
          />
          <strong>React Notes</strong>
        </section>
        <section className="sidebar-menu" role="menubar">
          <SearchField />
          <EditButton noteId={null}>New</EditButton>
        </section>
        <nav>
          <Suspense fallback={<NoteListSkeleton />}>
            <NoteList searchText={searchText} />
          </Suspense>
        </nav>
      </section>
      <section key={selectedId} className="col note-viewer">
        <Suspense fallback={<NoteSkeleton isEditing={isEditing} />}>
          <Note selectedId={selectedId} isEditing={isEditing} />
        </Suspense>
      </section>
    </div>
  );
}


================================================
FILE: examples/with-react-server-components/src/Cache.client.tsx
================================================
import { unstable_getCacheForType, unstable_useCacheRefresh } from 'react';
import { createFromFetch } from 'react-server-dom-webpack';

function createResponseCache() {
  return new Map();
}

export function useRefresh() {
  const refreshCache = unstable_useCacheRefresh();
  return function refresh(key, seededResponse) {
    refreshCache(createResponseCache, new Map([[key, seededResponse]]));
  };
}

export function useServerResponse(location) {
  const key = JSON.stringify(location);
  const cache = unstable_getCacheForType(createResponseCache);
  let response = cache.get(key);
  if (response) {
    return response;
  }
  response = createFromFetch(
    fetch('/react?location=' + encodeURIComponent(key)),
  );
  cache.set(key, response);
  return response;
}


================================================
FILE: examples/with-react-server-components/src/EditButton.client.tsx
================================================
import { unstable_useTransition } from 'react';

import { useLocation } from './LocationContext.client';

export default function EditButton({ noteId, children }) {
  const [, setLocation] = useLocation();
  const [startTransition, isPending] = unstable_useTransition();
  const isDraft = noteId == null;
  return (
    <button
      className={[
        'edit-button',
        isDraft ? 'edit-button--solid' : 'edit-button--outline',
      ].join(' ')}
      disabled={isPending}
      onClick={() => {
        startTransition(() => {
          setLocation((loc) => ({
            selectedId: noteId,
            isEditing: true,
            searchText: loc.searchText,
          }));
        });
      }}
      role="menuitem"
    >
      {children}
    </button>
  );
}


================================================
FILE: examples/with-react-server-components/src/LocationContext.client.tsx
================================================
import { createContext, useContext } from 'react';

console.log({
  createContext,
  useContext,
});

export const LocationContext = createContext();
export function useLocation() {
  return useContext(LocationContext);
}


================================================
FILE: examples/with-react-server-components/src/Note.server.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { fetch } from 'react-fetch';
import { readFile } from 'react-fs';
import { format } from 'date-fns';
import path from 'path';

import { db } from './db.server';
import NotePreview from './NotePreview';
import EditButton from './EditButton.client';
import NoteEditor from './NoteEditor.client';

export default function Note({ selectedId, isEditing }) {
  const note =
    selectedId != null
      ? fetch(`http://localhost:3000/notes/${selectedId}`).json()
      : null;

  if (note === null) {
    if (isEditing) {
      return (
        <NoteEditor noteId={null} initialTitle="Untitled" initialBody="" />
      );
    } else {
      return (
        <div className="note--empty-state">
          <span className="note-text--empty-state">
            Click a note on the left to view something! 🥺
          </span>
        </div>
      );
    }
  }

  let { id, title, body, updated_at } = note;
  const updatedAt = new Date(updated_at);

  // We could also read from a file instead.
  // body = readFile(path.resolve(`./notes/${note.id}.md`), 'utf8');

  // Now let's see how the Suspense boundary above lets us not block on this.
  // fetch('http://localhost:4000/sleep/3000');

  if (isEditing) {
    return <NoteEditor noteId={id} initialTitle={title} initialBody={body} />;
  } else {
    return (
      <div className="note">
        <div className="note-header">
          <h1 className="note-title">{title}</h1>
          <div className="note-menu" role="menubar">
            <small className="note-updated-at" role="status">
              Last updated on {format(updatedAt, "d MMM yyyy 'at' h:mm bb")}
            </small>
            <EditButton noteId={id}>Edit</EditButton>
          </div>
        </div>
        <NotePreview body={body} />
      </div>
    );
  }
}


================================================
FILE: examples/with-react-server-components/src/NoteEditor.client.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { useState, unstable_useTransition } from 'react';
import { createFromReadableStream } from 'react-server-dom-webpack';

import NotePreview from './NotePreview';
import { useRefresh } from './Cache.client';
import { useLocation } from './LocationContext.client';

export default function NoteEditor({ noteId, initialTitle, initialBody }) {
  const refresh = useRefresh();
  const [title, setTitle] = useState(initialTitle);
  const [body, setBody] = useState(initialBody);
  const [location, setLocation] = useLocation();
  const [startNavigating, isNavigating] = unstable_useTransition();
  const [isSaving, saveNote] = useMutation({
    endpoint: noteId !== null ? `/notes/${noteId}` : `/notes`,
    method: noteId !== null ? 'PUT' : 'POST',
  });
  const [isDeleting, deleteNote] = useMutation({
    endpoint: `/notes/${noteId}`,
    method: 'DELETE',
  });

  async function handleSave() {
    const payload = { title, body };
    const requestedLocation = {
      selectedId: noteId,
      isEditing: false,
      searchText: location.searchText,
    };
    const response = await saveNote(payload, requestedLocation);
    navigate(response);
  }

  async function handleDelete() {
    const payload = {};
    const requestedLocation = {
      selectedId: null,
      isEditing: false,
      searchText: location.searchText,
    };
    const response = await deleteNote(payload, requestedLocation);
    navigate(response);
  }

  function navigate(response) {
    const cacheKey = response.headers.get('X-Location');
    const nextLocation = JSON.parse(cacheKey);
    const seededResponse = createFromReadableStream(response.body);
    startNavigating(() => {
      refresh(cacheKey, seededResponse);
      setLocation(nextLocation);
    });
  }

  const isDraft = noteId === null;
  return (
    <div className="note-editor">
      <form
        className="note-editor-form"
        autoComplete="off"
        onSubmit={(e) => e.preventDefault()}
      >
        <label className="offscreen" htmlFor="note-title-input">
          Enter a title for your note
        </label>
        <input
          id="note-title-input"
          type="text"
          value={title}
          onChange={(e) => {
            setTitle(e.target.value);
          }}
        />
        <label className="offscreen" htmlFor="note-body-input">
          Enter the body for your note
        </label>
        <textarea
          id="note-body-input"
          value={body}
          onChange={(e) => {
            setBody(e.target.value);
          }}
        />
      </form>
      <div className="note-editor-preview">
        <div className="note-editor-menu" role="menubar">
          <button
            className="note-editor-done"
            disabled={isSaving || isNavigating}
            onClick={() => handleSave()}
            role="menuitem"
          >
            <img
              src="checkmark.svg"
              width="14px"
              height="10px"
              alt=""
              role="presentation"
            />
            Done
          </button>
          {!isDraft && (
            <button
              className="note-editor-delete"
              disabled={isDeleting || isNavigating}
              onClick={() => handleDelete()}
              role="menuitem"
            >
              <img
                src="cross.svg"
                width="10px"
                height="10px"
                alt=""
                role="presentation"
              />
              Delete
            </button>
          )}
        </div>
        <div className="label label--preview" role="status">
          Preview
        </div>
        <h1 className="note-title">{title}</h1>
        <NotePreview title={title} body={body} />
      </div>
    </div>
  );
}

function useMutation({ endpoint, method }) {
  const [isSaving, setIsSaving] = useState(false);
  const [didError, setDidError] = useState(false);
  const [error, setError] = useState(null);
  if (didError) {
    // Let the nearest error boundary handle errors while saving.
    throw error;
  }

  async function performMutation(payload, requestedLocation) {
    setIsSaving(true);
    try {
      const response = await fetch(
        `${endpoint}?location=${encodeURIComponent(
          JSON.stringify(requestedLocation),
        )}`,
        {
          method,
          body: JSON.stringify(payload),
          headers: {
            'Content-Type': 'application/json',
          },
        },
      );
      if (!response.ok) {
        throw new Error(await response.text());
      }
      return response;
    } catch (e) {
      setDidError(true);
      setError(e);
    } finally {
      setIsSaving(false);
    }
  }

  return [isSaving, performMutation];
}


================================================
FILE: examples/with-react-server-components/src/NoteList.server.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { fetch } from 'react-fetch';

import SidebarNote from './SidebarNote';

export default function NoteList({ searchText }) {
  const notes = fetch('http://localhost:3000/notes').json();

  // Now let's see how the Suspense boundary above lets us not block on this.
  // fetch('/sleep/3000');

  return notes.length > 0 ? (
    <ul className="notes-list">
      {notes.map((note) => (
        <li key={note.id}>
          <SidebarNote note={note} />
        </li>
      ))}
    </ul>
  ) : (
    <div className="notes-empty">
      {searchText
        ? `Couldn't find any notes titled "${searchText}".`
        : 'No notes created yet!'}{' '}
    </div>
  );
}


================================================
FILE: examples/with-react-server-components/src/NoteListSkeleton.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

export default function NoteListSkeleton() {
  return (
    <div>
      <ul className="notes-list skeleton-container">
        <li className="v-stack">
          <div
            className="sidebar-note-list-item skeleton"
            style={{ height: '5em' }}
          />
        </li>
        <li className="v-stack">
          <div
            className="sidebar-note-list-item skeleton"
            style={{ height: '5em' }}
          />
        </li>
        <li className="v-stack">
          <div
            className="sidebar-note-list-item skeleton"
            style={{ height: '5em' }}
          />
        </li>
      </ul>
    </div>
  );
}


================================================
FILE: examples/with-react-server-components/src/NotePreview.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import TextWithMarkdown from './TextWithMarkdown';

export default function NotePreview({ body }) {
  return (
    <div className="note-preview">
      <TextWithMarkdown text={body} />
    </div>
  );
}


================================================
FILE: examples/with-react-server-components/src/NoteSkeleton.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

function NoteEditorSkeleton() {
  return (
    <div
      className="note-editor skeleton-container"
      role="progressbar"
      aria-busy="true"
    >
      <div className="note-editor-form">
        <div className="skeleton v-stack" style={{ height: '3rem' }} />
        <div className="skeleton v-stack" style={{ height: '100%' }} />
      </div>
      <div className="note-editor-preview">
        <div className="note-editor-menu">
          <div
            className="skeleton skeleton--button"
            style={{ width: '8em', height: '2.5em' }}
          />
          <div
            className="skeleton skeleton--button"
            style={{ width: '8em', height: '2.5em', marginInline: '12px 0' }}
          />
        </div>
        <div
          className="note-title skeleton"
          style={{ height: '3rem', width: '65%', marginInline: '12px 1em' }}
        />
        <div className="note-preview">
          <div className="skeleton v-stack" style={{ height: '1.5em' }} />
          <div className="skeleton v-stack" style={{ height: '1.5em' }} />
          <div className="skeleton v-stack" style={{ height: '1.5em' }} />
          <div className="skeleton v-stack" style={{ height: '1.5em' }} />
          <div className="skeleton v-stack" style={{ height: '1.5em' }} />
        </div>
      </div>
    </div>
  );
}

function NotePreviewSkeleton() {
  return (
    <div
      className="note skeleton-container"
      role="progressbar"
      aria-busy="true"
    >
      <div className="note-header">
        <div
          className="note-title skeleton"
          style={{ height: '3rem', width: '65%', marginInline: '12px 1em' }}
        />
        <div
          className="skeleton skeleton--button"
          style={{ width: '8em', height: '2.5em' }}
        />
      </div>
      <div className="note-preview">
        <div className="skeleton v-stack" style={{ height: '1.5em' }} />
        <div className="skeleton v-stack" style={{ height: '1.5em' }} />
        <div className="skeleton v-stack" style={{ height: '1.5em' }} />
        <div className="skeleton v-stack" style={{ height: '1.5em' }} />
        <div className="skeleton v-stack" style={{ height: '1.5em' }} />
      </div>
    </div>
  );
}

export default function NoteSkeleton({ isEditing }) {
  return isEditing ? <NoteEditorSkeleton /> : <NotePreviewSkeleton />;
}


================================================
FILE: examples/with-react-server-components/src/Root.client.tsx
================================================
import { useState, Suspense } from 'react';
import { ErrorBoundary } from 'react-error-boundary';

import { useServerResponse } from './Cache.client';
import { LocationContext } from './LocationContext.client';

export default function Root({ initialCache }) {
  return (
    <Suspense fallback={null}>
      <ErrorBoundary FallbackComponent={Error}>
        <Content />
      </ErrorBoundary>
    </Suspense>
  );
}

function Content() {
  const [location, setLocation] = useState({
    selectedId: null,
    isEditing: false,
    searchText: '',
  });
  const response = useServerResponse(location);
  return (
    <LocationContext.Provider value={[location, setLocation]}>
      {response.readRoot()}
    </LocationContext.Provider>
  );
}

function Error({ error }) {
  return (
    <div>
      <h1>Application Error</h1>
      <pre style={{ whiteSpace: 'pre-wrap' }}>{error.stack}</pre>
    </div>
  );
}


================================================
FILE: examples/with-react-server-components/src/SearchField.client.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { useState, unstable_useTransition } from 'react';

import { useLocation } from './LocationContext.client';
import Spinner from './Spinner';

export default function SearchField() {
  const [text, setText] = useState('');
  const [startSearching, isSearching] = unstable_useTransition(false);
  const [, setLocation] = useLocation();
  return (
    <form className="search" role="search" onSubmit={(e) => e.preventDefault()}>
      <label className="offscreen" htmlFor="sidebar-search-input">
        Search for a note by title
      </label>
      <input
        id="sidebar-search-input"
        placeholder="Search"
        value={text}
        onChange={(e) => {
          const newText = e.target.value;
          setText(newText);
          startSearching(() => {
            setLocation((loc) => ({
              ...loc,
              searchText: newText,
            }));
          });
        }}
      />
      <Spinner active={isSearching} />
    </form>
  );
}


================================================
FILE: examples/with-react-server-components/src/SidebarNote.client.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { useState, useRef, useEffect, unstable_useTransition } from 'react';

import { useLocation } from './LocationContext.client';

export default function SidebarNote({ id, title, children, expandedChildren }) {
  const [location, setLocation] = useLocation();
  const [startTransition, isPending] = unstable_useTransition();
  const [isExpanded, setIsExpanded] = useState(false);
  const isActive = id === location.selectedId;

  // Animate after title is edited.
  const itemRef = useRef(null);
  const prevTitleRef = useRef(title);
  useEffect(() => {
    if (title !== prevTitleRef.current) {
      prevTitleRef.current = title;
      itemRef.current.classList.add('flash');
    }
  }, [title]);

  return (
    <div
      ref={itemRef}
      onAnimationEnd={() => {
        itemRef.current.classList.remove('flash');
      }}
      className={[
        'sidebar-note-list-item',
        isExpanded ? 'note-expanded' : '',
      ].join(' ')}
    >
      {children}
      <button
        className="sidebar-note-open"
        style={{
          backgroundColor: isPending
            ? 'var(--gray-80)'
            : isActive
            ? 'var(--tertiary-blue)'
            : '',
          border: isActive
            ? '1px solid var(--primary-border)'
            : '1px solid transparent',
        }}
        onClick={() => {
          startTransition(() => {
            setLocation((loc) => ({
              selectedId: id,
              isEditing: false,
              searchText: loc.searchText,
            }));
          });
        }}
      >
        Open note for preview
      </button>
      <button
        className="sidebar-note-toggle-expand"
        onClick={(e) => {
          e.stopPropagation();
          setIsExpanded(!isExpanded);
        }}
      >
        {isExpanded ? (
          <img
            src="chevron-down.svg"
            width="10px"
            height="10px"
            alt="Collapse"
          />
        ) : (
          <img src="chevron-up.svg" width="10px" height="10px" alt="Expand" />
        )}
      </button>
      {isExpanded && expandedChildren}
    </div>
  );
}


================================================
FILE: examples/with-react-server-components/src/SidebarNote.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import { format, isToday } from 'date-fns';
import excerpts from 'excerpts';
import marked from 'marked';

import ClientSidebarNote from './SidebarNote.client';

export default function SidebarNote({ note }) {
  const updatedAt = new Date(note.updated_at);
  const lastUpdatedAt = isToday(updatedAt)
    ? format(updatedAt, 'h:mm bb')
    : format(updatedAt, 'M/d/yy');
  const summary = excerpts(marked(note.body), { words: 20 });
  return (
    <ClientSidebarNote
      id={note.id}
      title={note.title}
      expandedChildren={
        <p className="sidebar-note-excerpt">{summary || <i>(No content)</i>}</p>
      }
    >
      <header className="sidebar-note-header">
        <strong>{note.title}</strong>
        <small>{lastUpdatedAt}</small>
      </header>
    </ClientSidebarNote>
  );
}


================================================
FILE: examples/with-react-server-components/src/Spinner.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

export default function Spinner({ active = true }) {
  return (
    <div
      className={['spinner', active && 'spinner--active'].join(' ')}
      role="progressbar"
      aria-busy={active ? 'true' : 'false'}
    />
  );
}


================================================
FILE: examples/with-react-server-components/src/TextWithMarkdown.tsx
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import marked from 'marked';
import sanitizeHtml from 'sanitize-html';

const allowedTags = sanitizeHtml.defaults.allowedTags.concat([
  'img',
  'h1',
  'h2',
  'h3',
]);
const allowedAttributes = Object.assign(
  {},
  sanitizeHtml.defaults.allowedAttributes,
  {
    img: ['alt', 'src'],
  },
);

export default function TextWithMarkdown({ text }) {
  return (
    <div
      className="text-with-markdown"
      dangerouslySetInnerHTML={{
        __html: sanitizeHtml(marked(text), {
          allowedTags,
          allowedAttributes,
        }),
      }}
    />
  );
}


================================================
FILE: examples/with-react-server-components/src/cli.server.js
================================================
import express from 'express';

let app = require('./index.server').default;

if (module.hot) {
  module.hot.accept('./index.server', function() {
    console.log('🔁  HMR Reloading `./index.server`...');
    try {
      app = require('./index.server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-react-server-components/src/db.server.ts
================================================
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

import path from 'path'
import sqlite from 'better-sqlite3'

export const db = sqlite(path.join(process.cwd(), 'db.sqlite3'))


================================================
FILE: examples/with-react-server-components/src/index.client.tsx
================================================
import { unstable_createRoot } from 'react-dom';
import Root from './Root.client';

const initialCache = new Map();
const root = unstable_createRoot(document.getElementById('root'));
root.render(<Root initialCache={initialCache} />);


================================================
FILE: examples/with-react-server-components/src/index.server.ts
================================================
import express from 'express';
import compress from 'compression';
import { readFileSync } from 'fs';
import fs from 'fs';
import { pipeToNodeWritable } from 'react-server-dom-webpack/writer';
import path from 'path';
import React from 'react';
import ReactApp from './App.server';

const { unlink, writeFile } = fs.promises;

const { db } = require('./db.server');


db.exec(`CREATE TABLE IF NOT EXISTS notes (
  id SERIAL PRIMARY KEY,
  created_at TIMESTAMP NOT NULL,
  updated_at TIMESTAMP NOT NULL,
  title TEXT,
  body TEXT
);`);

const app = express();

app.use(compress());
app.use(express.json());

function handleErrors(fn) {
  return async function (req, res, next) {
    try {
      return await fn(req, res);
    } catch (x) {
      next(x);
    }
  };
}

app.get(
  '/',
  handleErrors(async function (_req, res) {
    await waitForWebpack();
    const html = readFileSync(
      path.resolve(__dirname, '../build/public/index.html'),
      'utf8',
    );

    // Note: this is sending an empty HTML shell, like a client-side-only app.
    // However, the intended solution (which isn't built out yet) is to read
    // from the Server endpoint and turn its response into an HTML stream.
    res.send(html);
  }),
);

async function renderReactTree(res, props) {
  await waitForWebpack();
  const manifest = readFileSync(
    path.resolve(__dirname, '../build/public/react-client-manifest.json'),
    'utf8',
  );
  const moduleMap = JSON.parse(manifest);
  pipeToNodeWritable(React.createElement(ReactApp, props), res, moduleMap);
}

function sendResponse(req, res, redirectToId) {
  const location = JSON.parse(req.query.location);
  if (redirectToId) {
    location.selectedId = redirectToId;
  }
  res.set('X-Location', JSON.stringify(location));

  renderReactTree(res, {
    selectedId: location.selectedId,
    isEditing: location.isEditing,
    searchText: location.searchText,
  });
}

app.get('/react', function (req, res) {
  sendResponse(req, res, null);
});

const NOTES_PATH = path.resolve(__dirname, '../notes');

app.post(
  '/notes',
  handleErrors(async function(req, res) {
    const now = new Date();
    const insert = db.prepare(
      'INSERT INTO notes (title, body, created_at, updated_at) VALUES (?, ?, ?, ?)').bind(
        req.body.title, req.body.body, now.toISOString().split('T')[0], now.toISOString().split('T')[0]
      )
      const getid = db.prepare('SELECT last_insert_rowid()')
      const insertGetId = db.transaction(() => {
        insert.run();
        return getid.pluck().get();
      })
      const insertedId = insertGetId();
      await writeFile(
        path.resolve(NOTES_PATH, `${insertedId}.md`),
        req.body.body,
        'utf8'
      );
      sendResponse(req, res, insertedId);
    })
  );

app.put(
  '/notes/:id',
  handleErrors(async function(req, res) {
    const now = new Date();
    const updatedId = Number(req.params.id);
    const update = db.prepare(
      'UPDATE notes set title = ?, body = ?, updated_at = ? WHERE id = ?').bind(
        req.body.title, req.body.body, now.toISOString().split('T')[0], updatedId
      ).run();
      await writeFile(
        path.resolve(NOTES_PATH, `${updatedId}.md`),
        req.body.body,
        'utf8'
      );
      sendResponse(req, res, null);
    })
  );

app.delete(
  '/notes/:id',
  handleErrors(async function(req, res) {
    db.prepare('DELETE FROM notes where id = ?').bind(req.params.id).run();
    await unlink(path.resolve(NOTES_PATH, `${req.params.id}.md`));
    sendResponse(req, res, null);
  })
);

app.get(
  '/notes',
  handleErrors(async function(_req, res) {
    const rows = db.prepare('SELECT * FROM notes ORDER BY id DESC').all();
    res.json(rows);
  })
);

app.get(
  '/notes/:id',
  handleErrors(async function(req, res) {
    const row = db.prepare('SELECT * FROM notes WHERE id = ?').bind(req.params.id).get();;
    res.json(row);
  })
);
app.get('/sleep/:ms', function (req, res) {
  setTimeout(() => {
    res.json({ ok: true });
  }, req.params.ms);
});

app.use(express.static('build/public'));
app.use(express.static('public'));

app.on('error', function (error) {
  if (error.syscall !== 'listen') {
    throw error;
  }
  var bind = typeof port === 'string' ? 'Pipe ' + port : 'Port ' + port;
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
});

async function waitForWebpack() {
  while (true) {
    try {
      readFileSync(path.resolve(__dirname, '../build/public/index.html'));
      return;
    } catch (err) {
      console.log(
        'Could not find webpack build output. Will retry in a second...',
      );
      await new Promise((resolve) => setTimeout(resolve, 1000));
    }
  }
}

export default app;


================================================
FILE: examples/with-reason-react/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store
.bsb.lock

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local
lib
.merlin


================================================
FILE: examples/with-reason-react/README.md
================================================
# Razzle Reason React

## How to use
First install the Reason toolchain ([reason-cli](https://github.com/reasonml/reason-cli)) globally

```bash
npm install -g https://github.com/reasonml/reason-cli/archive/beta-v-1.13.6-bin-darwin.tar.gz
```

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-reason-react with-reason-react

cd with-reason-react
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


#### NOTE: This example takes a while to install. Stick with it.

Now you can go and edit `src/App.re`. When you make changes, your **browser and server** will Hot Reload.


## Idea behind the example
This 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.

## Secret sauce
This 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.

Since 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`.

```reason
/* /src/App.re */
type state = {count: int};

type action =
  | Increment
  | Decrement;

let component = ReasonReact.reducerComponent "App";

/* underscore before names indicate unused variables. We name them for clarity */
let make ::title _children => {
  ...component,
  initialState: fun () => {count: 0},
  reducer: fun action state =>
    switch action {
    | Increment => ReasonReact.Update {...state, count: state.count + 1}
    | Decrement => ReasonReact.Update {...state, count: state.count - 1}
    },
  render: fun self => {
    let message = "Count: " ^ string_of_int self.state.count;
    <div className="App">
      <div className="App-header">
        <div style=(ReactDOMRe.Style.make backgroundColor::"#db4d3f" cursor::"pointer" ())>
          <svg className="App-logo" viewBox="0 0 841.9 595.3" alt="logo">
            <g fill="#fff">
              <path
                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"
              />
              <circle cx="420.9" cy="296.5" r="45.7" />
              <path d="M520.5 78.1z" />
            </g>
          </svg>
        </div>
        <h2 style=(ReactDOMRe.Style.make marginLeft::"30px" fontSize::"2em" ())>
          (ReasonReact.stringToElement title)
        </h2>
      </div>
      <p className="App-intro">
        <code> (ReasonReact.stringToElement "src/App.re") </code>
        (
          ReasonReact.stringToElement ". When you make edits, both the server and broswer will hot reload."
        )
      </p>
      <div className="App-intro">
        (ReasonReact.stringToElement message)
        <button onClick=(self.reduce (fun _event => Increment))>
          (ReasonReact.stringToElement "+")
        </button>
        <button onClick=(self.reduce (fun _event => Decrement))>
          (ReasonReact.stringToElement "-")
        </button>
      </div>
    </div>
  }
};

let comp =
  ReasonReact.wrapReasonForJs ::component (fun jsProps => make title::jsProps##title [||]);

```

```js
// src/client.js

// We need to point this to our Reason-React output
const App = require('../lib/js/src/app').comp;

import './client.css';

import React from 'react';
import { render } from 'react-dom';

// No JSX required, it's already in JS.
render(
  React.createElement(App, {
    title: 'Welcome to Razzle Reason React!',
  }),
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}
```


```js
// src/server.js
// We need to point this to our Reason-React output, just like above
const App = require('../lib/js/src/app').comp;

import React from 'react';
import express from 'express';
import path from 'path';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    // Again, no JSX needed
    const markup = renderToString(
      React.createElement(App, {
        title: 'Welcome to Razzle Reason React',
      })
    );
    res.send(
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle Reason React</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${assets.client.css ? `<link rel="stylesheet" href="${assets.client.css}">` : ''}
        <script src="${assets.client.js}" defer></script>
    </head>
    <body>
        <div id="root">${markup}</div>
    </body>
</html>`
    );
  });

export default server;
```


================================================
FILE: examples/with-reason-react/bsconfig.json
================================================
{
  /* This is the BuckleScript configuration file. Note that this is a comment;
  BuckleScript comes with a JSON parser that supports comments and trailing
  comma. If this screws with your editor highlighting, please tell us by filing
  an issue! */
  "name": "razzle-reason",
  "bsc-flags": ["-bs-no-version-header", "-bs-super-errors"],
  "refmt": 3,
  "package-specs": ["commonjs", "es6"],
  "reason": {
    "react-jsx": 3
  },
  "bs-dependencies": [
    "reason-react",
    "bs-fetch",
    "@glennsl/bs-json",
    "bs-webapi"
  ],
  "sources": [
    {
      "dir": "src",
      "subdirs": true
    }
  ],
  "package-specs": [
    {
      "module": "es6-global",
      "in-source": false
    }
  ]
}


================================================
FILE: examples/with-reason-react/jsconfig.json
================================================
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "bs/*": ["../lib/es6_global/src/*"]
    }
  }
}


================================================
FILE: examples/with-reason-react/package.json
================================================
{
  "name": "razzle-examples-with-reason-react",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "concurrently \"npm run js-watch\" \"npm run bsb-watch\"",
    "js-watch": "razzle start",
    "bsb-watch": "bsb -make-world -w",
    "clean": "bsb -clean-world && rm -rf build",
    "build": "bsb -make-world && razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "reason-react": "^0.8.0"
  },
  "devDependencies": {
    "bs-platform": "7.1.1",
    "@glennsl/bs-json": "^4.0.0",
    "bs-fetch": "^0.5.0",
    "bs-webapi": "^0.15.2",
    "concurrently": "^5.2.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-reason-react/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-reason-react/src/App.re
================================================

[@react.component]
let make = () => {
  let url = ReasonReact.Router.useUrl();

  switch (url.path) {
  | [] => <TopStoriesPage />
  | ["comments", id] => <CommentsPage id=int_of_string(id) />
  | _ => <NotFound />
  };
};


================================================
FILE: examples/with-reason-react/src/CommentList.css
================================================
.CommentList_inline {
  flex-direction: row;
}

.CommentList_muted {
  opacity: 0.3;
}

.CommentList_error {
  color: #ffbbbb;
}

.CommentList_textMuted {
  color: #bbbbbb;
}

.CommentList_comment {
  font-size: 14px;
  margin: 4px;
  padding: 4px;
}

.CommentList_commentBody {
  padding-left: 10px;
  border-left-color: #bbbbbb;
  border-left-width: 1px;
}

.CommentList_disclosure {
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-left: 2px;
  margin-right: 8px;
}

.CommentList_disclosureRow {
  cursor: pointer;
  padding-left: 0px;
  padding-top: 4px;
  padding-bottom: 4px;
}


================================================
FILE: examples/with-reason-react/src/CommentList.re
================================================
open Belt;

open Utils;

requireCSS("../../../src/CommentList.css");

type action =
  | Toggle(option(string));

type state = {collapsed_comments: Set.Int.t};
let initialState = {collapsed_comments: Set.Int.empty};
let toggleComment = (collapsed, idMaybe: option(string)) =>
  switch (idMaybe) {
  | Some(idString) =>
    let id = int_of_string(idString);
    if (Set.Int.has(collapsed, id)) {
      Set.Int.remove(collapsed, id);
    } else {
      Set.Int.add(collapsed, id);
    };
  | None => collapsed
  };
[@react.component]
let make = (~story: StoryData.story_with_comments) => {
  let (state, dispatch) =
    React.useReducer(
      (state, action) =>
        switch (action) {
        | Toggle(commentId) => {
            collapsed_comments:
              toggleComment(state.collapsed_comments, commentId),
          }
        },
      initialState,
    );

  let getCommentIdFromEvent = (event: ReactEvent.Mouse.t) =>
    getAttribute(ReactEvent.Mouse.currentTarget(event), "name");
  let renderCommentText = (textMaybe: option(string)) =>
    switch (textMaybe) {
    | Some(text) => <div dangerouslySetInnerHTML={dangerousHtml(text)} />
    | None => React.string("missing comment")
    };
  let rec renderCommentKids = (comment: StoryData.comment_present) =>
    renderCommentList(comment.kids)
  and renderComment = (id: int) => {
    let commentMaybe = Map.Int.get(story.comments, id);
    <div key={string_of_int(id)}>
      {switch (commentMaybe) {
       | Some(commentPresentOrDeleted) =>
         switch (commentPresentOrDeleted) {
         | StoryData.CommentPresent(comment) =>
           let openComment =
             !Set.Int.has(state.collapsed_comments, comment.id);
           <div className="CommentList_comment">
             <div
               className="CommentList_disclosureRow CommentList_inline"
               name={string_of_int(comment.id)}
               onClick={event =>
                 dispatch(Toggle(getCommentIdFromEvent(event)))
               }>
               <img
                 alt={openComment ? "hide" : "show"}
                 src={
                   openComment
                     ? requireAssetURI("../../../src/disclosure90.png")
                     : requireAssetURI("../../../src/disclosure.png")
                 }
                 className="CommentList_disclosure CommentList_muted"
               />
               <span className="CommentList_muted">
                 {
                   let time = fromNow(comment.time);
                   let by = comment.by;
                   React.string({j| $time by $by|j});
                 }
               </span>
             </div>
             {if (openComment) {
                <div className="CommentList_commentBody">
                  {renderCommentText(comment.text)}
                  {renderCommentKids(comment)}
                </div>;
              } else {
                <noscript />;
              }}
           </div>;
         | StoryData.CommentDeleted(_) =>
           <div className="CommentList_error">
             {React.string(
                "[comment deleted (id=" ++ string_of_int(id) ++ ")]",
              )}
           </div>
         }
       | None =>
         <div className="CommentList_error">
           {React.string(
              "[comment not loaded (id=" ++ string_of_int(id) ++ ")]",
            )}
         </div>
       }}
    </div>;
  }
  and renderCommentList = (commentIds: option(array(int))) =>
    switch (commentIds) {
    | Some(ids) =>
      let commentList = Array.map(ids, id => renderComment(id));
      <div> {React.array(commentList)} </div>;
    | None => <div />
    };
  renderCommentList(story.kids);
};


================================================
FILE: examples/with-reason-react/src/CommentsPage.css
================================================
.CommentsPage_container {
  margin-left: 1em;
  margin-right: 1em;
}

.CommentsPage_title {
  color: #333;
}

.CommentsPage_titleLink {
  color: #333;
  text-decoration: none;
}


================================================
FILE: examples/with-reason-react/src/CommentsPage.re
================================================
open Utils;

requireCSS("../../../src/CommentsPage.css");

type state = {story_with_comments: option(StoryData.story_with_comments)};

type action =
  | Loaded(StoryData.story_with_comments);

[@react.component]
let make = (~id) => {
    let (state, dispatch) = React.useReducer((_state, action) =>
    switch (action) {
      | Loaded(data) =>{story_with_comments: Some(data)}
      },  {story_with_comments: None});

  let renderTitle = (story: StoryData.story_with_comments) => {
    let title =
      <h2 className="CommentsPage_title">
        {React.string(story.title)}
      </h2>;
    <div>
      {switch (story.url) {
       | Some(url) =>
         <a href=url className="CommentsPage_titleLink"> title </a>
       | None => title
       }}
    </div>;
  };
  let renderByline = (story: StoryData.story_with_comments) =>
    <div>
      <span> {React.string(string_of_int(story.score))} </span>
      {React.string(" points")}
      <span>
        <span>
          {let time = story.time
           let by = story.by
           React.string({j| submitted $time by $by|j})}
        </span>
      </span>
    </div>;
    React.useEffect0(() => {
      StoryData.fetchStoryWithComments(id, data => dispatch(Loaded(data)))
      |> ignore;
      None;
    });

      <div className="CommentsPage_container">
        {switch (state.story_with_comments) {
         | Some(story) =>
           <div>
             {renderTitle(story)}
             {renderByline(story)}
             <CommentList story />
           </div>
         | None => React.string("loading")
         }}
      </div>;
};


================================================
FILE: examples/with-reason-react/src/NotFound.css
================================================
.NotFound_container {
    margin: 30px auto;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.NotFound_image {
    margin-top: 60px;
}
.NotFound_text {
    margin-top: 40px;
}

================================================
FILE: examples/with-reason-react/src/NotFound.re
================================================
open Utils;

requireCSS("../../../src/NotFound.css");

let notFoundImage = requireAssetURI("../../../src/notfound404.png");

[@react.component]
let make = () =>
  <div className="NotFound_container">
    <div className="NotFound_image">
      <img alt="Page not found" src=notFoundImage />
    </div>
    <div className="NotFound_text">
      <span>
        {React.string(
           "The page you're looking for can't be found. Go home by ",
         )}
      </span>
      <Link href="/"> {React.string("clicking here!")} </Link>
    </div>
  </div>;


================================================
FILE: examples/with-reason-react/src/StoryData.re
================================================
open Belt;

let apiBaseUrl = "https://serverless-api.hackernewsmobile.com";

let topStoriesUrl = page => {j|$apiBaseUrl/topstories-25-$page.json|j};

let storyUrl = id => {j|$apiBaseUrl/stories/$id.json|j};

type story = {
  by: string,
  descendants: int,
  id: int,
  score: int,
  time: int,
  title: string,
  url: option(string),
};

type comment_deleted = {id: int};

type comment_present = {
  by: string,
  id: int,
  kids: option(array(int)),
  parent: int,
  text: option(string),
  time: int,
};

type comment =
  | CommentPresent(comment_present)
  | CommentDeleted(comment_deleted);

type comments_map = Map.Int.t(comment);

type story_with_comments = {
  by: string,
  descendants: int,
  id: int,
  kids: option(array(int)),
  score: int,
  time: int,
  title: string,
  url: option(string),
  descendentIds: array(int),
  comments: comments_map,
};

type topstories = array(story);

module Decode = {
  let idsArray = (json): array(int) => Json.Decode.(json |> array(int));
  let getCommentId = comment =>
    switch (comment) {
    | CommentDeleted(c) => c.id
    | CommentPresent(c) => c.id
    };
  let comment = (json): comment => {
    let deletedMaybe =
      Json.Decode.(json |> optional(field("deleted", bool)));
    let deleted =
      switch (deletedMaybe) {
      | Some(v) => v == true
      | None => false
      };
    if (deleted) {
      CommentDeleted(Json.Decode.{id: json |> field("id", int)});
    } else {
      CommentPresent(
        Json.Decode.{
          by: json |> field("by", string),
          id: json |> field("id", int),
          parent: json |> field("parent", int),
          kids: json |> optional(field("kids", idsArray)),
          text: json |> optional(field("text", string)),
          time: json |> field("time", int),
        },
      );
    };
  };
  let commentsArray = (json): comments_map =>
    Json.Decode.array(comment, json)
    ->(Array.map(comment => (getCommentId(comment), comment)))
    ->Map.Int.fromArray;
  let storyWithComments = (json): story_with_comments =>
    Json.Decode.{
      by: json |> field("by", string),
      descendants: json |> field("descendants", int),
      descendentIds: json |> field("descendentIds", idsArray),
      comments: json |> field("comments", commentsArray),
      id: json |> field("id", int),
      kids: json |> optional(field("kids", idsArray)),
      score: json |> field("score", int),
      time: json |> field("time", int),
      title: json |> field("title", string),
      url: json |> optional(field("url", string)),
    };
  let story = (json): story =>
    Json.Decode.{
      by: json |> field("by", string),
      descendants: json |> field("descendants", int),
      id: json |> field("id", int),
      score: json |> field("score", int),
      time: json |> field("time", int),
      title: json |> field("title", string),
      url: json |> optional(field("url", string)),
    };
  let stories = (json): array(story) => Json.Decode.(json |> array(story));
};

let fetchTopStories = (page, callback) =>
  Js.Promise.(
    Fetch.fetch(topStoriesUrl(page))
    |> then_(Fetch.Response.json)
    |> then_(json =>
         json
         |> Decode.stories
         |> (
           stories => {
             callback((page, stories));
             resolve();
           }
         )
       )
    |> ignore
  ); /* TODO: error handling */

let fetchStoryWithComments = (id, callback) =>
  Js.Promise.(
    Fetch.fetch(storyUrl(id))
    |> then_(Fetch.Response.json)
    |> then_(json =>
         json
         |> Decode.storyWithComments
         |> (
           stories => {
             callback(stories);
             resolve();
           }
         )
       )
    |> ignore
  ); /* TODO: error handling */


================================================
FILE: examples/with-reason-react/src/StoryListItem.css
================================================
.StoryListItem_link {
  color: black;
  text-decoration: none;
}

.StoryListItem_flexRow {
  display: flex;
  flex: 1;
  padding: 8px;
}

.StoryListItem_icon {
  width: 32px;
  height: 32px;
}

.StoryListItem_storyCell {
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: stretch;
}

.StoryListItem_storyTitle {
  display: flex;
  flex: 0 0 auto;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
}

.StoryListItem_storyIndex {
  display: flex;
  flex: 0 0 auto;
  font-size: 18px;
  line-height: 1.2;
  margin-right: 12px;
}
.StoryListItem_storyIndex::after {
  display: block;
  content: '.';
}

.StoryListItem_row {
  align-items: center;
  flex-direction: row;
}

.StoryListItem_itemRow {
  align-items: stretch;
  border-bottom: solid 1px #eee;
  display: flex;
  margin-top: 6px;
  margin-bottom: 6px;
  cursor: default;
}

.StoryListItem_byline,
.StoryListItem_commentsText {
  color: #999999;
}
.StoryListItem_byline {
  font-size: 12px;
  padding: 0;
}

.StoryListItem_commentsCell {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 8;
  text-align: center;
  width: 80px;
}

.StoryListItem_row .StoryListItem_number {
  margin-right: 4px;
  padding-right: 6px;
  border-right: 1px solid currentColor;
}
.StoryListItem_number b {
  font-weight: 700;
}

.StoryListItem_commentsText {
  font-size: 10px;
  text-align: center;
}
.StoryListItem_commentsCell a {
  text-decoration: none;
}
a:hover .StoryListItem_commentsText {
  color: #000;
}

================================================
FILE: examples/with-reason-react/src/StoryListItem.re
================================================
open Utils;

requireCSS("../../../src/StoryListItem.css");

let commentIcon = requireAssetURI("../../../src/comment.png");

[@react.component]
let make = (~story: StoryData.story, ~index: int, ()) => {
  let renderIndex = () =>
    <aside className="StoryListItem_storyIndex">
      {React.string(string_of_int(index + 1))}
    </aside>;
  let renderTitle = () => {
    let content = React.string(story.title);
    <header className="StoryListItem_storyTitle">
      {switch (story.url) {
       | Some(url) =>
         <a href=url className="StoryListItem_link" target="_blank">
           content
         </a>
       | None =>
         <Link
           href={"/comments/" ++ string_of_int(story.id)}
           className="StoryListItem_link">
           content
         </Link>
       }}
    </header>;
  };
  let renderByline = () =>
    <div className="StoryListItem_row StoryListItem_byline">
      /* TODO: badge */

        <span className="StoryListItem_number">
          <b> {React.string(string_of_int(story.score))} </b>
          {React.string(" points")}
        </span>
        <span className="StoryListItem_storyTime">
          {let time = story.time
           let by = story.by
           React.string({j| submitted $time by $by|j})}
        </span>
      </div>;
  let renderArticleButton = () =>
    <div className="StoryListItem_flexRow">
      {renderIndex()}
      <div className="StoryListItem_storyCell">
        {renderTitle()}
        {renderByline()}
      </div>
    </div>;
  let renderCommentsButton = () =>
    <div className="StoryListItem_commentsCell">
      <Link
        href={"/comments/" ++ string_of_int(story.id)}
        className="StoryListItem_link">
        <div>
          <img alt="comments" className="StoryListItem_icon" src=commentIcon />
        </div>
        <div>
          <span className="StoryListItem_commentsText">
            <span className="StoryListItem_number">
              {React.string(string_of_int(story.descendants))}
            </span>
            {React.string(" comments")}
          </span>
        </div>
      </Link>
    </div>;
      <div className="StoryListItem_itemRow">
        {renderArticleButton()}
        {renderCommentsButton()}
      </div>;
};


================================================
FILE: examples/with-reason-react/src/TopStoriesPage.re
================================================
open Belt;
open Utils;

type state = {
  topstories: StoryData.topstories,
  page: int,
  loading: bool,
};

type action =
  | Loaded((int, StoryData.topstories))
  | Loading;

let initialState = {topstories: [||], page: 0, loading: false};

[@react.component]
let make = () => {
  let (state, dispatch) =
    React.useReducer(
      (state, action) =>
        switch (action) {
        | Loading => {...state, loading: true}
        | Loaded((page, data)) =>
          let updatedTopstories = Array.concat(state.topstories, data);
          {topstories: updatedTopstories, page: page + 1, loading: false};
        },
      initialState,
    );
  // Using useEffect0 to run this effect one time and prevent multiple reloads of same data which crashes browser
  React.useEffect0(() => {
    StoryData.fetchTopStories(state.page, payload =>
      dispatch(Loaded(payload))
    )
    |> ignore;
    None;
  });

  React.useEffect(() => {
    let nearTheBottom = () => distanceFromBottom() < 100;
    let loadNextPage = () =>
      if (state.page < 4) {
        StoryData.fetchTopStories(state.page, payload =>
          dispatch(Loaded(payload))
        )
        |> ignore;
        dispatch(Loading);
      };
    let scrollHander = _e =>
      if (nearTheBottom() && !state.loading) {
        loadNextPage();
      };
    Webapi.Dom.window
    |> Webapi.Dom.Window.addEventListener("scroll", scrollHander);

    Some(
      () =>
        Webapi.Dom.window
        |> Webapi.Dom.Window.removeEventListener("scroll", scrollHander),
    );
  });

  <div>
    {if (Array.length(state.topstories) > 0) {
       state.topstories
       ->(
           Array.mapWithIndex((index, story)
             /* 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*/
             =>
               <StoryListItem
                 key={string_of_int(story.id + index)}
                 index
                 story
               />
             )
         )
       ->React.array;
     } else {
       ReasonReact.null;
     }}
  </div>;
};


================================================
FILE: examples/with-reason-react/src/Utils.re
================================================
/* require css file for side effect only */
[@bs.val] external requireCSS: string => unit = "require";

/* require an asset (eg. an image) and return exported string value (image URI) */
[@bs.val] external requireAssetURI: string => string = "require";

[@bs.val] external currentTime: unit => int = "Date.now";

/* format a timestamp in seconds as relative humanised time sentence */
let fromNow = unixtime => {
  let delta = currentTime() / 1000 - unixtime;
  if (delta < 3600) {
    string_of_int(delta / 60) ++ " minutes ago";
  } else if (delta < 86400) {
    string_of_int(delta / 3600) ++ " hours ago";
  } else {
    string_of_int(delta / 86400) ++ " days ago";
  };
};

[@bs.send] [@bs.return nullable]
external getAttribute: (Js.t('a), string) => option(string) = "getAttribute";

let dangerousHtml: string => Js.t('a) = html => {"__html": html};

let distanceFromBottom: unit => int =
  () => {
    let bodyClientHeight = [%raw "document.body.clientHeight"];
    let windowScrollY = [%raw "window.scrollY"];
    let windowInnerHeight = [%raw "window.innerHeight"];
    bodyClientHeight - (windowScrollY + windowInnerHeight);
  };

[@bs.module]
external registerServiceWorker: unit => unit = "src/registerServiceWorker";


================================================
FILE: examples/with-reason-react/src/client.js
================================================

import React from 'react';
import { render } from 'react-dom';

import { make } from 'bs/App'; // BuckleScript output directory

const App = make;

render(
  <App title="Welcome to Razzle Reason React" />,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-reason-react/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-reason-react/src/index.re
================================================
open Utils;

registerServiceWorker();

ReactDOMRe.renderToElementWithId(<App />, "root");

ReasonReact.Router.push("");


================================================
FILE: examples/with-reason-react/src/link.re
================================================
let handleClick = (href, event) =>
  if (!ReactEvent.Mouse.defaultPrevented(event)) {
    ReactEvent.Mouse.preventDefault(event);
    ReasonReact.Router.push(href);
  };
[@react.component]
let make = (~href, ~className="", ~children) =>
  <a href className onClick={event => handleClick(href, event)}>
    children
  </a>;


================================================
FILE: examples/with-reason-react/src/registerServiceWorker.js
================================================
// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

module.exports = function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      var swUrl = process.env.PUBLIC_URL + '/service-worker.js';
      navigator.serviceWorker
        .register(swUrl)
        .then(function(registration) {
          registration.onupdatefound = function() {
            var installingWorker = registration.installing;
            installingWorker.onstatechange = function() {
              if (installingWorker.state === 'installed') {
                if (navigator.serviceWorker.controller) {
                  // At this point, the old content will have been purged and
                  // the fresh content will have been added to the cache.
                  // It's the perfect time to display a "New content is
                  // available; please refresh." message in your web app.
                  console.log('New content is available; please refresh.');
                } else {
                  // At this point, everything has been precached.
                  // It's the perfect time to display a
                  // "Content is cached for offline use." message.
                  console.log('Content is cached for offline use.');
                }
              }
            };
          };
        })
        .catch(function(error) {
          console.error('Error during service worker registration:', error);
        });
    });
  }
};

module.exports.unregister = function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(function(registration) {
      registration.unregister();
    });
  }
}


================================================
FILE: examples/with-reason-react/src/server.js
================================================
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

import { make } from 'bs/App'; // BuckleScript output directory

const App = make;


const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-redux/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-redux/README.md
================================================
# Razzle and Redux Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-redux with-redux

cd with-redux
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
Almost 100% of the code is taken from the [official Redux universal example](https://github.com/reactjs/redux/tree/master/examples/universal).


================================================
FILE: examples/with-redux/package.json
================================================
{
  "name": "razzle-examples-with-redux",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "prop-types": "^15.7.2",
    "qs": "^6.9.3",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "serialize-javascript": "^3.0.0"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-redux/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-redux/src/client/index.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from '../common/store/configureStore';
import App from '../common/containers/App';

const store = configureStore(window.__PRELOADED_STATE__);

hydrate(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept('../common/containers/App', () => {
    hydrate(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );
  });
}


================================================
FILE: examples/with-redux/src/common/actions/index.js
================================================
export const SET_COUNTER = 'SET_COUNTER';
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';

export const set = value => ({
  type: SET_COUNTER,
  payload: value,
});

export const increment = () => ({
  type: INCREMENT_COUNTER,
});

export const decrement = () => ({
  type: DECREMENT_COUNTER,
});

export const incrementIfOdd = () => (dispatch, getState) => {
  const { counter } = getState();

  if (counter % 2 === 0) {
    return;
  }

  dispatch(increment());
};

export const incrementAsync = (delay = 1000) => dispatch => {
  setTimeout(() => {
    dispatch(increment());
  }, delay);
};


================================================
FILE: examples/with-redux/src/common/api/counter.js
================================================
const getRandomInt = (min, max) =>
  Math.floor(Math.random() * (max - min)) + min;

export const fetchCounter = callback => {
  // Rather than immediately returning, we delay our code with a timeout to simulate asynchronous behavior
  setTimeout(() => {
    callback(getRandomInt(1, 100));
  }, 500);

  // In the case of a real world API call, you'll normally run into a Promise like this:
  // API.getUser().then(user => callback(user))
};


================================================
FILE: examples/with-redux/src/common/components/Counter.js
================================================
import React from 'react';
import PropTypes from 'prop-types';

const Counter = ({
  increment,
  incrementIfOdd,
  incrementAsync,
  decrement,
  counter,
}) => (
  <p>
    Clicked: {counter} times
    {' '}
    <button onClick={increment}>+</button>
    {' '}
    <button onClick={decrement}>-</button>
    {' '}
    <button onClick={incrementIfOdd}>Increment if odd</button>
    {' '}
    <button onClick={() => incrementAsync()}>Increment async</button>
  </p>
);

Counter.propTypes = {
  increment: PropTypes.func.isRequired,
  incrementIfOdd: PropTypes.func.isRequired,
  incrementAsync: PropTypes.func.isRequired,
  decrement: PropTypes.func.isRequired,
  counter: PropTypes.number.isRequired,
};

export default Counter;


================================================
FILE: examples/with-redux/src/common/containers/App.js
================================================
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
import * as CounterActions from '../actions';

const mapStateToProps = state => ({
  counter: state.counter,
});

function mapDispatchToProps(dispatch) {
  return bindActionCreators(CounterActions, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Counter);


================================================
FILE: examples/with-redux/src/common/reducers/counter.js
================================================
import { SET_COUNTER, INCREMENT_COUNTER, DECREMENT_COUNTER } from '../actions';

const counter = (state = 0, action) => {
  switch (action.type) {
    case SET_COUNTER:
      return action.payload;
    case INCREMENT_COUNTER:
      return state + 1;
    case DECREMENT_COUNTER:
      return state - 1;
    default:
      return state;
  }
};

export default counter;


================================================
FILE: examples/with-redux/src/common/reducers/index.js
================================================
import { combineReducers } from 'redux';
import counter from './counter';

const rootReducer = combineReducers({
  counter,
});

export default rootReducer;


================================================
FILE: examples/with-redux/src/common/store/configureStore.js
================================================
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

const configureStore = preloadedState => {
  const store = createStore(
    rootReducer,
    preloadedState,
    applyMiddleware(thunk)
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
};

export default configureStore;


================================================
FILE: examples/with-redux/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-redux/src/server/index.js
================================================
import App from '../common/containers/App';
import { Provider } from 'react-redux';
import React from 'react';
import configureStore from '../common/store/configureStore';
import express from 'express';
import { fetchCounter } from '../common/api/counter';
import qs from 'qs';
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  return new Promise((resolve)=>{

    fetchCounter(apiResult => {

      // Read the counter from the request, if provided
      const params = qs.parse(req.query);
      const counter = parseInt(params.counter, 10) || apiResult || 0;

      // Compile an initial state
      const preloadedState = { counter };

      // Create a new Redux store instance
      const store = configureStore(preloadedState);

      // Render the component to a string
      const markup = renderToString(
        <Provider store={store}>
          <App />
        </Provider>
      );

      // Grab the initial state from our Redux store
      const finalState = store.getState();

      const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
    </head>
    <body>
        <div id="root">${markup}</div>
        <script>
          window.__PRELOADED_STATE__ = ${serialize(finalState)}
        </script>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    resolve({ html });
    })
  })
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', async (req, res) => {
    const { html } = await renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-scss/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-scss/README.md
================================================
# Razzle With SCSS Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-scss with-scss

cd with-scss
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use scss as styling language
You can import anything from node_modules or other scss files, like Bootstrap, etc.
`src/index.js` for the server, `src/client.js` for the browser, and `src/App.scss` for SCSS style.


================================================
FILE: examples/with-scss/package.json
================================================
{
  "name": "razzle-examples-with-scss",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "resolutions": {
    "postcss": "8.2.4"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-scss": "4.2.15",
    "webpack": "^4.44.1",
    "postcss": "^8.2.4",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-scss/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-scss/razzle.config.js
================================================
'use strict';

module.exports = {
  plugins: ['scss'],
};


================================================
FILE: examples/with-scss/src/App.js
================================================
import "./App.scss";
import styles from "./app.module.scss";

import React from "react";

const App = () => (
  <div>
    <div className={styles.hello}>Welcome to Razzle.</div>
    <div className="info">Hot reload enabled!!</div>
  </div>
);

export default App;


================================================
FILE: examples/with-scss/src/App.scss
================================================
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import './other';
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

================================================
FILE: examples/with-scss/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-scss/src/app.module.scss
================================================
.hello {
  font-size: 2rem;
}


================================================
FILE: examples/with-scss/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-scss/src/index.js
================================================
import express from 'express';
import app from './server';

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-scss/src/other.scss
================================================
.info {
  color: darkmagenta;
  font-size: 14;
}

================================================
FILE: examples/with-scss/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-scss-options/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-scss-options/README.md
================================================
# Razzle With SCSS Options Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-scss-options with-scss-options

cd with-scss-options
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example

This is a basic, bare-bones example of how to use razzle. It satisfies the entry points and use scss as styling language
You can import anything from node_modules or other scss files, like Bootstrap, etc.
`src/index.js` for the server, `src/client.js` for the browser, and `src/App.scss` for SCSS style.


================================================
FILE: examples/with-scss-options/package.json
================================================
{
  "name": "razzle-examples-with-scss-options",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "resolutions": {
    "postcss": "8.2.4"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-scss": "4.2.15",
    "webpack": "^4.44.1",
    "postcss": "^8.2.4",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-scss-options/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-scss-options/razzle.config.js
================================================
'use strict';

const path = require('path');

module.exports = {
  plugins: [
    {
      name: 'scss',
      options: {
        sass: {
          dev: {
            additionalData: `@import "${path.resolve(__dirname, './src/prepend.scss').replace(/\\/g, '/')}";`,
          },
          prod: {
            additionalData: `@import "${path.resolve(__dirname, './src/prepend.scss').replace(/\\/g, '/')}";`,
          },
        },
      },
    },
  ],
};


================================================
FILE: examples/with-scss-options/src/App.js
================================================
import "./App.scss";
import styles from "./app.module.scss";

import React from "react";

const App = () => (
  <div>
    <div className={styles.hello}>Welcome to Razzle.</div>
    <div className="info">Hot reload enabled!!</div>
  </div>
);

export default App;


================================================
FILE: examples/with-scss-options/src/App.scss
================================================
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import './other';
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}

================================================
FILE: examples/with-scss-options/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-scss-options/src/app.module.scss
================================================
.hello {
  font-size: 2rem;
}


================================================
FILE: examples/with-scss-options/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-scss-options/src/index.js
================================================
import express from 'express';
import app from './server';

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-scss-options/src/other.scss
================================================
.info {
  color: darkmagenta;
  font-size: 14;
}

================================================
FILE: examples/with-scss-options/src/prepend.scss
================================================
.prepend {
  content: "razzle-scss-prepend";
}


================================================
FILE: examples/with-scss-options/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-single-exposed-port/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-single-exposed-port/README.md
================================================
# Razzle Single Exposed Port Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-single-exposed-port with-single-exposed-port

cd with-single-exposed-port
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

Visit http://localhost:3001/ in the browser.

## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying webpack devServer configuration to proxy the devServer to the express server.
It modifies the proxy of the devServer in dev (`razzle start`).

Note that this file is not transpiled, and so you must write it with vanilla
Node.js-compatible JavaScript.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.proxy = {
        context: () => true,
        target: 'http://localhost:3000'
      };
      config.devServer.index = '';
    }

    return config;
  },
};
```

A bit more complex on a subpath behind a reverse nginx proxy:


```js
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;


    if (target === 'web' && dev) {
      config.devServer.public = 'localhost:8080' // or 80 or 443
      config.devServer.proxy = {
        context: () => true,
        target: 'http://localhost:3000'
      };
      config.devServer.sockPath = '/razzle-dev/sockjs-node';
    }

    return config;
  },
};
```

```bash
CLIENT_PUBLIC_PATH=http://localhost:8080/razzle-dev/ yarn start
```

```nginxconf
http {

    server {
        listen       8080; # or 80 or 443
        server_name  _;
        location /razzle-dev { # no /, no regex
            return 302 /razzle-dev/; # a /
        }
        location /razzle-dev/ { # no regex
            proxy_pass   http://127.0.0.1:3001/; # a /
            proxy_http_version 1.1;
            proxy_set_header Upgrade \$http_upgrade;
            proxy_set_header Connection "upgrade";
        }
        location /razzle-dev/sockjs-node/ { # no regex
            proxy_pass   http://127.0.0.1:3001; # no /
            proxy_http_version 1.1;
            proxy_set_header Upgrade \$http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
}
```


================================================
FILE: examples/with-single-exposed-port/package.json
================================================
{
  "name": "razzle-examples-with-single-exposed-port",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start --verbose",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-single-exposed-port/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-single-exposed-port/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    if (opts.env.target === 'web' && opts.env.dev) {
      config.devServer.proxy = {
        context: () => true,
        target: 'http://localhost:3000'
      };
      config.devServer.index = '';
    }

    return config;
  },
};


================================================
FILE: examples/with-single-exposed-port/src/App.js
================================================
import React from 'react';

const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-single-exposed-port/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-single-exposed-port/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-single-exposed-port/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-styled-components/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-styled-components/README.md
================================================
# Razzle with-styled-components Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-styled-components with-styled-components

cd with-styled-components
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is a basic, bare-bones example that shows a very minimal implementation
of [StyledComponents](https://github.com/styled-components/styled-components).
It satisfies the entry points `src/index.js` for the server and`src/client.js`
for the browser.
There are comments in `src/server.js` to show how the styles are gathered and
rendered into to the DOM


================================================
FILE: examples/with-styled-components/package.json
================================================
{
  "name": "razzle-examples-with-styled-components",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-is": "^17.0.1",
    "styled-components": "^5.1.0"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-styled-components/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-styled-components/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-styled-components/src/App.js
================================================
import './App.css';

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  border-radius: 3px;
  padding: 0.25em 1em;
  margin: 0 1em;
  background: transparent;
  color: palevioletred;
  border: 2px solid palevioletred;
`;

const App = () => (
  <div>
    Welcome to Razzle. <Button>StyledComponent button</Button>
  </div>
);

export default App;


================================================
FILE: examples/with-styled-components/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-styled-components/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-styled-components/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-styled-components/src/server.js
================================================
import App from "./App";
import React from "react";
import express from "express";
import { renderToString } from "react-dom/server";
// Import the StyledComponents SSR util
import { ServerStyleSheet } from "styled-components";

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  // Create the server side style sheet
  const sheet = new ServerStyleSheet();
  // When the app is rendered collect the styles that are used inside it
  const markup = renderToString(sheet.collectStyles(<App />));
  // Generate all the style tags so they can be rendered into the page
  const styleTags = sheet.getStyleTags();

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
      <!-- Render the style tags gathered from the components into the DOM -->
      ${styleTags}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-svelte/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-svelte/README.md
================================================
# Razzle Example With Svelte - Incomplete, needs some love

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-svelte with-svelte

cd with-svelte
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/with-svelte/package.json
================================================
{
  "name": "razzle-examples-with-svelte",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle-plugin-svelte": "4.2.15",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-svelte/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-svelte/razzle.config.js
================================================
'use strict';

module.exports = {
  plugins: ['svelte'],
};


================================================
FILE: examples/with-svelte/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-svelte/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-svelte/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-svelte/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-svelte/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-svelte/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-svelte/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-tailwindcss/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-tailwindcss/README.md
================================================
# Razzle With Tailwindcss Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-tailwindcss with-tailwindcss

cd with-tailwindcss
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/with-tailwindcss/package.json
================================================
{
  "name": "razzle-examples-with-tailwindcss",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "resolutions": {
    "postcss": "8.2.4"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2",
    "postcss": "^8.2.4",
    "autoprefixer": "^10.2.3",
    "tailwindcss": "^2.0.2"
  }
}


================================================
FILE: examples/with-tailwindcss/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-tailwindcss/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackOptions(opts) {
    const options = opts.options.webpackOptions;
    options.postCssOptions.plugins.unshift(require("tailwindcss"));
    return options;
  }
}


================================================
FILE: examples/with-tailwindcss/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-tailwindcss/src/App.css
================================================
import "tailwindcss/tailwind.css"


================================================
FILE: examples/with-tailwindcss/src/App.js
================================================
import React from 'react';
import 'tailwindcss/tailwind.css';

import logo from './logo.png';

function App() {
  return (
    <div className="h-screen flex justify-center items-center">
    <div className="max-w-sm rounded overflow-hidden shadow-lg p-4">
      <img className="w-full" src={logo} alt="Sunset in the mountains" />
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2"> React-Tailwind </div>
        <p className="text-gray-700 text-base">
          A React Starter with Tailwind CSS
        </p>
      </div>
      <div className="px-6 py-4">
        {["React", "Tailwind"].map(tag =>
              <span
                key={tag}
                className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mt-2">
                {"#" + tag }
              </span>
        )}
      </div>
    </div>
  </div>
  );
}

export default App;


================================================
FILE: examples/with-tailwindcss/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-tailwindcss/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-tailwindcss/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-tailwindcss/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-typeorm-graphql/.babelrc
================================================
{
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "babel-plugin-parameter-decorator"
  ],
  "presets": [
    [
      "razzle/babel",
      {
        "preset-env": {},
        "preset-react": { "runtime" : "automatic" },
        "transform-runtime": {},
        "class-properties": false
      }
    ]
  ]
}


================================================
FILE: examples/with-typeorm-graphql/.eslintrc.js
================================================
module.exports =
{
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [
      1,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ]
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
};


================================================
FILE: examples/with-typeorm-graphql/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-typeorm-graphql/.prettierrc
================================================
{
  "singleQuote": true
}


================================================
FILE: examples/with-typeorm-graphql/README.md
================================================
# Razzle TypeScript Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-typeorm-graphql with-typeorm-graphql

cd with-typeorm-graphql
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).

Basic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.

Razzle knows how to resolve `.ts` and `.tsx` files out of the box.


================================================
FILE: examples/with-typeorm-graphql/package.json
================================================
{
  "name": "razzle-examples-with-typeorm-graphql",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start:tsc": "tsc -b -w --preserveWatchOutput",
    "start": "concurrently \"yarn start:tsc\" \"razzle start\"",
    "build": "tsc -b && razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js --config ormconfig.json"
  },
  "dependencies": {
    "apollo-server-express": "^2.19.2",
    "express": "^4.17.1",
    "graphql": "^15.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2",
    "reflect-metadata": "^0.1.13",
    "type-graphql": "^1.1.1",
    "typeorm": "^0.2.30"
  },
  "peerDependencies": {
    "@babel/core": "^7.0.0-0"
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "@babel/cli": "^7.12.13",
    "@babel/plugin-proposal-class-properties": "^7.12.13",
    "@babel/plugin-proposal-decorators": "^7.12.13",
    "@babel/plugin-transform-typescript": "^7.12.1",
    "@babel/preset-typescript": "^7.12.13",
    "@testing-library/dom": "^7.29.4",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/express": "^4.17.7",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-router-dom": "^5.1.4",
    "@types/webpack-env": "^1.15.2",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "babel-plugin-parameter-decorator": "^1.0.16",
    "babel-plugin-transform-typescript-metadata": "^0.3.1",
    "babel-preset-razzle": "4.2.15",
    "eslint": "^7.18.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "mini-css-extract-plugin": "^0.9.0",
    "prettier": "^2.2.1",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "renamer": "^2.0.1",
    "sqlite3": "^5.0.1",
    "typescript": "^4.0.3",
    "html-webpack-plugin": "^5.2.0",
    "webpack": "^5.24.0",
    "webpack-dev-server": "^3.11.2"
  },
  "razzle_meta": {
    "yarnStartDelay": 5000,
    "forceWebpack": true
  }
}


================================================
FILE: examples/with-typeorm-graphql/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-typeorm-graphql/razzle.config.js
================================================
'use strict';

module.exports = {
  options: {
    // verbose: true,
    enableSourceMaps: false
  },
  modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    if (target === 'node') {
      if (!dev) {
        webpackConfig.optimization.minimize = false;
      }
    }
    return webpackConfig;
  },
  modifyWebpackOptions({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {

    return webpackOptions;
  },
  //plugins: [{name:'typescript'}]
};


================================================
FILE: examples/with-typeorm-graphql/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

================================================
FILE: examples/with-typeorm-graphql/src/App.test.tsx
================================================
import React from 'react';
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  );
  const linkElement = getByText(/welcome to razzles/i);
  expect(linkElement).toBeInTheDocument();
});


================================================
FILE: examples/with-typeorm-graphql/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';

import './App.css';

const App: React.FC = () => (
  <Switch>
    <Route exact path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-typeorm-graphql/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  animation: Home-logo-spin infinite 20s linear;
  height: 80px;
}

.Home-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.Home-intro {
  font-size: large;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}

@keyframes Home-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

================================================
FILE: examples/with-typeorm-graphql/src/Home.tsx
================================================
import * as React from 'react';
import logo from './react.svg';

import './Home.css';

const Home: React.FC = () => {
  return (
    <div className="Home">
      <div className="Home-header">
        <img src={logo} className="Home-logo" alt="logo" />
        <h2>Welcome to Razzle</h2>
      </div>
      <p className="Home-intro">
        To get started, edit
        <code>src/App.tsx</code>
        or
        <code>src/Home.tsx</code>
        and save to reload.
      </p>
      <ul className="Home-resources">
        <li>
          <a href="https://github.com/jaredpalmer/razzle">Docs</a>
        </li>
        <li>
          <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
        </li>
        <li>
          <a href="https://palmer.chat">Community Slack</a>
        </li>
      </ul>
    </div>
  );
};

export default Home;


================================================
FILE: examples/with-typeorm-graphql/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-typeorm-graphql/src/database/init_db.ts
================================================

import { Abilities, Pokemon, PokemonAbilities, Types } from '../models';

export const init_db = async(connection) => {
  await connection.dropDatabase();
  await connection.synchronize();

  // Types
  const electric = new Types();
  electric.name = 'Electric';
  await electric.save();

  const fire = new Types();
  fire.name = 'Fire';
  await fire.save();

  const water = new Types();
  water.name = 'Water';
  await water.save();

  const grass = new Types();
  grass.name = 'Grass';
  await grass.save();

  // Abilities
  const razorLeaf = new Abilities();
  razorLeaf.name = 'Razor Leaf';
  await razorLeaf.save();

  const flameCharge = new Abilities();
  flameCharge.name = 'Flame Charge';
  await flameCharge.save();

  const flareBlitz = new Abilities();
  flareBlitz.name = 'Flare Blitz';
  await flareBlitz.save();

  const soak = new Abilities();
  soak.name = 'Soak';
  await soak.save();

  const electrify = new Abilities();
  electrify.name = 'Electrify';
  await electrify.save();

  const spark = new Abilities();
  spark.name = 'Spark';
  await spark.save();


  // Pokémon
  const pikachu = new Pokemon(electric);
  pikachu.name = 'Pikachu';
  await pikachu.save();

  const boltund = new Pokemon(electric);
  boltund.name = 'Boltund';
  await boltund.save();

  const octillery = new Pokemon(water);
  octillery.name = 'Octillery';
  await octillery.save();

  const ponyta = new Pokemon(fire);
  ponyta.name = 'Ponyta';
  await ponyta.save();

  const raboot = new Pokemon(fire);
  raboot.name = 'Raboot';
  await raboot.save();

  const grookey = new Pokemon(grass);
  grookey.name = 'Grookey';
  await grookey.save();

  // Pokemon-Abilities
  const grookeyRazorLeaf = new PokemonAbilities(grookey, razorLeaf);
  await grookeyRazorLeaf.save();

  const ponytaFlameCharge = new PokemonAbilities(ponyta, flameCharge);
  await ponytaFlameCharge.save();

  const rabootFlameCharge = new PokemonAbilities(raboot, flameCharge);
  await rabootFlameCharge.save();

  const ponytaFlareBlitz = new PokemonAbilities(ponyta, flareBlitz);
  await ponytaFlareBlitz.save();

  const octillerySoak = new PokemonAbilities(octillery, soak);
  await octillerySoak.save();

  const boltundElectrify = new PokemonAbilities(boltund, electrify);
  await boltundElectrify.save();

  const boltundSpark = new PokemonAbilities(boltund, spark);
  await boltundSpark.save();

  const pikachuSpark = new PokemonAbilities(pikachu, spark);
  await pikachuSpark.save();
};


================================================
FILE: examples/with-typeorm-graphql/src/declarations.d.ts
================================================
// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules

declare module '*.svg' {
  const src: string;
  export default src;
}


================================================
FILE: examples/with-typeorm-graphql/src/index.ts
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

export default app.then(theapp=>{
  express()
  .use((req, res) => theapp.handle(req, res))
  .listen(port, () => {
    console.log(`> App started http://localhost:${port}`)
    console.log(`> Graphql at http://localhost:${port}/graphql`)
  });
});


================================================
FILE: examples/with-typeorm-graphql/src/models/Abilities.ts
================================================
import { BaseEntity, Column, Entity, PrimaryGeneratedColumn } from 'typeorm';
import { Field, ID, ObjectType } from 'type-graphql';

@Entity()
@ObjectType()
class Abilities extends BaseEntity {

  @Field(() => ID)
  @PrimaryGeneratedColumn()
  id: number | null = null;

  @Field(() => String)
  @Column()
  name: string = '';
}

export { Abilities };


================================================
FILE: examples/with-typeorm-graphql/src/models/Pokemon.ts
================================================
import {
  BaseEntity,
  Column,
  Entity,
  ManyToOne,
  PrimaryGeneratedColumn,
} from 'typeorm';
import { Types } from './Types';
import { Field, ID, ObjectType } from 'type-graphql';

@Entity()
@ObjectType()
class Pokemon extends BaseEntity {

  @Field(() => ID)
  @PrimaryGeneratedColumn()
  id: number | null = null;

  @Field(() => String)
  @Column()
  name: string = '';

  @Field(() => Types)
  @ManyToOne('Types', 'types',
    { eager: true },
  )
  type!: Types;

  constructor(type: Types) {
    super();
    this.type = type;
  }
}

export { Pokemon };


================================================
FILE: examples/with-typeorm-graphql/src/models/PokemonAbilities.ts
================================================
import { BaseEntity, Entity, Index, ManyToOne } from 'typeorm';
import { Field, ID, ObjectType } from 'type-graphql';
import { Abilities } from './Abilities';
import { Pokemon } from './Pokemon';

@Entity()
@Index([ 'pokemon', 'ability' ], { unique: true })
@ObjectType()
class PokemonAbilities extends BaseEntity {
  
  @Field(() => Pokemon)
  @ManyToOne('Pokemon', 'pokemon',
    {
      primary: true,
      eager: true,
    },
  )
  pokemon: Pokemon;

  @Field(() => Abilities)
  @ManyToOne('Abilities', 'abilities',
    {
      primary: true,
      eager: true,
    },
  )
  ability: Abilities;

  constructor(pokemon: Pokemon, ability: Abilities) {
    super();
    this.pokemon = pokemon;
    this.ability = ability;
  }
}

export { PokemonAbilities };


================================================
FILE: examples/with-typeorm-graphql/src/models/Types.ts
================================================
import { BaseEntity, Column, Entity, OneToMany, PrimaryGeneratedColumn } from 'typeorm';
import { Field, ID, ObjectType } from 'type-graphql';

@Entity()
@ObjectType()
class Types extends BaseEntity {

  @Field(() => ID)
  @PrimaryGeneratedColumn()
  id: number | null = null;

  @Field(() => String)
  @Column()
  name: string = '';
}

export { Types };


================================================
FILE: examples/with-typeorm-graphql/src/models/index.ts
================================================
export * from './Abilities';
export * from './Pokemon';
export * from './PokemonAbilities';
export * from './Types';


================================================
FILE: examples/with-typeorm-graphql/src/schema/Resolvers.ts
================================================
import { Query, Resolver, Arg, Mutation, createUnionType } from 'type-graphql';
import { Abilities, Pokemon, PokemonAbilities, Types } from '../models';

const PokemonAbilitiesUnion = createUnionType({
  name: 'PokemonAbilitiesUnion',
  types: () => [ Pokemon, PokemonAbilities ] as const,
});

@Resolver()
class Resolvers {
  @Query(() => [ Types ])
  async allTypes(): Promise<Types[]> {
    return await Types.find();
  }

  @Query(() => [ Abilities ])
  async allAbilities(): Promise<Abilities[]> {
    return await Abilities.find();
  }

  @Query(() => [ Pokemon ])
  async allPokemon(): Promise<Pokemon[]> {
    return await Pokemon.find();
  }

  @Query(() => [ PokemonAbilities ])
  async allPokemonAbilities(): Promise<PokemonAbilities[]> {
    return await PokemonAbilities.find();
  }

  @Query(() => Pokemon)
  async getPokemonPerName(@Arg('name') name: string): Promise<Pokemon | undefined> {
    return await Pokemon.findOne({ where: { name } });
  }

  @Query(() => [ PokemonAbilitiesUnion ])
  async getPokemonAbilities(@Arg('name') name: string): Promise<Array<typeof PokemonAbilitiesUnion>> {
    const pokemon: Pokemon = await Pokemon.findOne({ where: { name } });
    const pokemonAbilities = await PokemonAbilities.find({ where: { pokemon } });

    return [ pokemon, ...pokemonAbilities ];
  }

  @Mutation(() => Pokemon)
  async createPokemon(@Arg('name') name: string): Promise<Pokemon> {
    const pokemon = Pokemon.create({ name });
    await pokemon.save();

    return pokemon;
  }
}
export { Resolvers };


================================================
FILE: examples/with-typeorm-graphql/src/schema/index.ts
================================================
export * from './Resolvers';


================================================
FILE: examples/with-typeorm-graphql/src/server.tsx
================================================
import 'reflect-metadata';
import { ApolloServer } from 'apollo-server-express';
import express from 'express';
import path from 'path';
import { createConnection } from 'typeorm';
import { buildSchema } from 'type-graphql';
import { init_db } from './database/init_db';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Abilities, Pokemon, PokemonAbilities, Types } from './models';
import { Resolvers } from './schema';
import App from './App';

let assets: any;

const syncLoadAssets = () => {
  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
};
syncLoadAssets();

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req: express.Request, res: express.Response) => {
  const context: any = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
    </head>
    <body>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    return { html };
  }
};

const createserver = async() => {
  const connection = await createConnection({
    type: "sqlite",
    database: path.join(process.cwd(), 'db.sqlite3'),
    synchronize: true,
    entities: [Abilities, Pokemon, PokemonAbilities, Types]
  });
  await init_db(connection);
  console.log('Database created.');

  const schema = await buildSchema({
    resolvers: [ Resolvers ],
  });

  const apolloServer = new ApolloServer({ schema });
  let server: express.Application = express()
    .disable('x-powered-by')
  apolloServer.applyMiddleware({ app: server});

  server = server
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
  .get('/*', (req: express.Request, res: express.Response) => {
    const { html = '', redirect = false } = renderApp(req, res);
    if (redirect) {
      res.redirect(redirect);
    } else {
      res.send(html);
    }
  });
  return server;
};

export default createserver();


================================================
FILE: examples/with-typeorm-graphql/src/setupTests.ts
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';


================================================
FILE: examples/with-typeorm-graphql/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}


================================================
FILE: examples/with-typescript/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
cache
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local


================================================
FILE: examples/with-typescript/README.md
================================================
# Razzle TypeScript Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-typescript with-typescript

cd with-typescript
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).

Basic razzle will uses Babel to transform TypeScript to plain JavaScript ( with babel-loader ), and uses TypeScript for type-checking.

Razzle knows how to resolve `.ts` and `.tsx` files out of the box.


================================================
FILE: examples/with-typescript/package.json
================================================
{
  "name": "razzle-examples-with-typescript",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start:tsc": "tsc -b -w --preserveWatchOutput",
    "start": "concurrently \"yarn start:tsc\" \"razzle start\"",
    "build": "tsc -b && razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2"
  },
  "devDependencies": {
    "concurrently": "^5.3.0",
    "cross-env": "^7.0.3",
    "@testing-library/dom": "^7.29.4",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.3",
    "@testing-library/user-event": "^10.1.0",
    "@types/express": "^4.17.6",
    "@types/jest": "^25.2.1",
    "@types/node": "^13.13.2",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-router-dom": "^5.1.4",
    "@types/webpack-env": "^1.15.2",
    "babel-preset-razzle": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "typescript": "^4.0.3",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-typescript/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-typescript/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

================================================
FILE: examples/with-typescript/src/App.test.tsx
================================================
import React from 'react';
import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import App from './App';

test('renders learn react link', () => {
  const { getByText } = render(
    <MemoryRouter>
      <App />
    </MemoryRouter>
  );
  const linkElement = getByText(/welcome to razzles/i);
  expect(linkElement).toBeInTheDocument();
});


================================================
FILE: examples/with-typescript/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';

import './App.css';

const App = () => (
  <Switch>
    <Route exact={true} path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-typescript/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  animation: Home-logo-spin infinite 20s linear;
  height: 80px;
}

.Home-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.Home-intro {
  font-size: large;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}

@keyframes Home-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

================================================
FILE: examples/with-typescript/src/Home.tsx
================================================
import React from 'react';
import logo from './react.svg';

import './Home.css';

class Home extends React.Component<{}, {}> {
  public render() {
    return (
      <div className="Home">
        <div className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <h2>Welcome to Razzle</h2>
        </div>
        <p className="Home-intro">
          To get started, edit <code>src/App.tsx</code> or{' '}
          <code>src/Home.tsx</code> and save to reload.
        </p>
        <ul className="Home-resources">
          <li>
            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
          </li>
          <li>
            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
          </li>
          <li>
            <a href="https://palmer.chat">Community Slack</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Home;


================================================
FILE: examples/with-typescript/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-typescript/src/declarations.d.ts
================================================
// https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules

declare module '*.svg' {
  const src: string;
  export default src;
}


================================================
FILE: examples/with-typescript/src/index.ts
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, () => {
    console.log(`> App started http://localhost:${port}`)
  });


================================================
FILE: examples/with-typescript/src/server.tsx
================================================
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouterContext } from "react-router";
import { StaticRouter } from 'react-router-dom';

import App from './App';

let assets: any;

const syncLoadAssets = () => {
  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
};
syncLoadAssets();

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req: express.Request, res: express.Response) => {
  const context: StaticRouterContext = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
    </head>
    <body>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    return { html };
  }
};

const server = express()
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
  .get('/*', (req: express.Request, res: express.Response) => {
    const { html = '', redirect = false } = renderApp(req, res);
    if (redirect) {
      res.redirect(redirect);
    } else {
      res.send(html);
    }
  });

export default server;


================================================
FILE: examples/with-typescript/src/setupTests.ts
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';


================================================
FILE: examples/with-typescript/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}


================================================
FILE: examples/with-typescript-plugin/.eslintrc.js
================================================
module.exports = {
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: "module",
  },
  plugins: ["react", "@typescript-eslint", "prettier"],
  extends: [
    "plugin:react/recommended",
    "airbnb",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  rules: {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        js: "never",
        jsx: "never",
        ts: "never",
        tsx: "never",
      },
    ],
    "prettier/prettier": "error",
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [
      1,
      { extensions: [".js", ".jsx", ".ts", ".tsx"] },
    ],
  },
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
      },
    },
  },
};


================================================
FILE: examples/with-typescript-plugin/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-typescript-plugin/README.md
================================================
# Razzle TypeScript Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-typescript-plugin with-typescript-plugin

cd with-typescript-plugin
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This is an of how to use Razzle with [TypeScript](https://github.com/Microsoft/TypeScript).
In `razzle.config.js`, we locate the part of the webpack configuration
that is running `babel-loader` and swap it out for `ts-loader`.
Additionally, we make sure Razzle knows how to resolve `.ts` and `.tsx` files.

Lastly, we also need to modify our Jest configuration to handle typescript files.
Thus 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`.

```json
// package.json

{
  ...
  "jest": {
    "transform": {
      "\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js",
      "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
    },
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ]
  }
}
```

The `tslint.json` and `tsconfig.json` are taken from Microsoft's official
[TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter).

Note: You do not techincally _need_ to fully replace `babel-loader` with
`ts-loader` to use TypeScript. Both TS and Babel transpile ES6 code,
so when you run both webpack loaders you are making Razzle do twice the work. From our testing,
this can make HMR extremely slow on larger apps. Thus, this example overwrites
`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`:

```
"^.+\\.(js|jsx)$": "<rootDir>/node_modules/razzle/config/jest/babelTransform.js",
```
This will continue to transform .js files through babel.


================================================
FILE: examples/with-typescript-plugin/package.json
================================================
{
  "name": "razzle-examples-with-typescript",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "@types/express": "^4.17.0",
    "@types/jest": "^26.0.20",
    "@types/node": "^14.14.22",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/webpack-env": "^1.14.0",
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "eslint": "^7.18.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "mini-css-extract-plugin": "^0.9.0",
    "prettier": "^2.2.1",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-typescript": "4.2.15",
    "ts-jest": "^26.5.0",
    "typescript": "^4.1.3",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  },
  "jest": {
    "transform": {
      "\\.(ts|tsx)$": "ts-jest",
      "\\.css$": "<rootDir>/node_modules/razzle/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/node_modules/razzle/config/jest/fileTransform.js"
    },
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.(ts|js)?(x)",
      "<rootDir>/src/**/?(*.)(spec|test).(ts|js)?(x)"
    ],
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "json"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}"
    ]
  }
}


================================================
FILE: examples/with-typescript-plugin/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-typescript-plugin/razzle.config.js
================================================
'use strict';

module.exports = {
  plugins: ['typescript'],
};


================================================
FILE: examples/with-typescript-plugin/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

================================================
FILE: examples/with-typescript-plugin/src/App.test.tsx
================================================
import React from 'react';
import { render } from 'react-dom';

import App from './App';

import { MemoryRouter } from 'react-router-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    render(
      <MemoryRouter>
        <App />
      </MemoryRouter>,
      div
    );
  });
});


================================================
FILE: examples/with-typescript-plugin/src/App.tsx
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';

import './App.css';

const App = () => (
  <Switch>
    <Route exact={true} path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: examples/with-typescript-plugin/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  animation: Home-logo-spin infinite 20s linear;
  height: 80px;
}

.Home-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.Home-intro {
  font-size: large;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}

@keyframes Home-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

================================================
FILE: examples/with-typescript-plugin/src/Home.tsx
================================================
import React from 'react';
import logo from './react.svg';

import './Home.css';

class Home extends React.Component<{}, {}> {
  public render() {
    return (
      <div className="Home">
        <div className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <h2>Welcome to Razzle</h2>
        </div>
        <p className="Home-intro">
          To get started, edit <code>src/App.tsx</code> or{' '}
          <code>src/Home.tsx</code> and save to reload.
        </p>
        <ul className="Home-resources">
          <li>
            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
          </li>
          <li>
            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
          </li>
          <li>
            <a href="https://palmer.chat">Community Slack</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Home;


================================================
FILE: examples/with-typescript-plugin/src/client.tsx
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-typescript-plugin/src/index.ts
================================================
import express from 'express';

// this require is necessary for server HMR to recover from error
// tslint:disable-next-line:no-var-requires
let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, (err: Error) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-typescript-plugin/src/server.tsx
================================================
import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

import App from './App';

let assets: any;

const syncLoadAssets = () => {
  assets = require(process.env.RAZZLE_ASSETS_MANIFEST!);
};
syncLoadAssets();

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req: express.Request, res: express.Response) => {
  const context: any = {};

  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    return { redirect: context.url };
  } else {
    const html =
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${cssLinksFromAssets(assets, 'client')}
    </head>
    <body>
        <div id="root">${markup}</div>
        ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
    </body>
  </html>`;

    return { html };
  }
};

const server = express()
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR!))
  .get('/*', (req: express.Request, res: express.Response) => {
    const { html = '', redirect = false } = renderApp(req, res);
    if (redirect) {
      res.redirect(redirect);
    } else {
      res.send(html);
    }
  });

export default server;


================================================
FILE: examples/with-typescript-plugin/tsconfig.json
================================================
{
  "compilerOptions": {
    "allowJs": true,
    "allowUnreachableCode": false,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["es6", "es2015", "es2017", "dom"],
    "module": "commonjs",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": false,
    "sourceMap": true,
    "strictNullChecks": true,
    "strict": false,
    "pretty": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "razzle.config.js"
  ],
  "types": ["typePatches", "node", "webpack-env"]
}


================================================
FILE: examples/with-typescript-plugin/typings/index.d.ts
================================================
declare module '*.svg' {
    const content: any;
    export default content;
}

================================================
FILE: examples/with-vendor-bundle/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-vendor-bundle/README.md
================================================
# Razzle with Vendor Bundling

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-vendor-bundle with-vendor-bundle

cd with-vendor-bundle
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This example demonstrates how to use a `razzle.config.js` file to modify Razzle's
underlying 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).


First 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.


```js
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    // Change the name of the server output file in production
    if (opts.env.target === 'web') {
      // modify filenaming to account for multiple entry files
      config.output.filename = opts.env.dev
        ? 'static/js/[name].js'
        : 'static/js/[name].[hash:8].js';

      // add another entry point called vendor
      config.entry.vendor = [
        require.resolve('react'),
        require.resolve('react-dom'),
        // ... add any other vendor packages with require.resolve('xxx')
      ];

      config.optimization = {
        splitChunks: {
          // Chunk splitting optimiztion
          chunks: 'all',
          // Switch off name generation, otherwise files would be invalidated
          // when more chunks with the same vendors are added
          name: false,
        },
      };
    }

    return config;
  },
};

```

In `server.js`, we modify our HTML template with our extra js files.

```jsx
// server.js

// ...


server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const markup = renderToString(<App />);
    res.send(
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${assets.client.css
          ? `<link rel="stylesheet" href="${assets.client.css}">`
          : ''}
        ${process.env.NODE_ENV === 'production'
          ? `<script src="${assets.manifest.js}" defer></script>`
          : `<script src="${assets.manifest.js}" defer crossorigin></script>`}
        ${process.env.NODE_ENV === 'production'
          ? `<script src="${assets.vendor.js}" defer></script>`
          : `<script src="${assets.vendor.js}" defer crossorigin></script>`}
        ${process.env.NODE_ENV === 'production'
          ? `<script src="${assets.client.js}" defer></script>`
          : `<script src="${assets.client.js}" defer crossorigin></script>`}
    </head>
    <body>
        <div id="root">${markup}</div>
    </body>
</html>`
    );
  });
```

Almost done. For the best DX experience, we need to tell Razzle where our development bundle of react is
now located so it can pipe runtime errors into a fancy error overlay instead of to the console.

Create a `.env` file with the relative path to our vendor bundle during development:

```
REACT_DEV_BUNDLE_PATH=/static/js/vendor.js
```

That's it.

```
yarn start
```

Congrats! 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!


================================================
FILE: examples/with-vendor-bundle/package.json
================================================
{
  "name": "razzle-examples-with-vendor-bundle",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-vendor-bundle/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-vendor-bundle/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    // Change the name of the server output file in production
    if (opts.env.target === 'web') {
      // modify filenaming to account for multiple entry files
      config.output.filename = opts.env.dev
        ? 'static/js/[name].js'
        : 'static/js/[name].[hash:8].js';

      // add another entry point called vendor
      config.entry.vendor = [
        require.resolve('react'),
        require.resolve('react-dom'),
        // ... add any other vendor packages with require.resolve('xxx')
      ];

      config.optimization = {
        splitChunks: {
          // Chunk splitting optimiztion
          chunks: 'all',
          // Switch off name generation, otherwise files would be invalidated
          // when more chunks with the same vendors are added
          name: false,
        },
      };
    }

    return config;
  },
};


================================================
FILE: examples/with-vendor-bundle/src/App.js
================================================
import React from 'react';

const App = () => (
  <div
    onClick={() => {
      throw new Error('fuck');
    }}
  >
    Welcome to Razzle.
  </div>
);

export default App;


================================================
FILE: examples/with-vendor-bundle/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-vendor-bundle/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-vendor-bundle/src/server.js
================================================
import App from "./App";
import React from "react";
import express from "express";
import { renderToString } from "react-dom/server";

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-vue/.eslintrc
================================================
{
  "extends": ["plugin:vue/recommended"]
}

================================================
FILE: examples/with-vue/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-vue/README.md
================================================
# Razzle Vue Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-vue with-vue

cd with-vue
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This shows how to setup [Vue](https://vuejs.org/) with Razzle.

Here is a list of changes from Razzle's base template:
  1. Install `razzle-plugin-vue`, `eslint-plugin-vue` as devDependencies.
  2. Add `vue` to the razzle plugins config
  3. Install `vue`, `vue-server-renderer` as dependencies
  4. Remove `react`, `react-dom`, `react-router-dom` entirely
  5. Update `server/server.js` to use `vue-server-renderer`'s `renderToString` function.
  6. Update `client.js` to mount Vue to `#app` and start HMR


================================================
FILE: examples/with-vue/package.json
================================================
{
  "name": "razzle-examples-with-vue",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "express": "^4.17.1",
    "vue": "^2.6.12",
    "vue-server-renderer": "^2.6.12"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "eslint": "^7.18.0",
    "eslint-plugin-vue": "^6.2.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-vue": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-vue/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-vue/razzle.config.js
================================================
module.exports = {
  plugins: ['vue'],
};


================================================
FILE: examples/with-vue/src/App.js
================================================
import Vue from 'vue';
import VueApp from './App.vue';

// Export a factory function for creating a fresh app
export function createVueApp() {
  const app = new Vue({
    render: h => h(VueApp),
  });

  return { app };
}


================================================
FILE: examples/with-vue/src/App.vue
================================================
<template>
  <div class="app">
    <section>
      <img
        src="./vue.svg"
        alt="Vue"
      >
      <h1>{{ greeting }}</h1>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello Vue!'
    }
  }
}
</script>

<style>
  h1 {
    font-size: 2em;
    color: #42b983;
    text-align: center;
  }

  img {
    height: 100px;
    width: auto;
    margin: 0 auto;
    display: block;
  }
</style>


================================================
FILE: examples/with-vue/src/client.js
================================================
import { createVueApp } from './App';

const { app } = createVueApp();
app.$mount('#app');

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-vue/src/index.js
================================================
import express from 'express';
import app from './server';

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, err => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-vue/src/server.js
================================================
import express from 'express';
import { createVueApp } from './App';

const renderer = require('vue-server-renderer').createRenderer();

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {

  const { app } = createVueApp();
  const vueMarkup = renderer.renderToString(app);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
  <div id="app">${vueMarkup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-vue-router/.eslintrc
================================================
{
  "extends": ["plugin:vue/recommended"],
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  }
}

================================================
FILE: examples/with-vue-router/.gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: examples/with-vue-router/README.md
================================================
# Razzle Vue Router Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-vue-router with-vue-router

cd with-vue-router
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->

## Idea behind the example
This shows how to setup [Vue Router](https://router.vuejs.org/) with Vue and Razzle.

Here is a list of changes from Razzle's base template:
  1. Install `connect-history-api-fallback`, `eslint-plugin-vue`, `razzle-plugin-vue`, `vue-template-compiler` as devDependencies
      * `connect-history-api-fallback` is required for `vue-router`'s history mode.
      * `vue-template-compiler` is required by `vue-router`
  2. Add `vue` to the razzle plugins config
  3. Add custom `.eslintrc` to follow `vue` recommended, and `babel-eslint`
  4. Install `vue`, `vue-router`, `vue-server-renderer` as dependencies
  4. Remove `react`, `react-dom`, `react-router-dom` entirely
  5. Update `server/server.js` to use `vue-server-renderer`'s `renderToString` function, enable history mode, add server-side routing
  6. Update `client.js` to wait till `vue-router` is ready, mount Vue to `#app` and start HMR
  7. `App.vue` contains only a `<router-view>` component, which then renders every other page inside it
  8. `Home.vue`, `About.vue` and `PageNotFound.vue` are added
  9. `router.js` exports a `VueRouter` as well as setting up the page routes


================================================
FILE: examples/with-vue-router/package.json
================================================
{
  "name": "razzle-examples-with-vue-router",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "express": "^4.17.1",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6",
    "vue-server-renderer": "^2.6.11"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "connect-history-api-fallback": "^1.6.0",
    "eslint": "^7.18.0",
    "eslint-plugin-vue": "^6.2.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "razzle-plugin-vue": "4.2.15",
    "vue-template-compiler": "^2.6.11",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-vue-router/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-vue-router/razzle.config.js
================================================
module.exports = {
  plugins: ['vue'],
};


================================================
FILE: examples/with-vue-router/src/About.vue
================================================
<template>
  <div class="about-page">
    <h1>{{ title }}</h1>
    <router-link to="/">
      Home
    </router-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: 'About Page'
    };
  }
};
</script>

<style>

</style>


================================================
FILE: examples/with-vue-router/src/App.js
================================================
import Vue from 'vue';
import VueApp from './App.vue';

import router from './router';

// Export a factory function for creating a fresh app
export function createVueApp() {
  const app = new Vue({
    router,
    render: h => h(VueApp),
  });

  return { app, router };
}


================================================
FILE: examples/with-vue-router/src/App.vue
================================================
<template>
  <div class="app">
    <router-view />
  </div>
</template>

<script>
export default {}
</script>

<style>
</style>


================================================
FILE: examples/with-vue-router/src/Home.vue
================================================
<template>
  <div class="home-page">
    <section>
      <img
        src="./vue.svg"
        alt="Vue"
      >
      <h1>{{ greeting }}</h1>

      <router-link to="/about">
        About
      </router-link>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello Vue!'
    };
  }
}
</script>

<style>
  h1 {
    font-size: 2em;
    color: #42b983;
    text-align: center;
  }

  img {
    height: 100px;
    width: auto;
    margin: 0 auto;
    display: block;
  }
</style>


================================================
FILE: examples/with-vue-router/src/PageNotFound.vue
================================================
<template>
  <div class="page-not-found">
    <h1>404: Page not found.</h1>
    <router-link to="/">
      Home
    </router-link>
  </div>
</template>

<script>
export default {}
</script>

<style>

</style>


================================================
FILE: examples/with-vue-router/src/client.js
================================================
import { createVueApp } from './App';

const { app, router } = createVueApp();

router.onReady(() => {
  app.$mount('#app');
});

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-vue-router/src/index.js
================================================
import express from 'express';
import app from './server';

if (module.hot) {
  module.hot.accept('./server', () => {
    console.log('🔁  HMR Reloading `./server`...');
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, err => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-vue-router/src/router.js
================================================
import Vue from 'vue';
import VueRouter from 'vue-router';

import Home from './Home.vue';

// The () => import() syntax is used for webpack's lazy loading and code splitting functionality
// https://router.vuejs.org/guide/advanced/lazy-loading.html
const About = () => import(/* webpackChunkName: "AboutPage" */ './About.vue');
const PageNotFound = () =>
  import(/* webpackChunkName: "PageNotFound" */ './PageNotFound.vue');

Vue.use(VueRouter);

// Create a router in history mode
// By default vue-router uses `hash mode` urls: localhost:3000/#/about
// `History mode` allows regular urls: localhost:3000/about
export default new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '*', component: PageNotFound }, // wildcard route match, if haven't matched previous: 404
  ],
});


================================================
FILE: examples/with-vue-router/src/server.js
================================================
import express from 'express';
import history from 'connect-history-api-fallback';

import { createVueApp } from './App';

const renderer = require('vue-server-renderer').createRenderer();

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = async (req, res) => {
  return new Promise((resolve)=>{

    const { app, router } = createVueApp();

    // Set server-side router's location
    router.push(req.originalUrl).catch(err => {});

    // wait until the router has resolved possible async components and hooks
    router.onReady(async () => {
      const vueMarkup = await renderer.renderToString(app);

      const html =
        // prettier-ignore
        `<!doctype html>
      <html lang="">
      <head>
          <meta http-equiv="X-UA-Compatible" content="IE=edge" />
          <meta charSet='utf-8' />
          <title>Welcome to Razzle</title>
          <meta name="viewport" content="width=device-width, initial-scale=1">
          ${cssLinksFromAssets(assets, 'client')}
      </head>
      <body>
      <div id="app">${vueMarkup}</div>
          ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
      </body>
    </html>`;

      resolve({ html });
    });
  });
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', async (req, res) => {
    const { html } = await renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-webpack-dev-server-v4/README.md
================================================
# Razzle With Webpack Dev Server v4 Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-webpack-dev-server-v4 with-webpack-dev-server-v4

cd with-webpack-dev-server-v4
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is an example of how to use razzle with the `webpack-dev-server` version 4.
It updates the `webpack-dev-server` in `package.json` to the current latest version 4.
It provides a custom `razzle.config.js` that throws if the `webpack-dev-server` < version 4 to ensure the example setup is correct.


================================================
FILE: examples/with-webpack-dev-server-v4/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
public/static
.env.*.local

================================================
FILE: examples/with-webpack-dev-server-v4/package.json
================================================
{
  "name": "razzle-examples-with-webpack-dev-server-v4",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "babel-preset-razzle": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "mini-css-extract-plugin": "^0.9.0",
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "webpack": "^4.44.1",
    "webpack-dev-server": "^4.3.1"
  }
}


================================================
FILE: examples/with-webpack-dev-server-v4/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-webpack-dev-server-v4/razzle.config.js
================================================
module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    // Use the same detection code from `createConfigAsync` to ensure that this example is using version 4
    const devserverPkg = require('webpack-dev-server/package.json');
    const devServerMajorVersion = parseInt(devserverPkg.version[0]);
    if (devServerMajorVersion < 4) {
      throw new Error(`This should be webpack-dev-server version 4, got ${devServerMajorVersion} instead`);
    }

    return config;
  },
}


================================================
FILE: examples/with-webpack-dev-server-v4/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-webpack-dev-server-v4/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-webpack-dev-server-v4/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-webpack-dev-server-v4/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-webpack-dev-server-v4/src/client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-webpack-dev-server-v4/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-webpack-dev-server-v4/src/server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-webpack-public-path/README.md
================================================
# Razzle Basic Example

## How to use

<!-- START install generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn update-examples TO UPDATE -->Create and start the example:

```bash
npx create-razzle-app --example with-webpack-public-path with-webpack-public-path

cd with-webpack-public-path
yarn start
```
<!-- END install generated instructions please keep comment here to allow auto update -->


## Idea behind the example
This is a basic, bare-bones example of how to use razzle. It satisfies the entry points
`src/index.js` for the server and and `src/client.js` for the browser.


================================================
FILE: examples/with-webpack-public-path/package.json
================================================
{
  "name": "razzle-examples-basic",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "mini-css-extract-plugin": "^0.9.0",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "babel-preset-razzle": "4.2.15",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: examples/with-webpack-public-path/public/robots.txt
================================================
User-agent: *



================================================
FILE: examples/with-webpack-public-path/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: examples/with-webpack-public-path/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}


================================================
FILE: examples/with-webpack-public-path/src/App.js
================================================
import './App.css';

import React from 'react';
const App = () => <div>Welcome to Razzle.</div>;

export default App;


================================================
FILE: examples/with-webpack-public-path/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(<App />, div);
  });
});


================================================
FILE: examples/with-webpack-public-path/src/client.js
================================================
import './init.client';
import './real.client';

================================================
FILE: examples/with-webpack-public-path/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: examples/with-webpack-public-path/src/init.client.js
================================================
__webpack_public_path__ = window.LOCAL_PUBLIC_PATH;


================================================
FILE: examples/with-webpack-public-path/src/init.server.js
================================================
__webpack_public_path__ = process.env.LOCAL_PUBLIC_PATH||process.env.CLIENT_PUBLIC_PATH||process.env.PUBLIC_PATH;


================================================
FILE: examples/with-webpack-public-path/src/real.client.js
================================================
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';

hydrate(<App />, document.getElementById('root'));

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: examples/with-webpack-public-path/src/real.server.js
================================================
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const public_path = process.env.NODE_ENV === 'development' ? '' : process.env.LOCAL_PUBLIC_PATH||process.env.PUBLIC_PATH;;

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${public_path}${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${public_path}${asset}"${extra}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const markup = renderToString(<App />);

  const html =
    // prettier-ignore
    `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charSet='utf-8' />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1"><script type="text/javascript">
          window.LOCAL_PUBLIC_PATH = '${__webpack_public_path__}';
      </script>
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', ' defer crossorigin')}
  </body>
</html>`;

  return { html };
};

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const { html } = renderApp(req, res);
    res.send(html);
  });

export default server;


================================================
FILE: examples/with-webpack-public-path/src/server.js
================================================

import './init.server';
import server from './real.server';

export default server;



================================================
FILE: lerna.json
================================================
{
  "lerna": "3.20.2",
  "packages": [
    "packages/razzle",
    "packages/razzle-start-server-webpack-plugin",
    "packages/babel-preset-razzle",
    "packages/create-razzle-app",
    "packages/razzle-dev-utils",
    "packages/razzle-plugin-*"
  ],
  "useWorkspaces": true,
  "npmClient": "yarn",
  "command": {
    "bootstrap": {
      "nohoist": "express"
    },
    "publish": {
      "npmClient": "npm",
      "allowBranch": [
        "master",
        "canary",
        "finch"
      ],
      "registry": "https://registry.npmjs.org/"
    }
  },
  "changelog": {
    "repo": "jaredpalmer/razzle",
    "labels": {
      "tag: new feature": ":rocket: New Feature",
      "tag: breaking change": ":boom: Breaking Change",
      "tag: bug fix": ":bug: Bug Fix",
      "tag: enhancement": ":nail_care: Enhancement",
      "tag: documentation": ":memo: Documentation",
      "tag: internal": ":house: Internal"
    },
    "cacheDir": ".changelog"
  },
  "version": "4.2.15"
}


================================================
FILE: package.json
================================================
{
  "private": true,
  "homepage": "https://github.com/jaredpalmer/razzle#readme",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/jaredpalmer/razzle.git"
  },
  "bugs": {
    "url": "https://github.com/jaredpalmer/razzle/issues"
  },
  "resolutions": {
    "**/**/node-gyp": "7.0.0"
  },
  "devDependencies": {
    "@changesets/changelog-github": "^0.4.4",
    "@changesets/cli": "^2.21.0",
    "all-contributors-cli": "^6.14.2",
    "axios": "^0.21.2",
    "doctoc": "^1.4.0",
    "eslint": "^6.8.0",
    "execa": "5.0.0",
    "fs-extra": "^9.1.0",
    "glob": "^7.1.6",
    "got": "^11.0.2",
    "html-webpack-plugin": "4.5.2",
    "husky": "^4.2.3",
    "inquirer": "^7.3.3",
    "is-docker": "^2.1.1",
    "jest": "^26.6.3",
    "jest-html-reporters": "^2.1.2",
    "leaked-handles": "^5.2.0",
    "lerna": "^3.20.2",
    "lerna-changelog": "^1.0.1",
    "lint-staged": "^10.0.8",
    "mini-css-extract-plugin": "^0.9.0",
    "prettier": "^1.19.1",
    "ps-tree": "1.2.0",
    "puppeteer": "^7.0.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "recursive-copy": "^2.0.11",
    "release": "^6.1.0",
    "semver": "7.1.3",
    "serve": "^11.3.2",
    "shelljs": "^0.8.3",
    "webpack": "4.46.0",
    "webpack-dev-server": "^3.11.0"
  },
  "scripts": {
    "test": "yarn test:e2e",
    "test:packages": "lerna run test --stream --scope razzle-* --ignore razzle-examples-* -- --passWithNoTests --verbose --no-cache",
    "test:e2e": "jest --config ./test/jest.e2e.config.json --verbose --no-cache",
    "test:examples": "jest --config ./test/jest.examples.config.js --verbose --no-cache",
    "test:examples:simple": "jest --config ./test/jest.examples.config.js --verbose --no-cache -t simple",
    "test:examples:complex": "cross-env COMPLEX=true jest --config ./test/jest.examples.config.js --verbose --no-cache -t complex",
    "clean": "lerna clean --yes",
    "format": "prettier --write 'packages/*/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx)' 'packages/*/!(node_modules)/**/*.js'",
    "publish-all": "node ./scripts/publish-all.js",
    "publish-all-stable": "yarn publish-all -c -t --push && release && node ./scripts/release-notes.js",
    "publish-all-canary": "yarn publish-all -p canary -c -t --push && release --pre",
    "publish-all-alpha": "yarn publish-all -p alpha -c -t --push && release --pre",
    "pre-publish-all": "yarn build-docs && yarn update-examples",
    "publish-to-npm": "node ./scripts/publish-to-npm.js",
    "build-docs": "node ./scripts/build-docs.js",
    "update-examples": "node ./scripts/update-examples.js",
    "git-reset": "git reset --hard HEAD",
    "git-clean": "git clean -d -x -e node_modules -e packages -f",
    "yalc-publish-all": "node ./scripts/yalc-publish-all.js",
    "try-example": "node ./scripts/try-example.js",
    "new-example": "node ./scripts/new-example.js",
    "bootstrap-examples": "node ./scripts/bootstrap-examples.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|mdx}": [
      "yarn format"
    ]
  },
  "jest": {
    "testPathIgnorePatterns": [
      "<rootDir>/coverage/",
      "<rootDir>/node_modules/",
      "<rootDir>/examples/"
    ],
    "collectCoverageFrom": [
      "**/*.js"
    ],
    "coveragePathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/packages/*/node_modules/",
      "<rootDir>/examples/",
      "<rootDir>/coverage/"
    ]
  },
  "workspaces": [
    "packages/razzle",
    "packages/razzle-start-server-webpack-plugin",
    "packages/babel-preset-razzle",
    "packages/create-razzle-app",
    "packages/razzle-dev-utils",
    "packages/razzle-plugin-*"
  ],
  "version": "4.2.15"
}


================================================
FILE: package.meta.json
================================================
{
  "exampleDependencyVersions": {
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "serve": "^11.3.2",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack-dev-server": "^3.11.0",
    "webpack": "^4.44.1"
  },
  "internalPeerDependencyVersions": {
    "webpack-dev-server": "^3.11.0 || ^4.0.0",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack": "^4.0.0 || ^5.0.0"
  },
  "workspaces": [
    "packages/razzle",
    "packages/razzle-start-server-webpack-plugin",
    "packages/babel-preset-razzle",
    "packages/create-razzle-app",
    "packages/razzle-dev-utils",
    "packages/razzle-plugin-*"
  ]
}


================================================
FILE: packages/babel-preset-razzle/CHANGELOG.md
================================================
# babel-preset-razzle

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/babel-preset-razzle/LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 Jared Palmer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: packages/babel-preset-razzle/README.md
================================================
# babel-preset-razzle

This package includes the [Babel](https://babeljs.io) preset used by [Razzle](https://github/com/palmerhq/razzle)

## Usage in Razzle Projects

The easiest way to use this configuration is with Razzle, which includes it by default.

## Usage Outside of Razzle

If you want to use this Babel preset in a project not built with razzle, you can install it with following steps.

First, [install Babel](https://babeljs.io/docs/setup/).

Then create a file named `.babelrc` with following contents in the root folder of your project:

```js
{
  "presets": ["razzle"]
}
```

This 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.


================================================
FILE: packages/babel-preset-razzle/babel-plugins/commonjs.js
================================================
const commonjsPlugin = require('@babel/plugin-transform-modules-commonjs');

module.exports = function(api, options, dirname) {
  const commonjs = commonjsPlugin.default(api, options, dirname);
  return {
    visitor: {
      Program: {
        exit: function(path, state) {
          let foundModuleExports = false;
          path.traverse({
            MemberExpression: function(expressionPath) {
              if (expressionPath.node.object.name !== 'module') return;
              if (expressionPath.node.property.name !== 'exports') return;
              foundModuleExports = true;
            },
          });

          if (!foundModuleExports) {
            return;
          }

          commonjs.visitor.Program.exit.call(this, path, state);
        },
      },
    },
  };
};


================================================
FILE: packages/babel-preset-razzle/babel-plugins/jsx-pragma.js
================================================
'use strict';

module.exports = function(opts) {
  const t = opts.types;
  return {
    inherits: require('babel-plugin-syntax-jsx'),
    visitor: {
      JSXElement: (_path, state) => {
        state.set('jsx', true);
      },

      // Fragment syntax is still JSX since it compiles to createElement(),
      // but JSXFragment is not a JSXElement
      JSXFragment: (_path, state) => {
        state.set('jsx', true);
      },

      Program: {
        exit: (path, state) => {
          if (state.get('jsx')) {
            const pragma = t.identifier(state.opts.pragma);
            let importAs = pragma;

            // if there's already a React in scope, use that instead of adding an import
            const existingBinding =
              state.opts.reuseImport !== false &&
              state.opts.importAs &&
              path.scope.getBinding(state.opts.importAs);

            // var _jsx = _pragma.createElement;
            if (state.opts.property) {
              if (state.opts.importAs) {
                importAs = t.identifier(state.opts.importAs);
              } else {
                importAs = path.scope.generateUidIdentifier('pragma');
              }

              const mapping = t.variableDeclaration('var', [
                t.variableDeclarator(
                  pragma,
                  t.memberExpression(
                    importAs,
                    t.identifier(state.opts.property)
                  )
                ),
              ]);

              // if the React binding came from a require('react'),
              // make sure that our usage comes after it.
              let newPath;
              if (
                existingBinding &&
                t.isVariableDeclarator(existingBinding.path.node) &&
                t.isCallExpression(existingBinding.path.node.init) &&
                t.isIdentifier(existingBinding.path.node.init.callee) &&
                existingBinding.path.node.init.callee.name === 'require'
              ) {
                [newPath] = existingBinding.path.parentPath.insertAfter(
                  mapping
                );
              } else {
                // @ts-ignore
                [newPath] = path.unshiftContainer('body', mapping);
              }

              for (const declar of newPath.get('declarations')) {
                path.scope.registerBinding(newPath.node.kind, declar);
              }
            }

            if (!existingBinding) {
              const importSpecifier = t.importDeclaration(
                [
                  state.opts.import
                    ? // import { $import as _pragma } from '$module'
                      t.importSpecifier(
                        importAs,
                        t.identifier(state.opts.import)
                      )
                    : state.opts.importNamespace
                    ? t.importNamespaceSpecifier(importAs)
                    : // import _pragma from '$module'
                      t.importDefaultSpecifier(importAs),
                ],
                t.stringLiteral(state.opts.module || 'react')
              );

              const [newPath] = path.unshiftContainer('body', importSpecifier);
              for (const specifier of newPath.get('specifiers')) {
                path.scope.registerBinding('module', specifier);
              }
            }
          }
        },
      },
    },
  };
};


================================================
FILE: packages/babel-preset-razzle/babel-plugins/no-anonymous-default-export.js
================================================
const chalk = require('chalk');

module.exports = function(opts) {
  const t = opts.types;
  let onWarning = null;
  opts.caller(caller => {
    onWarning = caller.onWarning;
    return ''; // Intentionally empty to not invalidate cache
  });

  if (typeof onWarning !== 'function') {
    return { visitor: {} };
  }

  const warn = onWarning;
  return {
    visitor: {
      ExportDefaultDeclaration: function(path) {
        const def = path.node.declaration;

        if (
          !(
            def.type === 'ArrowFunctionExpression' ||
            def.type === 'FunctionDeclaration'
          )
        ) {
          return;
        }

        switch (def.type) {
          case 'ArrowFunctionExpression': {
            warn(
              [
                chalk.yellow.bold(
                  'Anonymous arrow functions cause Fast Refresh to not preserve local component state.'
                ),
                'Please add a name to your function, for example:',
                '',
                chalk.bold('Before'),
                chalk.cyan('export default () => <div />;'),
                '',
                chalk.bold('After'),
                chalk.cyan('const Named = () => <div />;'),
                chalk.cyan('export default Named;'),
              ].join('\n')
            );
            break;
          }
          case 'FunctionDeclaration': {
            const isAnonymous = !Boolean(def.id);
            if (isAnonymous) {
              warn(
                [
                  chalk.yellow.bold(
                    'Anonymous function declarations cause Fast Refresh to not preserve local component state.'
                  ),
                  'Please add a name to your function, for example:',
                  '',
                  chalk.bold('Before'),
                  chalk.cyan('export default function () { /* ... */ }'),
                  '',
                  chalk.bold('After'),
                  chalk.cyan('export default function Named() { /* ... */ }'),
                ].join('\n')
              );
            }
            break;
          }
          default: {
            // eslint-disable-next-line @typescript-eslint/no-unused-vars
            const never = def;
          }
        }
      },
    },
  };
};


================================================
FILE: packages/babel-preset-razzle/babel-plugins/optimize-hook-destructuring.js
================================================
'use strict';

// matches any hook-like (the default)
const isHook = /^use[A-Z]/;

// matches only built-in hooks provided by React et al
const isBuiltInHook = /^use(Callback|Context|DebugValue|Effect|ImperativeHandle|LayoutEffect|Memo|Reducer|Ref|State)$/;

module.exports = function(opts) {
  const t = opts.types;
  const visitor = {
    CallExpression: function(path, state) {
      const onlyBuiltIns = state.opts.onlyBuiltIns;

      // if specified, options.lib is a list of libraries that provide hook functions
      const libs =
        state.opts.lib &&
        (state.opts.lib === true
          ? ['react', 'preact/hooks']
          : [].concat(state.opts.lib));

      // skip function calls that are not the init of a variable declaration:
      if (!t.isVariableDeclarator(path.parent)) return;

      // skip function calls where the return value is not Array-destructured:
      if (!t.isArrayPattern(path.parent.id)) return;

      // name of the (hook) function being called:
      const hookName = path.node.callee.name;

      if (libs) {
        const binding = path.scope.getBinding(hookName);
        // not an import
        if (!binding || binding.kind !== 'module') return;

        const specifier = binding.path.parent.source.value;
        // not a match
        if (!libs.some(lib => lib === specifier)) return;
      }

      // only match function calls with names that look like a hook
      if (!(onlyBuiltIns ? isBuiltInHook : isHook).test(hookName)) return;

      path.parent.id = t.objectPattern(
        path.parent.id.elements.reduce((patterns, element, i) => {
          if (element === null) {
            return patterns;
          }

          return patterns.concat(
            t.objectProperty(t.numericLiteral(i), element)
          );
        }, [])
      );
    },
  };

  return {
    name: 'optimize-hook-destructuring',
    visitor: {
      // this is a workaround to run before preset-env destroys destructured assignments
      Program: function(path, state) {
        path.traverse(visitor, state);
      },
    },
  };
};


================================================
FILE: packages/babel-preset-razzle/index.js
================================================
'use strict';

const path = require('path');
const PluginItem = require('@babel/core').PluginItem;
const env = process.env.NODE_ENV;
const isProduction = env === 'production';
const isDevelopment = env === 'development';
const isTest = env === 'test';

// Taken from https://github.com/babel/babel/commit/d60c5e1736543a6eac4b549553e107a9ba967051#diff-b4beead8ad9195361b4537601cc22532R158
const supportsStaticESM = function(caller) {
  return !!caller && caller.supportsStaticESM;
};

module.exports = function(api, options) {
  options = options || {};

  const supportsESM = api.caller(supportsStaticESM);
  const isServer = api.caller(function(caller) {
    return !!caller && caller.isServer;
  });
  const isModern = api.caller(function(caller) {
    return !!caller && caller.isModern;
  });

  const isLaxModern =
    isModern ||
    ((options['preset-env'] || {}).targets &&
      options['preset-env'].targets.esmodules === true);

  const presetEnvConfig = Object.assign(
    {
      // In the test environment `modules` is often needed to be set to true, babel figures that out by itself using the `'auto'` option
      // In production/development this option is set to `false` so that webpack can handle import/export with tree-shaking
      modules: 'auto',
      exclude: ['transform-typeof-symbol'],
    },
    options['preset-env'] || {}
  );

  // When transpiling for the server or tests, target the current Node version
  // if not explicitly specified:
  if (
    (isServer || isTest) &&
    (!presetEnvConfig.targets ||
      !(
        typeof presetEnvConfig.targets === 'object' &&
        'node' in presetEnvConfig.targets
      ))
  ) {
    presetEnvConfig.targets = {
      // Targets the current process' version of Node. This requires apps be
      // built and deployed on the same version of Node.
      node: 'current',
    };
  }

  // specify a preset to use instead of @babel/preset-env
  const customModernPreset =
    isLaxModern && options['experimental-modern-preset'];

  return {
    sourceType: 'unambiguous',
    presets: [
      customModernPreset || [
        require('@babel/preset-env').default,
        presetEnvConfig,
      ],
      [
        require('@babel/preset-react'),
        Object.assign(
          {
            // This adds @babel/plugin-transform-react-jsx-source and
            // @babel/plugin-transform-react-jsx-self automatically in development
            development: isDevelopment || isTest,
          },
          (options['preset-react'] || {}).runtime !== 'automatic' ? { pragma: '__jsx' } : {},
          options['preset-react'] || {}
        ),
      ],
      options['preset-typescript'] !== false && [
        require('@babel/preset-typescript'),
        Object.assign(
          { allowNamespaces: true, allExtensions: true, isTSX: true },
          options['preset-typescript'] || {}
        ),
      ],
    ].filter(Boolean),
    plugins: [
      (options['preset-react'] || {}).runtime !== 'automatic' && [
        require('./babel-plugins/jsx-pragma'),
        {
          // This produces the following injected import for modules containing JSX:
          //   import React from 'react';
          //   var __jsx = React.createElement;
          module: 'react',
          importAs: 'React',
          pragma: '__jsx',
          property: 'createElement',
        },
      ],
      [
        require('./babel-plugins/optimize-hook-destructuring'),
        {
          // only optimize hook functions imported from React/Preact
          lib: true,
        },
      ],
      require('@babel/plugin-syntax-dynamic-import'),
      options['class-properties'] !== false && [
        require('@babel/plugin-proposal-class-properties'),
        options['class-properties'] || {},
      ],
      [
        require('@babel/plugin-proposal-object-rest-spread'),
        {
          useBuiltIns: true,
        },
      ],
      !isServer && [
        require('@babel/plugin-transform-runtime'),
        Object.assign(
          {
            corejs: false,
            helpers: true,
            regenerator: true,
            useESModules: supportsESM && presetEnvConfig.modules !== 'commonjs',
            absoluteRuntime: path.dirname(
              require.resolve('@babel/runtime/package.json')
            ),
            version: require('@babel/runtime/package.json').version,
          },
          options['transform-runtime'] || {}
        ),
      ],
      isProduction && [
        require('babel-plugin-transform-react-remove-prop-types'),
        {
          removeImport: true,
        },
      ],
      require('@babel/plugin-proposal-optional-chaining'),
      require('@babel/plugin-proposal-nullish-coalescing-operator'),
      isServer && require('@babel/plugin-syntax-bigint'),
      [require('@babel/plugin-proposal-numeric-separator').default, false],
    ].filter(Boolean)
  };
};


================================================
FILE: packages/babel-preset-razzle/package.json
================================================
{
  "name": "babel-preset-razzle",
  "version": "4.2.18",
  "description": "Babel presets for Razzle",
  "main": "index.js",
  "author": "jaredpalmer",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/babel-preset-razzle"
  },
  "license": "MIT",
  "files": [
    "index.js",
    "babel-plugins/amp-attributes.js",
    "babel-plugins/commonjs.js",
    "babel-plugins/jsx-pragma.js",
    "babel-plugins/no-anonymous-default-export.js",
    "babel-plugins/optimize-hook-destructuring.js"
  ],
  "dependencies": {
    "@babel/core": "^7.11.1",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
    "@babel/plugin-proposal-numeric-separator": "^7.10.4",
    "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "@babel/plugin-syntax-bigint": "^7.8.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/preset-react": "^7.9.4",
    "@babel/preset-typescript": "^7.9.0",
    "@babel/runtime": "^7.9.2",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "chalk": "^4.1.0"
  }
}


================================================
FILE: packages/create-razzle-app/.gitignore
================================================
node_modules
*.log


================================================
FILE: packages/create-razzle-app/CHANGELOG.md
================================================
# create-razzle-app

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/create-razzle-app/README.md
================================================
# Create Razzle App

## Create UNIVERSAL React, Preact, and Inferno apps in one command.

```
npx create-razzle-app my-proj
cd my-proj
npm start
```

or.... with the `yarn create` command:

```
yarn create razzle-app my-proj
cd my-proj
yarn start
```

## You can also initialize a project from one of the [official examples](https://github.com/jaredpalmer/razzle/tree/master/examples).

```
npx create-razzle-app --example with-preact my-preact-app
cd my-preact-app
npm start
```

or

```
yarn create razzle-app --example with-preact my-preact-app
cd my-preact-app
```

### or initialize a project from npm/github/git/file examples.

From npm:

```
npx create-razzle-app --example razzle-example-basic@latest my-app
cd my-app
npm start
```

From github repo:

```
npx create-razzle-app --example https://github.com/fivethreeo/razzle-example-basic@master my-app
cd my-app
npm start
```

From git repo:

```
npx create-razzle-app --example git+git://github.com/fivethreeo/razzle-example-basic@master my-app
cd my-app
npm start
```

From local path:

```
npx create-razzle-app --example file:local/path/to/example my-app
cd my-app
npm start
```

All methods except official and file examples also supports examples at subpaths:

```
npx create-razzle-app --example git+git://github.com/fivethreeo/razzle-example-basic@master:subexample my-app
cd my-app
npm start
```

```
npx create-razzle-app --example razzle-example-basic@latest:subexample my-app
cd my-app
npm start
```


================================================
FILE: packages/create-razzle-app/bin/create-razzle-app
================================================
#! /usr/bin/env node

const chalk = require('chalk');
const program = require('commander');
const lib = require('..');
const pkg = require('../package.json');

const messages = lib.messages;
const createRazzleApp = lib.createRazzleApp;

let projectName;

program
  .version(pkg.version)
  .arguments('<project-directory>')
  .usage(`${chalk.green('<project-directory>')} [options]`)
  .action(function(name) {
    projectName = name;
  })
  .option('-e, --example <example-path>', messages.exampleHelp())
  .allowUnknownOption()
  .option('--no-install', 'Dont install packages')
  .option('--yarn', 'Force yarn package manager')
  .option('--npm', 'Force npm package manager')
  .option('--verbose', 'Be verbose to debug')
  .on('--help', messages.help)
  .parse(process.argv);

const example = program.example;

createRazzleApp({
  projectName,
  example,
  install: program.install,
  yarn: program.yarn,
  npm: program.npm,
  verbose: program.verbose
});


================================================
FILE: packages/create-razzle-app/index.js
================================================
'use strict';

const createRazzle = require('./lib');
const messages = require('./lib/messages');

module.exports = {
  messages: messages,
  createRazzleApp: createRazzle,
};


================================================
FILE: packages/create-razzle-app/lib/index.js
================================================
'use strict';

const path = require('path');
const fs = require('fs');
const Promise = require('promise');
const axios = require('axios');
const httpAdapter = require('axios/lib/adapters/http');
const copyDir = require('./utils/copy-dir');
const install = require('./utils/install');
const loadExample = require('./utils/load-example');
const loadGitHubExample = require('./utils/load-github-example');
const loadGitExample = require('./utils/load-git-example');
const loadNpmExample = require('./utils/load-npm-example');
const messages = require('./messages');
const officialExamples = require('./officialExamples');

const isFolder = ({ type }) => type === 'dir';
const prop = key => obj => obj[key];

const branch = 'master'; // this line auto updates when yarn update-examples is run
const razzlePkg = `razzle${branch == 'master' ? '' : '@' + branch}`;
const razzleDevUtilsPkg = `razzle-dev-utils${branch == 'master' ? '' : '@' + branch}`;


module.exports = async function createRazzleApp(opts) {
  const projectName = opts.projectName;

  if (!projectName) {
    console.log(messages.missingProjectName());
    process.exit(1);
  }

  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);
  
  if ( fs.existsSync(projectName) && ! isSafeToCreateProjectIn(projectPath, projectName)) {
    console.log(messages.folderNotEmpty(projectName));
    process.exit(1);
  }

  if (opts.example) {
    if (/^https:\/\/github/.test(opts.example)) {
      if (opts.verbose) {
        console.log(`Using github ${opts.example} example`)
      }
      loadGitHubExample({
        projectName: projectName,
        example: opts.example,
      })
      .then(installWithMessageFactory(opts, true))
      .catch(function(err) {
        console.error(`Failed loading github ${opts.example} example`);
        if (opts.verbose) {
          console.error(err);
        }
        process.exit(1)
      });
    } else if (/^git\+/.test(opts.example)) {
      if (opts.verbose) {
        console.log(`Using git ${opts.example} example`)
      }
      loadGitExample({
        projectName: projectName,
        example: opts.example,
      })
      .then(installWithMessageFactory(opts, true))
      .catch(function(err) {
        console.error(`Failed loading git ${opts.example} example`);
        if (opts.verbose) {
          console.error(err);
        }
        process.exit(1)
      });
    } else if (/^file:/.test(opts.example)) {
      if (opts.verbose) {
        console.log(`Using file ${opts.example} example`)
      }
      const examplePath = opts.example.slice(5);
      copyDir({
        templatePath: examplePath,
        projectPath: projectPath,
        projectName: projectName,
      })
      .then(installWithMessageFactory(opts, true))
      .catch(function(err) {
        console.error(`Failed loading file ${opts.example} example`);
        if (opts.verbose) {
          console.error(err);
        }
        process.exit(1)
      });
    } else {
      if (officialExamples.includes(opts.example)) {
        if (opts.verbose) {
          console.log(`Using official ${opts.example} example`)
        }
        loadExample({
          projectName: projectName,
          example: opts.example,
          verbose: opts.verbose,
        })
        .then(installWithMessageFactory(opts, true))
        .catch(function(err) {
          console.error(`Failed loading official ${opts.example} example`);
          if (opts.verbose) {
            console.error(err);
          }
          process.exit(1)
        });
      } else {
        if (opts.verbose) {
          console.log(`Using npm ${opts.example} example`)
        }
        loadNpmExample({
          projectName: projectName,
          example: opts.example,
        })
        .then(installWithMessageFactory(opts, true))
        .catch(function(err) {
          console.error(`Failed loading npm ${opts.example} example`);
          if (opts.verbose) {
            console.error(err);
          }
          process.exit(1)
        });
      }
    }
  } else {
    if (opts.verbose) {
      console.log(`Using official default example`)
    }
    const templatePath = path.resolve(__dirname, '../templates/default');

    copyDir({
      templatePath: templatePath,
      projectPath: projectPath,
      projectName: projectName,
    })
    .then(installWithMessageFactory(opts, true))
    .catch(function(err) {
      console.error(`Failed loading official default example`);
      if (opts.verbose) {
        console.error(err);
      }
      process.exit(1)
    });
  }
};

function isSafeToCreateProjectIn(projectPath, projectName) {
  // we allow this files
  const validFiles = [
    '.DS_Store',
    '.git',
    '.gitattributes',
    '.gitignore',
    '.gitlab-ci.yml',
    '.hg',
    '.hgcheck',
    '.hgignore',
    '.idea',
    '.npmignore',
    '.travis.yml',
    'docs',
    'LICENSE',
    'README.md',
    'mkdocs.yml',
    'Thumbs.db',
  ];
  // error log files that may exist from a previous install
  // we will remove these
  const errorLogFilePatterns = [
    'npm-debug.log',
    'yarn-error.log',
    'yarn-debug.log',
  ];
  // helper function to identify whether a file is an error log file
  const isErrorLog = file => {
    return errorLogFilePatterns.some(pattern => file.startsWith(pattern));
  };

  // find conflicting files
  const conflicts = fs
    .readdirSync(projectPath)
    .filter(file => !validFiles.includes(file))
    // IntelliJ IDEA creates module files before CRA is launched
    .filter(file => !/\.iml$/.test(file))
    // Don't treat log files from previous installation as conflicts
    .filter(file => !isErrorLog(file));

  if (conflicts.length > 0) {
    console.log(messages.folderNotEmpty(projectName));
    for (const file of conflicts) {
      try {
        const stats = fs.lstatSync(path.join(projectPath, file));
        if (stats.isDirectory()) {
          console.log(messages.conflictingDirectory(file));
        } else {
          console.log(messages.conflictingFile(file));
        }
      } catch (e) {
        console.log(messages.conflictingFileError(file));
      }
    }
    console.log(messages.folderNotEmptySuggestions());

    return false;
  }

  // Remove any log files from a previous installation.
  fs.readdirSync(projectPath).forEach(file => {
    if (isErrorLog(file)) {
      fs.removeSync(path.join(projectPath, file));
    }
  });
  return true;
}

function installWithMessageFactory(opts, isExample = false) {
  const projectName = opts.projectName;
  const projectPath = opts.projectPath;

  if (!opts.install) {
    return function() {
      console.log(messages.start(projectName, opts));
    };
  }

  return function installWithMessage() {
    return install({
      npm: opts.npm,
      yarn: opts.yarn,
      verbose: opts.verbose,
      projectName: projectName,
      projectPath: projectPath,
      devPackages: [razzlePkg, razzleDevUtilsPkg],
      packages: isExample ? [] : [
        'react',
        'react-dom',
        'react-router-dom',
        'express',
      ],
    })
      .then(function() {
        console.log(messages.start(projectName, opts));
      })
      .catch(function(err) {
        throw err;
      });
  };
}


================================================
FILE: packages/create-razzle-app/lib/messages.js
================================================
'use strict';

const chalk = require('chalk');
const getInstallCmd = require('./utils/get-install-cmd');
const output = require('./utils/output');

const program = {
  name: 'create-razzle-app',
};

exports.help = function() {
  return `
    Only ${chalk.green('<project-directory>')} is required.
    If you have any problems, do not hesitate to file an issue:
      ${chalk.cyan('https://github.com/jaredpalmer/razzle/issues/new')}
  `;
};

exports.exampleHelp = function() {
  return `Example from https://github.com/jaredpalmer/razzle/tree/master/examples/ ${output.param(
    'example-path'
  )}`;
};

exports.missingProjectName = function() {
  return `
Please specify the project directory:
  ${chalk.cyan(program.name)} ${chalk.green('<project-directory>')}
For example:
  ${chalk.cyan(program.name)} ${chalk.green('my-razzle-app')}
  ${chalk.cyan(program.name)} ${chalk.cyan(
    '--example with-preact'
  )} ${chalk.green('my-preact-app')}
Run ${chalk.cyan(`${program.name} --help`)} to see all options.
`;
};

exports.folderNotEmpty = function(projectName) {
  return `
Uh oh! Looks like the directory ${chalk.red(projectName)} is not empty. These files could conflict:`;
};
exports.conflictingDirectory = function(file) {
    return `  ${chalk.blue('(dir) ' + file)}`;
};
exports.conflictingFile = function(file) {
    return `  ${file}`;
};
exports.conflictingFileError = function(file) {
    return `  ${file}`;
};
exports.folderNotEmptySuggestions = function() {
    return `
Please remove these files, use an empty directory, or use a directory name that doesn't already exist to create a new one.`;
};

exports.installing = function(packages) {
  const pkgText = packages
    .map(function(pkg) {
      return `    ${chalk.cyan(chalk.bold(pkg))}`;
    })
    .join('\n');

  return `
  Installing npm modules:
${pkgText}
`;
};

exports.installError = function(packages) {
  const pkgText = packages
    .map(function(pkg) {
      return `${chalk.cyan(chalk.bold(pkg))}`;
    })
    .join(', ');

  output.error(`Failed to install ${pkgText}, try again.`);
};

exports.copying = function(projectName) {
  return `
Creating ${chalk.bold(chalk.green(projectName))}...
`;
};

exports.start = function(projectName, opts) {
  const cmd = getInstallCmd(opts);

  const commands = {
    install: cmd.cmd === 'npm' ? 'npm install' : 'yarn',
    build: cmd.cmd === 'npm' ? 'npm run build' : 'yarn build',
    start: cmd.cmd === 'npm' ? 'npm run start:prod' : 'yarn start:prod',
    dev: cmd.cmd === 'npm' ? 'npm start' : 'yarn start',
  };

  return `
  ${chalk.green('Awesome!')} You're now ready to start coding.

  I already ran ${output.cmd(commands.install)} for you, so your next steps are:
    ${output.cmd(`cd ${projectName}`)}

  To start a local server for development:
    ${output.cmd(commands.dev)}

  To build a version for production:
    ${output.cmd(commands.build)}

  To run the server in production:
    ${output.cmd(commands.start)}

  Questions? Feedback? Please let me know!
  ${chalk.green('https://github.com/jaredpalmer/razzle/issues')}
`;
};


================================================
FILE: packages/create-razzle-app/lib/officialExamples.js
================================================
module.exports = [
  "basic-server",
  "basic-serverless",
  "basic-spa",
  "basic",
  "with-afterjs",
  "with-custom-babel-config",
  "with-custom-devserver-options",
  "with-custom-environment-variables",
  "with-custom-target-babel-config",
  "with-custom-webpack-config",
  "with-devcert-https",
  "with-development-build",
  "with-elm",
  "with-esbuild-loader",
  "with-eslint",
  "with-experimental-refresh",
  "with-fastify",
  "with-firebase-functions",
  "with-heroku",
  "with-hyperapp",
  "with-inferno",
  "with-jest-snapshots",
  "with-jsconfig-paths",
  "with-jsxstyle",
  "with-koa",
  "with-less",
  "with-loadable-components",
  "with-material-ui",
  "with-mdx",
  "with-module-federation",
  "with-monorepo-without-workspaces",
  "with-monorepo",
  "with-now-v2",
  "with-now",
  "with-polka",
  "with-preact",
  "with-promise-config",
  "with-react-native-web",
  "with-react-router",
  "with-react-server-components",
  "with-reason-react",
  "with-redux",
  "with-scss-options",
  "with-scss",
  "with-single-exposed-port",
  "with-styled-components",
  "with-svelte",
  "with-tailwindcss",
  "with-typeorm-graphql",
  "with-typescript-plugin",
  "with-typescript",
  "with-vendor-bundle",
  "with-vue-router",
  "with-vue",
  "with-webpack-dev-server-v4",
  "with-webpack-public-path"
];


================================================
FILE: packages/create-razzle-app/lib/utils/copy-dir.js
================================================
'use strict';

const path = require('path');
const Promise = require('promise');
const messages = require('../messages');
const output = require('./output');
const fs = require('fs-extra');
const copy = require('recursive-copy');

module.exports = function copyDir(opts) {
  const templatePath = opts.templatePath;
  const projectPath = opts.projectPath;
  const projectName = opts.projectName;


  console.log(messages.copying(projectName));

  return new Promise(function(resolve, reject) {
    const stopCopySpinner = output.wait('Copying files');

    copy(templatePath, projectPath, { dot: true })
      .then(function() {
        return fs
          .pathExists(path.resolve(projectPath, './gitignore'))
          .then(exists => {
            if (exists) {
              return fs.move(
                path.resolve(projectPath, './gitignore'),
                path.resolve(projectPath, './.gitignore')
              );
            }
          });
      })
      .then(function() {
        stopCopySpinner();
        output.success(
          `Created files for "${output.cmd(projectName)}" razzle app`
        );
        return this;
      })
      .then(resolve)
      .catch(function(err) {
        console.error(err);
        stopCopySpinner();
        output.error('Copy command failed, try again.');
        reject(err);
        process.exit(1);
      });
  });
};


================================================
FILE: packages/create-razzle-app/lib/utils/get-install-cmd.js
================================================
'use strict';

const execa = require('execa');

let cmd;

module.exports = function getInstallCmd(opts) {
  if (cmd) {
    return cmd;
  }

  let foundCmds = {};

  try {
    foundCmds.yarn = {
      version: execa.sync('yarnpkg', ['--version']).stdout,
      cmd: 'yarn'
    }
  } catch (e) {}

  try {
      foundCmds.npm = {
        version: execa.sync('npm', ['--version']).stdout,
        cmd: 'npm'
      }
  } catch (e) {}

  if (opts.npm) {
    cmd = foundCmds.npm;
    if (!cmd) {
      console.error("No npm found");
      process.exit(1);
    }
  } else if (opts.yarn) {
    cmd = foundCmds.yarn;
    if (!cmd) {
      console.error("No yarn found");
      process.exit(1);
    }
  } else{
    cmd = foundCmds.yarn || foundCmds.npm;
    if (!cmd) {
      console.error("No package manager found");
      process.exit(1);
    }
  }


  return cmd;
};


================================================
FILE: packages/create-razzle-app/lib/utils/install.js
================================================
'use strict';

const execa = require('execa');
const Promise = require('promise');
const messages = require('../messages');
const getInstallCmd = require('./get-install-cmd');
const output = require('./output');

module.exports = function install(opts) {
  const projectName = opts.projectName;
  const projectPath = opts.projectPath;
  const packages = opts.packages || [];
  const devPackages = opts.devPackages || [];

  // if (packages.length === 0) {
  //   console.log('Missing packages in `install`, try running again.');
  //   process.exit(1);
  // }

  const installCmd = getInstallCmd(opts);
  const addDevArgs = getAddArgs(installCmd, devPackages, opts, true);
  const addArgs = getAddArgs(installCmd, packages, opts, false);
  const installArgs = getInstallArgs(installCmd, packages, opts);

  console.log(messages.installing(packages));
  process.chdir(projectPath);

  const stdio = opts.verbose ? 'inherit' : 'pipe';

  return new Promise(function(resolve, reject) {
    const stopInstallSpinner = output.wait('Installing modules');
    execa(installCmd.cmd, addDevArgs, { cwd: projectPath, stdio: stdio })
      .then(function() {

        return (packages.length === 0 ? Promise.resolve() : execa(
          installCmd.cmd,
          addArgs, { cwd: projectPath, stdio: stdio }
        )).then(function() {
          // Confirm that all dependencies were installed
          // ignore-engines for node 13.x

          return execa(
            installCmd.cmd,
            installArgs, { cwd: projectPath, stdio: stdio }
          );
        })
      })
      .then(function() {
        stopInstallSpinner();
        output.success(`Installed dependencies for ${projectName}`);
        resolve();
      })
      .catch(function(res) {
        stopInstallSpinner();
        console.log(messages.installError(packages));
        return reject(new Error(`${installCmd.cmd} installation failed`));
      });
  });
};

function getInstallArgs(cmd, packages, opts) {
  if (cmd.cmd === 'npm') {
    const args = ['install'];
    return args.concat(packages, ['--verbose']);
  } else if (cmd.cmd === 'yarn') {
    const args = ['install'];
    return args.concat(
      parseInt(cmd.version[0]) !== 2 ? ['--ignore-engines'] : []);
  }
}

function getAddArgs(cmd, packages, opts, dev) {
  if (cmd.cmd === 'npm') {
    const args = ['install', dev ? '--save-dev' : '--save', '--save-exact'];
    return args.concat(packages, ['--verbose']);
  } else if (cmd.cmd === 'yarn') {
    const args = ['add', '-W', dev && '--dev'].filter(x=>x);
    return args.concat(packages,
      parseInt(cmd.version[0]) !== 2 ? ['--ignore-engines'] : []);
  }
}


================================================
FILE: packages/create-razzle-app/lib/utils/load-example.js
================================================
'use strict';

const fs = require('fs-extra');
const tar = require('tar');
const axios = require('axios');
const httpAdapter = require('axios/lib/adapters/http');
const os = require('os');
const path = require('path');
const UUID = require('pure-uuid');
const output = require('./output');
const copyDir = require('./copy-dir');
const Promise = require('promise');

module.exports = function loadExample(opts) {
  const projectName = opts.projectName;
  const example = opts.example;
  const branch = 'master'; // this line auto updates when yarn update-examples is run
  const url = 'https://codeload.github.com/jaredpalmer/razzle/tar.gz/' + branch;

  if (opts.verbose) {
    console.log(`Downloading razzle from ${url}`)
  }
  const id = new UUID(4).format();
  const directory = path.join(os.tmpdir(), id);
  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);

  const stopExampleSpinner = output.wait(
    `Downloading files for ${output.cmd(example)} example from ${branch} branch`
  );
  return fs
    .ensureDir(directory)
    .then(() => {
      return axios.get(url, { responseType: 'stream', adapter: httpAdapter });
    })
    .then(response => {
      return new Promise((resolve, reject) => {
        const stream = response.data;
        stream.on('end', () => resolve());
        stream.pipe(tar.x({ C: directory }));
      });
    })
    .then(function() {
      stopExampleSpinner();
      output.success(
        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`
      );
      return copyDir({
        templatePath: path.join(
          directory,
          'razzle-' + branch,
          'examples',
          example
        ),
        projectPath: projectPath,
        projectName: projectName,
      });
    })
    .catch(function(err) {
      throw err;
    });
};


================================================
FILE: packages/create-razzle-app/lib/utils/load-git-example.js
================================================
'use strict';

const fs = require('fs-extra');
const os = require('os');
const path = require('path');
const UUID = require('pure-uuid');
const output = require('./output');
const copyDir = require('./copy-dir');
const exec = require('execa');

module.exports = function loadExample(opts) {
  const projectName = opts.projectName;
  const example = opts.example;
  const [repoBranch, examplePath = ''] = example
    .slice(3)
    .split(/(?<!\+http?s|\+ssh|\+git):/);
  const [repoUrl, branch = 'HEAD'] = repoBranch.slice(1).split('@');
  const id = new UUID(4).format();
  const idIndex = new UUID(4).format();
  const directory = path.join(os.tmpdir(), id);
  const directoryIndex = path.join(os.tmpdir(), idIndex);

  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);

  const branchArg = branch !== 'HEAD' ? ` --branch=${branch}` : '';

  const stopExampleSpinner = output.wait(
    `Downloading files for ${output.cmd(example)} example`
  );

  return fs
    .ensureDir(directory)
    .then(() => {
      return exec(`git clone --depth 1${branchArg} ${repoUrl} .`, {
        cwd: directory,
        shell: true,
      });
    })
    .then(() => {
      return exec(
        `git checkout-index --prefix=${(directoryIndex + path.sep).replace(
          /\\/g,
          '/'
        )} -a`,
        { cwd: directory, shell: true }
      );
    })
    .then(function() {
      stopExampleSpinner();
      output.success(
        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`
      );
      return copyDir({
        templatePath: path.join(directoryIndex, examplePath),
        projectPath: projectPath,
        projectName: projectName,
      });
    })
    .then(function() {
      return fs.remove(directory);
    })
    .then(function() {
      return fs.remove(directoryIndex);
    })
    .catch(function(err) {
      throw err;
    });
};


================================================
FILE: packages/create-razzle-app/lib/utils/load-github-example.js
================================================
'use strict';

const fs = require('fs-extra');
const tar = require('tar');
const axios = require('axios');
const httpAdapter = require('axios/lib/adapters/http');
const os = require('os');
const path = require('path');
const UUID = require('pure-uuid');
const output = require('./output');
const copyDir = require('./copy-dir');
const Promise = require('promise');

module.exports = function loadExample(opts) {
  const projectName = opts.projectName;
  const example = opts.example;
  const [url, examplePath = ''] = example.split(/(?<!https):/);
  const [, , , user, repoBranch] = url.split('/');
  const [repo, branch = 'master'] = repoBranch.split('@');
  const id = new UUID(4).format();
  const directory = path.join(os.tmpdir(), id);
  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);
  const tarGzUrl = `https://codeload.github.com/${user}/${repo}/tar.gz/${branch}`;

  const stopExampleSpinner = output.wait(
    `Downloading files for ${output.cmd(example)} example from ${branch} branch`
  );
  return fs
    .ensureDir(directory)
    .then(() => {
      return axios.get(tarGzUrl, {
        responseType: 'stream',
        adapter: httpAdapter,
      });
    })
    .then(response => {
      return new Promise((resolve, reject) => {
        const stream = response.data;
        stream.on('end', () => resolve());
        stream.pipe(tar.x({ C: directory }));
      });
    })
    .then(function() {
      stopExampleSpinner();
      output.success(
        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`
      );
      return copyDir({
        templatePath: path.join(directory, `${repo}-${branch}`, examplePath),
        projectPath: projectPath,
        projectName: projectName,
      });
    })
    .then(function() {
      return fs.remove(directory);
    })
    .catch(function(err) {
      throw err;
    });
};


================================================
FILE: packages/create-razzle-app/lib/utils/load-npm-example.js
================================================
'use strict';

const fs = require('fs-extra');
const pacote = require('pacote');
const axios = require('axios');
const os = require('os');
const path = require('path');
const UUID = require('pure-uuid');
const output = require('./output');
const copyDir = require('./copy-dir');

module.exports = function loadExample(opts) {
  const projectName = opts.projectName;
  const example = opts.example;
  const [npmPackage, examplePath = ''] = example.split(/:/);
  const id = new UUID(4).format();
  const directory = path.join(os.tmpdir(), id);
  const projectPath = (opts.projectPath = process.cwd() + '/' + projectName);

  const stopExampleSpinner = output.wait(
    `Downloading files for ${output.cmd(example)} example`
  );
  return fs
    .ensureDir(directory)
    .then(() => {
      return pacote.extract(npmPackage, directory);
    })
    .then(function() {
      stopExampleSpinner();
      output.success(
        `Downloaded ${output.cmd(example)} files for ${output.cmd(projectName)}`
      );
      return copyDir({
        templatePath: path.join(directory, examplePath),
        projectPath: projectPath,
        projectName: projectName,
      });
    })
    .then(function() {
      return fs.remove(directory);
    })
    .catch(function(err) {
      throw err;
    });
};


================================================
FILE: packages/create-razzle-app/lib/utils/output.js
================================================
'use strict';

const { eraseLine } = require('ansi-escapes');
const chalk = require('chalk');
const ora = require('ora');
const ms = require('ms');

exports.info = function(msg) {
  console.log(`${chalk.gray('>')} ${msg}`);
};

exports.error = function(msg) {
  if (msg instanceof Error) {
    msg = msg.message;
  }

  console.error(`${chalk.red('> Error!')} ${msg}`);
};

exports.success = function(msg) {
  console.log(`${chalk.green('> Success!')} ${msg}`);
};

exports.time = function() {
  const start = new Date();
  return chalk.gray(`[${ms(new Date() - start)}]`);
};

exports.wait = function(msg) {
  const spinner = ora(chalk.green(msg));
  spinner.color = 'blue';
  spinner.start();

  return function() {
    spinner.stop();
    process.stdout.write(eraseLine);
  };
};

exports.prompt = function(opts) {
  return new Promise(function(resolve, reject) {
    opts.forEach(function(val, i) {
      const text = val[1];
      console.log(`${chalk.gray('>')} [${chalk.bold(i + 1)}] ${text}`);
    });

    const ondata = v => {
      const s = v.toString();

      function cleanup() {
        process.stdin.setRawMode(false);
        process.stdin.removeListener('data', ondata);
      }

      if (s === '\u0003') {
        cleanup();
        reject(new Error('Aborted'));
        return;
      }

      const n = Number(s);
      if (opts[n - 1]) {
        cleanup();
        resolve(opts[n - 1][0]);
      }
    };

    process.stdin.setRawMode(true);
    process.stdin.resume();
    process.stdin.on('data', ondata);
  });
};

exports.cmd = function(cmd) {
  return chalk.bold(chalk.cyan(cmd));
};

exports.code = function(cmd) {
  return `${chalk.gray('`')}${chalk.bold(cmd)}${chalk.gray('`')}`;
};

exports.param = function(param) {
  return chalk.bold(`${chalk.gray('{')}${chalk.bold(param)}${chalk.gray('}')}`);
};


================================================
FILE: packages/create-razzle-app/package.json
================================================
{
  "name": "create-razzle-app",
  "version": "4.2.18",
  "description": "CLI tool to bootstrap Razzle applications with no configuration",
  "main": "index.js",
  "license": "MIT",
  "author": "Jared Palmer <jared@palmer.net> (http://jaredpalmer.com)",
  "engines": {
    "node": ">=8"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/create-razzle-app"
  },
  "bugs": {
    "url": "https://github.com/jaredpalmer/razzle/issues"
  },
  "bin": {
    "create-razzle-app": "./bin/create-razzle-app"
  },
  "dependencies": {
    "ansi-escapes": "^4.3.1",
    "axios": "^0.21.2",
    "chalk": "^3.0.0",
    "commander": "^5.0.0",
    "execa": "^5.0.0",
    "fs-extra": "^9.1.0",
    "ms": "^2.1.2",
    "ora": "^4.0.3",
    "pacote": "^11.1.8",
    "promise": "^8.1.0",
    "pure-uuid": "^1.6.0",
    "recursive-copy": "^2.0.11",
    "tar": "^6.0.2"
  },
  "keywords": [
    "razzle",
    "react",
    "webpack",
    "preact",
    "ssr",
    "universal",
    "isomorphic",
    "inferno",
    "reason",
    "reasonml"
  ]
}


================================================
FILE: packages/create-razzle-app/templates/default/README.md
================================================
**WARNING: This is the documentation for `razzle@next` (Webpack 4).**  
[Go here for for razzle@0.8.x (stable) docs (Webpack 3)](https://github.com/jaredpalmer/razzle/tree/master).

![repo-banner](https://user-images.githubusercontent.com/4060187/28923990-050a32d4-782e-11e7-9da7-574ce5a8b455.png)

[![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)

Universal 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.

**Razzle comes with the "battery-pack included"**:

* :fire: Universal Hot Module Replacement, so both the client and server update whenever you make edits. No annoying restarts necessary
* Comes with your favorite ES6 JavaScript goodies (through `babel-preset-razzle`)
* Comes with the same CSS setup as [create-react-app](https://github.com/facebookincubator/create-react-app)
* 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
* Escape hatches for customization via `.babelrc` and `razzle.config.js`
* [Jest](https://github.com/facebook/jest) test runner setup with sensible defaults via `razzle test`

## Quick Start

[![Greenkeeper badge](https://badges.greenkeeper.io/jaredpalmer/razzle.svg)](https://greenkeeper.io/)

```bash
npm install -g create-razzle-app

create-razzle-app my-app
cd my-app
npm start
```

Then open http://localhost:3000/ to see your app. Your console should look like this:

<img src="https://cloud.githubusercontent.com/assets/4060187/26324663/b31788c4-3f01-11e7-8e6f-ffa48533af54.png" width="500px" alt="Razzle Development Mode"/>

**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!

Below is a list of commands you will probably find useful.

### `npm start` or `yarn start`

Runs the project in development mode.  
You can view your application at `http://localhost:3000`

The page will reload if you make edits.

### `npm run build` or `yarn build`

Builds the app for production to the build folder.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

### `npm run start:prod` or `yarn start:prod`

Runs the compiled app in production.

You can again view your application at `http://localhost:3000`

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.

### `npm start -- --inspect` or `yarn start -- --inspect`

To 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/).

### `npm start -- --inspect-brk` or `yarn start -- --inspect-brk`

To 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/).

### `rs`

If 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.

## <img src="https://user-images.githubusercontent.com/4060187/37915268-209644d0-30e7-11e8-8ef7-086b529ede8c.png" width="500px" alt="Razzle Hot Restart"/>

<!-- START doctoc generated TOC please keep comment here to allow auto update -->

<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

**Table of Contents**

* [Customization](#customization)
  * [Extending Babel Config](#extending-babel-config)
  * [Extending Webpack](#extending-webpack)
  * [Environment Variables](#environment-variables)
  * [Adding Temporary Environment Variables In Your Shell](#adding-temporary-environment-variables-in-your-shell)
    * [Windows (cmd.exe)](#windows-cmdexe)
    * [Linux, macOS (Bash)](#linux-macos-bash)
  * [Adding Environment Variables In `.env`](#adding-environment-variables-in-env)
    * [What other `.env` files are can be used?](#what-other-env-files-are-can-be-used)
* [How Razzle works (the secret sauce)](#how-razzle-works-the-secret-sauce)
* [Inspiration](#inspiration)
  * [Author](#author)
* [Contributors](#contributors)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## Customization

### Customizing Babel Config

Razzle 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.

```js
{
  "presets": [
    "razzle/babel", // NEEDED
    "stage-0"
   ],
   "plugins": [
     // additional plugins
   ]
}
```

A 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.

### Extending Webpack

You can also extend the underlying webpack config. Create a file called `razzle.config.js` in your project's root.

```js
// razzle.config.js

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // do something to config

    return config;
  },
};
```

A 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:

```
// razzle.config.js
const modify = require('my-razzle-modifictions');

module.exports = {
  modify
}
```

Last 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.

### Environment Variables

**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`.

* `process.env.RAZZLE_PUBLIC_DIR`: Absolute path to the public directory in the server's filesystem.
* `process.env.RAZZLE_ASSETS_MANIFEST`: Path to a file containing compiled asset outputs
* `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.
* `process.env.VERBOSE`: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).
* `process.env.PORT`: The `BUILD_TARGET=server` build listens on this port for all NODE_ENVs. default is `3000`
* `process.env.HOST`: The IP address that the server will bind to. default is `0.0.0.0`, for INADDR_ANY
* `process.env.NODE_ENV`: `'development'` or `'production'`
* `process.env.BUILD_TARGET`: either `'client'` or `'server'`
* `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`.
* `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}/`

You can create your own custom environment variables that will be inlined during the build. They must start
with `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.

These 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`.

### Adding Temporary Environment Variables In Your Shell

Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the
life of the shell session.

#### Windows (cmd.exe)

```cmd
set RAZZLE_SECRET_CODE=abcdef&&npm start
```

(Note: the lack of whitespace is intentional.)

#### Linux, macOS (Bash)

```bash
RAZZLE_SECRET_CODE=abcdef npm start
```

### Adding Environment Variables In `.env`

To define permanent environment variables, create a file called .env in the root of your project:

```
RAZZLE_SECRET_CODE=abcdef
```

#### What other `.env` files are can be used?

* `.env`: Default.
* `.env.local`: Local overrides. **This file is loaded for all environments except test.**
* `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.
* `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.

Files on the left have more priority than files on the right:

* `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
* `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
* `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)

These variables will act as the defaults if the machine does not explicitly set them.<br>
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.

> Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
> 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).

## How Razzle works (the secret sauce)

**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.

In 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.

## Inspiration

* [palmerhq/backpack](https://github.com/palmerhq/backpack)
* [nytimes/kyt](https://github.com/nytimes/kyt)
* [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
* [humblespark/sambell](https://github.com/humblespark/sambell)
* [zeit/next.js](https://github.com/zeit/next.js)

#### Author

* [Jared Palmer](https://twitter.com/jaredpalmer)

---

MIT License

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

| [<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') |
| :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |


<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!


================================================
FILE: packages/create-razzle-app/templates/default/gitignore
================================================
logs
*.log
npm-debug.log*
.DS_Store

coverage
node_modules
build
cache
.env.local
.env.development.local
.env.test.local
.env.production.local

================================================
FILE: packages/create-razzle-app/templates/default/package.json
================================================
{
  "name": "my-razzle-app",
  "version": "4.2.15",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "express": "^4.17.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "razzle": "4.2.15",
    "babel-preset-razzle": "4.2.15",
    "razzle-dev-utils": "4.2.15",
    "html-webpack-plugin": "^4.5.2",
    "webpack": "^4.44.1",
    "mini-css-extract-plugin": "^0.9.0",
    "webpack-dev-server": "^3.11.2"
  }
}


================================================
FILE: packages/create-razzle-app/templates/default/public/robots.txt
================================================
User-agent: *



================================================
FILE: packages/create-razzle-app/templates/default/sandbox.config.json
================================================
{
  "container": {
    "port": 3000
  }
}


================================================
FILE: packages/create-razzle-app/templates/default/src/App.css
================================================
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

================================================
FILE: packages/create-razzle-app/templates/default/src/App.js
================================================
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import './App.css';

const App = () => (
  <Switch>
    <Route exact={true} path="/" component={Home} />
  </Switch>
);

export default App;


================================================
FILE: packages/create-razzle-app/templates/default/src/App.test.js
================================================
import App from './App';
import React from 'react';
import ReactDOM from 'react-dom';
import { MemoryRouter } from 'react-router-dom';

describe('<App />', () => {
  test('renders without exploding', () => {
    const div = document.createElement('div');
    ReactDOM.render(
      <MemoryRouter>
        <App />
      </MemoryRouter>,
      div
    );
  });
});


================================================
FILE: packages/create-razzle-app/templates/default/src/Home.css
================================================
.Home {
  text-align: center;
}

.Home-logo {
  animation: Home-logo-spin infinite 20s linear;
  height: 80px;
}

.Home-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.Home-intro {
  font-size: large;
}

.Home-resources {
  list-style: none;
}

.Home-resources > li {
  display: inline-block;
  padding: 1rem;
}

@keyframes Home-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


================================================
FILE: packages/create-razzle-app/templates/default/src/Home.js
================================================
import React from 'react';
import logo from './react.svg';
import './Home.css';

class Home extends React.Component {
  render() {
    return (
      <div className="Home">
        <div className="Home-header">
          <img src={logo} className="Home-logo" alt="logo" />
          <h2>Welcome to Razzle</h2>
        </div>
        <p className="Home-intro">
          To get started, edit <code>src/App.js</code> or{' '}
          <code>src/Home.js</code> and save to reload.
        </p>
        <ul className="Home-resources">
          <li>
            <a href="https://github.com/jaredpalmer/razzle">Docs</a>
          </li>
          <li>
            <a href="https://github.com/jaredpalmer/razzle/issues">Issues</a>
          </li>
          <li>
            <a href="https://palmer.chat">Community Slack</a>
          </li>
        </ul>
      </div>
    );
  }
}

export default Home;


================================================
FILE: packages/create-razzle-app/templates/default/src/client.js
================================================
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import React from 'react';
import { hydrate } from 'react-dom';

hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

if (module.hot) {
  module.hot.accept();
}


================================================
FILE: packages/create-razzle-app/templates/default/src/index.js
================================================
import express from 'express';

let app = require('./server').default;

if (module.hot) {
  module.hot.accept('./server', function() {
    console.log('🔁  HMR Reloading `./server`...');
    try {
      app = require('./server').default;
    } catch (error) {
      console.error(error);
    }
  });
  console.info('✅  Server-side HMR Enabled!');
}

const port = process.env.PORT || 3000;

export default express()
  .use((req, res) => app.handle(req, res))
  .listen(port, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });


================================================
FILE: packages/create-razzle-app/templates/default/src/server.js
================================================
import App from './App';
import React from 'react';
import { StaticRouter } from 'react-router-dom';
import express from 'express';
import { renderToString } from 'react-dom/server';

const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, ...extra) => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${asset}" ${extra.join(" ")}></script>`
  ).join('') : '' : '';
};

export const renderApp = (req, res) => {
  const context = {};
  const markup = renderToString(
    <StaticRouter context={context} location={req.url}>
      <App />
    </StaticRouter>
  );
  const html = `<!doctype html>
  <html lang="">
  <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta charset="utf-8" />
      <title>Welcome to Razzle</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      ${cssLinksFromAssets(assets, 'client')}
  </head>
  <body>
      <div id="root">${markup}</div>
      ${jsScriptTagsFromAssets(assets, 'client', 'defer', 'crossorigin')}
  </body>
</html>`
  return {context, html};
}

const server = express();
server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const {context, html} = renderApp(req, res);
    if (context.url) {
      res.redirect(context.url);
    } else {
      res.status(200).send(html);
    }
  });

export default server;


================================================
FILE: packages/razzle/.gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
.DS_Store

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript


# Dependency directory
node_modules

# Optional npm cache directory
.npm

# Optional REPL history
.node_repl_history

# Build Output
build
.vscode

================================================
FILE: packages/razzle/CHANGELOG.md
================================================
# razzle

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - babel-preset-razzle@4.2.18
  - razzle-dev-utils@4.2.18
  - razzle-start-server-webpack-plugin@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - babel-preset-razzle@4.2.17
  - razzle-dev-utils@4.2.17
  - razzle-start-server-webpack-plugin@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - babel-preset-razzle@4.2.16
  - razzle-dev-utils@4.2.16
  - razzle-start-server-webpack-plugin@4.2.16


================================================
FILE: packages/razzle/LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 Jared Palmer

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: packages/razzle/README.md
================================================
![repo-banner](https://user-images.githubusercontent.com/4060187/28923990-050a32d4-782e-11e7-9da7-574ce5a8b455.png)

[![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)

Universal 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.

## Getting Started

Visit <a aria-label="razzle getting started" href="https://razzlejs.org/getting-started">https://razzlejs.org/getting-started</a> to get started with Razzle.

## Examples

Razzle has many examples, we might have one that fits your needs

See: [The examples](https://github.com/jaredpalmer/razzle/tree/master/examples)

## Documentation

Visit <a aria-label="razzle docs" href="https://razzlejs.org/">https://razzlejs.org/</a> to view the documentation.

## Getting help

If 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.

## Contributing

Please see our [CONTRIBUTING.md](/.github/CONTRIBUTING.md).

## Inspiration

- [jaredpalmer/backpack](https://github.com/jaredpalmer/backpack)
- [nytimes/kyt](https://github.com/nytimes/kyt)
- [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)
- [humblespark/sambell](https://github.com/humblespark/sambell)
- [zeit/next.js](https://github.com/zeit/next.js)

### Author

- [Jared Palmer](https://twitter.com/jaredpalmer)

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- START contributors generated instructions please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN yarn build-docs TO UPDATE -->
- **Jared Palmer** - [@jaredpalmer](http://jaredpalmer.com)
  - **Contributions:** question, code, design, doc, example, ideas, review, test, tool
- **Nima Arefi** - [@Nimaa77](https://github.com/Nimaa77)
  - **Contributions:** question, code, doc, example, ideas, review, test, tool
- **Øyvind Saltvik** - [@fivethreeo](https://github.com/fivethreeo/)
  - **Contributions:** question, code, example, ideas, review, test, tool
- **Jari Zwarts** - [@jariz](https://jari.io)
  - **Contributions:** question, code, ideas, plugin, review
- **Dan Abramov** - [@gaearon](http://twitter.com/dan_abramov)
  - **Contributions:** code, ideas
- **Eric Clemmons** - [@ericclemmons](http://ericclemmons.github.com/)
  - **Contributions:** code, ideas
- **Zino Hofmann** - [@HofmannZ](https://www.linkedin.com/in/zinohofmann/)
  - **Contributions:** example
- **Lucas Terra** - [@lucasterra](https://www.linkedin.com/in/lucasterra7/)
  - **Contributions:** code, example, plugin
- **Ray Andrew** - [@rayandrews](https://www.linkedin.com/in/ray-andrew/)
  - **Contributions:** code, example, plugin
- **Heithem Moumni** - [@heithemmoumni](https://www.linkedin.com/in/heithemmoumni/)
  - **Contributions:** code, example, plugin
<!-- END contributors generated instructions please keep comment here to allow auto update -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

---

MIT License


================================================
FILE: packages/razzle/babel.js
================================================
module.exports = require('babel-preset-razzle');


================================================
FILE: packages/razzle/bin/razzle.js
================================================
#!/usr/bin/env node
'use strict';

const sade = require('sade');
const spawn = require('react-dev-utils/crossSpawn');
const pkg = require('../package.json');
const prog = sade('razzle');
prog.version(pkg.version);

const argv = process.argv.slice(3);

prog
  .command('build')
  .describe('Build the application')
  .option(
    '-t, --type',
    'Change the application build type. Must be either `iso` or `spa`.',
    'iso'
  )
  .action(() => {
    runCommand('build', [], argv);
  });

prog
  .command('start')
  .describe('Start the application in development mode.')
  .option(
    '-t, --type',
    'Change the application build type. Must be either `iso` or `spa`.',
    'iso'
  )
  .action(() => {
    runCommand('start', [], argv);
  });

prog
  .command('export')
  .describe('Export a static version of the application in production mode.')
  .action(() => {
    runCommand('export', [], argv);
  });

prog
  .command('test')
  .describe('Runs the test watcher in an interactive mode.')
  .action(() => {
    runCommand('test', argv.filter(x=>x.includes('--inspect')), argv.filter(x=>!x.includes('--inspect')));
  });

function runCommand(script, node_args, script_args) {
  const result = spawn.sync(
    'node',
    node_args.concat([require.resolve('../scripts/' + script)]).concat(script_args),
    { stdio: 'inherit' }
  );
  if (result.signal) {
    if (result.signal === 'SIGKILL') {
      console.log(
        'The build failed because the process exited too early. ' +
          'This probably means the system ran out of memory or someone called ' +
          '`kill -9` on the process.'
      );
    } else if (result.signal === 'SIGTERM') {
      console.log(
        'The build failed because the process exited too early. ' +
          'Someone might have called `kill` or `killall`, or the system could ' +
          'be shutting down.'
      );
    }
    process.exit(1);
  }
  process.exit(result.status);
}

prog.parse(process.argv);


================================================
FILE: packages/razzle/config/babel-loader/razzle-babel-loader.js
================================================
'use strict';

const babelLoader = require('babel-loader');
const hash = require('string-hash');
const path = require('path');
const merge = require('deepmerge');
const basename = path.basename;
const join = path.join;

// increment 'm' to invalidate cache
// eslint-disable-razzle-line no-useless-concat
const cacheKey = 'babel-cache-' + 'm' + '-';
const razzleBabelPreset = require('babel-preset-razzle');

const getModernOptions = function(babelOptions) {
  babelOptions = babelOptions || {};
  const presetEnvOptions = Object.assign({}, babelOptions['preset-env']);
  const transformRuntimeOptions = Object.assign(
    {},
    babelOptions['transform-runtime'],
    { regenerator: false }
  );

  presetEnvOptions.targets = {
    esmodules: true,
  };
  presetEnvOptions.exclude = (presetEnvOptions.exclude || []).concat([
    // Block accidental inclusions
    'transform-regenerator',
    'transform-async-to-generator',
  ]);

  return Object.assign({}, babelOptions, {
    'preset-env': presetEnvOptions,
    'transform-runtime': transformRuntimeOptions,
  });
};

const razzleBabelPresetModern = function(presetOptions) {
  return function(context) {
    return razzleBabelPreset(context, getModernOptions(presetOptions));
  };
};

module.exports = babelLoader.custom(function(babel) {
  const presetItem = babel.createConfigItem(razzleBabelPreset, {
    type: 'preset',
  });
  const applyCommonJs = babel.createConfigItem(
    require('babel-preset-razzle/babel-plugins/commonjs'),
    { type: 'plugin' }
  );
  const commonJsItem = babel.createConfigItem(
    require('@babel/plugin-transform-modules-commonjs'),
    { type: 'plugin' }
  );

  const configs = new Set();

  return {
    customOptions: function(opts) {
      const custom = {
        verbose: opts.verbose,
        isServer: opts.isServer,
        isModern: opts.isModern,
        hasModern: opts.hasModern,
        development: opts.development,
        shouldUseReactRefresh: opts.shouldUseReactRefresh,
      };
      const filename = join(opts.cwd, 'noop.js');
      const loader = Object.assign(
        opts.cache
          ? {
              cacheCompression: false,
              cacheDirectory: join(opts.cwd, 'cache', 'razzle-babel-loader'),
              cacheIdentifier:
                cacheKey +
                (opts.isServer ? '-server' : '') +
                (opts.isModern ? '-modern' : '') +
                (opts.hasModern ? '-has-modern' : '') +
                '-new-polyfills' +
                (opts.development ? '-development' : '-production') +
                (opts.hasReactRefresh ? '-react-refresh' : '') +
                JSON.stringify(
                  babel.loadPartialConfig({
                    filename,
                    cwd: opts.cwd,
                    sourceFileName: filename,
                  }).options
                ),
            }
          : {
              cacheDirectory: false,
            },
        opts
      );

      delete loader.verbose;
      delete loader.isServer;
      delete loader.cache;
      delete loader.distDir;
      delete loader.isModern;
      delete loader.hasModern;
      delete loader.development;
      delete loader.shouldUseReactRefresh;
      return { loader, custom };
    },
    config: function(cfg, cfgOpts) {
      const source = cfgOpts.source;
      const customOptions = cfgOpts.customOptions;
      const verbose = customOptions.verbose;
      const isServer = customOptions.isServer;
      const isModern = customOptions.isModern;
      const hasModern = customOptions.hasModern;
      const development = customOptions.development;
      const shouldUseReactRefresh = customOptions.shouldUseReactRefresh;

      const filename = this.resourcePath;
      const presetOptions = Object.assign({}, cfg.options);

      if (cfg.hasFilesystemConfig()) {
        for (const file of [cfg.babelrc, cfg.config]) {
          // We only log for first compilation otherwise there will be double output
          if (file && verbose && !configs.has(`${file}.${isServer ? 'node' : 'web'}`)) {
            configs.add(`${file}.${isServer ? 'node' : 'web'}`);
            console.info(`Using external babel configuration from ${file} for "${isServer ? 'node' : 'web'}" build`);
          }
        }
      } else {
        // Add our default preset if the no "babelrc" found.
        presetOptions.presets = (presetOptions.presets || []).concat([presetItem]);
      }

      presetOptions.caller.isServer = isServer;
      presetOptions.caller.isModern = isModern;
      presetOptions.caller.isDev = development;

      const emitWarning = this.emitWarning.bind(this);
      Object.defineProperty(presetOptions.caller, 'onWarning', {
        enumerable: false,
        writable: false,
        value: (presetOptions.caller.onWarning = function(reason) {
          if (!(reason instanceof Error)) {
            reason = new Error(reason);
          }
          emitWarning(reason);
        }),
      });

      presetOptions.plugins = presetOptions.plugins || [];

      if (shouldUseReactRefresh) {
        const reactRefreshPlugin = babel.createConfigItem(
          [require('react-refresh/babel'), { skipEnvCheck: true }],
          { type: 'plugin' }
        );
        presetOptions.plugins.unshift(reactRefreshPlugin);
        if (!isServer) {
          const noAnonymousDefaultExportPlugin = babel.createConfigItem(
            [
              require('babel-preset-razzle/babel-plugins/no-anonymous-default-export'),
              {},
            ],
            { type: 'plugin' }
          );
          presetOptions.plugins.unshift(noAnonymousDefaultExportPlugin);
        }
      }

      if (isModern) {
        const razzlePreset = presetOptions.presets.find(
          preset => preset && preset.value === razzleBabelPreset
        ) || { options: {} };

        const additionalPresets = presetOptions.presets.filter(
          preset => preset !== razzlePreset
        );

        const presetItemModern = babel.createConfigItem(
          razzleBabelPresetModern(razzlePreset.options),
          {
            type: 'preset',
          }
        );

        presetOptions.presets = (additionalPresets || []).concat([presetItemModern]);
      }

      // If the file has `module.exports` we have to transpile commonjs because Babel adds `import` statements
      // That break webpack, since webpack doesn't support combining commonjs and esmodules
      if (!hasModern && source.indexOf('module.exports') !== -1) {
        presetOptions.plugins.push(applyCommonJs);
      }

      presetOptions.plugins.push([
        require.resolve('babel-plugin-transform-define'),
        {
          'process.env.NODE_ENV': development ? 'development' : 'production',
          'typeof window': isServer ? 'undefined' : 'object',
          'process.browser': isServer ? false : true,
        },
        'razzle-js-transform-define-instance',
      ]);

      // As lib has stateful modules we have to transpile commonjs
      presetOptions.overrides = presetOptions.overrides || [];
      // .concat([
      //   {
      //     test: [
      //       /razzle[\\/]dist[\\/]lib/,
      //     ],
      //     plugins: [commonJsItem],
      //   },
      // ])

      return presetOptions;
    },
  };
});


================================================
FILE: packages/razzle/config/createConfigAsync.js
================================================
'use strict';

const fs = require('fs-extra');
const path = require('path');
const webpack = require('webpack');
const crypto = require('crypto');
const util = require('util');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StartServerPlugin = require('razzle-start-server-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const getClientEnv = require('./env').getClientEnv;
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
const WebpackBar = require('webpackbar');
const ManifestPlugin = require('webpack-manifest-plugin').WebpackManifestPlugin;
const CopyPlugin = require('copy-webpack-plugin');
const PnpWebpackPlugin = require('pnp-webpack-plugin');
const modules = require('./modules');
const postcssLoadConfig = require('postcss-load-config');
const resolveRequest = require('razzle-dev-utils/resolveRequest');
const logger = require('razzle-dev-utils/logger');
const razzlePaths = require('./paths');
const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
const webpackMajor = require('razzle-dev-utils/webpackMajor');
const devServerMajorVersion = require('razzle-dev-utils/devServerMajor');

const hasPostCssConfigTest = () => {
  try {
    return !!postcssLoadConfig.sync();
  } catch (_error) {
    return false;
  }
};

const hasPostCssConfig = hasPostCssConfigTest();

let webpackDevClientEntry;
if (devServerMajorVersion > 3) {
  webpackDevClientEntry = require.resolve('razzle-dev-utils/webpackHotDevClientV4');
} else {
  webpackDevClientEntry = require.resolve('razzle-dev-utils/webpackHotDevClient');
}

const isModuleCSS = module => {
  return (
    // mini-css-extract-plugin
    module.type === `css/mini-extract` ||
    // extract-css-chunks-webpack-plugin (old)
    module.type === `css/extract-chunks` ||
    // extract-css-chunks-webpack-plugin (new)
    module.type === `css/extract-css-chunks`
  );
};

// This is the Webpack configuration factory. It's the juice!
module.exports = (
  target = 'web',
  env = 'dev',
  {
    clearConsole = true,
    host = 'localhost',
    port = 3000,
    modify = null,
    modifyWebpackOptions = null,
    modifyWebpackConfig = null,
    modifyBabelPreset = null,
    experimental = {},
    disableStartServer = false,
  },
  webpackObject,
  clientOnly = false,
  paths = razzlePaths,
  plugins = [],
  razzleOptions = {}
) => {
  return new Promise(async resolve => {
    // Define some useful shorthands.
    const IS_NODE = target === 'node';
    const IS_WEB = target === 'web';
    const IS_SERVERLESS = /serverless/.test(razzleOptions.buildType);
    const IS_PROD = env === 'prod';
    const IS_DEV = env === 'dev';
    const IS_DEV_ENV = process.env.NODE_ENV === 'development';

    // Contains various versions of the Webpack SplitChunksPlugin used in different build types
    const splitChunksConfigs = {
      dev: {
        cacheGroups: {
          default: false,
          vendors: false,
          // In webpack 5 vendors was renamed to defaultVendors
          defaultVendors: false,
        },
      },
      prod: {
        cacheGroups: {
          default: false,
          vendors: false,
          // In webpack 5 vendors was renamed to defaultVendors
          defaultVendors: false,
        },
      },
    };

    const shouldUseReactRefresh =
      IS_WEB && IS_DEV && razzleOptions.enableReactRefresh ? true : false;

    const shouldDisableWebpackbar =
      razzleOptions.disableWebpackbar === true || razzleOptions.disableWebpackbar === target;

    let webpackOptions = {};

    const hasPublicDir = fs.existsSync(paths.appPublic);

    const hasStaticExportJs = fs.existsSync(paths.appStaticExportJs + '.js') ||
      fs.existsSync(paths.appStaticExportJs + '.jsx') ||
      fs.existsSync(paths.appStaticExportJs + '.ts') ||
      fs.existsSync(paths.appStaticExportJs + '.tsx');

    const dotenv = getClientEnv(
      target, IS_DEV,
      { clearConsole, host, port, shouldUseReactRefresh, forceRuntimeEnvVars: razzleOptions.forceRuntimeEnvVars, webpackObject },
      paths
    );

    const portOffset = clientOnly ? 0 : 1;

    const devServerPort =
      (process.env.PORT_DEV && parseInt(process.env.PORT_DEV, 10)) ||
      (process.env.PORT && parseInt(process.env.PORT, 10) + portOffset) ||
      3000 + portOffset;

    // VMs, Docker containers might not be available at localhost:3001. CLIENT_PUBLIC_PATH can override.
    const clientPublicPath =
      dotenv.raw.CLIENT_PUBLIC_PATH ||
      (IS_DEV ? `http://${dotenv.raw.HOST}:${devServerPort}/` : '/');

    const modulesConfig = modules(paths);
    const additionalModulePaths = modulesConfig.additionalModulePaths || [];
    const additionalAliases = modulesConfig.additionalAliases || {};
    const additionalIncludes = modulesConfig.additionalIncludes || [];


    webpackOptions.fileLoaderExclude = [
      /\.html$/,
      /\.(js|jsx|mjs)$/,
      /\.(ts|tsx)$/,
      /\.(vue)$/,
      /\.(less)$/,
      /\.(re)$/,
      /\.(s?css|sass)$/,
      /\.json$/,
      /\.bmp$/,
      /\.gif$/,
      /\.jpe?g$/,
      /\.png$/
    ];

    webpackOptions.urlLoaderTest = [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/];

    webpackOptions.fileLoaderOutputName = `${razzleOptions.mediaPrefix}/[name].[contenthash:8].[ext]`;

    webpackOptions.urlLoaderOutputName = `${razzleOptions.mediaPrefix}/[name].[contenthash:8].[ext]`;

    webpackOptions.cssTest = [/\.css(\.map)?$/];

    webpackOptions.cssOutputFilename = `${razzleOptions.cssPrefix}/[name].[contenthash:8].css`;

    webpackOptions.cssOutputChunkFilename = `${razzleOptions.cssPrefix}/[name].[contenthash:8].chunk.css`;

    webpackOptions.jsTest = [/\.js(\.map)?$/];

    webpackOptions.definePluginOptions = dotenv.stringified;

    webpackOptions.appAssetsManifestPath = paths.appAssetsManifest;

    if (IS_NODE) {

      webpackOptions.jsOutputFilename = `[name].js`;
      webpackOptions.jsOutputChunkFilename = `[name].chunk.js`;

      if (IS_DEV) {
        const nodeArgs = ['-r', require.resolve('source-map-support/register')];

        // Passthrough --inspect and --inspect-brk flags (with optional [host:port] value) to node
        if (process.env.INSPECT_BRK) {
          nodeArgs.push(process.env.INSPECT_BRK);
        } else if (process.env.INSPECT) {
          nodeArgs.push(process.env.INSPECT);
        }

        webpackOptions.startServerOptions = {
          verbose: razzleOptions.verbose,
          name: 'server.js',
          entryName: 'server',
          killOnExit: false,
          killOnError: false,
          nodeArgs,
        };
      } else {
        webpackOptions.terserPluginOptions = {};
      }
    }

    if (IS_WEB) {

      if (IS_DEV) {

        webpackOptions.jsOutputFilename = `${razzleOptions.jsPrefix}/[name].js`;
        webpackOptions.jsOutputChunkFilename = `${razzleOptions.jsPrefix}/[name].chunk.js`;

        webpackOptions.splitChunksConfig = splitChunksConfigs.dev;
      } else {

        webpackOptions.jsOutputFilename = `${razzleOptions.jsPrefix}/[name].[contenthash:8].js`;
        webpackOptions.jsOutputChunkFilename = `${razzleOptions.jsPrefix}/[name].[contenthash:8].chunk.js`;

        webpackOptions.splitChunksConfig = splitChunksConfigs.prod;
        webpackOptions.terserPluginOptions = {
          terserOptions: {
            parse: {
              // we want uglify-js to parse ecma 8 code. However, we don't want it
              // to apply any minfication steps that turns valid ecma 5 code
              // into invalid ecma 5 code. This is why the 'compress' and 'output'
              // sections only apply transformations that are ecma 5 safe
              // https://github.com/facebook/create-react-app/pull/4234
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              // Disabled because of an issue with Uglify breaking seemingly valid code:
              // https://github.com/facebook/create-react-app/issues/2376
              // Pending further investigation:
              // https://github.com/mishoo/UglifyJS2/issues/2011
              comparisons: false,
              // Disabled because of an issue with Terser breaking valid code:
              // https://github.com/facebook/create-react-app/issues/5250
              // Pending futher investigation:
              // https://github.com/terser-js/terser/issues/120
              inline: 2,
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 5,
              comments: false,
              // Turned on because emoji and regex is not minified properly using default
              // https://github.com/facebook/create-react-app/issues/2488
              ascii_only: true,
            },
          },
          // @todo add flag for sourcemaps
          sourceMap: razzleOptions.enableSourceMaps,
        };
      }
    }

    webpackOptions.enableHtmlWebpackPlugin = clientOnly;

    webpackOptions.htmlWebpackPluginOptions = Object.assign(
      {},
      {
        inject: false,
        template: paths.appHtml
      },
      IS_PROD
      ? {
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true,
        },
      }
      : {}
    );

    webpackOptions.browserslist = razzleOptions.browserslist;

    webpackOptions.babelRule = {
        test: /\.(js|jsx|mjs|ts|tsx)$/,
        include: [paths.appSrc].concat(additionalIncludes),
        use: [{
          loader: require.resolve('./babel-loader/razzle-babel-loader'),
          options: {
            verbose: razzleOptions.verbose,
            sourceMaps: razzleOptions.enableSourceMaps,
            isServer: IS_NODE,
            cwd: paths.appPath,
            cache: razzleOptions.enableBabelCache,
            configFile: razzleOptions.enableTargetBabelrc ? path.resolve(paths.appPath, `.babelrc.${target}`) : undefined,
            hasModern: false,
            development: IS_DEV,
            shouldUseReactRefresh: shouldUseReactRefresh,
          },
          ident: 'razzle-babel-loader'
        }
      ]
    };

    webpackOptions.watchIgnorePaths = [paths.appAssetsManifest];

    webpackOptions.notNodeExternalResMatch = null;

    webpackOptions.nodeExternals = [];
    webpackOptions.clientExternals = [];
    webpackOptions.clientExternals = [];

    webpackOptions.postCssOptions = {
      ident: 'postcss',
      sourceMap: razzleOptions.enableSourceMaps,
      plugins: [
        [require('autoprefixer'), {
          overrideBrowserslist: razzleOptions.browserslist || [
            '>1%',
            'last 4 versions',
            'Firefox ESR',
            'not ie < 9',
          ],
          flexbox: 'no-2009',
        }],
      ],
    };

    webpackOptions.nullNodeCss = false;

    for (const [plugin, pluginOptions] of plugins) {
      // Check if .modifyWebpackConfig is a function.
      // If it is, call it on the configs we created.
      if (plugin.modifyWebpackOptions) {
        webpackOptions = await plugin.modifyWebpackOptions({
          env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },
          webpackObject: webpackObject,
          options: {
            pluginOptions,
            razzleOptions,
            webpackOptions,
          },
          paths,
        });
      }
    }
    // Check if razzle.config.js has a modifyWebpackOptions function.
    // If it does, call it on the configs we created.
    if (modifyWebpackOptions) {
      webpackOptions = await modifyWebpackOptions({
        env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },
        webpackObject: webpackObject,
        options: {
          razzleOptions,
          webpackOptions,
        },
        paths,
      });
    }

    if (razzleOptions.debug.options) {
      console.log(`Printing webpack options for ${target} target`);
      console.log(util.inspect(webpackOptions, {depth: null}));
    }

    const debugNodeExternals = razzleOptions.debug.nodeExternals;

    const nodeExternalsFunc = (context, request, callback) => {
      if (webpackOptions.notNodeExternalResMatch &&
        webpackOptions.notNodeExternalResMatch(request, context)
      ) {
        if (debugNodeExternals) {
          console.log(`Not externalizing ${request} (using notNodeExternalResMatch)`);
        }
        return callback();
      }

      const isLocal =
      request.startsWith('.') ||
      // Always check for unix-style path, as webpack sometimes
      // normalizes as posix.
      path.posix.isAbsolute(request) ||
      // When on Windows, we also want to check for Windows-specific
      // absolute paths.
      (process.platform === 'win32' && path.win32.isAbsolute(request));

      // Relative requires don't need custom resolution, because they
      // are relative to requests we've already resolved here.
      // Absolute requires (require('/foo')) are extremely uncommon, but
      // also have no need for customization as they're already resolved.
      if (isLocal) {
        if (debugNodeExternals) {
          console.log(`Not externalizing ${request} (relative require)`);
        }
        return callback();
      }

      let res;
      try {
        res = resolveRequest(request, `${context}/`);
      } catch (err) {
        // If the request cannot be resolved, we need to tell webpack to
        // "bundle" it so that webpack shows an error (that it cannot be
        // resolved).
        if (debugNodeExternals) {
          console.log(`Not externalizing ${request} (cannot resolve)`);
        }
        return callback();
      }
      // Same as above, if the request cannot be resolved we need to have
      // webpack "bundle" it so it surfaces the not found error.
      if (!res) {
        if (debugNodeExternals) {
          console.log(`Not externalizing ${request} (cannot resolve)`);
        }
        return callback();
      }
      // This means we need to make sure its request resolves to the same
      // package that'll be available at runtime. If it's not identical,
      // we need to bundle the code (even if it _should_ be external).
      let baseRes = null;
      try {
        baseRes = resolveRequest(request, `${paths.appPath}/`);
      } catch (err) {
        baseRes = null;
      }

      // Same as above: if the package, when required from the root,
      // would be different from what the real resolution would use, we
      // cannot externalize it.
      if (baseRes !== res) {
        if (debugNodeExternals) {
          console.log(`Not externalizing ${request} (real resolution differs)`);
        }
        return callback();
      }

      // This is the @babel/plugin-transform-runtime "helpers: true" option
      if (res.match(/node_modules[/\\]@babel[/\\]runtime[/\\]/)) {
        if (debugNodeExternals) {
          console.log(`Not externalizing @babel/plugin-transform-runtime`);
        }
        return callback();
      }

      // Anything else that is standard JavaScript within `node_modules`
      // can be externalized.
      if (res.match(/node_modules[/\\].*\.c?js$/)) {
        if (debugNodeExternals) {
          console.log(`Externalizing ${request} (node_modules)`);
        }
        return callback(undefined, `commonjs ${request}`);
      }

      if (debugNodeExternals) {
        console.log(`Not externalizing ${request} (default)`);
      }
      // Default behavior: bundle the code!
      return callback();
    };

    const postCssOptions = hasPostCssConfig ? undefined : { postcssOptions: webpackOptions.postCssOptions };

    // This is our base webpack config.
    let config = {
      // Set webpack mode:
      mode: IS_DEV || IS_DEV_ENV ? 'development' : 'production',
      // Set webpack context to the current apps directory
      context: paths.appPath,
      // Specify target (either 'node' or 'web')
      target: target,
      // Controversially, decide on sourcemaps.
      devtool: IS_DEV || IS_DEV_ENV ? 'cheap-module-source-map' : razzleOptions.enableSourceMaps ? 'source-map' : false,
      // We need to tell webpack how to resolve both Razzle's node_modules and
      // the users', so we use resolve and resolveLoader.
      resolve: {
        mainFields: IS_NODE ? ['main', 'module']
        : ['browser', 'module', 'main'],
        modules: ['node_modules', paths.appNodeModules].concat(
          additionalModulePaths
        ),
        extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx'],
        alias: Object.assign(
          {
            // This is required so symlinks work during development.
            'webpack/hot/poll': require.resolve('webpack/hot/poll'),
            // Support React Native Web
            // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
            'react-native': 'react-native-web',
          },
          additionalAliases
        ),
        plugins: [
          webpackMajor !== 5 && PnpWebpackPlugin,
        ].filter(x => x),
      },
      resolveLoader: {
        modules: [paths.appNodeModules, paths.ownNodeModules],
        plugins: [
          webpackMajor !== 5 && PnpWebpackPlugin.moduleLoader(module),
        ].filter(x => x),
      },
      module: {
        strictExportPresence: true,
        rules: [
          webpackOptions.babelRule,
          {
            exclude: webpackOptions.fileLoaderExclude,
            use: clientOnly || webpackOptions.enableHtmlWebpackPlugin ? (info) => {
              return info.compiler !== 'HtmlWebpackCompiler' ? [{
                loader: require.resolve('file-loader'),
                options: {
                  name: webpackOptions.fileLoaderOutputName,
                  emitFile: IS_WEB,
                },
                ident: 'razzle-file-loader'
              }]:[]} :
              [{ // fix for vue-loader plugin
                loader: require.resolve('file-loader'),
                options: {
                  name: webpackOptions.fileLoaderOutputName,
                  emitFile: IS_WEB,
                },
                ident: 'razzle-file-loader'
              }]
            },
          // "url" loader works like "file" loader except that it embeds assets
          // smaller than specified limit in bytes as data URLs to avoid requests.
          // A missing `test` is equivalent to a match.
          {
            test: webpackOptions.urlLoaderTest,
            use: [{
              loader: require.resolve('url-loader'),
              options: {
                limit: 10000,
                name: webpackOptions.urlLoaderOutputName,
                emitFile: IS_WEB,
              },
              ident: 'razzle-url-loader'
            }
          ]},

          // "postcss" loader applies autoprefixer to our CSS.
          // "css" loader resolves paths in CSS and adds assets as dependencies.
          // "style" loader turns CSS into JS modules that inject <style> tags.
          // In production, we use a plugin to extract that CSS to a file, but
          // in development "style" loader enables hot editing of CSS.
          //
          // Note: this yields the exact same CSS config as create-react-app.
          {
            test: /\.css$/,
            use: IS_NODE
            ? // Style-loader does not work in Node.js without some crazy
            // magic. Luckily we just need css-loader.
            [
              webpackOptions.nullNodeCss ? {
                loader: require.resolve('null-loader')
              } : {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: {
                    auto: true,
                    exportOnlyLocals: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                  },
                },
                ident: 'razzle-css-loader'
              },
            ]
            : IS_DEV
            ? [
              razzleOptions.staticCssInDev
                ?  {
                  loader: MiniCssExtractPlugin.loader,
                  ident: 'razzle-mini-css-extract-loader'
                } : {
                  loader: require.resolve('style-loader'),
                  ident: 'razzle-style-loader'
                },
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                  },
                },
                ident: 'razzle-css-loader'
              },
              {
                loader: require.resolve('postcss-loader'),
                options: postCssOptions,
                ident: 'razzle-postcss-loader'
              },
            ]
            : [{
                loader: MiniCssExtractPlugin.loader,
                ident: 'razzle-mini-css-extract-loader'
              },
              {
                loader: require.resolve('css-loader'),
                options: {
                  sourceMap: razzleOptions.enableSourceMaps,
                  importLoaders: 1,
                  modules: {
                    auto: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]',
                  },
                },
                ident: 'razzle-css-loader'
              },
              {
                loader: require.resolve('postcss-loader'),
                options: postCssOptions,
                ident: 'razzle-postcss-loader'
              },
            ],
          },
        ],
      },
    };

    config.plugins = [
      // Ignore assets.json and chunks.json to avoid infinite recompile bug
      new webpack.WatchIgnorePlugin(
        webpackMajor === 5
        ? { paths: webpackOptions.watchIgnorePaths }
        : webpackOptions.watchIgnorePaths
      ),
    ];

    if (IS_NODE) {
      // We want to uphold node's __filename, and __dirname.
      config.node = {
        __dirname: false,
        __filename: false,
      };

      const nodeExternals = Array.isArray(webpackOptions.nodeExternals)
        ? webpackOptions.nodeExternals : [webpackOptions.nodeExternals];

      // We need to tell webpack what to bundle into our Node bundle.
      config.externals = (!IS_SERVERLESS ? [nodeExternalsFunc] : []).concat(nodeExternals);

      // Specify webpack Node.js output path and filename
      config.output = {
        path: paths.appBuild,
        publicPath: clientPublicPath,
        filename: webpackOptions.jsOutputFilename,
        chunkFilename: webpackOptions.jsOutputChunkFilename,
        libraryTarget: 'commonjs2',
      };

      if (webpackMajor === 5) {
        config.output.library = {
          type: 'commonjs2'
        };
      }

      // Add some plugins...
      config.plugins = [
        ...config.plugins,
        // We define environment variables that can be accessed globally in our
        new webpack.DefinePlugin(webpackOptions.definePluginOptions),
      ];

      config.entry = {
        server: [paths.appServerIndexJs],
      };

      // make sure the key exists
      config.optimization = {};

      if (IS_PROD) {
        // Prevent creating multiple chunks for the server
        // in dev mode emitting one huge server file on every save is very slow
        if (!IS_DEV_ENV) {
          config.plugins.push(
            new webpack.optimize.LimitChunkCountPlugin({
              maxChunks: 1,
            })
          );
          config.optimization = {
            minimize: true,
            minimizer: [
              new TerserPlugin(webpackOptions.terserPluginOptions)
            ],
          }
        }
        if (webpackMajor === 5) {
          config.optimization.emitOnErrors = razzleOptions.emitOnErrors;
        } else {
          config.optimization.noEmitOnErrors = !razzleOptions.emitOnErrors;
        }
        if (hasStaticExportJs) {
          config.entry.static_export = [paths.appStaticExportJs];
        }
      }

      if (IS_DEV) {
        // Use watch mode
        config.watch = true;
        config.entry.server.unshift(
          `${require.resolve('webpack/hot/poll')}?300`
        );

        // Pretty format server errors
        config.entry.server.unshift(
          require.resolve('razzle-dev-utils/prettyNodeErrors')
        );

        config.plugins = [
          ...config.plugins,
          // Add hot module replacement
          new webpack.HotModuleReplacementPlugin(),
          // Supress errors to console (we use our own logger)
          !disableStartServer &&
            new StartServerPlugin(webpackOptions.startServerOptions),
        ].filter(x => x);
      }
    }

    if (IS_WEB) {
      //
      // config.node = {
      //   fs: 'empty',
      // };

      // Extract our CSS into files.
      const miniCssExtractPlugin = new MiniCssExtractPlugin({
        filename: webpackOptions.cssOutputFilename,
        chunkFilename: webpackOptions.cssOutputChunkFilename,
      });

      config.plugins = [
        ...config.plugins,
        webpackMajor === 5 && new webpack.ProvidePlugin({
          Buffer: [require.resolve('buffer'), 'Buffer'],
          process: [require.resolve('process')],
        }),
        // Output all files in a manifest file called assets-manifest.json
        // in the build directory.
        new ManifestPlugin({
          fileName: webpackOptions.appAssetsManifestPath,
          writeToFileEmit: true,
          generate: (seed, files) => {
            const entrypoints = new Set();
            const noChunkFiles = new Set();
            files.forEach(file => {
              if (file.isChunk) {
                const groups = (
                  (file.chunk || {})._groups || []
                ).forEach(group => entrypoints.add(group));
              } else {
                noChunkFiles.add(file);
              }
            });
            const entries = [...entrypoints];
            const entryArrayManifest = entries.reduce((acc, entry) => {
              const name =
                (entry.options || {}).name ||
                (entry.runtimeChunk || {}).name ||
                entry.id;
              const allFiles = []
                .concat(
                  ...(entry.chunks || []).map(chunk =>
                    chunk.files.map(path => !path.startsWith('/.') && config.output.publicPath + path)
                  )
                )
                .filter(Boolean);

              const filesByType = allFiles.reduce((types, file) => {
                const fileType = file.slice(file.lastIndexOf('.') + 1);
                types[fileType] = types[fileType] || [];
                types[fileType].push(file);
                return types;
              }, {});

              const chunkIds = [].concat(
                ...(entry.chunks || []).map(chunk => chunk.ids)
              );

              return name
                ? {
                    ...acc,
                    [name]:  { ...filesByType, chunks: chunkIds },
                  }
                : acc;
            }, seed);
            entryArrayManifest['noentry'] = [...noChunkFiles]
              .map(file => !file.path.includes('/.') && file.path)
              .filter(Boolean)
              .reduce((types, file) => {
                const fileType = file.slice(file.lastIndexOf('.') + 1);
                types[fileType] = types[fileType] || [];
                types[fileType].push(file);
                return types;
              }, {});
            return entryArrayManifest;
          },
        })
      ].filter(x=>x);

      if (IS_DEV) {
        // Setup Webpack Dev Server on port 3001 and
        // specify our client entry point /client/index.js
        config.entry = {
          client: [
            !shouldUseReactRefresh ? webpackDevClientEntry : null,
            paths.appClientIndexJs,
          ].filter(x => x),
        };

        // Configure our client bundles output. Not the public path is to 3001.
        config.output = {
          path: paths.appBuildPublic,
          publicPath: clientPublicPath,
          pathinfo: true,
          libraryTarget: 'var',
          filename: webpackOptions.jsOutputFilename,
          chunkFilename: webpackOptions.jsOutputChunkFilename,
          devtoolModuleFilenameTemplate: info =>
            path.resolve(info.resourcePath).replace(/\\/g, '/'),
        };

        if (webpackMajor === 5) {
          config.output.library = {
            type: 'var',
            name: 'client',
          };
        }

        // Configure webpack-dev-server to serve our client-side bundle from
        // http://${dotenv.raw.HOST}:3001
        //
        // First assign the dev server props that are common to v3 and v4
        config.devServer = {
          compress: true, // watchContentBase: true,
          headers: { 'Access-Control-Allow-Origin': '*' },
          historyApiFallback: {
            // Paths with dots should still use the history fallback.
            // See https://github.com/facebookincubator/create-react-app/issues/387.
            disableDotRule: true,
          },
          hot: true,
          host: dotenv.raw.HOST,
          port: devServerPort,
        };
        // If the major version is > 3, then use the newer configuration notation
        if (devServerMajorVersion > 3) {
          // See https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md for how this was migrated
          config.devServer = Object.assign(config.devServer, {
            allowedHosts: 'all',
            client: {
              logging: 'none', // Enable gzip compression of generated files.
              overlay: false,
            },
            devMiddleware: {
              publicPath: clientPublicPath,
            },
            static: {
              // Reportedly, this avoids CPU overload on some systems.
              // https://github.com/facebookincubator/create-react-app/issues/293
              watch: { ignored: /node_modules/ },
            },
            onBeforeSetupMiddleware(server) {
              // This lets us open files from the runtime error overlay.
              server.app.use(errorOverlayMiddleware());
            },
          });
        } else {
          config.devServer = Object.assign(config.devServer, {
            disableHostCheck: true,
            clientLogLevel: 'none', // Enable gzip compression of generated files.
            publicPath: clientPublicPath,
            noInfo: true,
            overlay: false,
            quiet: true, // By default files from `contentBase` will not trigger a page reload.
            // Reportedly, this avoids CPU overload on some systems.
            // https://github.com/facebookincubator/create-react-app/issues/293
            watchOptions: { ignored: /node_modules/ },
            before(app) {
              // This lets us open files from the runtime error overlay.
              app.use(errorOverlayMiddleware());
            },
          });
        }

        // Add client-only development plugins
        config.plugins = [
          ...config.plugins,
          devServerMajorVersion > 3
            ? null // avoid warning since v4 automatically adds the HRM plugin when `hot` is true
            : new webpack.HotModuleReplacementPlugin({
                // set this true will break HtmlWebpackPlugin
                multiStep: !clientOnly,
              }),
          shouldUseReactRefresh
            ? new ReactRefreshWebpackPlugin({
                overlay: {
                  entry: webpackDevClientEntry,
                },
              })
            : null,
          new webpack.DefinePlugin(webpackOptions.definePluginOptions),
          razzleOptions.staticCssInDev ? miniCssExtractPlugin : null,
        ].filter(x => x);

        config.optimization = {
          splitChunks: webpackOptions.splitChunksConfig,
        };
      } else {
        // Specify production entry point (/client/index.js)
        config.entry = {
          client: paths.appClientIndexJs,
        };

        const clientExternals = Array.isArray(webpackOptions.clientExternals)
          ? webpackOptions.clientExternals : [webpackOptions.clientExternals];

        // We need to tell webpack what to bundle into our client bundle.
        config.externals = clientExternals;

        // Specify the client output directory and paths. Notice that we have
        // changed the publicPath to just '/' from http://localhost:3001. This is because
        // we will only be using one port in production.
        config.output = {
          path: paths.appBuildPublic,
          publicPath: dotenv.raw.PUBLIC_PATH || '/',
          filename: webpackOptions.jsOutputFilename,
          chunkFilename: webpackOptions.jsOutputChunkFilename,
          libraryTarget: 'var',
        };

        if (webpackMajor === 5) {
          config.output.library = {
            type: 'var',
            name: 'client',
          };
        }

        config.plugins = [
          ...config.plugins,
          // Define production environment vars
          new webpack.DefinePlugin(webpackOptions.definePluginOptions),
          miniCssExtractPlugin,
          IS_DEV_ENV || webpackMajor === 5 ? null : new webpack.HashedModuleIdsPlugin(),
          IS_DEV_ENV ? null : new webpack.optimize.AggressiveMergingPlugin(),
          hasPublicDir && new CopyPlugin({
            patterns: [
              {
                from: paths.appPublic.replace(/\\/g, '/') + '/**/*',
                to: paths.appBuild,
                context: paths.appPath,
                globOptions: {
                  ignore: [paths.appPublic.replace(/\\/g, '/') + "/index.html"],
                }
              },
            ]
          }),
        ].filter(x => x);

        // make sure the key exists
        config.optimization = {};

        if (!IS_DEV_ENV) {
          config.optimization = {
            splitChunks: webpackOptions.splitChunksConfig,
            moduleIds: webpackMajor === 5 ? 'deterministic' : 'hashed',
            minimize: true,
            minimizer: [
              new TerserPlugin(webpackOptions.terserPluginOptions),
              new CssMinimizerPlugin({
                sourceMap: razzleOptions.enableSourceMaps,
                minimizerOptions: {
                  sourceMap: razzleOptions.enableSourceMaps
                },
                minify: async (data, inputMap, minimizerOptions) => {
                  // eslint-disable-next-line global-require
                  const CleanCSS = require('clean-css');

                  const [[filename, input]] = Object.entries(data);
                  const minifiedCss = await new CleanCSS({ sourceMap: minimizerOptions.sourceMap }).minify({
                    [filename]: {
                      styles: input,
                      sourceMap: inputMap,
                    },
                  });

                  return {
                    css: minifiedCss.styles,
                    map: minifiedCss.sourceMap ? minifiedCss.sourceMap.toJSON() : '',
                    warnings: minifiedCss.warnings,
                  };
                },
              })
            ],
          }
        }
        if (webpackMajor === 5) {
          config.optimization.emitOnErrors = razzleOptions.emitOnErrors;
        } else {
          config.optimization.noEmitOnErrors = !razzleOptions.emitOnErrors;
        }
      }

      if (clientOnly) {
        if (IS_DEV) {
          if (devServerMajorVersion > 3) {
            // See https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md for how this was migrated
            config.devServer.static.directory = paths.appPublic;
            if (!config.devServer.static.watch) {
              config.devServer.static.watch = true;
            }
          } else {
            config.devServer.contentBase = paths.appPublic;
            config.devServer.watchContentBase = true;
          }
        }
      }

      if (webpackOptions.enableHtmlWebpackPlugin) {
        config.plugins = [
          ...config.plugins,
          // Generates an `index.html` file with the <script> injected.
          new HtmlWebpackPlugin(webpackOptions.htmlWebpackPluginOptions),
        ];
      }
    }

    if (IS_DEV && !shouldDisableWebpackbar) {
      config.plugins = [
        ...config.plugins,
        new WebpackBar({
          color: target === 'web' ? '#f56be2' : '#c065f4',
          name: target === 'web' ? 'client' : 'server',
        }),
      ];
    }

    for (const [plugin, pluginOptions] of plugins) {
      // Check if .modifyWebpackConfig is a function.
      // If it is, call it on the configs we created.
      if (plugin.modifyWebpackConfig) {
        config = await plugin.modifyWebpackConfig({
          env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },
          webpackConfig: config,
          webpackObject: webpackObject,
          options: {
            pluginOptions,
            razzleOptions,
            webpackOptions,
          },
          paths,
        });
      }
    }
    // Check if razzle.config.js has a modifyWebpackConfig function.
    // If it does, call it on the configs we created.
    if (modifyWebpackConfig) {
      config = await modifyWebpackConfig({
        env: { target, dev: IS_DEV, serverless: IS_SERVERLESS },
        webpackConfig: config,
        webpackObject: webpackObject,
        options: {
          razzleOptions,
          webpackOptions,
        },
        paths,
      });
    }
    if (razzleOptions.debug.config) {
      console.log(`Printing webpack config for ${target} target`);
      console.log(util.inspect(config, {depth: null}));
    }
    resolve(config);
  });
};


================================================
FILE: packages/razzle/config/createJestConfig.js
================================================
'use strict';

const fs = require('fs');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');

// first search for setupTests.ts file
// if .ts file not exists then looks for setupTests.js
function getSetupTestsFilePath(paths) {
  const path = '<rootDir>/src/setupTests';
  if (fs.existsSync(paths.tsTestsSetup)) {
    return path.concat('.ts');
  }
  if (fs.existsSync(paths.jsTestsSetup)) {
    return path.concat('.js');
  }
}

module.exports = (
  resolve,
  rootDir,
  razzle,
  razzleOptions,
  webpackObject,
  plugins,
  paths
) => {
  return new Promise(async resolveConfig => {
    // Use this instead of `paths.testsSetup` to avoid putting
    // an absolute filename into configuration after ejecting.
    const setupTestsFile = getSetupTestsFilePath(paths);

    // TODO: I don't know if it's safe or not to just use / as path separator
    // in Jest configs. We need help from somebody with Windows to determine this.
    let config =
    {
      collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
      testMatch: [
        '<rootDir>/src/**/*(*.)@(spec|test).(ts|js)?(x)',
        '<rootDir>/src/**/__tests__/**/*(*.)@(spec|test).(ts|js)?(x)',
        '<rootDir>/tests/**/*(*.)@(spec|test).(ts|js)?(x)',
      ],
      testEnvironment: 'node',
      testURL: 'http://localhost',
      transform: {
        '^.+\\.(js|jsx|mjs|cjs|ts|tsx)$': resolve(
          'config/jest/babelTransform.js'
        ),
        '^.+\\.css$': resolve('config/jest/cssTransform.js'),
        '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)': resolve(
          'config/jest/fileTransform.js'
        ),
      },
      transformIgnorePatterns: [
        '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
        '^.+\\.module\\.(css|sass|scss)$',
      ],
      moduleDirectories: ['node_modules'],
      moduleNameMapper: {
        '^react-native$': 'react-native-web',
      },
      moduleFileExtensions: ['js', 'jsx', 'json', 'ts', 'tsx'],
      setupFilesAfterEnv: setupTestsFile ? [setupTestsFile] : []
    }

    if (rootDir) {
      config.rootDir = rootDir;
    }

    let overrides = {};
    if (fs.existsSync(paths.appPackageJson)) {
      try {
        overrides = Object.assign({}, require(paths.appPackageJson).jest);
      } catch (e) {
        clearConsole();
        logger.error('Invalid package.json.', e);
        process.exit(1);
      }
    }

    const supportedKeys = [
      'collectCoverageFrom',
      'coverageReporters',
      'coverageThreshold',
      'globals',
      'globalSetup',
      'globalTeardown',
      'mapCoverage',
      'moduleDirectories',
      'moduleFileExtensions',
      'moduleNameMapper',
      'modulePaths',
      'snapshotSerializers',
      'setupFiles',
      'testMatch',
      'testEnvironmentOptions',
      'testResultsProcessor',
      'transform',
      'transformIgnorePatterns',
      'reporters',
      'watchPlugins',
      'setupFilesAfterEnv'
    ];
    if (overrides) {
      supportedKeys.forEach(key => {
        if (overrides.hasOwnProperty(key)) {
          config[key] = overrides[key];
          delete overrides[key];
        }
      });
    }
    for (const [plugin, pluginOptions] of plugins) {
      // Check if plugin.modifyJestConfig is a function.
      // If it is, call it on the configs we created.
      if (plugin.modifyJestConfig) {
        config = await plugin.modifyJestConfig({
          jestConfig: config,
          webpackObject: webpackObject,
          options: {
            razzleOptions,
            pluginOptions,
          },
          paths,
        });
      }
    }

    // Check if razzle.modifyJestConfig is a function.
    // If it is, call it on the configs we created.
    if (razzle.modifyJestConfig) {
      config = await razzle.modifyJestConfig({
        jestConfig: config,
        webpackObject: webpackObject,
        options: {
          razzleOptions,
        },
        paths,
      });
    }
    resolveConfig(config);
  });
};


================================================
FILE: packages/razzle/config/createRazzleTestConfig.js
================================================
const webpack = require('webpack');
const createConfig = require('./createConfigAsync');
const loadRazzleConfig = require('./loadRazzleConfig');

module.exports = (
  target,
  env,
  razzleConfig,
  clientOnly = false,
  packageJsonIn
) => {
  return new Promise(async resolve => {
    const {
      razzle,
      razzleOptions,
      webpackObject,
      plugins,
      paths,
    } = await loadRazzleConfig(webpack, razzleConfig, packageJsonIn);
    createConfig(
      target,
      env,
      razzle,
      webpackObject,
      clientOnly,
      paths,
      plugins,
      razzleOptions
    ).then(config => resolve(config));
  });
};


================================================
FILE: packages/razzle/config/defaultOptions.js
================================================
'use strict';

module.exports = {
  verbose: false,
  debug: {},
  buildType: 'iso',
  cssPrefix: 'static/css',
  jsPrefix: 'static/js',
  enableSourceMaps: true,
  enableReactRefresh: false,
  enableTargetBabelrc: false,
  enableBabelCache: true,
  forceRuntimeEnvVars: [],
  mediaPrefix: 'static/media',
  staticCssInDev: false,
  emitOnErrors: false,
  disableWebpackbar: false
};


================================================
FILE: packages/razzle/config/env.js
================================================
'use strict';

const fs = require('fs-extra');
const path = require('path');

function setupEnvironment(paths) {
  const NODE_ENV = process.env.NODE_ENV;
  if (!NODE_ENV) {
    throw new Error(
      'The NODE_ENV environment variable is required but was not specified.'
    );
  }

  // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
  var dotenvFiles = [
    `${paths.dotenv}.${NODE_ENV}.local`,
    `${paths.dotenv}.${NODE_ENV}`,
    NODE_ENV !== 'test' && `${paths.dotenv}.local`,
    paths.dotenv,
  ].filter(Boolean);
  // Load environment variables from .env* files. Suppress warnings using silent
  // if this file is missing. dotenv will never modify any environment variables
  // that have already been set. Variable expansion is supported in .env files.
  // https://github.com/motdotla/dotenv
  // https://github.com/motdotla/dotenv-expand
  dotenvFiles.forEach(dotenvFile => {
    if (fs.existsSync(dotenvFile)) {
      require('dotenv-expand')(
        require('dotenv').config({
          path: dotenvFile,
        })
      );
    }
  });
}
// Grab NODE_ENV and RAZZLE_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const RAZZLE = /^RAZZLE_/i;

function getClientEnvironment(target, is_dev, options, paths) {
  const raw = Object.keys(process.env)
    .filter(key => RAZZLE.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // Useful for determining whether we’re running in production mode.
        // Most importantly, it switches React into the correct mode.
        NODE_ENV: process.env.NODE_ENV || 'development',
        PORT: process.env.PORT || options.port || 3000,
        VERBOSE: !!process.env.VERBOSE,
        HOST: process.env.HOST || options.host || 'localhost',
        RAZZLE_ASSETS_MANIFEST: paths.appAssetsManifest,
        BUILD_TARGET: target === 'web' ? 'client' : 'server',
        // only for production builds. Useful if you need to serve from a CDN
        PUBLIC_PATH: process.env.PUBLIC_PATH || '/',
        // CLIENT_PUBLIC_PATH is a PUBLIC_PATH for NODE_ENV === 'development' && BUILD_TARGET === 'client'
        // It's useful if you're running razzle in a non-localhost container. Ends in a /
        CLIENT_PUBLIC_PATH: process.env.CLIENT_PUBLIC_PATH,
        // The public dir changes between dev and prod, so we use an environment
        // variable available to users.
        RAZZLE_PUBLIC_DIR:
          process.env.NODE_ENV !== 'development'
            ? path.relative(paths.appPath, paths.appBuildPublic)
            : paths.appPublic,
        // Whether or not react-refresh is enabled.
        // react-refresh is not 100% stable at this time,
        // which is why it's disabled by default.
        // It is defined here so it is available in the webpackHotDevClient.
        FAST_REFRESH: options.shouldUseReactRefresh,
        WEBPACK_VERSION: options.webpackObject.version ? parseInt(options.webpackObject.version[0]) : 3
      }
    );
  // Stringify all values so we can feed into Webpack DefinePlugin
  const stringified = Object.keys(raw).reduce((env, key) => {
    if (!options.forceRuntimeEnvVars.includes(key) || is_dev) {
      env[`process.env.${key}`] = JSON.stringify(raw[key]);
    }
    return env;
  }, {});

  return { raw, stringified };
}

module.exports = {
  getClientEnv: getClientEnvironment,
  setupEnvironment: setupEnvironment,
};


================================================
FILE: packages/razzle/config/jest/babelTransform.js
================================================
'use strict';

const babelJest = require('babel-jest');
const paths = require('../paths');
const fs = require('fs-extra');

const hasBabelRc = fs.existsSync(paths.appBabelRc);

const config = {
  presets: !hasBabelRc ? [require.resolve('babel-preset-razzle')] : [],
  babelrc: !!hasBabelRc,
};

module.exports = babelJest.createTransformer(config);


================================================
FILE: packages/razzle/config/jest/cssTransform.js
================================================
'use strict';

// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/tutorial-webpack.html

module.exports = {
  process() {
    return 'module.exports = {};';
  },
  getCacheKey() {
    // The output is always the same.
    return 'cssTransform';
  },
};


================================================
FILE: packages/razzle/config/jest/fileTransform.js
================================================
'use strict';

const path = require('path');

// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/tutorial-webpack.html

module.exports = {
  process(src, filename) {
    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
  },
};


================================================
FILE: packages/razzle/config/loadPlugins.js
================================================
'use strict';

const resolve = require('resolve');

function loadPlugin(plugin, paths) {
  if (typeof plugin === 'string') {
    // Apply the plugin with default options if passing only a string
    return loadPlugin({ name: plugin }, paths);
  }

  if (typeof plugin === 'function') {
    return [plugin, {}];
  }

  // Support for not released plugins without options
  // Use plugin.object if you need options
  if (typeof plugin === 'object' && !plugin.name && !plugin.object) {
    return [plugin, {}];
  }

  if (typeof plugin.func === 'function') {
    // Used for writing plugin tests
    return [plugin.func, plugin.options];
  }

  if (typeof plugin.object === 'object') {
    // Used for writing plugin tests
    return [plugin.object, plugin.options];
  }

  const isScopedPlugin = plugin.name.startsWith('@') && plugin.name.includes('/');
  let scope;
  let scopedPluginName;
  if (isScopedPlugin) {
    const pluginNameParts = plugin.name.split("/");
    scope = pluginNameParts[0];
    scopedPluginName = pluginNameParts[1]
  }

  const completePluginNames = [
    isScopedPlugin && `${scope}/razzle-plugin-${scopedPluginName}`,
    isScopedPlugin && plugin.name,
    `razzle-plugin-${plugin.name}`,
    `${plugin.name}/razzle-plugin`,
  ].filter(Boolean);

  // Try to find the plugin in node_modules
  let razzlePlugin = null;
  for (const completePluginName of completePluginNames) {
    try {
      razzlePlugin = require(completePluginName);
    // eslint-disable-next-line no-empty
    } catch (error) {}
    
    if (razzlePlugin) {
      break;
    }
  }
  if (!razzlePlugin) {
    const last = completePluginNames.pop();
    throw new Error(`Unable to find '${completePluginNames.join("', '")}' or ${last}'`);
  }

  return [razzlePlugin, plugin.options];
}

function loadPlugins(plugins, paths) {
  return plugins.map(function(plugin) {
    return loadPlugin(plugin, paths);
  });
}

module.exports = loadPlugins;


================================================
FILE: packages/razzle/config/loadRazzleConfig.js
================================================
const fs = require('fs-extra');
const merge = require('deepmerge');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');

const defaultPaths = require('./paths');
const defaultRazzleOptions = require('./defaultOptions');
const setupEnvironment = require('./env').setupEnvironment;
const loadPlugins = require('./loadPlugins');

const getModuleFormat = packageJson => {
  // See https://nodejs.org/api/packages.html#type for more info on "type"
  return packageJson.type || "commonjs";
};

module.exports = (webpackObject, razzleConfig, packageJsonIn) => {
  return new Promise(async resolve => {
    let razzle = razzleConfig || {};
    let packageJson = packageJsonIn || {};
    let paths = Object.assign({}, defaultPaths);

    if (fs.existsSync(paths.appPackageJson)) {
      try {
        packageJson = require(paths.appPackageJson);
      } catch (e) {
        clearConsole();
        logger.error('Invalid package.json.', e);
        process.exit(1);
      }
    }

    // Check for razzle.config.js file
    if (fs.existsSync(paths.appRazzleConfig)) {
      try {
        if (getModuleFormat(packageJson) === 'module') {
          razzle = await import(paths.appRazzleConfig);
        }
        else {
          razzle = require(paths.appRazzleConfig);
        }
      } catch (e) {
        clearConsole();
        logger.error('Invalid razzle.config.js file.', e);
        process.exit(1);
      }
    }

    setupEnvironment(paths);

    let razzleOptions = merge(defaultRazzleOptions, razzle.options || {});

    if (packageJson.browserslist) {
      razzleOptions.browserslist =
        razzleOptions.browserslist || packageJson.browserslist;
    }

    const plugins = Array.isArray(razzle.plugins)
      ? loadPlugins(razzle.plugins, paths)
      : [];

    for (const [plugin, pluginOptions] of plugins) {
      // Check if plugin.modifyOptions is a function.
      // If it is, call it on the configs we created.
      if (plugin.modifyOptions) {
        razzleOptions = await plugin.modifyOptions({
          options: {
            razzleOptions,
            pluginOptions,
          },
          paths,
        });
      }
    }
    if (razzle.modifyOptions) {
      // Check if razzle.modifyOptions is a function.
      // If it is, call it on the configs we created.
      razzleOptions = await razzle.modifyOptions({
        options: {
          razzleOptions,
        },
        paths,
      });
    }
    for (const [plugin, pluginOptions] of plugins) {
      // Check if plugin.modifyPaths is a function.
      // If it is, call it on the paths we created.
      if (plugin.modifyPaths) {
        paths = await plugin.modifyPaths({
          options: {
            razzleOptions,
            pluginOptions,
          },
          paths,
        });
      }
    }
    if (razzle.modifyPaths) {
      // Check if razzle.modifyPaths is a function.
      // If it is, call it on the paths we created.
      paths = await razzle.modifyPaths({
        options: {
          razzleOptions,
        },
        paths,
      });
    }

    resolve({
      razzle,
      razzleOptions,
      webpackObject,
      plugins,
      paths,
      packageJson,
    });
  });
};


================================================
FILE: packages/razzle/config/modules.js
================================================
'use strict';

const fs = require('fs');
const path = require('path');
const resolve = require('resolve');
const logger = require('razzle-dev-utils/logger');

function getAdditionalModulePaths(options = {}, paths) {
  const baseUrl = options.baseUrl;

  // We need to explicitly check for null and undefined (and not a falsy value) because
  // TypeScript treats an empty string as `.`.
  if (baseUrl == null) {
    // If there's no baseUrl set we respect NODE_PATH
    return paths.nodePaths.split(path.delimiter).filter(Boolean);
  }

  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);

  // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
  // the default behavior.
  if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
    return null;
  }

  // Allow the user set the `baseUrl` to `appSrc`.-
  if (path.relative(paths.appSrc, baseUrlResolved) === '') {
    return [paths.appSrc];
  }

  // Otherwise, throw an error.
  throw new Error(
    logger.error(
      "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
        ' Razzle does not support other values at this time.'
    )
  );
}

function getAdditionalAliases(options = {}, paths) {
  const baseUrl = options.baseUrl;
  let aliases = {};

  // We need to explicitly check for null and undefined (and not a falsy value) because
  // TypeScript treats an empty string as `.`.
  if (baseUrl == null) {
    // If there's no baseUrl we have no aliases
    return {};
  }

  const baseUrlResolved = path.resolve(paths.appPath, baseUrl);

  Object.keys(options.paths || {}).forEach(item => {
    const name = item.replace(/\/\*$/, '');
    // webpack5 allows arrays here, fix later
    const value = path.resolve(
      baseUrlResolved,
      options.paths[item][0].replace(/\/\*$/, '')
    );
    aliases[name] = value;
  });

  return aliases;
}

function getAdditionalIncludes(additionalAliases) {
  return Object.values(additionalAliases);
}

function getModules(paths) {
  // Check if TypeScript is setup
  const hasTsConfig = fs.existsSync(paths.appTsConfig);
  const hasJsConfig = fs.existsSync(paths.appJsConfig);

  if (hasTsConfig && hasJsConfig) {
    throw new Error(
      'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
    );
  }

  let config;

  // If there's a tsconfig.json we assume it's a
  // TypeScript project and set up the config
  // based on tsconfig.json
  if (hasTsConfig) {
    const ts = require(resolve.sync('typescript', {
      basedir: paths.appNodeModules,
    }));
    config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
    // Otherwise we'll check if there is jsconfig.json
    // for non TS projects.
  } else if (hasJsConfig) {
    config = require(paths.appJsConfig);
  }

  config = config || {};
  const options = config.compilerOptions || {};

  const additionalModulePaths = getAdditionalModulePaths(options, paths);
  const additionalAliases = getAdditionalAliases(options, paths);
  const additionalIncludes = getAdditionalIncludes(additionalAliases);

  return {
    additionalModulePaths: additionalModulePaths,
    additionalAliases: additionalAliases,
    additionalIncludes: additionalIncludes,
  };
}

module.exports = getModules;


================================================
FILE: packages/razzle/config/paths.js
================================================
'use strict';

const path = require('path');
const fs = require('fs');
const url = require('url');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');

// Make sure any symlinks in the project folder are resolved:
// https://github.com/facebookincubator/create-react-app/issues/637
const appDirectory = fs.realpathSync(path.join(process.cwd(), process.env.RAZZLE_APP_PATH || ''));
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

const envPublicUrl = process.env.PUBLIC_URL;

function ensureSlash(path, needsSlash) {
  const hasSlash = path.endsWith('/');
  if (hasSlash && !needsSlash) {
    return path.substr(path, path.length - 1);
  } else if (!hasSlash && needsSlash) {
    return `${path}/`;
  } else {
    return path;
  }
}

const getPublicUrl = appPackageJson => {
  if (envPublicUrl) {
    return envPublicUrl;
  }
  
  if (fs.existsSync(appPackageJson)) {
    try {
      const packageJson = require(appPackageJson)
      return packageJson.homepage;
    } catch (e) {
      clearConsole();
      logger.error('Invalid package.json.', e);
      process.exit(1);
    }
  }

  return undefined;
};

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl =
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
  return ensureSlash(servedUrl, true);
}

const resolveOwn = relativePath => path.resolve(__dirname, '..', relativePath);

// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebookincubator/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const nodePaths = (process.env.NODE_PATH || '')
  .split(path.delimiter)
  .filter(folder => folder && !path.isAbsolute(folder))
  .map(folder => path.resolve(appDirectory, folder))
  .join(path.delimiter);

module.exports = {
  dotenv: resolveApp('.env'),
  appPath: resolveApp('.'),
  appBuild: resolveApp('build'),
  appBuildPublic: resolveApp('build/public'),
  appAssetsManifest: resolveApp('build/assets.json'),
  appBuildStaticExport: resolveApp('build/static_export.js'),
  appBuildStaticExportRoutes: resolveApp('build/public/static_routes.js'),
  appPublic: resolveApp('public'),
  appNodeModules: resolveApp('node_modules'),
  appSrc: resolveApp('src'),
  appHtml: resolveApp('public/index.html'), // client only
  appPackageJson: resolveApp('package.json'),
  appServerJs: resolveApp('src/server'),
  appServerIndexJs: resolveApp('src'),
  appClientIndexJs: resolveApp('src/client'),
  appStaticExportJs: resolveApp('src/static_export'),
  tsTestsSetup: resolveApp('src/setupTests.ts'),
  jsTestsSetup: resolveApp('src/setupTests.js'),
  appBabelRc: resolveApp('.babelrc'),
  appRazzleConfig: resolveApp('razzle.config.js'),
  nodePaths: nodePaths,
  ownPath: resolveOwn('.'),
  ownNodeModules: resolveOwn('node_modules'),
  publicUrl: getPublicUrl(resolveApp('package.json')),
  servedPath: getServedPath(resolveApp('package.json')),
  appJsConfig: resolveApp('jsconfig.json'),
  appTsConfig: resolveApp('tsconfig.json'),
};


================================================
FILE: packages/razzle/config/razzleDevServer.js
================================================
#! /usr/bin/env node
'use strict';

const devServer = require('webpack-dev-server');

class razzleDevServer extends devServer {
  constructor(compiler, options = {}, _log) {
    const verbose = options.verbose || false;
    delete options['verbose'];
    super(compiler, options, _log);
    this.verbose = verbose;
  }

  showStatus() {
    if (this.verbose) {
      super.showStatus();
    }
  }
}

module.exports = razzleDevServer;


================================================
FILE: packages/razzle/package.json
================================================
{
  "name": "razzle",
  "description": "Create server-rendered universal JavaScript applications with no configuration",
  "license": "MIT",
  "author": "Jared Palmer <jared@palmer.net>",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle"
  },
  "version": "4.2.18",
  "bin": {
    "razzle": "./bin/razzle.js"
  },
  "files": [
    "babel.js",
    "bin",
    "config",
    "scripts",
    "template"
  ],
  "dependencies": {
    "@babel/plugin-transform-modules-commonjs": "^7.12.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "autoprefixer": "^10.2.3",
    "babel-jest": "^26.3.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-define": "^2.0.0",
    "buffer": "^6.0.3",
    "chalk": "^4.1.0",
    "clean-css": "^5.0.1",
    "copy-webpack-plugin": "^6.1.1",
    "css-loader": "^5.0.0",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "deepmerge": "^4.2.2",
    "dotenv": "^8.2.0",
    "dotenv-expand": "^5.1.0",
    "file-loader": "^4.3.0",
    "fs-extra": "^9.1.0",
    "inquirer": "^7.3.3",
    "jest": "^26.4.2",
    "mri": "^1.1.4",
    "null-loader": "^4.0.1",
    "pnp-webpack-plugin": "^1.6.4",
    "postcss": "^8.2.4",
    "postcss-load-config": "^3.0.0",
    "postcss-loader": "^4.2.0",
    "process": "^0.11.10",
    "razzle-start-server-webpack-plugin": "4.2.18",
    "react-dev-utils": "^11.0.4",
    "react-refresh": "^0.9.0",
    "resolve": "^1.17.0",
    "sade": "^1.4.2",
    "source-map-support": "^0.5.16",
    "string-hash": "^1.1.3",
    "style-loader": "^2.0.0",
    "terminate": "^2.1.2",
    "terser-webpack-plugin": "^2.3.5",
    "tiny-async-pool": "^1.1.0",
    "url-loader": "^2.3.0",
    "webpack-manifest-plugin": "^3.1.1",
    "webpackbar": "~4||~5"
  },
  "peerDependencies": {
    "babel-preset-razzle": "4.2.18",
    "html-webpack-plugin": "~4||~5",
    "mini-css-extract-plugin": ">=0.9.0 <1.0.0",
    "razzle-dev-utils": "4.2.18",
    "webpack": "~4||~5",
    "webpack-dev-server": "^3.11.0||~4"
  },
  "keywords": [
    "inferno",
    "isomorphic",
    "preact",
    "razzle",
    "react",
    "reason",
    "reasonml",
    "ssr",
    "universal",
    "webpack"
  ]
}


================================================
FILE: packages/razzle/scripts/build.js
================================================
#! /usr/bin/env node
'use strict';

const mri = require('mri');

const argv = process.argv.slice(2);
const cliArgs = mri(argv);

const nodeEnv = cliArgs['node-env'] || 'production';
const mode = cliArgs['watch'] ? 'watch' : 'run';

// Do this as the first thing so that any code reading it knows the right env.
process.env.NODE_ENV = /production|staging|development$/.test(nodeEnv) ? nodeEnv : 'production';

const webpack = require('webpack');
const fs = require('fs-extra');
const inquirer = require('inquirer');
const chalk = require('chalk');
const createConfig = require('../config/createConfigAsync');
const loadRazzleConfig = require('../config/loadRazzleConfig');
const printErrors = require('razzle-dev-utils/printErrors');
const printWarnings = require('razzle-dev-utils/printWarnings');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');
const FileSizeReporter = require('razzle-dev-utils/FileSizeReporter');
const formatWebpackMessages = require('razzle-dev-utils/formatWebpackMessages');
const measureFileSizesBeforeBuild =
  FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  clearConsole();
  logger.error('Unexpected error', err);
  process.exit(1);
});

loadRazzleConfig(webpack).then(
  async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {
    const verbose = razzleOptions.verbose;
    if (!verbose) {
      process.removeAllListeners('warning');
    }
    if (!process.env.CI && process.env.NODE_ENV === "production" && (process.env.RAZZLE_NONINTERACTIVE !== "true" && !cliArgs['noninteractive'])) {
      await inquirer.prompt([
        {
          type: 'confirm',
          name: 'run',
          message: 'This runs the production build, are you sure you want to run it?\nAdd --noninteractive to remove this prompt.',
        }
      ]).then((answers) => {
        if (answers.run === false) {
          process.exit(1);
        }
      });
    }

    const clientOnly = /spa|single\-page\-application/.test(
      razzleOptions.buildType
    );
    const serverOnly = /serveronly|server\-only/.test(razzleOptions.buildType);

    process.env.BUILD_TYPE = razzleOptions.buildType;

    const clientBuilds = ['default'];
    const serverBuilds = ['default'];

    const clientBuildProceedFrom = 'default';
    const serverBuildProceedFrom = 'default';

    const runBuildPromisesInSeries = ps =>
      ps.reduce(
        (p, next) =>
          p.then(next).catch((buildName, target) => {
            process.exit(1);
          }),
        Promise.resolve()
      );

    if (!serverOnly) {
      const clientResults = await runBuildPromisesInSeries(
        clientBuilds
          .slice(clientBuilds.indexOf(clientBuildProceedFrom))
          .map(buildName => {
            return () => {
              return new Promise((resolveBuild, rejectBuild) => {
                const build = async previousFileSizes => {
                  return new Promise(async (resolve, reject) => {
                    // Create our production webpack configurations and pass in razzle options.
                    const clientConfig = await createConfig(
                      'web',
                      'prod',
                      razzle,
                      webpackObject,
                      clientOnly,
                      paths,
                      plugins,
                      razzleOptions
                    );

                    console.log(`Compiling client ${buildName} build...\n`);
                    // First compile the client. We need it to properly output assets.json (asset
                    // manifest) and chunks.json (chunk manifest) files with the correct hashes on file names BEFORE we can start
                    // the server compiler.
                    compile(clientConfig, (err, clientStats) => {
                      if (err) {
                        return reject(err);
                      }
                      const clientMessages = clientStats.toJson({}, true);
                      if (clientMessages.errors.length) {
                        return reject(clientMessages.errors);
                      }
                      if (
                        !process.env.WARNINGS_ERRORS_DISABLE &&
                        process.env.CI &&
                        (typeof process.env.CI !== 'string' ||
                          process.env.CI.toLowerCase() !== 'false') &&
                        clientMessages.warnings.length
                      ) {
                        console.log(
                          chalk.yellow(
                            '\nTreating warnings as errors because process.env.CI = true.\n' +
                            'Most CI servers set it automatically.\n'
                          )
                        );
                        return reject(clientMessages.warnings);
                      }

                      return resolve({
                        stats: clientStats,
                        previousFileSizes,
                        warnings: clientMessages.warnings,
                      });
                    }, (err) => {
                      return reject(err);
                    });
                  });
                };
                // First, read the current file sizes in build directory.
                // This lets us display how much they changed later.
                measureFileSizesBeforeBuild(paths.appBuildPublic)
                  .then(async previousFileSizes => {
                    // Remove all content but keep the directory so that
                    // if you're in it, you don't end up in Trash
                    fs.emptyDirSync(paths.appBuild);

                    // Start the webpack build
                    return build(previousFileSizes);
                  })
                  .then(
                    ({ stats, previousFileSizes, warnings }) => {
                      if (warnings.length) {
                        printWarnings(
                          `Client ${buildName} build compiled with warnings\n`,
                          warnings,
                          verbose
                        );
                        console.log(
                          '\nSearch for the ' +
                          chalk.underline(chalk.yellow('keywords')) +
                          ' to learn more about each warning.'
                        );
                        console.log(
                          'To ignore, add ' +
                          chalk.cyan('// eslint-disable-next-line') +
                          ' to the line before.\n'
                        );
                      } else {
                        console.log(
                          chalk.green(
                            `Compiled client ${buildName} build successfully.\n`
                          )
                        );
                      }
                      console.log('File sizes after gzip:\n');
                      printFileSizesAfterBuild(
                        stats,
                        previousFileSizes,
                        paths.appBuild
                      );
                      console.log();
                      resolveBuild();
                    },
                    err => {
                      printErrors(
                        `Failed to compile client ${buildName} build.`,
                        Array.isArray(err) ? err : [err],
                        verbose
                      );
                      rejectBuild(buildName, 'web');
                    }
                  );
              });
            };
          })
      );
    }

    if (!clientOnly) {
      const serverResults = await runBuildPromisesInSeries(
        serverBuilds
          .slice(serverBuilds.indexOf(serverBuildProceedFrom))
          .map(buildName => {
            return () => {
              return new Promise((resolveBuild, rejectBuild) => {
                const build = async () => {
                  return new Promise(async (resolve, reject) => {
                    // Create our production webpack configurations and pass in razzle options.
                    const serverConfig = await createConfig(
                      'node',
                      'prod',
                      razzle,
                      webpackObject,
                      serverOnly,
                      paths,
                      plugins,
                      razzleOptions
                    );

                    console.log(`Compiling server ${buildName} build...\n`);

                    compile(serverConfig, (err, serverStats) => {
                      if (err) {
                        return reject(err);
                      }
                      const serverMessages = serverStats.toJson({}, true);
                      if (serverMessages.errors.length) {
                        return reject(serverMessages.errors);
                      }
                      if (
                        !process.env.WARNINGS_ERRORS_DISABLE &&
                        process.env.CI &&
                        (typeof process.env.CI !== 'string' ||
                          process.env.CI.toLowerCase() !== 'false') &&
                        serverMessages.warnings.length
                      ) {
                        console.log(
                          chalk.yellow(
                            '\nTreating warnings as errors because process.env.CI = true.\n' +
                            'Most CI servers set it automatically.\n'
                          )
                        );
                        return reject(serverMessages.warnings);
                      }

                      return resolve({
                        stats: serverStats,
                        warnings: serverMessages.warnings,
                      });
                    }, (err) => {
                      return reject(err);
                    });
                  });
                };

                build().then(
                  ({ stats, warnings }) => {
                    if (warnings.length) {
                      printWarnings(
                        `Server ${buildName} build compiled with warnings\n`,
                        warnings,
                        verbose
                      );
                      console.log(
                        '\nSearch for the ' +
                        chalk.underline(chalk.yellow('keywords')) +
                        ' to learn more about each warning.'
                      );
                      console.log(
                        'To ignore, add ' +
                        chalk.cyan('// eslint-disable-next-line') +
                        ' to the line before.\n'
                      );
                    } else {
                      console.log(
                        chalk.green(
                          `Compiled server ${buildName} build successfully.\n`
                        )
                      );
                    }
                    resolveBuild();
                  },
                  err => {
                    printErrors(
                      `Failed to compile server ${buildName} build.`,
                      Array.isArray(err) ? err : [err],
                      verbose
                    );
                    rejectBuild(buildName, 'node');
                  }
                );
              });
            };
          })
      );
    }
    // Wrap webpackcompile in a try catch.
    function compile(config, cb, internal_error_cb) {
      let compiler;
      try {
        compiler = webpackObject(config);
      } catch (e) {
        printErrors('Failed to compile.', [e], verbose);
        return internal_error_cb(e);
      }
      compiler.run((err, stats) => {
        cb(err, stats);
      });
    }
  }
);


================================================
FILE: packages/razzle/scripts/export.js
================================================
#! /usr/bin/env node
'use strict';
// Do this as the first thing so that any code reading it knows the right env.
process.env.NODE_ENV = 'production';

const webpack = require('webpack');
const mri = require('mri');
const fs = require('fs-extra');
const path = require('path');
const chalk = require('chalk');
const asyncPool = require('tiny-async-pool');
const loadRazzleConfig = require('../config/loadRazzleConfig');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');
const FileSizeReporter = require('razzle-dev-utils/FileSizeReporter');
const measureFileSizesBeforeBuild =
  FileSizeReporter.measureFileSizesBeforeBuild;
const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
const getFileNamesAsStat = FileSizeReporter.getFileNamesAsStat;

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  clearConsole();
  logger.error('Unexpected error', err);
  process.exit(1);
});

const argv = process.argv.slice(2);
const cliArgs = mri(argv);

loadRazzleConfig(webpack).then(
  async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {
    // First, read the current file sizes in build directory.
    // This lets us display how much they changed later.
    measureFileSizesBeforeBuild(paths.appBuildPublic)
      .then(previousFileSizes => {
        if (!fs.existsSync(paths.appBuildStaticExport)) {
          console.log(chalk.red('Failed to export static.\n'));
          console.log(
            'No ' +
              path.basename(paths.appBuildStaticExport) +
              ' found in ' +
              path.dirname(paths.appBuildStaticExport) +
              ', run build before export.\n' +
              '\n'
          );
          process.exit(1);
        }
        // Start the webpack build
        return static_export(previousFileSizes);
      })
      .then(
        ({ stats, previousFileSizes }) => {
          console.log(chalk.green('Exported static successfully.\n'));
          console.log('File sizes after gzip:\n');
          printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild);
          console.log();
        },
        err => {
          console.log(chalk.red('Failed to export static.\n'));
          console.log((err.message || err) + '\n');
          process.exit(1);
        }
      );

    async function static_export(previousFileSizes) {
      const options = razzleOptions.staticExport || {};

      if (!fs.existsSync(paths.appBuildStaticExport)) {
        console.log(chalk.red('Failed to export static.\n'));
        console.log(
          'No ' +
            path.basename(paths.appBuildStaticExport) +
            ' found in ' +
            path.dirname(paths.appBuildStaticExport) +
            '.\n' +
            '\n'
        );
        process.exit(1);
      }

      const static_export_entrypoint = require(paths.appBuildStaticExport);

      const imported_render =
        static_export_entrypoint[options.renderExport || 'render'];

      const imported_routes =
        static_export_entrypoint[options.routesExport || 'routes'];

      if (!imported_routes) {
        console.log(chalk.red('Failed to export static.\n'));
        console.log(
          'No ' + options.routesExport ||
            'routes' +
              ' export found in ' +
              paths.appBuildStaticExport +
              '.\n' +
              '\n'
        );
        process.exit(1);
      }

      if (!imported_render) {
        console.log(chalk.red('Failed to export static.\n'));
        console.log(
          'No ' + options.renderExport ||
            'render' +
              ' export found in ' +
              paths.appBuildStaticExport +
              '.\n' +
              '\n'
        );
        process.exit(1);
      }

      const routes =
        typeof imported_routes == 'function'
          ? await imported_routes()
          : imported_routes;

      const insertScript = `\$1<script src="${process.env.PUBLIC_PATH ||
        '/'}static_routes.js" defer crossorigin></script>`;
      const insertScriptRe = /(<body.*?>)/ims;

      const render_static_export = async pathname => {
        let htmlFile, hasData;
        const json = ({ html, data, error = null }) => {
          if (error) console.error(error);
          const outputDir = path.join(paths.appBuildPublic, pathname);
          const pageDataFile = path.join(outputDir, 'page-data.json');
          htmlFile = path.join(outputDir, 'index.html');

          fs.ensureDirSync(outputDir);
          fs.outputFileSync(
            htmlFile,
            !options.scriptInline
              ? html.replace(insertScriptRe, insertScript)
              : html
          );
          hasData = !!data;
          if (hasData) {
            console.log(chalk.green(`Data written for ${pathname}.`), data);
            fs.outputFileSync(pageDataFile, JSON.stringify(data));
          }
        };

        const req = { url: pathname };
        const res = { json };
        await imported_render(req, res);
        return { pathname, htmlFile, hasData };
      };

      const rendersInfo = await asyncPool(
        Math.min(options.parallel || 5, routes.length),
        routes,
        render_static_export
      );

      const exportDataRoutes = rendersInfo
        .filter(info => info.hasData)
        .map(info => info.pathname);

      const insertScriptCode =
        `window.${options.windowRoutesVariable || 'RAZZLE_STATIC_ROUTES'}` +
        ` =  ${JSON.stringify(
          routes.map(route => route.replace(/^\/|\/$/g, ''))
        )};\n` +
        `window.${options.windowRoutesDataVariable ||
          'RAZZLE_STATIC_DATA_ROUTES'}` +
        ` =  ${JSON.stringify(
          exportDataRoutes.map(route => route.replace(/^\/|\/$/g, ''))
        )};\n`;

      if (!options.scriptInline) {
        await fs.writeFile(paths.appBuildStaticExportRoutes, insertScriptCode);
      } else {
        const insertScriptInline = `\$1<script>${insertScriptCode}</script>`;
        const updateFile = htmlFile => {
          fs.pathExists(htmlFile).then(exists => {
            if (exists) {
              fs.readFile(htmlFile).then(content => {
                const contentString = content.toString();
                const updated = contentString.replace(
                  insertScriptRe,
                  insertScriptInline
                );
                return fs.writeFile(htmlFile, updated);
              });
            }
          });
        };

        const exportHtmlFiles = rendersInfo.map(info => info.htmlFile);

        await asyncPool(
          Math.min(options.parallel || 5, exportHtmlFiles.length),
          exportHtmlFiles,
          updateFile
        );
      }

      const stats = await getFileNamesAsStat(paths.appBuildPublic);
      return { stats, previousFileSizes };
    }
  }
);


================================================
FILE: packages/razzle/scripts/start.js
================================================
#! /usr/bin/env node
'use strict';

process.env.NODE_ENV = 'development';
const fs = require('fs-extra');
const mri = require('mri');
const webpack = require('webpack');
const createConfig = require('../config/createConfigAsync');
const loadRazzleConfig = require('../config/loadRazzleConfig');
const devServer = require('../config/razzleDevServer');
const printErrors = require('razzle-dev-utils/printErrors');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');
const setPorts = require('razzle-dev-utils/setPorts');
const chalk = require('chalk');
const terminate = require('terminate');
const devServerMajorVersion = require('razzle-dev-utils/devServerMajor');

let verbose = false;

process.once('SIGINT', () => {
  if (verbose) {
    console.error(chalk.bgRedBright(' SIGINT '), chalk.redBright('exiting...'));
  }
  terminate(process.pid, 'SIGINT', { timeout: 1000 }, () => {
    if (verbose) {
      console.error(chalk.bgGreen(' Goodbye '));
    }
    terminate(process.pid);
  });
});

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  clearConsole();
  logger.error('Unexpected error', err);
  process.exit(1);
});

process.noDeprecation = true; // turns off that loadQuery clutter.

const argv = process.argv.slice(2);
const cliArgs = mri(argv);
// Capture any --inspect or --inspect-brk flags (with optional values) so that we
// can pass them when we invoke nodejs
process.env.INSPECT_BRK = formatInspectFlag(cliArgs, 'inspect-brk');
process.env.INSPECT = formatInspectFlag(cliArgs, 'inspect');

function main() {
  return new Promise(async (resolve, reject) => {
    loadRazzleConfig(webpack)
      .then(
        async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {
          verbose = razzleOptions.verbose;
          if (!verbose) {
            process.removeAllListeners('warning');
          }
          const clientOnly = /spa|single-page-application/.test(
            razzleOptions.buildType
          );
          const serverOnly = /serveronly|server-only/.test(
            razzleOptions.buildType
          );

          process.env.BUILD_TYPE = razzleOptions.buildType;

          setPorts(clientOnly).then(async () => {
            // Optimistically, we make the console look exactly like the output of our
            // FriendlyErrorsPlugin during compilation, so the user has immediate feedback.
            // clearConsole();
            logger.start('Compiling...');

            let clientCompiler;
            let clientConfig; // Create dev configs using our config factory, passing in razzle file as
            // options.
            if (!serverOnly) {
              clientConfig = await createConfig(
                'web',
                'dev',
                razzle,
                webpackObject,
                clientOnly,
                paths,
                plugins,
                razzleOptions
              );
              if (clientOnly) {
                // Check for public/index.html file
                if (!fs.existsSync(paths.appHtml)) {
                  clearConsole();
                  logger.error(`index.html dose not exists public folder.`);
                  process.exit(1);
                }
              }

              // Delete assets.json to always have a manifest up to date
              fs.removeSync(paths.appAssetsManifest);

              clientCompiler = compile(clientConfig, verbose);
            }
            let serverCompiler;
            let serverConfig;
            if (!clientOnly) {
              serverConfig = await createConfig(
                'node',
                'dev',
                razzle,
                webpackObject,
                clientOnly,
                paths,
                plugins,
                razzleOptions
              );
              serverCompiler = compile(serverConfig, verbose);
            }

            const port =
              ((clientConfig || {}).devServer || {}).port || process.env.PORT;

            // Compile our assets with webpack
            // Instatiate a variable to track server watching
            let watching;
            let clientDevServer;

            // in SPA mode we want to give the user
            // feedback about the port that app is running on
            // this variable helps us to don't show
            // the message multiple times ...
            let logged = false;

            // Start our server webpack instance in watch mode after assets compile
            if (clientCompiler) {
              clientCompiler.hooks.done.tap('razzle', () => {
                // If we've already started the server watcher, bail early.
                if (watching) {
                  return;
                }

                if (!clientOnly && serverCompiler) {
                  // Otherwise, create a new watcher for our server code.
                  watching = serverCompiler.watch(
                    {
                      quiet: !verbose,
                      stats: 'none',
                    },
                    /* eslint-disable no-unused-vars */
                    stats => {}
                  );
                }

                // in SPA mode we want to give the user
                // feedback about the port that app is running on
                if (clientOnly && !logged) {
                  logged = true;
                  console.log(chalk.green(`> SPA Started on port ${port}`));
                }
              });
            } else {
              watching = serverCompiler.watch(
                {
                  quiet: !verbose,
                  stats: 'none',
                },
                /* eslint-disable no-unused-vars */
                stats => {}
              );
            }

            // Provide a reusable logger function
            const errorLogger = (err) => {
              if (err) {
                logger.error(err);
              }
            };

            if (!serverOnly) {
              // Create a new instance of Webpack-dev-server for our client assets.
              // This will actually run on a different port than the users app.
              clientDevServer = new devServer(
                clientCompiler,
                Object.assign(clientConfig.devServer, { verbose, port }),
              );
              if (devServerMajorVersion > 3) {
                // listen was deprecated in v4 and causes issues when used, switch to its replacement
                clientDevServer.startCallback(errorLogger);
              } else {
                // Start Webpack-dev-server
                clientDevServer.listen(port, errorLogger);
              }
            }

            ['SIGINT', 'SIGTERM'].forEach(sig => {
              process.on(sig, () => {
                if (clientDevServer) {
                  if (devServerMajorVersion > 3) {
                    // close was deprecated in v4, switch to its replacement
                    clientDevServer.stopCallback(errorLogger);
                  } else {
                    clientDevServer.close(errorLogger);
                  }
                }
                if (watching) {
                  watching.close();
                }
              });
            });

            resolve();
          });
        }
      )
      .catch(console.error);
  });
}

// Webpack compile in a try-catch
function compile(config, verbose) {
  let compiler;
  try {
    compiler = webpack(config);
  } catch (e) {
    printErrors('Failed to compile.', [e], verbose);
    process.exit(1);
  }
  return compiler;
}

function formatInspectFlag(cliArgs, flag) {
  const value = cliArgs[flag];

  if (typeof value === 'undefined' || value === '') {
    return '';
  }

  // When passed as `--inspect`.
  if (value === true) {
    return '--' + flag;
  }

  // When passed as `--inspect=[port]` or `--inspect=[host:port]`
  return '--' + flag + '=' + value.toString();
}

main();


================================================
FILE: packages/razzle/scripts/test.js
================================================
// @remove-on-eject-begin
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 * All rights reserved.
 *
 * This source code is licensed under the BSD-style license found in the
 * LICENSE file in the root directory of this source tree. An additional grant
 * of patent rights can be found in the PATENTS file in the same directory.
 */
// @remove-on-eject-end
'use strict';

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'test';
process.env.NODE_ENV = 'test';
process.env.PUBLIC_URL = '';

// Ensure environment variables are read.
require('../config/env');

const jest = require('jest');
let argv = process.argv.slice(2);

// Watch unless on CI, in coverage mode, or user has specified --watchAll
if (
  !process.env.CI &&
  argv.indexOf('--coverage') < 0 &&
  argv.indexOf('--watchAll') < 0
) {
  if (!argv.includes('--no-watch')) {
    argv.push('--watch');
  } else {
    argv=argv.filter(x=>x!=='--no-watch')
  }
}

const webpack = require('webpack');
const loadRazzleConfig = require('../config/loadRazzleConfig');
const createJestConfig = require('../config/createJestConfig');
const path = require('path');
const fs = require('fs-extra');
const defaultPaths = require('../config/paths');
const clearConsole = require('react-dev-utils/clearConsole');
const logger = require('razzle-dev-utils/logger');

// Makes the script crash on unhandled rejections instead of silently
// ignoring them. In the future, promise rejections that are not handled will
// terminate the Node.js process with a non-zero exit code.
process.on('unhandledRejection', err => {
  clearConsole();
  logger.error('Unexpected error', err);
  process.exit(1);
});

loadRazzleConfig(webpack, defaultPaths).then(
  async ({ razzle, razzleOptions, webpackObject, plugins, paths }) => {
    argv.push(
      '--config',
      JSON.stringify(
        await createJestConfig(
          relativePath => path.resolve(__dirname, '..', relativePath),
          path.resolve(paths.appSrc, '..'),
          razzle,
          razzleOptions,
          webpackObject,
          plugins,
          paths
        )
      )
    );

    jest.run(argv);
  }
);


================================================
FILE: packages/razzle-dev-utils/CHANGELOG.md
================================================
# razzle-dev-utils

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/razzle-dev-utils/FileSizeReporter.js
================================================
'use strict';

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

var fs = require('fs');
var path = require('path');
var chalk = require('chalk');
var filesize = require('filesize');
var recursive = require('recursive-readdir');
var stripAnsi = require('strip-ansi');
var gzipSize = require('gzip-size').sync;

function canReadAsset(asset) {
  return (
    /\.(js|css|html|json)$/.test(asset) &&
    !/service-worker\.js/.test(asset) &&
    !/precache-manifest\.[0-9a-f]+\.js/.test(asset)
  );
}

// Prints a detailed summary of build files.
function printFileSizesAfterBuild(
  webpackStats,
  previousSizeMap,
  buildFolder,
  maxBundleGzipSize,
  maxChunkGzipSize
) {
  var root = previousSizeMap.root;
  var sizes = previousSizeMap.sizes;
  var assets = (webpackStats.stats || [webpackStats])
    .map(stats =>
      stats
        .toJson({ all: false, assets: true })
        .assets.filter(asset => canReadAsset(asset.name))
        .map(asset => {
          var fileContents = fs.readFileSync(path.join(root, asset.name));
          var size = gzipSize(fileContents);
          var previousSize = sizes[removeFileNameHash(root, asset.name)];
          var difference = getDifferenceLabel(size, previousSize);
          return {
            folder: path.join(
              path.basename(buildFolder),
              path.basename(root),
              path.dirname(asset.name)
            ),
            name: path.basename(asset.name),
            size: size,
            sizeLabel:
              filesize(size) + (difference ? ' (' + difference + ')' : ''),
          };
        })
    )
    .reduce((single, all) => all.concat(single), []);
  assets.sort((a, b) => b.size - a.size);
  var longestSizeLabelLength = Math.max.apply(
    null,
    assets.map(a => stripAnsi(a.sizeLabel).length)
  );
  var suggestBundleSplitting = false;
  assets.forEach(asset => {
    var sizeLabel = asset.sizeLabel;
    var sizeLength = stripAnsi(sizeLabel).length;
    if (sizeLength < longestSizeLabelLength) {
      var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength);
      sizeLabel += rightPadding;
    }
    var isMainBundle = asset.name.indexOf('main.') === 0;
    var maxRecommendedSize = isMainBundle
      ? maxBundleGzipSize
      : maxChunkGzipSize;
    var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize;
    if (isLarge && path.extname(asset.name) === '.js') {
      suggestBundleSplitting = true;
    }
    console.log(
      '  ' +
        (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) +
        '  ' +
        chalk.dim(asset.folder + (/[\/\\]$/.test(asset.folder) ? '':path.sep)) +
        chalk.cyan(asset.name)
    );
  });
  if (suggestBundleSplitting) {
    console.log();
    console.log(
      chalk.yellow('The bundle size is significantly larger than recommended.')
    );
    console.log(
      chalk.yellow(
        'Consider reducing it with code splitting: https://goo.gl/9VhYWB'
      )
    );
    console.log(
      chalk.yellow(
        'You can also analyze the project dependencies: https://goo.gl/LeUzfb'
      )
    );
  }
}

function removeFileNameHash(buildFolder, fileName) {
  return fileName
    .replace(buildFolder, '')
    .replace(/\\/g, '/')
    .replace(
      /\/?(.*)(\.[0-9a-f]+)(\.chunk)?(\.js|\.css)/,
      (match, p1, p2, p3, p4) => p1 + p4
    );
}

// Input: 1024, 2048
// Output: "(+1 KB)"
function getDifferenceLabel(currentSize, previousSize) {
  var FIFTY_KILOBYTES = 1024 * 50;
  var difference = currentSize - previousSize;
  var fileSize = !Number.isNaN(difference) ? filesize(difference) : 0;
  if (difference >= FIFTY_KILOBYTES) {
    return chalk.red('+' + fileSize);
  } else if (difference < FIFTY_KILOBYTES && difference > 0) {
    return chalk.yellow('+' + fileSize);
  } else if (difference < 0) {
    return chalk.green(fileSize);
  } else {
    return '';
  }
}

function measureFileSizesBeforeBuild(buildFolder) {
  return new Promise(resolve => {
    recursive(buildFolder, (err, fileNames) => {
      var sizes;
      if (!err && fileNames) {
        sizes = fileNames.filter(canReadAsset).reduce((memo, fileName) => {
          var contents = fs.readFileSync(fileName);
          var key = removeFileNameHash(buildFolder, fileName);
          memo[key] = gzipSize(contents);
          return memo;
        }, {});
      }
      resolve({
        root: buildFolder,
        sizes: sizes || {},
      });
    });
  });
}

function removeFilePrefix(buildFolder, fileName) {
  return fileName.replace(buildFolder, '').replace(/\\/g, '/');
}

function getFileNamesAsStat(buildFolder) {
  return new Promise(resolve => {
    recursive(buildFolder, (err, fileNames) => {
      var filteredFileNames;
      if (!err && fileNames) {
        filteredFileNames = fileNames
          .filter(canReadAsset)
          .map(fileName => removeFilePrefix(buildFolder, fileName));
      }
      resolve({
        toJson: () => ({
          assets: filteredFileNames.map(name => ({ name: name })),
        }),
      });
    });
  });
}

module.exports = {
  measureFileSizesBeforeBuild: measureFileSizesBeforeBuild,
  printFileSizesAfterBuild: printFileSizesAfterBuild,
  getFileNamesAsStat: getFileNamesAsStat,
};


================================================
FILE: packages/razzle-dev-utils/FriendlyErrorsPlugin.js
================================================
'use strict';

const chalk = require('chalk');
const clearConsole = require('react-dev-utils/clearConsole');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const logger = require('./logger');

let WEBPACK_COMPILING = false;
let WEBPACK_DONE = false;

// This is a custom Webpack Plugin that prints out prettier console messages
// and errors depending on webpack compiler events. It runs on the Node.js
// server webpack instance.
class WebpackErrorsPlugin {
  constructor(options) {
    options = options || {};
    this.verbose = options.verbose;
    this.onSuccessMessage = options.onSuccessMessage;
    this.target = options.target === 'web' ? 'CLIENT' : 'SERVER';
  }

  apply(compiler) {
    compiler.plugin('done', stats => {
      const rawMessages = stats.toJson({}, true);
      const messages = formatWebpackMessages(rawMessages);
      WEBPACK_COMPILING = false;
      if (!messages.errors.length && !messages.warnings.length) {
        if (!WEBPACK_DONE) {
          if (!this.verbose) {
            clearConsole();
          }
          logger.done('Compiled successfully');
          WEBPACK_DONE = true;

          if (this.onSuccessMessage) {
            logger.log(this.onSuccessMessage);
            logger.log('');
          }
        }
      }

      if (
        messages.errors.length &&
        !(
          rawMessages.errors &&
          rawMessages.errors.length > 0 &&
          (rawMessages.errors[0].includes('assets.json') ||
            rawMessages.errors[0].includes('chunks.json') ||
            rawMessages.errors[0].includes("Module not found: Can't resolve"))
        )
      ) {
        messages.errors.forEach(e => {
          logger.error(
            `Failed to compile ${this.target} with ${messages.errors.length} errors`,
            e
          );
        });
        // return;
      }

      if (messages.warnings.length) {
        logger.warn(
          `Failed to compile with ${messages.warnings.length} warnings`
        );
        messages.warnings.forEach(w => logger.log(w));
      }
    });

    compiler.plugin('invalid', params => {
      WEBPACK_DONE = false;
      if (!WEBPACK_COMPILING) {
        if (!this.verbose) {
          clearConsole();
        }
        logger.start('Compiling...');
        WEBPACK_COMPILING = true;
      }
    });
  }
}

module.exports = WebpackErrorsPlugin;


================================================
FILE: packages/razzle-dev-utils/README.md
================================================
# razzle-dev-utils

This package includes some utilties used by [Razzle](https://github/com/palmerhq/razzle)

## Usage in Razzle Projects

These utilities come by default with Razzle, which includes it by default. **You don’t need to install it separately in Razzle projects.**

## Usage Outside of Razzle

If 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.

### Entry Points

There is no single entry point. You can only import individual top-level modules.

#### `logger`

- `logger.log(thing: any): void`: Log to console. = `console.log`
- `logger.start(text: string): void`: Log the start of a task to console
- `logger.done(text: string): void`: Log the end of task to console
- `logger.info(text: string, data: object): void`: Log information and data to console
- `logger.debug(text: string, data: object): void`: Log debug message and data to console
- `logger.warn(text: string, data: object): void`: Log a warning with message and data to console
- `logger.error(text: string, err: object): void`: Log a message and an error to console

#### `new FriendlyErrorsWebpackPlugin({ verbose: boolean, onSuccessMessage: string, target: 'web' | 'server' })`

This 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.

```js
const FriendlyErrorsPlugin = require('razzle-dev-utils/FriendlyErrorsPlugin');

module.exports = {
  // ...
  plugins: [
    new FriendlyErrorsPlugin({
        verbose: false,
        target: 'web',
        onSuccessMessage: `Your application is running at http://${process.env.HOST}:${process.env.PORT}`,
      }),
    // ...
  ],
  // ...
}
```

#### `printErrors(summary: string, errors: Error[])`

Pretty print an array of errors with a message. Good for CI's.

```js
const printErrors = require('razzle-dev-utils/printErrors');

try {
  // do something
} catch (e) {
  printErrors('Failed to compile.', [e]);
}
```

`makeLoaderFinder(loaderName: string): (rule: WebPackRule) => boolean;`

Helper function to find a loader in the webpack config object. Used for writing Razzle Plugins, or razzle modify functions.

Example:

```js
// razzle.config.js
const loaderFinder = require('razzle-dev-utils/makeLoaderFinder');

module.exports = {
  modify(config) {
    // Makes a finder function, to search for babel-loader
    const babelLoaderFinder = makeLoaderFinder('babel-loader');

    // Finds the JS rule containing babel-loader using our function
    const jsRule = config.module.rules.find(babelLoaderFinder);

    // Set cacheDirectory to true in our babel-loader
    jsRule.use.find(babelLoaderFinder).options.cacheDirectory = true;
  },
};
```


================================================
FILE: packages/razzle-dev-utils/WebpackConfigHelpers.js
================================================
'use strict';

const path = require('path');

/**
 * WebpackConfigHelpers
 *
 * @class WebpackConfigHelpers
 */
class WebpackConfigHelpers {
  constructor(cwd) {
    this._cwd = cwd;
  }

  /**
   * Returns wrapper around all loaders from config.
   *
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @returns {LoaderWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getLoaders(config) {
    return this.getRules(config).map(({ rule, index }) => ({
      rule: rule,
      ruleIndex: index,
      loaders: rule.loaders || rule.use || rule.loader,
    }));
  }

  /**
   * Returns wrapper around all rules from config.
   *
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @returns {RuleWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getRules(config) {
    return [
      ...(config.module.loaders || []),
      ...(config.module.rules || []),
    ].map((rule, index) => ({ index, rule }));
  }

  /**
   * Returns wrapper around all plugins from config.
   *
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @returns {PluginWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getPlugins(config) {
    return (config.plugins || []).map((plugin, index) => ({ index, plugin }));
  }

  /**
   *
   *
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @param {string} file - path to test against loader. Resolved relatively to $PWD.
   * @returns {RuleWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getRulesByMatchingFile(config, file) {
    let filePath = path.resolve(this._cwd, file);
    return this.getRules(config).filter(
      w => w.rule.test && w.rule.test.exec(filePath)
    );
  }

  /**
   * Returns loaders that match provided name.
   *
   * @example
   * helpers.getLoadersByName(config, 'less-loader')
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @param {string} name - name of loader.
   * @returns {LoaderWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getLoadersByName(config, name) {
    return this.getLoaders(config)
      .map(({ rule, ruleIndex, loaders }) =>
        Array.isArray(loaders)
          ? loaders.map((loader, loaderIndex) => ({
              rule,
              ruleIndex,
              loader,
              loaderIndex,
            }))
          : [{ rule, ruleIndex, loader: loaders, loaderIndex: -1 }]
      )
      .reduce((arr, loaders) => arr.concat(loaders), [])
      .filter(
        ({ loader }) => loader === name || (loader && loader.loader === name)
      );
  }

  /**
   * Returns plugins that match provided name.
   *
   * @example
   * helpers.getPluginsByName(config, 'HtmlWebpackPlugin')
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @param {string} name - name of loader.
   * @returns {PluginWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getPluginsByName(config, name) {
    return this.getPlugins(config).filter(
      w =>
        w.plugin && w.plugin.constructor && w.plugin.constructor.name === name
    );
  }

  /**
   * Returns plugins that match provided type.
   *
   * @example
   * helpers.getPluginsByType(config, webpack.optimize.CommonsChunkPlugin)
   * @param {object} config - [webpack config](https://webpack.js.org/configuration/#options).
   * @param {any} type - type of plugin.
   * @returns {PluginWrapper[]}
   *
   * @memberof WebpackConfigHelpers
   */
  getPluginsByType(config, type) {
    return this.getPlugins(config).filter(w => w.plugin instanceof type);
  }

  getResolveExtensions(config) {
    return config.resolve.extensions;
  }

  addResolveExtensions(config, ext) {
    return config.resolve.extensions.concat(ext);
  }

  makeLoaderFinder(loaderName) {
    return function findLoader(rule) {
      // i.e.: /eslint-loader/
      const loaderRegex = new RegExp(`[/\\\\]${loaderName}[/\\\\]`);

      // Checks if there's a loader string in rule.loader matching loaderRegex.
      const inLoaderString =
        typeof rule.loader === 'string' && rule.loader.match(loaderRegex);

      // Checks if there is an object inside rule.use with loader matching loaderRegex, OR
      const inUseArray =
        Array.isArray(rule.use) &&
        rule.use.find(
          loader =>
            typeof loader.loader === 'string' &&
            loader.loader.match(loaderRegex)
        );

      return inUseArray || inLoaderString;
    };
  }
}

/**
 * Wrapper around webpack's [loader entry](https://webpack.js.org/configuration/module/#useentry).
 *
 * @typedef {object} LoaderWrapper
 * @property {object} rule - [rule entry](https://webpack.js.org/configuration/module/#module-rules).
 * @property {number} ruleIndex - index of rule in config.
 * @property {object} loader - [loader entry](https://webpack.js.org/configuration/module/#useentry).
 * @property {number} loaderIndex - index of loader in rule.
 */

/**
 * Wrapper around webpack's [rule](https://webpack.js.org/configuration/module/#module-rules).
 *
 * @typedef {object} RuleWrapper
 * @property {object} rule - [rule entry](https://webpack.js.org/configuration/module/#module-rules).
 * @property {number} index - index of rule in config.
 */

/**
 * Wrapper around webpack's [plugin](https://webpack.js.org/configuration/plugins/#plugins).
 *
 * @typedef {object} PluginWrapper
 * @property {object} plugin - [plugin entry](https://webpack.js.org/configuration/plugins/#plugins).
 * @property {number} index - index of plugin in config.
 */

module.exports = WebpackConfigHelpers;


================================================
FILE: packages/razzle-dev-utils/devServerMajor.js
================================================
'use strict';

const devserverPkg = require('webpack-dev-server/package.json');

module.exports = devserverPkg.version ? parseInt(devserverPkg.version[0]) : 3;


================================================
FILE: packages/razzle-dev-utils/formatWebpackMessages.js
================================================
'use strict';

const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');

function razzleFormatWebpackMessages(messages) {
  return process.env.WEBPACK_VERSION === 5
    ? formatWebpackMessages(
        ['errors', 'warnings'].reduce(
          function(result, item) {
            result[item] = result[item].concat(
              messages[item].map(function(stat) {
                return stat.message;
              })
            );
            return result;
          },
          { errors: [], warnings: [] }
        )
      )
    : formatWebpackMessages(messages);
}
module.exports = razzleFormatWebpackMessages;


================================================
FILE: packages/razzle-dev-utils/logger.js
================================================
'use strict';

const chalk = require('chalk');

const logTypes = {
  warn: {
    bg: 'bgYellow',
    msg: ' WARNING ',
    text: 'yellow',
  },
  debug: {
    bg: 'bgMagenta',
    msg: ' DEBUG ',
    text: 'magenta',
  },
  info: {
    bg: 'bgCyan',
    msg: ' INFO ',
    text: 'cyan',
  },
  error: {
    bg: 'bgRed',
    msg: ' ERROR ',
    text: 'red',
  },
  start: {
    bg: 'bgBlue',
    msg: ' WAIT ',
    text: 'blue',
  },
  done: {
    bg: 'bgGreen',
    msg: ' DONE ',
    text: 'green',
  },
};

const write = (type, text, verbose) => {
  let textToLog = '';
  let logObject = false;

  const logType = logTypes[type];

  textToLog +=
    chalk[logType.bg].black(logType.msg) + ' ' + chalk[logType.text](text);

  // Adds optional verbose output
  if (verbose) {
    if (typeof verbose === 'object') {
      logObject = true;
    } else {
      textToLog += `\n\n${verbose}`;
    }
  }

  console.log(textToLog);
  if (['start', 'done', 'error'].indexOf(type) > -1) {
    console.log();
  }

  if (logObject) console.dir(verbose, { depth: 15 });
};

// Printing any statements
const log = (text = '') => console.log(text);

// Starting a process
const start = text => {
  write('start', text);
};

// Ending a process
const done = text => {
  write('done', text);
};

// Info about a process task
const info = text => {
  write('info', text);
};

// Verbose output
// takes optional data
const debug = (text, data) => {
  write('debug', text, data);
};

// Warn output
const warn = (text, data) => {
  write('warn', text, data);
};

// Error output
// takes an optional error
const error = (text, err) => {
  write('error', text, err);
};

module.exports = {
  log,
  info,
  debug,
  warn,
  error,
  start,
  done,
};


================================================
FILE: packages/razzle-dev-utils/makeLoaderFinder.js
================================================
'use strict';

const makeLoaderFinder = loaderName => rule => {
  // i.e.: /eslint-loader/
  const loaderRegex = new RegExp(`[/\\\\]${loaderName}[/\\\\]`);

  // Checks if there's a loader string in rule.loader matching loaderRegex.
  const inLoaderString =
    typeof rule.loader === 'string' && (rule.loader.match(loaderRegex) || rule.loader === loaderName);

  // Checks if there is an object inside rule.use with loader matching loaderRegex, OR
  // Checks another condition, if rule is not an object, but pure string (ex: "style-loader", etc)
  const inUseArray =
    Array.isArray(rule.use) &&
    rule.use.find(
      loader =>
        (typeof loader.loader === 'string' &&
          (loader.loader.match(loaderRegex)) || rule.loader === loaderName) ||
        (typeof loader === 'string' && (loader.match(loaderRegex) || loader === loaderName))
    );

  return inUseArray || inLoaderString;
};

module.exports = makeLoaderFinder;


================================================
FILE: packages/razzle-dev-utils/package.json
================================================
{
  "name": "razzle-dev-utils",
  "version": "4.2.18",
  "description": "Utilities and helpers for Razzle",
  "author": "Jared Palmer <jared@palmer.net>",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-dev-utils"
  },
  "license": "MIT",
  "files": [
    "logger.js",
    "printErrors.js",
    "printWarnings.js",
    "FriendlyErrorsPlugin.js",
    "FileSizeReporter.js",
    "webpackHotDevClient.js",
    "webpackHotDevClientV4.js",
    "setPorts.js",
    "makeLoaderFinder.js",
    "WebpackConfigHelpers.js",
    "prettyNodeErrors.js",
    "resolveRequest.js",
    "webpackMajor.js",
    "formatWebpackMessages.js",
    "devServerMajor.js"
  ],
  "dependencies": {
    "@babel/code-frame": "^7.8.3",
    "chalk": "^4.1.0",
    "filesize": "^6.1.0",
    "gzip-size": "^6.0.0",
    "jest-message-util": "^26.3.0",
    "react-dev-utils": "^11.0.4",
    "react-error-overlay": "^6.0.7",
    "recursive-readdir": "^2.2.2",
    "resolve": "^1.17.0",
    "sockjs-client": "~1.4.0",
    "strip-ansi": "^6.0.0"
  },
  "peerDependencies": {
    "webpack": "~4||~5",
    "webpack-dev-server": "~3||~4"
  }
}


================================================
FILE: packages/razzle-dev-utils/prettyNodeErrors.js
================================================
const fs = require('fs');
const {
  getTopFrame,
  getStackTraceLines,
  separateMessageFromStack,
} = require('jest-message-util');
const { codeFrameColumns } = require('@babel/code-frame');

function pretty(error) {
  const { message, stack } = error;
  const lines = getStackTraceLines(stack);
  const topFrame = getTopFrame(lines);
  const fallback = `${message}${stack}`;

  if (!topFrame) {
    return fallback;
  }

  const { file, line } = topFrame;
  try {
    const result = codeFrameColumns(
      fs.readFileSync(file, 'utf8'),
      { start: { line } },
      { highlightCode: true }
    );
    return `\n${message}\n\n${result}\n${stack}\n`;
  } catch (error) {
    return fallback;
  }
}

function usePrettyErrors(transform) {
  const { prepareStackTrace } = Error;

  Error.prepareStackTrace = (error, trace) => {
    const prepared = prepareStackTrace
      ? separateMessageFromStack(prepareStackTrace(error, trace))
      : error;
    const transformed = transform ? transform(prepared) : prepared;
    return pretty(transformed);
  };
}

// Clean up Webpack's sourcemap namespacing in error stacks
// @see https://github.com/facebook/create-react-app/blob/next/packages/react-dev-utils/formatWebpackMessages.js#L112
const stackTransform = ({ stack = '', ...rest }) => ({
  stack: stack.replace('/build/webpack:', ''),
  ...rest,
});

usePrettyErrors(stackTransform);


================================================
FILE: packages/razzle-dev-utils/printErrors.js
================================================
'use strict';

const webpackMajor = require('./webpackMajor');
const chalk = require('chalk');

/**
* Print an array of errors to console.
*
* @param {string} summary Summary of error
* @param {Array<Error>} errors Array of Errors
*/
function printErrors(summary, errors, verbose) {
  console.log(chalk.red(summary));
  console.log();
  errors.forEach(err => {
    if (webpackMajor < 5) {
      // webpack 4 format
      console.error(err);
    } else {
      if (err.message) {
        console.error(err.message);
      }
      console.error(err.stack || err);
      if (err.details) {
        console.error(err.details);
      }
    }
    console.log();
  });
}

module.exports = printErrors;


================================================
FILE: packages/razzle-dev-utils/printWarnings.js
================================================
'use strict';

const webpackMajor = require('./webpackMajor');
const chalk = require('chalk');

/**
* Print an array of warnings to console.
*
* @param {string} summary Summary of error
* @param {Array<Warnings>} warnings Array of Warningss
*/
function printWarnings(summary, warnings, verbose) {
  console.log(chalk.yellow(summary));
  console.log();
  warnings.forEach(wrn => {
    if (webpackMajor < 5) {
      // webpack 4
      console.warn(wrn);
    } else {
      if (wrn.message) {
        console.warn(wrn.message);
      }
      if (verbose) {
        console.warn(wrn.stack || wrn);
      }
      if (wrn.details) {
        console.warn(wrn.details);
      }
    }
    console.log();
  });
}

module.exports = printWarnings;


================================================
FILE: packages/razzle-dev-utils/resolveRequest.js
================================================
const resolve = require('resolve');
const path = require('path');

function resolveRequest(req, issuer) {
  const basedir =
    issuer.endsWith(path.posix.sep) || issuer.endsWith(path.win32.sep)
      ? issuer
      : path.dirname(issuer);
  return resolve.sync(req, { basedir });
}

module.exports = resolveRequest;


================================================
FILE: packages/razzle-dev-utils/setPorts.js
================================================
const { choosePort } = require('react-dev-utils/WebpackDevServerUtils');

// Checks if PORT and PORT_DEV are available and suggests alternatives if not
module.exports = clientOnly => {
  return new Promise(async resolve => {
    const port = (process.env.PORT && parseInt(process.env.PORT, 10)) || 3000;
    const portDev =
      (process.env.PORT_DEV && parseInt(process.env.PORT_DEV, 10)) ||
      (clientOnly && port) ||
      port + 1;

    const actualPort = await choosePort(process.env.HOST, port);
    const actualPortDev = await choosePort(process.env.HOST, portDev);

    process.env.PORT = actualPort;
    process.env.PORT_DEV = actualPortDev;

    resolve();
  });
};


================================================
FILE: packages/razzle-dev-utils/webpackHotDevClient.js
================================================
'use strict';

// This alternative WebpackDevServer combines the functionality of:
// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js

// It only supports their simplest configuration (hot updates on same server).
// It makes some opinionated choices on top, like adding a syntax error overlay
// that looks similar to our console output. The error overlay is inspired by:
// https://github.com/glenjamin/webpack-hot-middleware

// HACK ALERT: Most of this file is identical to the webpackHotDevClientV4.js file with the exception of the code blocks
// denoted with //--- START Unique code --- and //--- END Unique code
// This was done to avoid getting a warning about the `createSocketURL` vs `createSocketUrl` file names
// You must keep the code in these two files in sync

var SockJS = require('sockjs-client');
var stripAnsi = require('strip-ansi');
var url = require('url');
var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
var formatWebpackMessages = require('./formatWebpackMessages');
var ErrorOverlay = require('react-error-overlay');

//--- START Unique code ---
// This code is unique to webpack-dev-server v3
var createSocketUrl = require('webpack-dev-server/client/utils/createSocketUrl');
var socketUrl = createSocketUrl();
//--- END Unique code ---

var parsedSocketUrl = url.parse(socketUrl);

ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
  // Keep this sync with errorOverlayMiddleware.js
  fetch(
    url.format({
      protocol: parsedSocketUrl.protocol,
      hostname: parsedSocketUrl.hostname,
      port: parsedSocketUrl.port,
      pathname: launchEditorEndpoint,
      search:
        '?fileName=' +
        window.encodeURIComponent(errorLocation.fileName) +
        '&lineNumber=' +
        window.encodeURIComponent(errorLocation.lineNumber || 1) +
        '&colNumber=' +
        window.encodeURIComponent(errorLocation.colNumber || 1),
    }),
    { mode: 'no-cors' }
  );
});

// We need to keep track of if there has been a runtime error.
// Essentially, we cannot guarantee application state was not corrupted by the
// runtime error. To prevent confusing behavior, we forcibly reload the entire
// application. This is handled below when we are notified of a compile (code
// change).
// See https://github.com/facebookincubator/create-react-app/issues/3096
var hadRuntimeError = false;
ErrorOverlay.startReportingRuntimeErrors({
  onError: function() {
    hadRuntimeError = true;
  },
  filename: process.env.REACT_BUNDLE_PATH || '/static/js/bundle.js',
});

if (module.hot && typeof module.hot.dispose === 'function') {
  module.hot.dispose(function() {
    // TODO: why do we need this?
    ErrorOverlay.stopReportingRuntimeErrors();
  });
}

//--- START Unique code ---
// This code is unique to webpack-dev-server v3
var connection = new SockJS(socketUrl);
//--- END Unique code ---

// Unlike WebpackDevServer client, we won't try to reconnect
// to avoid spamming the console. Disconnect usually happens
// when developer stops the server.
connection.onclose = function() {
  if (typeof console !== 'undefined' && typeof console.info === 'function') {
    console.info(
      'The development server has disconnected.\nRefresh the page if necessary.'
    );
  }
};

// Remember some state related to hot module replacement.
var isFirstCompilation = true;
var mostRecentCompilationHash = null;
var hasCompileErrors = false;

function clearOutdatedErrors() {
  // Clean up outdated compile errors, if any.
  if (typeof console !== 'undefined' && typeof console.clear === 'function') {
    if (hasCompileErrors) {
      console.clear();
    }
  }
}

// Successful compilation.
function handleSuccess() {
  clearOutdatedErrors();

  var isHotUpdate = !isFirstCompilation;
  isFirstCompilation = false;
  hasCompileErrors = false;

  // Attempt to apply hot updates or reload.
  if (isHotUpdate) {
    tryApplyUpdates(function onHotUpdateSuccess() {
      // Only dismiss it when we're sure it's a hot update.
      // Otherwise it would flicker right before the reload.
      tryDismissErrorOverlay();
    });
  }
}

// Compilation with warnings (e.g. ESLint).
function handleWarnings(warnings) {
  clearOutdatedErrors();

  var isHotUpdate = !isFirstCompilation;
  isFirstCompilation = false;
  hasCompileErrors = false;

  function printWarnings() {
    // Print warnings to the console.
    var formatted = formatWebpackMessages({
      warnings: warnings,
      errors: [],
    });

    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
      for (var i = 0; i < formatted.warnings.length; i++) {
        if (i === 5) {
          console.warn(
            'There were more warnings in other files.\n' +
              'You can find a complete log in the terminal.'
          );
          break;
        }
        console.warn(stripAnsi(formatted.warnings[i]));
      }
    }
  }

  // Attempt to apply hot updates or reload.
  if (isHotUpdate) {
    tryApplyUpdates(function onSuccessfulHotUpdate() {
      // Only print warnings if we aren't refreshing the page.
      // Otherwise they'll disappear right away anyway.
      printWarnings();
      // Only dismiss it when we're sure it's a hot update.
      // Otherwise it would flicker right before the reload.
      tryDismissErrorOverlay();
    });
  } else {
    // Print initial warnings immediately.
    printWarnings();
  }
}

// Compilation with errors (e.g. syntax error or missing modules).
function handleErrors(errors) {
  clearOutdatedErrors();

  isFirstCompilation = false;
  hasCompileErrors = true;

  // "Massage" webpack messages.
  var formatted = formatWebpackMessages({
    errors: errors,
    warnings: [],
  });

  // Only show the first error.
  ErrorOverlay.reportBuildError(formatted.errors[0]);

  // Also log them to the console.
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    for (var i = 0; i < formatted.errors.length; i++) {
      console.error(stripAnsi(formatted.errors[i]));
    }
  }

  // Do not attempt to reload now.
  // We will reload on next success instead.
}

function tryDismissErrorOverlay() {
  if (!hasCompileErrors) {
    ErrorOverlay.dismissBuildError();
  }
}

// There is a newer version of the code available.
function handleAvailableHash(hash) {
  // Update last known compilation hash.
  mostRecentCompilationHash = hash;
}

// Handle messages from the server.
connection.onmessage = function(e) {
  var message = JSON.parse(e.data);
  switch (message.type) {
    case 'hash':
      handleAvailableHash(message.data);
      break;
    case 'still-ok':
    case 'ok':
      handleSuccess();
      break;
    case 'content-changed':
      // Triggered when a file from `contentBase` changed.
      window.location.reload();
      break;
    case 'warnings':
      handleWarnings(message.data);
      break;
    case 'errors':
      handleErrors(message.data);
      break;
    default:
    // Do nothing.
  }
};

// Is there a newer version of this code available?
function isUpdateAvailable() {
  /* globals __webpack_hash__ */
  // __webpack_hash__ is the hash of the current compilation.
  // It's a global variable injected by Webpack.
  return mostRecentCompilationHash !== __webpack_hash__;
}

// Webpack disallows updates in other states.
function canApplyUpdates() {
  return module.hot.status() === 'idle';
}

// Attempt to update code on the fly, fall back to a hard reload.
function tryApplyUpdates(onHotUpdateSuccess) {
  if (!module.hot) {
    // HotModuleReplacementPlugin is not in Webpack configuration.
    window.location.reload();
    return;
  }

  if (!isUpdateAvailable() || !canApplyUpdates()) {
    return;
  }

  function handleApplyUpdates(err, updatedModules) {
    const hasReactRefresh = process.env.FAST_REFRESH;
    const wantsForcedReload = err || !updatedModules || hadRuntimeError;
    // React refresh can handle hot-reloading over errors.
    if (!hasReactRefresh && wantsForcedReload) {
      window.location.reload();
      return;
    }

    if (typeof onHotUpdateSuccess === 'function') {
      // Maybe we want to do something.
      onHotUpdateSuccess();
    }

    if (isUpdateAvailable()) {
      // While we were updating, there was a new update! Do it again.
      tryApplyUpdates();
    }
  }

  // https://webpack.github.io/docs/hot-module-replacement.html#check
  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);

  // // Webpack 2 returns a Promise instead of invoking a callback
  if (result && result.then) {
    result.then(
      function(updatedModules) {
        handleApplyUpdates(null, updatedModules);
      },
      function(err) {
        handleApplyUpdates(err, null);
      }
    );
  }
}


================================================
FILE: packages/razzle-dev-utils/webpackHotDevClientV4.js
================================================
'use strict';

// This alternative WebpackDevServer combines the functionality of:
// https://github.com/webpack/webpack-dev-server/blob/webpack-1/client/index.js
// https://github.com/webpack/webpack/blob/webpack-1/hot/dev-server.js

// It only supports their simplest configuration (hot updates on same server).
// It makes some opinionated choices on top, like adding a syntax error overlay
// that looks similar to our console output. The error overlay is inspired by:
// https://github.com/glenjamin/webpack-hot-middleware

// HACK ALERT: Most of this file is identical to the webpackHotDevClient.js file with the exception of the code blocks
// denoted with //--- START Unique code --- and //--- END Unique code
// This was done to avoid getting a warning about the `createSocketURL` vs `createSocketUrl` file names
// You must keep the code in these two files in sync

var stripAnsi = require('strip-ansi');
var url = require('url');
var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
var formatWebpackMessages = require('./formatWebpackMessages');
var ErrorOverlay = require('react-error-overlay');

//--- START Unique code ---
// This code is unique to webpack-dev-server v4
// The single API changed to 2 APIs in v4, first you parse the URL, then you create the socket URL from the parsed data
// These APIs are accessible from the `default` context
var parseURL = require('webpack-dev-server/client/utils/parseURL').default
var createSocketUrl = require('webpack-dev-server/client/utils/createSocketURL').default;
var socketUrl = createSocketUrl(parseURL());
//--- START Unique code ---

var parsedSocketUrl = url.parse(socketUrl);

ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
  // Keep this sync with errorOverlayMiddleware.js
  fetch(
    url.format({
      protocol: parsedSocketUrl.protocol,
      hostname: parsedSocketUrl.hostname,
      port: parsedSocketUrl.port,
      pathname: launchEditorEndpoint,
      search:
        '?fileName=' +
        window.encodeURIComponent(errorLocation.fileName) +
        '&lineNumber=' +
        window.encodeURIComponent(errorLocation.lineNumber || 1) +
        '&colNumber=' +
        window.encodeURIComponent(errorLocation.colNumber || 1),
    }),
    { mode: 'no-cors' }
  );
});

// We need to keep track of if there has been a runtime error.
// Essentially, we cannot guarantee application state was not corrupted by the
// runtime error. To prevent confusing behavior, we forcibly reload the entire
// application. This is handled below when we are notified of a compile (code
// change).
// See https://github.com/facebookincubator/create-react-app/issues/3096
var hadRuntimeError = false;
ErrorOverlay.startReportingRuntimeErrors({
  onError: function() {
    hadRuntimeError = true;
  },
  filename: process.env.REACT_BUNDLE_PATH || '/static/js/bundle.js',
});

if (module.hot && typeof module.hot.dispose === 'function') {
  module.hot.dispose(function() {
    // TODO: why do we need this?
    ErrorOverlay.stopReportingRuntimeErrors();
  });
}

//--- START Unique code ---
// This code is unique to webpack-dev-server v4
var connection = new WebSocket(socketUrl);
//--- END Unique code ---

// Unlike WebpackDevServer client, we won't try to reconnect
// to avoid spamming the console. Disconnect usually happens
// when developer stops the server.
connection.onclose = function() {
  if (typeof console !== 'undefined' && typeof console.info === 'function') {
    console.info(
      'The development server has disconnected.\nRefresh the page if necessary.'
    );
  }
};

// Remember some state related to hot module replacement.
var isFirstCompilation = true;
var mostRecentCompilationHash = null;
var hasCompileErrors = false;

function clearOutdatedErrors() {
  // Clean up outdated compile errors, if any.
  if (typeof console !== 'undefined' && typeof console.clear === 'function') {
    if (hasCompileErrors) {
      console.clear();
    }
  }
}

// Successful compilation.
function handleSuccess() {
  clearOutdatedErrors();

  var isHotUpdate = !isFirstCompilation;
  isFirstCompilation = false;
  hasCompileErrors = false;

  // Attempt to apply hot updates or reload.
  if (isHotUpdate) {
    tryApplyUpdates(function onHotUpdateSuccess() {
      // Only dismiss it when we're sure it's a hot update.
      // Otherwise it would flicker right before the reload.
      tryDismissErrorOverlay();
    });
  }
}

// Compilation with warnings (e.g. ESLint).
function handleWarnings(warnings) {
  clearOutdatedErrors();

  var isHotUpdate = !isFirstCompilation;
  isFirstCompilation = false;
  hasCompileErrors = false;

  function printWarnings() {
    // Print warnings to the console.
    var formatted = formatWebpackMessages({
      warnings: warnings,
      errors: [],
    });

    if (typeof console !== 'undefined' && typeof console.warn === 'function') {
      for (var i = 0; i < formatted.warnings.length; i++) {
        if (i === 5) {
          console.warn(
            'There were more warnings in other files.\n' +
              'You can find a complete log in the terminal.'
          );
          break;
        }
        console.warn(stripAnsi(formatted.warnings[i]));
      }
    }
  }

  // Attempt to apply hot updates or reload.
  if (isHotUpdate) {
    tryApplyUpdates(function onSuccessfulHotUpdate() {
      // Only print warnings if we aren't refreshing the page.
      // Otherwise they'll disappear right away anyway.
      printWarnings();
      // Only dismiss it when we're sure it's a hot update.
      // Otherwise it would flicker right before the reload.
      tryDismissErrorOverlay();
    });
  } else {
    // Print initial warnings immediately.
    printWarnings();
  }
}

// Compilation with errors (e.g. syntax error or missing modules).
function handleErrors(errors) {
  clearOutdatedErrors();

  isFirstCompilation = false;
  hasCompileErrors = true;

  // "Massage" webpack messages.
  var formatted = formatWebpackMessages({
    errors: errors,
    warnings: [],
  });

  // Only show the first error.
  ErrorOverlay.reportBuildError(formatted.errors[0]);

  // Also log them to the console.
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    for (var i = 0; i < formatted.errors.length; i++) {
      console.error(stripAnsi(formatted.errors[i]));
    }
  }

  // Do not attempt to reload now.
  // We will reload on next success instead.
}

function tryDismissErrorOverlay() {
  if (!hasCompileErrors) {
    ErrorOverlay.dismissBuildError();
  }
}

// There is a newer version of the code available.
function handleAvailableHash(hash) {
  // Update last known compilation hash.
  mostRecentCompilationHash = hash;
}

// Handle messages from the server.
connection.onmessage = function(e) {
  var message = JSON.parse(e.data);
  switch (message.type) {
    case 'hash':
      handleAvailableHash(message.data);
      break;
    case 'still-ok':
    case 'ok':
      handleSuccess();
      break;
    case 'content-changed':
      // Triggered when a file from `contentBase` changed.
      window.location.reload();
      break;
    case 'warnings':
      handleWarnings(message.data);
      break;
    case 'errors':
      handleErrors(message.data);
      break;
    default:
    // Do nothing.
  }
};

// Is there a newer version of this code available?
function isUpdateAvailable() {
  /* globals __webpack_hash__ */
  // __webpack_hash__ is the hash of the current compilation.
  // It's a global variable injected by Webpack.
  return mostRecentCompilationHash !== __webpack_hash__;
}

// Webpack disallows updates in other states.
function canApplyUpdates() {
  return module.hot.status() === 'idle';
}

// Attempt to update code on the fly, fall back to a hard reload.
function tryApplyUpdates(onHotUpdateSuccess) {
  if (!module.hot) {
    // HotModuleReplacementPlugin is not in Webpack configuration.
    window.location.reload();
    return;
  }

  if (!isUpdateAvailable() || !canApplyUpdates()) {
    return;
  }

  function handleApplyUpdates(err, updatedModules) {
    const hasReactRefresh = process.env.FAST_REFRESH;
    const wantsForcedReload = err || !updatedModules || hadRuntimeError;
    // React refresh can handle hot-reloading over errors.
    if (!hasReactRefresh && wantsForcedReload) {
      window.location.reload();
      return;
    }

    if (typeof onHotUpdateSuccess === 'function') {
      // Maybe we want to do something.
      onHotUpdateSuccess();
    }

    if (isUpdateAvailable()) {
      // While we were updating, there was a new update! Do it again.
      tryApplyUpdates();
    }
  }

  // https://webpack.github.io/docs/hot-module-replacement.html#check
  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);

  // // Webpack 2 returns a Promise instead of invoking a callback
  if (result && result.then) {
    result.then(
      function(updatedModules) {
        handleApplyUpdates(null, updatedModules);
      },
      function(err) {
        handleApplyUpdates(err, null);
      }
    );
  }
}


================================================
FILE: packages/razzle-dev-utils/webpackMajor.js
================================================
'use strict';

const webpack = require('webpack');

module.exports = webpack.version ? parseInt(webpack.version[0]) : 3;


================================================
FILE: packages/razzle-plugin-bundle-analyzer/CHANGELOG.md
================================================
# razzle-plugin-bundle-analyzer

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16


================================================
FILE: packages/razzle-plugin-bundle-analyzer/README.md
================================================
# razzle-plugin-bundle-analyzer

This package contains a plugin for using webpack-bundle-analyzer with Razzle

## Usage in Razzle Projects

```
yarn add razzle-plugin-bundle-analyzer
```

Using the plugin with the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['bundle-analyzer'],
};
```

### With custom options:

```js
// razzle.config.js

module.exports = {
  plugins: [
    {
      name: 'bundle-analyzer',
      options: {
        target: 'web', // or 'node'
        env: 'production', // or 'development'
        bundleAnalyzerConfig: {},
      },
    },
  ],
};
```

## Options

**target: _string_** (defaults: 'web')

**env:  _string_** (defaults: 'production')

**bundleAnalyzerConfig: _bundleAnalyzerOptions_** (defaults: {})

Use 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).


================================================
FILE: packages/razzle-plugin-bundle-analyzer/index.js
================================================
'use strict';

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const defaultOptions = {
  target: 'web',
  env: 'production',
  bundleAnalyzerConfig: {
    analyzerMode: "static",
    reportFilename: "report.html",
  },
};

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    const options = Object.assign(
      {},
      defaultOptions,
      opts.options.pluginOptions
    );

    if (opts.env.target === options.target && options.env !== 'production' === opts.env.dev) {
      config.plugins.push(
        new BundleAnalyzerPlugin(
          Object.assign({}, defaultOptions.bundleAnalyzerConfig, options.bundleAnalyzerConfig)
        )
      );
    }

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-bundle-analyzer/package.json
================================================
{
  "name": "razzle-plugin-bundle-analyzer",
  "version": "4.2.18",
  "description": "Use webpack bundle analyzer with Razzle",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-bundle-analyzer"
  },
  "author": "Lucas Terra <lucasterra7@gmail.com>",
  "license": "MIT",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "webpack-bundle-analyzer": "^3.9.0"
  },
  "peerDependencies": {
    "razzle": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-bundle-analyzer/tests/index.test.js
================================================
'use strict';

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');
const plugin = require('../index');

describe('razzle-bundle-analyzer-plugin', () => {
  describe('with default options in web development ', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('web', 'dev', {
        plugins: [{ object: plugin }],
      });
      done();
    });

    it('should not add webpack-bundle-analyzer-plugin', () => {
      const BAPlugin = config.plugins.find(
        plugin => plugin instanceof BundleAnalyzerPlugin
      );

      expect(BAPlugin).toBeUndefined();
    });

  });

  describe('with default options in web production ', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('web', 'prod', {
        plugins: [{ object: plugin }],
      });
      done();
    });

    it('should add webpack-bundle-analyzer-plugin', () => {
      const BAPlugin = config.plugins.find(
        plugin => plugin instanceof BundleAnalyzerPlugin
      );

      expect(BAPlugin).not.toBeUndefined();
    });
  });

  describe('with default options in node development ', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('node', 'dev', {
        plugins: [{ object: plugin }],
      });
      done();
    });

    it('should not add webpack-bundle-analyzer-plugin', () => {
      const BAPlugin = config.plugins.find(
        plugin => plugin instanceof BundleAnalyzerPlugin
      );

      expect(BAPlugin).toBeUndefined();
    });

  });

  describe('with default options in node production ', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('node', 'prod', {
        plugins: [{ object: plugin }],
      });
      done();
    });

    it('should not add webpack-bundle-analyzer-plugin', () => {
      const BAPlugin = config.plugins.find(
        plugin => plugin instanceof BundleAnalyzerPlugin
      );

      expect(BAPlugin).toBeUndefined();
    });
  });

  describe('with options in node development ', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('node', 'dev', {
        plugins: [{ object: plugin, options: { target: 'node' } }],
      });
      done();
    });

    it('should not add webpack-bundle-analyzer-plugin', () => {
      const BAPlugin = config.plugins.find(
        plugin => plugin instanceof BundleAnalyzerPlugin
      );

      expect(BAPlugin).toBeUndefined();
    });

  });

  describe('with options in node production ', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('node', 'prod', {
        plugins: [{ object: plugin, options: { target: 'node' } }],
      });
      done();
    });

    it('should add webpack-bundle-analyzer-plugin', () => {
      const BAPlugin = config.plugins.find(
        plugin => plugin instanceof BundleAnalyzerPlugin
      );

      expect(BAPlugin).not.toBeUndefined();
    });
  });

    describe('with options in web development ', () => {
      let config;
      beforeAll(async done => {
        config = await createRazzleTestConfig('web', 'dev', {
          plugins: [{ object: plugin, options: { env: 'development' } }],
        });
        done();
      });

      it('should add webpack-bundle-analyzer-plugin', () => {
        const BAPlugin = config.plugins.find(
          plugin => plugin instanceof BundleAnalyzerPlugin
        );

        expect(BAPlugin).not.toBeUndefined();
      });

    });

    describe('with options in web production ', () => {
      let config;
      beforeAll(async done => {
        config = await createRazzleTestConfig('web', 'prod', {
          plugins: [{ object: plugin, options: { env: 'development' } }],
        });
        done();
      });

      it('should not add webpack-bundle-analyzer-plugin', () => {
        const BAPlugin = config.plugins.find(
          plugin => plugin instanceof BundleAnalyzerPlugin
        );

        expect(BAPlugin).toBeUndefined();
      });
    });

});


================================================
FILE: packages/razzle-plugin-css/CHANGELOG.md
================================================
# razzle-plugin-css

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/razzle-plugin-css/README.md
================================================
# razzle-plugin-css

This is just a stub. Razzle comes with CSS. The same exact setup as `create-react-app`.


================================================
FILE: packages/razzle-plugin-css/index.js
================================================
'use strict';

module.exports = function modify(config) {
  console.log(
    'Razzle comes with the same CSS setup as create-react-app. This package is a stub.'
  );
  return config;
};


================================================
FILE: packages/razzle-plugin-css/package.json
================================================
{
  "name": "razzle-plugin-css",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-css"
  },
  "main": "index.js",
  "license": "MIT"
}


================================================
FILE: packages/razzle-plugin-devcert/CHANGELOG.md
================================================
# razzle-plugin-devcert

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-devcert/README.md
================================================
# razzle-plugin-devcert

## Installation

```bash
yarn add razzle-plugin-devcert
```

Add it to your `razzle.config.js`:

```js
// razzle.config.js

module.exports = {
  plugins: ['devcert'],
};
```


================================================
FILE: packages/razzle-plugin-devcert/index.js
================================================
'use strict';
const devcert = require('devcert');

module.exports = {
  modifyOptions(opts) {
    // use modifyOptions so certificateFor is called once
    const options = opts.options.razzleOptions;
    return new Promise(async resolve => {
      const httpsCredentials = await devcert.certificateFor('localhost');
      const stringHttpsCredentials = {
        key: httpsCredentials.key.toString(),
        cert: httpsCredentials.cert.toString(),
      };
      options.HTTPS_CREDENTIALS = stringHttpsCredentials;
      resolve(options);
    });
  },
  modifyWebpackOptions(opts) {
    const razzleOptions = opts.options.razzleOptions;
    const webpackOptions = opts.options.webpackOptions;
    if (opts.env.target === 'node' && opts.env.dev) {
      webpackOptions.definePluginOptions.HTTPS_CREDENTIALS = JSON.stringify(
        razzleOptions.HTTPS_CREDENTIALS
      );
    }
    return webpackOptions;
  },
  modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    // Do some stuff to webpackConfig
    // DevCert配置
    {
      if (target === 'web' && dev) {
        webpackConfig.devServer.https = razzleOptions.HTTPS_CREDENTIALS;
        webpackConfig.devServer.headers = {
          'Access-Control-Allow-Origin': '*',
          https: true,
        };
      }
    }
    return webpackConfig;
  },
};


================================================
FILE: packages/razzle-plugin-devcert/package.json
================================================
{
  "name": "razzle-plugin-devcert",
  "license": "MIT",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-devcert"
  },
  "main": "index.js",
  "dependencies": {
    "devcert": "^1.2.0"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18",
    "webpack": "~4||~5"
  }
}


================================================
FILE: packages/razzle-plugin-elm/CHANGELOG.md
================================================
# razzle-plugin-elm

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-elm/README.md
================================================
# razzle-plugin-elm

## Installation

```bash
yarn add razzle-plugin-elm --dev
```

Add it to your `razzle.config.js`:

```js
// razzle.config.js

module.exports = {
  plugins: ['elm'],
};
```


================================================
FILE: packages/razzle-plugin-elm/index.js
================================================
'use strict';

const WebpackConfigHelpers = require('razzle-dev-utils/WebpackConfigHelpers');
const Helpers = new WebpackConfigHelpers(process.cwd());

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    // Add .elm extension
    config.resolve.extensions.push('.elm');

    // Don't parse as JS
    config.module.noParse = config.module.noParse
      ? config.module.noParse.push(/.elm$/)
      : [/.elm$/];

    // Exclude from file-loader
    config.module.rules[
      config.module.rules.findIndex(Helpers.makeLoaderFinder('file-loader'))
    ].exclude.push(/\.(elm)$/);

    if (opts.env.dev) {
      config.module.rules.push({
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          {
            loader: require.resolve('elm-webpack-loader'),
            options: {
              verbose: true,
              warn: true,
              pathToMake: require('elm/platform').executablePaths['elm-make'],
              forceWatch: true,
            },
          },
        ],
      });
    } else {
      // Production
      config.module.rules.push({
        test: /\.elm$/,
        exclude: [/elm-stuff/, /node_modules/],
        use: [
          {
            loader: require.resolve('elm-webpack-loader'),
            options: {
              pathToMake: require('elm/platform').executablePaths['elm-make'],
            },
          },
        ],
      });
    }

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-elm/package.json
================================================
{
  "name": "razzle-plugin-elm",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-elm"
  },
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "elm-hot-loader": "^0.5.4",
    "elm-webpack-loader": "^5.0.0"
  },
  "peerDependencies": {
    "elm": "^0.19.1-5",
    "razzle-dev-utils": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-eslint/CHANGELOG.md
================================================
# razzle-plugin-eslint

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/razzle-plugin-eslint/README.md
================================================
# razzle-plugin-eslint

Not yet implemented.


================================================
FILE: packages/razzle-plugin-eslint/index.js
================================================
'use strict';

const ESLintPlugin = require('eslint-webpack-plugin');

const eslintFormatter = require('react-dev-utils/eslintFormatter');

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;

    const mainEslintOptions = {
      extensions: ['js','mjs','jsx','ts','tsx'],
      baseConfig: {
        extends: [require.resolve('eslint-config-react-app')],
      },
      formatter: eslintFormatter,
      eslintPath: require.resolve('eslint'),
      ignore: false,
      useEslintrc: true
    };

    config.plugins = [
      new ESLintPlugin(mainEslintOptions),
      ...config.plugins,
    ];
    return config;
  },
};


================================================
FILE: packages/razzle-plugin-eslint/package.json
================================================
{
  "name": "razzle-plugin-eslint",
  "version": "4.2.18",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-eslint"
  },
  "license": "MIT",
  "dependencies": {
    "@typescript-eslint/eslint-plugin": "^4.0.0",
    "@typescript-eslint/parser": "^4.14.1",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.18.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^2.1.0"
  },
  "peerDependencies": {
    "react-dev-utils": "11.0.4",
    "webpack": "~4||~5"
  }
}


================================================
FILE: packages/razzle-plugin-graphql/CHANGELOG.md
================================================
# razzle-plugin-graphql

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-graphql/README.md
================================================
# razzle-plugin-graphql

This package contains a plugin for using [graphql/gql](https://www.npmjs.com/package/graphql-tag) with Razzle

## Usage in Razzle Projects

```bash
yarn add razzle-plugin-graphql --dev
```

### With the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['graphql'],
};
```

---

### With custom options

No supported options right now

## Options

No supported options right now

---

## Use

To use a `.graphql` or `.gql` simply import them in your component.

```
import query from './query.graphql';

console.log(query);
// {
//   "kind": "Document",
// ...
```

see the `graphql-tag` package documentation for further information.

================================================
FILE: packages/razzle-plugin-graphql/helpers.js
================================================
'use strict';
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

const gqlLoaderFinder = makeLoaderFinder('graphql-tag/loader');

module.exports = {
  gqlLoaderFinder,
};


================================================
FILE: packages/razzle-plugin-graphql/index.js
================================================
'use strict';

module.exports = {
  modifyWebpackOptions(opts) {
    const options = Object.assign({}, opts.options.webpackOptions);    // Add .graphql to exlude
    options.fileLoaderExclude = [/\.graphql|gql?$/, ...options.fileLoaderExclude];
    return options;
  },
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

      const graphqlLoader = {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        use: [require.resolve('graphql-tag/loader')]
      };

      config.module.rules = [
        ...config.module.rules,
        graphqlLoader
      ];

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-graphql/package.json
================================================
{
  "name": "razzle-plugin-graphql",
  "version": "4.2.18",
  "description": "Use .graphql and .gql files with Razzle",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-graphql"
  },
  "author": "Mikael Pettersson <me@evanion.com>",
  "license": "MIT",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "graphql-tag": "^2.11.0"
  },
  "peerDependencies": {
    "graphql": "^15.5.0",
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-graphql/tests/index.test.js
================================================
'use strict';

const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');

const plugin = require('../index');
const {
  gqlLoaderFinder
} = require('../helpers');

const webDevLoaderTests = [
  {
    name: 'should add grahpql-tag/loader',
    loaderFinder: gqlLoaderFinder,
  }
];

const webProdLoaderTests = [
  {
    name: 'should add grahpql-tag/loader',
    loaderFinder: gqlLoaderFinder,
  }
];

const nodeLoaderTests = [
  {
    name: 'should add grahpql-tag/loader',
    loaderFinder: gqlLoaderFinder,
  }
];

describe('razzle-plugin-graphql', () => {
  describe('when creating web config', () => {
    describe('when environment set to development', () => {

      let config;
      beforeAll(async () => {
        config = await createRazzleTestConfig('web', 'dev', {
          plugins: [{ object: plugin }],
        });
      });


      webDevLoaderTests.forEach(test => {
        if (test.status === 'falsy') {
          it(test.name, () => {
            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
          });
        } else {
          it(test.name, () => {
            expect(
              config.module.rules.find(test.loaderFinder)
            ).not.toBeUndefined();
          });
        }
      });
    });

    describe('when environment set to production', () => {
      let config;

      beforeAll(async () => {
        config = await createRazzleTestConfig('web', 'prod', {
          plugins: [{ object: plugin }],
        });
      });


      webProdLoaderTests.forEach(test => {
        if (test.status === 'falsy') {
          it(test.name, () => {
            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
          });
        } else {
          it(test.name, () => {
            expect(
              config.module.rules.find(test.loaderFinder)
            ).not.toBeUndefined();
          });
        }
      });
    });
  });

  describe('when creating a node config', () => {

    let config;
    beforeAll(async () => {
      config = await createRazzleTestConfig('node', 'prod', {
        plugins: [{ object: plugin }],
      });
    });


    nodeLoaderTests.forEach(test => {
      if (test.status === 'falsy') {
        it(test.name, () => {
          expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
        });
      } else {
        it(test.name, () => {
          expect(
            config.module.rules.find(test.loaderFinder)
          ).not.toBeUndefined();
        });
      }
    });
  });
});


================================================
FILE: packages/razzle-plugin-inferno/CHANGELOG.md
================================================
# razzle-plugin-inferno

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/razzle-plugin-inferno/README.md
================================================
# razzle-plugin-inferno

Not yet implemented.


================================================
FILE: packages/razzle-plugin-inferno/index.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    console.log(
      'Not yet implemented. Help out at https://github.com/jaredpalmer/razzle'
    );
    return config;
  },
};


================================================
FILE: packages/razzle-plugin-inferno/package.json
================================================
{
  "name": "razzle-plugin-inferno",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-inferno"
  },
  "main": "index.js",
  "license": "MIT"
}


================================================
FILE: packages/razzle-plugin-less/.eslintrc
================================================
{
  "env": {
    "jest": true,
    "node": true
  }
}

================================================
FILE: packages/razzle-plugin-less/CHANGELOG.md
================================================
# razzle-plugin-less

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-less/README.md
================================================
# razzle-plugin-less

This package contains a plugin for using [LESS](http://lesscss.org/) with Razzle

## Usage in Razzle Projects

```bash
yarn add razzle-plugin-less --dev
```

### With the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['less'],
};
```

### With custom options

```js
// razzle.config.js

module.exports = {
  plugins: [
    {
      name: 'less',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    },
  ],
};
```

## Options

Please remember that custom options will extends default options using `Object.assign`.
Array such as postcss.plugins **WILL NOT BE EXTENDED OR CONCATED**, it will override all default plugins.

---

### postcss

default

```js
{
  dev: {
    sourceMap: true,
    ident: 'postcss',
  },
  prod: {
    sourceMap: false,
    ident: 'postcss',
  },
  plugins: [
    PostCssFlexBugFixes,
    autoprefixer({
      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
      flexbox: 'no-2009',
    }),
  ],
}
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [postcss loader options](https://github.com/postcss/postcss-loader#options) to override configs.


### less

default

```js
{
  dev: {
    sourceMap: true,
    includePaths: [paths.appNodeModules],
  },
  prod: {
    sourceMap: false,
    includePaths: [paths.appNodeModules],
  },
}
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [less loader options](https://github.com/webpack-contrib/less-loader) to override configs.

---

### css

default

```js
{
  dev: {
    sourceMap: true,
    importLoaders: 1,
    modules: false,
  },
  prod: {
    sourceMap: false,
    importLoaders: 1,
    modules: false,
    minimize: true,
  },
}
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [css loader options](https://github.com/webpack-contrib/css-loader#options) to override configs.


#### style

default

```js
{
}
```

Style loader only used in `development` environment.

See [style loader options](https://github.com/webpack-contrib/style-loader#options) to override configs.

#### resolveUrl

default

```js
{
  dev: {},
  prod: {},
}
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [resolve url loader options](https://github.com/bholloway/resolve-url-loader#options) to override configs.


================================================
FILE: packages/razzle-plugin-less/helpers.js
================================================
'use strict';
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

const cssLoaderFinder = makeLoaderFinder('css-loader');
const postCssLoaderFinder = makeLoaderFinder('postcss-loader');
const resolveUrlLoaderFinder = makeLoaderFinder('resolve-url-loader');
const lessLoaderFinder = makeLoaderFinder('less-loader');
const styleLoaderFinder = makeLoaderFinder('style-loader');

module.exports = {
  cssLoaderFinder,
  postCssLoaderFinder,
  resolveUrlLoaderFinder,
  lessLoaderFinder,
  styleLoaderFinder,
};


================================================
FILE: packages/razzle-plugin-less/index.js
================================================
'use strict';

const autoprefixer = require('autoprefixer');
const merge = require('deepmerge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const paths = require('razzle/config/paths');
const postcssLoadConfig = require('postcss-load-config');

const hasPostCssConfig = () => {
  try {
    return !!postcssLoadConfig.sync();
  } catch (_error) {
    return false;
  }
};

module.exports = {
  modifyWebpackConfig(opts) {
    const isServer = opts.env.target !== 'web';
    const constantEnv = opts.env.dev ? 'dev' : 'prod';

    const razzleOptions = opts.options.razzleOptions;
    const config = Object.assign({}, opts.webpackConfig);

    const defaultOptions = {
      postcss: {
        dev: {
          sourceMap: true,
          ident: 'postcss',
        },
        prod: {
          sourceMap: razzleOptions.enableSourceMaps,
          ident: 'postcss',
        },
        plugins: [
          [autoprefixer, {
            overrideBrowserslist: opts.options.razzleOptions.browserslist || [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9',
            ],
            flexbox: 'no-2009',
          }],
        ],
      },
      less: {
        dev: {
          sourceMap: true,
          lessOptions: {
            includePaths: [paths.appNodeModules],
          },
        },
        prod: {
          // XXX Source maps are required for the resolve-url-loader to properly
          // function. Disable them in later stages if you do not want source maps.
          sourceMap: true,
          lessOptions: {
            includePaths: [paths.appNodeModules],
          },
        },
      },
      css: {
        dev: {
          sourceMap: true,
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
        prod: {
          sourceMap: razzleOptions.enableSourceMaps,
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
      style: {},
      resolveUrl: {
        dev: {},
        prod: {},
      },
    };

    const options = Object.assign(
      {},
      defaultOptions,
      opts.options.pluginOptions
    );

    const styleLoader = {
      loader: require.resolve('style-loader'),
      options: options.style,
    };

    const cssLoader = {
      loader: require.resolve('css-loader'),
      options: options.css[constantEnv],
    };

    const resolveUrlLoader = {
      loader: require.resolve('resolve-url-loader'),
      options: options.resolveUrl[constantEnv],
    };

    const postCssLoader = {
      loader: require.resolve('postcss-loader'),
      options: hasPostCssConfig()
        ? undefined
        : { postcssOptions: Object.assign({}, options.postcss[constantEnv], {
            plugins: options.postcss.plugins,
          })},
    };

    const lessLoader = {
      loader: require.resolve('less-loader'),
      options: Object.assign({}, options.less[constantEnv]),
    };

    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.less$/,
        use: isServer
          ? [
              {
                loader: require.resolve('css-loader'),
                options: merge(options.css[constantEnv], {
                  modules: {
                    exportOnlyLocals: true,
                  }
                }),
              },
              resolveUrlLoader,
              postCssLoader,
              lessLoader,
            ]
          : [
              opts.env.dev ? styleLoader : MiniCssExtractPlugin.loader,
              cssLoader,
              postCssLoader,
              resolveUrlLoader,
              lessLoader,
            ],
      },
    ];

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-less/package.json
================================================
{
  "name": "razzle-plugin-less",
  "version": "4.2.18",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-less"
  },
  "author": "Ryan Yang <orange881217@gmail.com>",
  "license": "MIT",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "autoprefixer": "^10.2.3",
    "css-loader": "^5.0.0",
    "deepmerge": "^4.2.2",
    "less-loader": "^7.0.2",
    "node-less-chokidar": "^0.4.1",
    "postcss-less": "^4.0.0",
    "postcss-load-config": "^3.0.0",
    "postcss-loader": "^4.2.0",
    "resolve-url-loader": "^3.1.2"
  },
  "peerDependencies": {
    "less": "^4.1.0",
    "mini-css-extract-plugin": ">=0.9.0 <1.0.0",
    "postcss": "^8.2.4",
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18",
    "style-loader": "^2.0.0",
    "webpack": "~4||~5"
  }
}


================================================
FILE: packages/razzle-plugin-less/tests/index.test.js
================================================
'use strict';

const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');

const plugin = require('../index');
const {
  cssLoaderFinder,
  postCssLoaderFinder,
  resolveUrlLoaderFinder,
  lessLoaderFinder,
  styleLoaderFinder,
} = require('../helpers');

const webDevLoaderTests = [
  {
    name: 'should add style-loader',
    loaderFinder: styleLoaderFinder,
  },
  {
    name: 'should add css-loader',
    loaderFinder: cssLoaderFinder,
  },
  {
    name: 'should add postcss-loader',
    loaderFinder: postCssLoaderFinder,
  },
  {
    name: 'should add resolve-url-loader',
    loaderFinder: resolveUrlLoaderFinder,
  },
  {
    name: 'should add less-loader',
    loaderFinder: lessLoaderFinder,
  },
];

const webProdLoaderTests = [
  {
    name: 'should not add style-loader (using mini-extract-css-plugin loader)',
    loaderFinder: styleLoaderFinder,
    status: 'falsy',
  },
  {
    name: 'should add css-loader',
    loaderFinder: cssLoaderFinder,
  },
  {
    name: 'should add postcss-loader',
    loaderFinder: postCssLoaderFinder,
  },
  {
    name: 'should add resolve-url-loader',
    loaderFinder: resolveUrlLoaderFinder,
  },
  {
    name: 'should add less-loader',
    loaderFinder: lessLoaderFinder,
  },
];

const nodeLoaderTests = [
  {
    name: 'should not add style-loader',
    loaderFinder: styleLoaderFinder,
    status: 'falsy',
  },
  {
    name: 'should add css-loader',
    loaderFinder: cssLoaderFinder,
  },
  {
    name: 'should add postcss-loader',
    loaderFinder: postCssLoaderFinder,
  },
  {
    name: 'should add resolve-url-loader',
    loaderFinder: resolveUrlLoaderFinder,
  },
  {
    name: 'should add less-loader',
    loaderFinder: lessLoaderFinder,
  },
];

describe('razzle-less-plugin', () => {
  describe('when creating web config', () => {
    describe('when environment set to development', () => {
      let config;

      beforeAll(async () => {
        config = await createRazzleTestConfig('web', 'dev', {
          plugins: [{ object: plugin }],
        });
      });

      webDevLoaderTests.forEach(test => {
        if (test.status === 'falsy') {
          it(test.name, () => {
            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
          });
        } else {
          it(test.name, () => {
            expect(
              config.module.rules.find(test.loaderFinder)
            ).not.toBeUndefined();
          });
        }
      });
    });

    describe('when environment set to production', () => {
      let config;

      beforeAll(async () => {
        config = await createRazzleTestConfig('web', 'prod', {
          plugins: [{ object: plugin }],
        });
      });

      webProdLoaderTests.forEach(test => {
        if (test.status === 'falsy') {
          it(test.name, () => {
            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
          });
        } else {
          it(test.name, () => {
            expect(
              config.module.rules.find(test.loaderFinder)
            ).not.toBeUndefined();
          });
        }
      });
    });
  });

  describe('when creating a node config', () => {
    let config;

    beforeAll(async () => {
      config = await createRazzleTestConfig('node', 'prod', {
        plugins: [{ object: plugin }],
      });
    });

    nodeLoaderTests.forEach(test => {
      if (test.status === 'falsy') {
        it(test.name, () => {
          expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
        });
      } else {
        it(test.name, () => {
          expect(
            config.module.rules.find(test.loaderFinder)
          ).not.toBeUndefined();
        });
      }
    });
  });
});


================================================
FILE: packages/razzle-plugin-manifest/CHANGELOG.md
================================================
# razzle-plugin-manifest

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-manifest/README.md
================================================
# razzle-plugin-manifest

This package contains a plugin for generating manifest file for splitted chunk paths with Razzle

## Usage in Razzle Projects

```
npm i razzle-plugin-manifest
```

or

```
yarn add razzle-plugin-manifest
```

### Using the plugin with the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['manifest'],
};
```

A file called `chunks.json` will get generated at build time. you can import the file using `RAZZLE_CHUNKS_MANIFEST` enviroment variable.

example:

```js
const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);
```


================================================
FILE: packages/razzle-plugin-manifest/index.js
================================================
'use strict';

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const path = require('path');

module.exports = {
  modifyWebpackConfig({
    env: { target },
    webpackConfig,
    webpackObject,
    paths,
    options: {
      pluginOptions = { fileName: path.join(paths.appBuild, 'chunks.json') },
    },
  }) {
    if (target === 'web') {
      webpackConfig.plugins.push(
        // Output our JS and CSS files in a manifest file called chunks.json
        // in the build directory.
        // based on https://github.com/danethurber/webpack-manifest-plugin/issues/181#issuecomment-467907737
        new WebpackManifestPlugin({
          fileName: pluginOptions.fileName,
          writeToFileEmit: true,
          filter: item => item.isChunk,
          generate: (seed, files) => {
            const entrypoints = new Set();
            files.forEach(file =>
              ((file.chunk || {})._groups || []).forEach(group =>
                entrypoints.add(group)
              )
            );
            const entries = [...entrypoints];
            const entryArrayManifest = entries.reduce((acc, entry) => {
              const name =
                (entry.options || {}).name ||
                (entry.runtimeChunk || {}).name ||
                entry.id;
              const files = []
                .concat(
                  ...(entry.chunks || []).map(chunk =>
                    chunk.files.map(
                      path => webpackConfig.output.publicPath + path
                    )
                  )
                )
                .filter(Boolean);

              const chunkIds = [].concat(
                ...(entry.chunks || []).map(chunk => chunk.ids)
              );

              const cssFiles = files
                .map(item => (item.indexOf('.css') !== -1 ? item : null))
                .filter(Boolean);

              const jsFiles = files
                .map(item => (item.indexOf('.js') !== -1 ? item : null))
                .filter(Boolean);

              return name
                ? {
                    ...acc,
                    [name]: {
                      css: cssFiles,
                      js: jsFiles,
                      chunks: chunkIds,
                    },
                  }
                : acc;
            }, seed);
            return entryArrayManifest;
          },
        })
      );
    }

    webpackConfig.plugins.push(
      new webpackObject.DefinePlugin({
        'process.env.RAZZLE_CHUNKS_MANIFEST': JSON.stringify(pluginOptions.fileName),
      })
    );

    return webpackConfig;
  },
};


================================================
FILE: packages/razzle-plugin-manifest/package.json
================================================
{
  "name": "razzle-plugin-manifest",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-manifest"
  },
  "main": "index.js",
  "license": "MIT",
  "author": {
    "name": "Nima Arefi",
    "email": "arefinima@gmail.com"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18"
  },
  "dependencies": {
    "webpack-manifest-plugin": "^4.0.2"
  }
}


================================================
FILE: packages/razzle-plugin-mdx/.eslintrc
================================================
{
  "env": {
    "jest": true,
    "node": true
  }
}

================================================
FILE: packages/razzle-plugin-mdx/CHANGELOG.md
================================================
# razzle-plugin-mdx

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-mdx/README.md
================================================
# razzle-plugin-mdx

This package contains a plugin for using mdx with Razzle

## Usage in Razzle Projects

```
npm i razzle-plugin-mdx
```

or

```
yarn add razzle-plugin-mdx
```

### Using the plugin with the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['mdx'],
};
```

Files with .md extension will be loaded as markdown and transpiled to html markup.

example:

```jsx
import Document from './Document.md';

const Example = () => (<Document />);
```

### With custom options:

```js
// razzle.config.js
const images = require('remark-images');
const emoji = require('remark-emoji');

module.exports = {
  plugins: [
    {
      name: 'mdx',
      options: {
        remarkPlugins: [images, emoji],
      },
    },
  ],
};
```

## Options

Check all the options here: [mdx-js options](https://github.com/mdx-js/mdx#options).


================================================
FILE: packages/razzle-plugin-mdx/helpers.js
================================================
'use strict';
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

const babelLoaderFinder = makeLoaderFinder('babel-loader');
const fileLoaderFinder = makeLoaderFinder('file-loader');
const mdxLoaderFinder = makeLoaderFinder('@mdx-js/loader');

module.exports = {
  fileLoaderFinder,
  babelLoaderFinder,
  mdxLoaderFinder,
};


================================================
FILE: packages/razzle-plugin-mdx/index.js
================================================
'use strict';

const { babelLoaderFinder } = require('./helpers');
const path = require('path');

const defaultOptions = {};

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    const options = Object.assign(
      {},
      defaultOptions,
      opts.options.pluginOptions
    );

    config.resolve.modules = [
      ...config.resolve.modules,
      path.join(__dirname, './node_modules'),
    ];
    config.resolve.extensions = [...config.resolve.extensions, '.md', '.mdx'];

    // Safely locate Babel-Loader in Razzle's webpack internals
    const babelLoader = config.module.rules.find(babelLoaderFinder);
    if (!babelLoader) {
      throw new Error(`'babel-loader' required for nice 'MDX loader' work`);
    }

    // Get the correct `include` option, since that hasn't changed.
    // This tells Razzle which directories to transform.
    const { include } = babelLoader;

    // Configure @mdx-js/loader
    const mdxLoader = {
      include,
      test: /\.mdx?$/,
      use: [
        ...babelLoader.use,
        {
          loader: require.resolve('@mdx-js/loader'),
          options: Object.assign({}, options),
        },
      ],
    };

    config.module.rules.push(mdxLoader);

    return config;
  },
  modifyWebpackOptions({
    env: {
      target, // the target 'node' or 'web'
      dev // is this a development build? true or false
    },
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
      pluginOptions
    },
    paths // the modified paths that will be used by Razzle.
  }) {
    // Don't import md and mdx files with file-loader
    webpackOptions.fileLoaderExclude.push(/\.mdx?$/);
    return webpackOptions;
  },
};


================================================
FILE: packages/razzle-plugin-mdx/package.json
================================================
{
  "name": "razzle-plugin-mdx",
  "version": "4.2.18",
  "description": "Use mdx with Razzle",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-mdx"
  },
  "author": "Ivakhnenko Dmitry <jeetiss@ya.ru>",
  "license": "MIT",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "@mdx-js/loader": "^1.6.18",
    "@mdx-js/mdx": "^1.6.18"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-mdx/tests/index.test.js
================================================
'use strict';

const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');
const plugin = require('../index');
const { fileLoaderFinder, mdxLoaderFinder } = require('../helpers');

describe('razzle-mdx-plugin', () => {
  let config;
  beforeAll(async () => {
    config = await createRazzleTestConfig('web', 'dev', {
      plugins: [{ object: plugin }],
    });
  });

  it('should add .md and .mdx to extensions', () => {
    expect(config.resolve.extensions).toContain('.md');
    expect(config.resolve.extensions).toContain('.mdx');
  });

  it('should add mdx-loader', () => {
    const rule = config.module.rules.find(mdxLoaderFinder);
    expect(rule).not.toBeUndefined();
  });

  it('should add mdx format to exclude', () => {
    const fileRule = config.module.rules.find(fileLoaderFinder);
    expect(fileRule.exclude).toContainEqual(/\.mdx?$/);
  });
});


================================================
FILE: packages/razzle-plugin-php/CHANGELOG.md
================================================
# razzle-plugin-php

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-php/README.md
================================================
# razzle-plugin-php

Razzle plugin to add `babel-preset-php`.

> Note this is kind of a joke, but actually works.

## Installation

```bash
yarn add razzle-plugin-php --dev
```

Add it to your `razzle.config.js`:

```js
// razzle.config.js

module.exports = {
  plugins: ['php'],
};
```


================================================
FILE: packages/razzle-plugin-php/index.js
================================================
'use strict';

const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    config.resolve.extensions.push('.php');

    // Exclude from file-loader
    config.module.rules[
      config.module.rules.findIndex(makeLoaderFinder('file-loader'))
    ].exclude.push(/\.(php)$/);

    // Don't parse as JS
    config.module.noParse = config.module.noParse
      ? config.module.noParse.concat([/.php$/])
      : [/.php$/];

    // Add a custom babel loader (in addition to the one for .js)
    // making sure to ignore .babelrc
    config.module.rules.push({
      test: /\.php$/,
      include: config.module.rules.find(makeLoaderFinder('babel-loader'))
        .include,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [require.resolve('babel-preset-php')],
            babelrc: false,
          },
        },
      ],
    });

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-php/package.json
================================================
{
  "name": "razzle-plugin-php",
  "version": "4.2.18",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-php"
  },
  "license": "MIT",
  "dependencies": {
    "babel-preset-php": "^1.2.0"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-preact/CHANGELOG.md
================================================
# razzle-plugin-preact

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/razzle-plugin-preact/README.md
================================================
# razzle-plugin-preact

Not yet implemented.


================================================
FILE: packages/razzle-plugin-preact/index.js
================================================
'use strict';

module.exports = function modify(config) {
  console.log(
    'Not yet implemented. Help out at https://github.com/jaredpalmer/razzle'
  );
  return config;
};


================================================
FILE: packages/razzle-plugin-preact/package.json
================================================
{
  "name": "razzle-plugin-preact",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-preact"
  },
  "main": "index.js",
  "license": "MIT"
}


================================================
FILE: packages/razzle-plugin-react/CHANGELOG.md
================================================
# razzle-plugin-react

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets


================================================
FILE: packages/razzle-plugin-react/README.md
================================================
# razzle-plugin-react

This is just a stub. Razzle ships with React as the default.


================================================
FILE: packages/razzle-plugin-react/index.js
================================================
'use strict';

module.exports = function modify(config) {
  console.log('Razzle comes with React! This package is a stub.');
  return config;
};


================================================
FILE: packages/razzle-plugin-react/package.json
================================================
{
  "name": "razzle-plugin-react",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-react"
  },
  "main": "index.js",
  "license": "MIT"
}


================================================
FILE: packages/razzle-plugin-scss/.eslintrc
================================================
{
  "env": {
    "jest": true,
    "node": true
  }
}

================================================
FILE: packages/razzle-plugin-scss/CHANGELOG.md
================================================
# razzle-plugin-scss

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-scss/README.md
================================================
# razzle-plugin-scss

This package contains a plugin for using [SCSS/SASS](https://sass-lang.com/) with Razzle

## Usage in Razzle Projects

```bash
yarn add razzle-plugin-scss --dev
```

### With the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['scss'],
};
```

Files with an ending in the name _.module.scss and _.module.sass will load as cssModules

example:

```jsx
import s from './myfile.module.scss';
```

---

### With custom options

```js
// razzle.config.js

module.exports = {
  plugins: [
    {
      name: 'scss',
      options: {
        postcss: {
          dev: {
            sourceMap: false,
          },
        },
      },
    },
  ],
};
```

## Options

Please remember that custom options will extends default options using `Object.assign`.
Array such as postcss.plugins **WILL NOT BE EXTENDED OR CONCATED**, it will override all default plugins.

---

### postcss

default

```js
{
  dev: {
    sourceMap: true,
    ident: 'postcss',
  },
  prod: {
    sourceMap: false,
    ident: 'postcss',
  },
  plugins: [
    PostCssFlexBugFixes,
    autoprefixer({
      browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
      flexbox: 'no-2009',
    }),
  ],
}
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [postcss loader options](https://github.com/postcss/postcss-loader#options) to override configs.

---

### sass

default

```js
{
  dev: {
    sassOptions: {
      sourceMap: true,
      includePaths: [paths.appNodeModules],
    },
  },
  prod: {
    sassOptions: {
      sourceMap: true,
      sourceMapContents: false,
      includePaths: [paths.appNodeModules],
    },
  },
},
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [node-sass options](https://github.com/sass/node-sass#options) to override configs.

---

### css

default

```js
{
  dev: {
    sourceMap: true,
    importLoaders: 1,
    modules: {
      auto: true,
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  },
  prod: {
    sourceMap: razzleOptions.enableSourceMaps,
    importLoaders: 1,
    modules: {
      auto: true,
      localIdentName: '[name]__[local]___[hash:base64:5]',
    },
  },
},
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [css loader options](https://github.com/webpack-contrib/css-loader#options) to override configs.

---

#### style

default

```js
{
}
```

Style loader only used in `development` environment.

See [style loader options](https://github.com/webpack-contrib/style-loader#options) to override configs.

#### resolveUrl

default

```js
{
  dev: {},
  prod: {},
}
```

Set `dev` to add config to postcss in `development`.
Set `prod` to add config to postcss in `production`.

See [resolve url loader options](https://github.com/bholloway/resolve-url-loader#options) to override configs.


================================================
FILE: packages/razzle-plugin-scss/helpers.js
================================================
'use strict';
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

const cssLoaderFinder = makeLoaderFinder('css-loader');
const postCssLoaderFinder = makeLoaderFinder('postcss-loader');
const resolveUrlLoaderFinder = makeLoaderFinder('resolve-url-loader');
const sassLoaderFinder = makeLoaderFinder('sass-loader');
const styleLoaderFinder = makeLoaderFinder('style-loader');

module.exports = {
  cssLoaderFinder,
  postCssLoaderFinder,
  resolveUrlLoaderFinder,
  sassLoaderFinder,
  styleLoaderFinder,
};


================================================
FILE: packages/razzle-plugin-scss/index.js
================================================
'use strict';

const autoprefixer = require('autoprefixer');
const merge = require('deepmerge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const paths = require('razzle/config/paths');
const postcssLoadConfig = require('postcss-load-config');

const hasPostCssConfig = () => {
  try {
    return !!postcssLoadConfig.sync();
  } catch (_error) {
    return false;
  }
};

module.exports = {
  modifyWebpackConfig(opts) {
    const isServer = opts.env.target !== 'web';
    const constantEnv = opts.env.dev ? 'dev' : 'prod';

    const razzleOptions = opts.options.razzleOptions;
    const config = Object.assign({}, opts.webpackConfig);

    const defaultOptions = {
      postcss: {
        dev: {
          sourceMap: true,
          ident: 'postcss',
        },
        prod: {
          sourceMap: razzleOptions.enableSourceMaps,
          ident: 'postcss',
        },
        plugins: [
          [autoprefixer, {
            overrideBrowserslist: opts.options.razzleOptions.browserslist || [
              '>1%',
              'last 4 versions',
              'Firefox ESR',
              'not ie < 9',
            ],
            flexbox: 'no-2009',
          }],
        ],
      },
      sass: {
        dev: {
          sassOptions: {
            sourceMap: true,
            includePaths: [paths.appNodeModules],
          },
        },
        prod: {
          sassOptions: {
            // XXX Source maps are required for the resolve-url-loader to properly
            // function. Disable them in later stages if you do not want source maps.
            sourceMap: true,
            sourceMapContents: false,
            includePaths: [paths.appNodeModules],
          },
        },
      },
      css: {
        dev: {
          sourceMap: true,
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
        prod: {
          sourceMap: razzleOptions.enableSourceMaps,
          importLoaders: 1,
          modules: {
            auto: true,
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
      style: {},
      resolveUrl: {
        dev: {},
        prod: {},
      },
    };

    const options = Object.assign(
      {},
      defaultOptions,
      opts.options.pluginOptions
    );

    const styleLoader = {
      loader: require.resolve('style-loader'),
      options: options.style,
    };

    const cssLoader = {
      loader: require.resolve('css-loader'),
      options: options.css[constantEnv],
    };

    const resolveUrlLoader = {
      loader: require.resolve('resolve-url-loader'),
      options: options.resolveUrl[constantEnv],
    };

    const postCssLoader = {
      loader: require.resolve('postcss-loader'),
      options: hasPostCssConfig()
        ? undefined
        : { postcssOptions: Object.assign({}, options.postcss[constantEnv], {
            plugins: options.postcss.plugins,
          })},
    };

    const sassLoader = {
      loader: require.resolve('sass-loader'),
      options: options.sass[constantEnv],
    };

    config.module.rules = [
      ...config.module.rules,
      {
        test: /\.(sa|sc)ss$/,
        use: isServer
          ? [
              {
                loader: require.resolve('css-loader'),
                options: merge(options.css[constantEnv], {
                  modules: {
                    exportOnlyLocals: true,
                  }
                }),
              },
              resolveUrlLoader,
              postCssLoader,
              sassLoader,
            ]
          : [
              opts.env.dev ? styleLoader : MiniCssExtractPlugin.loader,
              cssLoader,
              postCssLoader,
              resolveUrlLoader,
              sassLoader,
            ],
      },
    ];

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-scss/package.json
================================================
{
  "name": "razzle-plugin-scss",
  "version": "4.2.18",
  "description": "Use SCSS/SASS with Razzle",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-scss"
  },
  "author": "Ray Andrew <raydreww@gmail.com>",
  "license": "MIT",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "autoprefixer": "^10.2.3",
    "css-loader": "^5.0.0",
    "deepmerge": "^4.2.2",
    "postcss-load-config": "^3.0.0",
    "postcss-loader": "^4.2.0",
    "postcss-scss": "^3.0.4",
    "resolve-url-loader": "^3.1.2",
    "sass": "^1.29.0",
    "sass-loader": "^10.0.3"
  },
  "peerDependencies": {
    "mini-css-extract-plugin": ">=0.9.0 <1.0.0",
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-scss/tests/index.test.js
================================================
'use strict';

const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');

const plugin = require('../index');
const {
  cssLoaderFinder,
  postCssLoaderFinder,
  resolveUrlLoaderFinder,
  sassLoaderFinder,
  styleLoaderFinder,
} = require('../helpers');

const webDevLoaderTests = [
  {
    name: 'should add style-loader',
    loaderFinder: styleLoaderFinder,
  },
  {
    name: 'should add css-loader',
    loaderFinder: cssLoaderFinder,
  },
  {
    name: 'should add postcss-loader',
    loaderFinder: postCssLoaderFinder,
  },
  {
    name: 'should add resolve-url-loader',
    loaderFinder: resolveUrlLoaderFinder,
  },
  {
    name: 'should add sass-loader',
    loaderFinder: sassLoaderFinder,
  },
];

const webProdLoaderTests = [
  {
    name: 'should not add style-loader (using mini-extract-css-plugin loader)',
    loaderFinder: styleLoaderFinder,
    status: 'falsy',
  },
  {
    name: 'should add css-loader',
    loaderFinder: cssLoaderFinder,
  },
  {
    name: 'should add postcss-loader',
    loaderFinder: postCssLoaderFinder,
  },
  {
    name: 'should add resolve-url-loader',
    loaderFinder: resolveUrlLoaderFinder,
  },
  {
    name: 'should add sass-loader',
    loaderFinder: sassLoaderFinder,
  },
];

const nodeLoaderTests = [
  {
    name: 'should not add style-loader',
    loaderFinder: styleLoaderFinder,
    status: 'falsy',
  },
  {
    name: 'should add css-loader',
    loaderFinder: cssLoaderFinder,
  },
  {
    name: 'should add postcss-loader',
    loaderFinder: postCssLoaderFinder,
  },
  {
    name: 'should add resolve-url-loader',
    loaderFinder: resolveUrlLoaderFinder,
  },
  {
    name: 'should add sass-loader',
    loaderFinder: sassLoaderFinder,
  },
];

describe('razzle-scss-plugin', () => {
  describe('when creating web config', () => {
    describe('when environment set to development', () => {
      let config;

      beforeAll(async () => {
        config = await createRazzleTestConfig('web', 'dev', {
          plugins: [{ object: plugin }],
        });
      });

      webDevLoaderTests.forEach(test => {
        if (test.status === 'falsy') {
          it(test.name, () => {
            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
          });
        } else {
          it(test.name, () => {
            expect(
              config.module.rules.find(test.loaderFinder)
            ).not.toBeUndefined();
          });
        }
      });
    });

    describe('when environment set to production', () => {
      let config;

      beforeAll(async () => {
        config = await createRazzleTestConfig('web', 'prod', {
          plugins: [{ object: plugin }],
        });
      });

      webProdLoaderTests.forEach(test => {
        if (test.status === 'falsy') {
          it(test.name, () => {
            expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
          });
        } else {
          it(test.name, () => {
            expect(
              config.module.rules.find(test.loaderFinder)
            ).not.toBeUndefined();
          });
        }
      });
    });
  });

  describe('when creating a node config', () => {
    let config;

    beforeAll(async () => {
      config = await createRazzleTestConfig('node', 'prod', {
        plugins: [{ object: plugin }],
      });
    });

    nodeLoaderTests.forEach(test => {
      if (test.status === 'falsy') {
        it(test.name, () => {
          expect(config.module.rules.find(test.loaderFinder)).toBeUndefined();
        });
      } else {
        it(test.name, () => {
          expect(
            config.module.rules.find(test.loaderFinder)
          ).not.toBeUndefined();
        });
      }
    });
  });
});


================================================
FILE: packages/razzle-plugin-svelte/CHANGELOG.md
================================================
# razzle-plugin-svelte

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-svelte/README.md
================================================
# razzle-plugin-svelte

## Installation

```bash
yarn add razzle-plugin-svelte
```

Add it to your `razzle.config.js`:

```js
// razzle.config.js
module.exports = {
  plugins: ['svelte'],
};
```

================================================
FILE: packages/razzle-plugin-svelte/helpers.js
================================================
'use strict';
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

const svelteLoaderFinder = makeLoaderFinder('svelte-loader');
const fileLoaderFinder = makeLoaderFinder('file-loader');

module.exports = {
  fileLoaderFinder,
  svelteLoaderFinder,
};


================================================
FILE: packages/razzle-plugin-svelte/index.js
================================================
"use strict";

module.exports = {
  modifyWebpackOptions(opts) {
    const options = opts.options.webpackOptions;    // Add .svelte to exlude
    options.fileLoaderExclude = [/\.svelte?$/, ...options.fileLoaderExclude];
    return options;
  },
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;    // Add .svelte to extensions

    config.resolve.extensions = [...config.resolve.extensions, '.svelte'];

    config.module.rules.push({
      test: /\.svelte$/,
      loader: require.resolve('svelte-loader'),
      options: {
        preprocess: require('svelte-preprocess')({})
      }
    });

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-svelte/package.json
================================================
{
  "name": "razzle-plugin-svelte",
  "license": "MIT",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-svelte"
  },
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "css-loader": "^5.0.0",
    "svelte": "^3.24.1",
    "svelte-loader": "^2.13.6",
    "svelte-preprocess": "^4.0.10"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18"
  }
}


================================================
FILE: packages/razzle-plugin-svelte/tests/index.test.js
================================================
'use strict';

const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');
const plugin = require('../index');
const { svelteLoaderFinder, fileLoaderFinder } = require('../helpers');

describe('razzle-svelte-plugin', () => {
  let config;
  beforeAll(async () => {
    config = await createRazzleTestConfig('web', 'dev', {
      plugins: [{ object: plugin }],
    });
    console.log(config);
  });

  it('should add .svelte', () => {
    expect(config.resolve.extensions).toContain('.svelte');
  });

  it('should add svelte-loader', () => {
    const rule = config.module.rules.find(svelteLoaderFinder);
    expect(rule).not.toBeUndefined();
  });

  it('should add svelte format to exclude', () => {
    const fileRule = config.module.rules.find(fileLoaderFinder);
    expect(fileRule.exclude).toContainEqual(/\.svelte?$/);
  });
});


================================================
FILE: packages/razzle-plugin-typescript/.eslintrc
================================================
{
  "env": {
    "jest": true,
    "node": true
  }
}

================================================
FILE: packages/razzle-plugin-typescript/CHANGELOG.md
================================================
# razzle-plugin-typescript

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-typescript/README.md
================================================
## razzle-plugin-typescript

This package contains a plugin for using TypeScript with Razzle

Razzle now has support for typescript using babel. Unless you specifically need this plugin we recommend using the builtin support

Use [with-typescript example](https://github.com/jaredpalmer/razzle/tree/master/examples/with-typescript) instead.

## Usage in Razzle Projects

```
yarn add razzle-plugin-typescript
```

Using the plugin with the default options

```js
// razzle.config.js

module.exports = {
  plugins: ['typescript'],
};
```

See full configuration in the [typescript example project](https://github.com/jaredpalmer/razzle/tree/master/examples/with-typescript-plugin).

### With custom options:

```js
// razzle.config.js

module.exports = {
  plugins: [
    {
      name: 'typescript',
      options: {
        useBabel: false,
        tsLoader: {
          transpileOnly: true,
          experimentalWatchApi: true,
        },
        forkTsChecker: {
          eslint: {
            files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
          }
        },
      },
    },
  ],
};
```

## Options

**useBabel: _boolean_** (defaults: false)

Set `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)).

**tsLoader: _TSLoaderOptions_** (defaults: { transpileOnly: true, experimentalWatchApi: true })

Use 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).

**forkTsChecker: _TSCheckerOptions_** (defaults: { async: 'compiler.options.mode === 'development'', typescript: true, eslint: undefined, issue: {}, formatter: 'codeframe', logger: { infrastructure: 'silent', issues: 'console', devServer: true } })

Use 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).


================================================
FILE: packages/razzle-plugin-typescript/helpers.js
================================================
'use strict';
const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');

const babelLoaderFinder = makeLoaderFinder('babel-loader');
const tsLoaderFinder = makeLoaderFinder('ts-loader');

module.exports = {
  babelLoaderFinder,
  tsLoaderFinder,
};


================================================
FILE: packages/razzle-plugin-typescript/index.js
================================================
'use strict';

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { babelLoaderFinder } = require('./helpers');

const defaultOptions = {
  useBabel: false,
  tsLoader: {
    transpileOnly: true,
    experimentalWatchApi: true,
  },
  forkTsChecker: {
    eslint: {
      files: './src/**/*.{ts,tsx,js,jsx}',
    }
  },
};

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    const options = Object.assign(
      {},
      defaultOptions,
      opts.options.pluginOptions
    );

    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.tsx'];

    // Safely locate Babel-Loader in Razzle's webpack internals
    const babelLoader = config.module.rules.find(babelLoaderFinder);
    if (!babelLoader) {
      throw new Error(
        `'babel-loader' was erased from config, we need it to define 'include' option for 'ts-loader'`
      );
    }

    // don't allow babel-loader to transpile typescript
    babelLoader.exclude = [/\.ts$/, /\.tsx$/];

    // Get the correct `include` option, since that hasn't changed.
    // This tells Razzle which directories to transform.
    const { include } = babelLoader;

    // Configure ts-loader
    const tsLoader = {
      include,
      test: /\.tsx?$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: Object.assign({}, defaultOptions.tsLoader, options.tsLoader),
        },
      ],
    };

    if (options.useBabel) {
      // If using babel, also add babel-loader to ts files,
      // so we can use babel plugins on tsx files too
      tsLoader.use = [...babelLoader.use, ...tsLoader.use];
    } else {
      // If not using babel, remove it
      config.module.rules = config.module.rules.filter(
        rule => !babelLoaderFinder(rule)
      );
    }

    config.module.rules.push(tsLoader);

    // Do typechecking in a separate process,
    // We can run it only in client builds.
    if (opts.env.target === 'web') {
      config.plugins.push(
        new ForkTsCheckerWebpackPlugin(
          Object.assign({}, defaultOptions.forkTsChecker, options.forkTsChecker)
        )
      );
      if (opts.env.dev) {
        // As suggested by Microsoft's Outlook team, these optimizations
        // crank up Webpack x TypeScript perf.
        // @see https://medium.com/@kenneth_chau/speeding-up-webpack-typescript-incremental-builds-by-7x-3912ba4c1d15
        config.output.pathinfo = false;
        config.optimization = {
          removeAvailableModules: false,
          removeEmptyChunks: false,
          splitChunks: false,
        };
      }
    }

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-typescript/package.json
================================================
{
  "name": "razzle-plugin-typescript",
  "version": "4.2.18",
  "description": "Use TypeScript with Razzle",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-typescript"
  },
  "author": "Lucas Terra <lucasterra7@gmail.com>",
  "license": "MIT",
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "fork-ts-checker-webpack-plugin": "^5.2.0",
    "ts-loader": "^8.0.4",
    "typescript": ">=4.0.3"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18",
    "webpack": "~4||~5"
  }
}


================================================
FILE: packages/razzle-plugin-typescript/tests/index.test.js
================================================
'use strict';

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const createRazzleTestConfig = require('razzle/config/createRazzleTestConfig');
const plugin = require('../index');
const { babelLoaderFinder, tsLoaderFinder } = require('../helpers');

describe('razzle-typescript-plugin', () => {
  describe('with useBabel=false', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('web', 'dev', {
        plugins: [{ object: plugin, options: { useBabel: false } }],
      });
      done();
    });

    it('should add .ts and .tsx to extensions', () => {
      expect(config.resolve.extensions).toContain('.ts');
      expect(config.resolve.extensions).toContain('.tsx');
    });

    it('should add ts-loader', () => {
      const rule = config.module.rules.find(tsLoaderFinder);
      expect(rule).not.toBeUndefined();
    });

    it('should add fork-ts-checker-webpack-plugin', () => {
      const tsCheckerPlugin = config.plugins.find(
        plugin => plugin instanceof ForkTsCheckerWebpackPlugin
      );

      expect(tsCheckerPlugin).not.toBeUndefined();
    });

    it('should remove babel-loader', () => {
      const rule = config.module.rules.find(babelLoaderFinder);
      expect(rule).toBeUndefined();
    });
  });

  describe('with useBabel=true', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('web', 'dev', {
        plugins: [{ object: plugin, options: { useBabel: true } }],
      });
      done();
    });

    it('should keep babel-loader', () => {
      const rule = config.module.rules.find(babelLoaderFinder);
      expect(rule).not.toBeUndefined();
    });

    it('should add babel-loader to .ts and .tsx files too', () => {
      const tsLoader = config.module.rules.find(tsLoaderFinder);
      const babelLoader = tsLoader.use.find(babelLoaderFinder);

      expect(babelLoader).not.toBeUndefined();
    });
  });

  describe('when creating a server config', () => {
    let config;
    beforeAll(async done => {
      config = await createRazzleTestConfig('node', 'dev', {
        disableStartServer: true,
        plugins: [{ object: plugin, options: {} }],
      });
      done();
    });

    it('should not add fork-ts-checker-webpack-plugin', () => {
      const tsCheckerPlugin = config.plugins.find(
        plugin => plugin instanceof ForkTsCheckerWebpackPlugin
      );

      expect(tsCheckerPlugin).toBeUndefined();
    });
  });
});


================================================
FILE: packages/razzle-plugin-vue/CHANGELOG.md
================================================
# razzle-plugin-vue

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

- Updated dependencies [[`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c)]:
  - razzle@4.2.18
  - razzle-dev-utils@4.2.18

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

* Updated dependencies [[`eff6d885`](https://github.com/jaredpalmer/razzle/commit/eff6d88545e0eef22b43b7426cd6d5437eadc341), [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7)]:
  - razzle@4.2.17
  - razzle-dev-utils@4.2.17

## 4.2.16

### Patch Changes

- dc4c7870: add changesets
- Updated dependencies [dc4c7870]
  - razzle@4.2.16
  - razzle-dev-utils@4.2.16


================================================
FILE: packages/razzle-plugin-vue/README.md
================================================
# razzle-plugin-vue

## Installation

```bash
yarn add razzle-plugin-vue
```

Add it to your `razzle.config.js`:

```js
// razzle.config.js

module.exports = {
  plugins: ['vue'],
};
```


================================================
FILE: packages/razzle-plugin-vue/index.js
================================================
'use strict';

const WebpackConfigHelpers = require('razzle-dev-utils/WebpackConfigHelpers');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

const Helpers = new WebpackConfigHelpers(process.cwd());

module.exports = {
  modifyWebpackConfig(opts) {
    const config = Object.assign({}, opts.webpackConfig);

    // Add .vue to extensions
    config.resolve.extensions = [...config.resolve.extensions, '.vue'];

    // Alias ESM module
    config.resolve.alias = Object.assign({}, config.resolve.alias, {
      vue$: 'vue/dist/vue.esm.js',
    });

    // Replace the default CSS loader with Vue's
    const cssLoaderFinder = Helpers.makeLoaderFinder('css-loader');

    config.module.rules = config.module.rules.filter(
      rule => !cssLoaderFinder(rule)
    );

    config.module.rules.push({
      test: /\.vue$/,
        use: [{
        loader: require.resolve('vue-loader'),
        ident: 'razzle-vue-loader'
      }]
    });

    config.module.rules.unshift({
      test: /\.css$/,
      use: [{
          loader: require.resolve('vue-style-loader'),
          ident: 'razzle-vue-style-loader'
        }, {
          loader: require.resolve('css-loader'),
          ident: 'razzle-css-loader'
      }] // https://github.com/vuejs/vue-loader
    });

    config.plugins.push(new VueLoaderPlugin());

    return config;
  },
};


================================================
FILE: packages/razzle-plugin-vue/package.json
================================================
{
  "name": "razzle-plugin-vue",
  "license": "MIT",
  "version": "4.2.18",
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-plugin-vue"
  },
  "main": "index.js",
  "dependencies": {
    "css-loader": "^5.0.0",
    "vue": "^2.6.12",
    "vue-loader": "^15.9.6",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.12"
  },
  "peerDependencies": {
    "razzle": "4.2.18",
    "razzle-dev-utils": "4.2.18",
    "webpack": "~4||~5"
  }
}


================================================
FILE: packages/razzle-start-server-webpack-plugin/.babelrc
================================================
{
  "presets": [["@babel/env", {"targets": {"node": "10"}}]],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}


================================================
FILE: packages/razzle-start-server-webpack-plugin/.nvmrc
================================================
v10.22.1


================================================
FILE: packages/razzle-start-server-webpack-plugin/CHANGELOG.md
================================================
# Change Log

## 4.2.18

### Patch Changes

- [`fa491cd8`](https://github.com/jaredpalmer/razzle/commit/fa491cd849c1d1a63953bc91812b1d0889597c0c) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add support for type:module razzle.config.js

## 4.2.17

### Patch Changes

- [`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

* [`341680c1`](https://github.com/jaredpalmer/razzle/commit/341680c1074131baac9940eb3b72a5a1b097c1e7) Thanks [@fivethreeo](https://github.com/fivethreeo)! - add changeset packages

## 4.2.16

### Patch Changes

- dc4c7870: add changesets

All notable changes to this project will be documented in this file.

This project adheres to [Semantic Versioning](http://semver.org/).

## 2018-03-06 - [2.2.5 - current version]

- 2.2.5 - ([24](https://github.com/ericclemmons/start-server-webpack-plugin/pull/24)) - Fixes (@wmertens)

## 2018-03-05

- 2.2.4 - ([21](https://github.com/ericclemmons/start-server-webpack-plugin/pull/21)) - Update deps (@wmertens)

## 2018-03-05 - [2.2.3 - current version]

- 2.2.3 - ([7696962](https://github.com/ericclemmons/start-server-webpack-plugin/commit/769696228460912178a982f8c2594d5376a2230e)) - gsv: also push and publish (@wmertens)
- ([21](https://github.com/ericclemmons/start-server-webpack-plugin/pull/21)) - Update deps (@wmertens)

## 2018-03-04

- ([18](https://github.com/ericclemmons/start-server-webpack-plugin/pull/18)) - Add the ability to manually restart the server by typing rs (@tikotzky)
- ([17](https://github.com/ericclemmons/start-server-webpack-plugin/pull/17)) - Send a signal to the server process for HMR (@tikotzky)
- ([20](https://github.com/ericclemmons/start-server-webpack-plugin/pull/20)) - Add support for the new Webpack 4 Hooks API (@Nayni)

## 2018-02-02

- ([16](https://github.com/ericclemmons/start-server-webpack-plugin/pull/16)) - Allow setting of inspectPort (@eligolding)

## 2018-01-15

- ([15](https://github.com/ericclemmons/start-server-webpack-plugin/pull/15)) - Fix broken link (@njradford)

## 2017-04-10

- ([11](https://github.com/ericclemmons/start-server-webpack-plugin/pull/11)) - Add options `name`, `nodeArgs`, `args` (@wmertens)

## 2017-02-27

- ([18bdabf](https://github.com/ericclemmons/start-server-webpack-plugin/commit/18bdabf3b76a4a938c4b843193642925b4ab8e0b)) - Export via module.exports (@ericclemmons)

## 2016-10-27

- ([6e3d51f](https://github.com/ericclemmons/start-server-webpack-plugin/commit/6e3d51f3029aa5d7d6774a8cc90ec2c3cc13f3c7)) - v2.1.0 Allow specifying the entry to run after build. (@wmertens)
- ([7](https://github.com/ericclemmons/start-server-webpack-plugin/pull/7)) - Allow specifying entry to run (@wmertens)

## 2016-06-05

- ([4](https://github.com/ericclemmons/start-server-webpack-plugin/pull/4)) - Fix for Server-Side HMR (@ericclemmons)

## 2016-04-11

- ([1](https://github.com/ericclemmons/start-server-webpack-plugin/pull/1)) - Initial release (@ericclemmons)
- ([24155cc](https://github.com/ericclemmons/start-server-webpack-plugin/commit/24155cc7cb93d7719aaec52c5cab22929d6fa882)) - Initial commit (@ericclemmons)


================================================
FILE: packages/razzle-start-server-webpack-plugin/LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2016 Eric Clemmons

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: packages/razzle-start-server-webpack-plugin/README.md
================================================
# start-server-webpack-plugin

> Automatically start your server once Webpack's build completes + handle hot reloading (HMR)

[![travis build](https://img.shields.io/travis/ericclemmons/start-server-webpack-plugin.svg)](https://travis-ci.org/ericclemmons/start-server-webpack-plugin)
[![version](https://img.shields.io/npm/v/start-server-webpack-plugin.svg)](http://npm.im/start-server-webpack-plugin)
[![downloads](https://img.shields.io/npm/dm/start-server-webpack-plugin.svg)](http://npm-stat.com/charts.html?package=start-server-webpack-plugin)
[![MIT License](https://img.shields.io/npm/l/start-server-webpack-plugin.svg)](http://opensource.org/licenses/MIT)

### Installation

```shell
$ npm install --save-dev start-server-webpack-plugin
```

### Usage

In `webpack.config.server.babel.js`:

```js
import StartServerPlugin from "start-server-webpack-plugin";

export default {
  ...
  plugins: [
    ...
    // Only use this in DEVELOPMENT
    new StartServerPlugin({
      // print server logs
      verbose: true,
      // print plugin/server errors
      debug: false,
      // name of the entry to run, defaults to 'main'
      entryName: 'server',
      // any arguments to nodejs when running the entry, this one allows debugging
      nodeArgs: ['--inspect-brk'],
      // any arguments to pass to the script
      scriptArgs: ['scriptArgument1', 'scriptArgument2'],
      // Allow typing 'rs' to restart the server. default: only if NODE_ENV is 'development'
      restartable: true | false,
      // Only run the server once (default: false)
      once: false | true,
    }),
    ...
  ],
  ...
}
```

The `entryName` argument defaults to `"main"`, which is the name Webpack uses if you use the string or array versions of the `entry` option.

You 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.

To use Hot Module Reloading with your server code, set Webpack to "hot" and "watch" modes.
This 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.

### Upgrading from v2

- Remove the `name` option and define `entryName` if it's not just `"main"`
- Remove any hot reloading additions

### License

> MIT License 2016-2018 © Eric Clemmons


================================================
FILE: packages/razzle-start-server-webpack-plugin/dist/StartServerPlugin.js
================================================
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _path = _interopRequireDefault(require("path"));

var _child_process = _interopRequireDefault(require("child_process"));

var _webpack = _interopRequireDefault(require("webpack"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const webpackMajorVersion = typeof _webpack.default.version !== 'undefined' ? parseInt(_webpack.default.version[0]) : 3;

class StartServerPlugin {
  constructor(options) {
    if (options == null) {
      options = {};
    }

    if (typeof options === 'string') {
      options = {
        entryName: options
      };
    }

    this.options = Object.assign({
      verbose: true,
      // print logs
      entryName: 'main',
      // What to run
      once: false,
      // Run once and exit when worker exits
      nodeArgs: [],
      // Node arguments for worker
      scriptArgs: [],
      // Script arguments for worker
      signal: false,
      // Send a signal instead of a message
      // Only listen on keyboard in development, so the server doesn't hang forever
      restartable: process.env.NODE_ENV === 'development',
      inject: true,
      // inject monitor to script
      killOnExit: true,
      // issue SIGKILL on child process exit
      killOnError: true,
      // issue SIGKILL on child process error
      killTimeout: 1000 // timeout before SIGKILL in milliseconds

    }, options);

    if (this.options.args) {
      throw new Error('options.args is now options.scriptArgs');
    }

    if (!Array.isArray(this.options.scriptArgs)) {
      throw new Error('options.args has to be an array of strings');
    }

    if (this.options.signal === true) {
      this.options.signal = 'SIGUSR2';
      this.options.inject = false;
    }

    this.afterEmit = this.afterEmit.bind(this);
    this.apply = this.apply.bind(this);
    this._handleChildError = this._handleChildError.bind(this);
    this._handleChildExit = this._handleChildExit.bind(this);
    this._handleChildQuit = this._handleChildQuit.bind(this);
    this._handleChildMessage = this._handleChildMessage.bind(this);
    this._handleWebpackExit = this._handleWebpackExit.bind(this);
    this._handleProcessKill = this._handleProcessKill.bind(this);
    this.worker = null;

    if (this.options.restartable && !options.once) {
      this._enableRestarting();
    }
  }

  _info(msg, ...args) {
    if (this.options.verbose) console.log(`sswp> ${msg}`, ...args);
  }

  _error(msg, ...args) {
    console.error(`sswp> !!! ${msg}`, ...args);
  }

  _worker_error(msg, ...args) {
    process.stderr.write(msg);
  }

  _worker_info(msg, ...args) {
    process.stdout.write(msg);
  }

  _enableRestarting() {
    this._info('Type `rs<Enter>` to restart the worker');

    process.stdin.setEncoding('utf8');
    process.stdin.on('data', data => {
      if (data.trim() === 'rs') {
        if (this.worker) {
          this._info('Killing worker...');

          process.kill(this.worker.pid);
        } else {
          this._runWorker();
        }
      }
    });
  }

  _getScript(compilation) {
    const {
      entryName
    } = this.options;
    const entrypoints = compilation.entrypoints;
    const entry = entrypoints.get ? entrypoints.get(entryName) : entrypoints[entryName];

    if (!entry) {
      this._info('compilation: %O', compilation);

      throw new Error(`Requested entry "${entryName}" does not exist, try one of: ${(entrypoints.keys ? entrypoints.keys() : Object.keys(entrypoints)).join(' ')}`);
    }

    const runtimeChunk = _webpack.default.EntryPlugin && (entry.runtimeChunk || entry._entrypointChunk);
    const runtimeChunkFiles = runtimeChunk && runtimeChunk.files && runtimeChunk.files.values();
    const entryScript = runtimeChunkFiles && runtimeChunkFiles.next().value || ((entry.chunks[0] || {}).files || [])[0];

    if (!entryScript) {
      this._error("Entry chunk not outputted: %O", entry);

      return;
    }

    const {
      path
    } = compilation.outputOptions;
    return _path.default.resolve(path, entryScript);
  }

  _getExecArgv() {
    const {
      options
    } = this;
    const execArgv = (options.nodeArgs || []).concat(process.execArgv);
    return execArgv;
  }

  _handleChildQuit() {
    this.worker = null;
  }

  _handleChildExit(code, signal) {
    this._error(`Script exited with ${signal ? `signal ${signal}` : `code ${code}`}`);

    this.worker = null;

    if (code === 143 || signal === 'SIGTERM') {
      if (!this.workerLoaded) {
        this._error('Script did not load, or HMR failed; not restarting');

        return;
      }

      if (this.options.once) {
        this._info('Only running script once, as requested');

        return;
      }

      this.workerLoaded = false;

      this._runWorker();

      return;
    }

    if (this.options.killOnExit) {
      this._handleProcessKill();
    }
  }

  _handleWebpackExit() {
    if (this.worker) {
      process.kill(this.worker.pid, 'SIGINT');
    }
  }

  _handleChildError(err) {
    this._error('Script errored');

    this.worker = null;

    if (this.options.killOnError) {
      this._handleProcessKill();
    }
  }

  _handleProcessKill() {
    const pKill = () => process.kill(process.pid, 'SIGKILL');

    if (!isNaN(this.options.killTimeout)) {
      setTimeout(pKill, this.options.killTimeout);
    } else {
      pKill();
    }
  }

  _handleChildMessage(message) {
    if (message === 'SSWP_LOADED') {
      this.workerLoaded = true;

      this._info('Script loaded');

      if (process.env.NODE_ENV === 'test' && this.options.once) {
        process.kill(this.worker.pid);
      }
    } else if (message === 'SSWP_HMR_FAIL') {
      this.workerLoaded = false;
    }
  }

  _runWorker(callback) {
    if (this.worker) return;
    const {
      scriptFile,
      options: {
        scriptArgs
      }
    } = this;

    const execArgv = this._getExecArgv();

    const extScriptArgs = ['--color', '--ansi', ...scriptArgs];

    if (this.options.verbose) {
      const cmdline = [...execArgv, scriptFile, '--', ...extScriptArgs].join(' ');

      this._info(`running \`node ${cmdline}\``);
    }

    const worker = _child_process.default.fork(scriptFile, extScriptArgs, {
      execArgv,
      silent: true,
      env: Object.assign(process.env, {
        FORCE_COLOR: 3
      })
    });

    worker.on('exit', this._handleChildExit);
    worker.on('quit', this._handleChildQuit);
    worker.on('error', this._handleChildError);
    worker.on('message', this._handleChildMessage);
    worker.stdout.on('data', this._worker_info);
    worker.stderr.on('data', this._worker_error);
    process.on('SIGINT', this._handleWebpackExit);
    this.worker = worker;
    if (callback) callback();
  }

  _hmrWorker(compilation, callback) {
    const {
      worker,
      options: {
        signal
      }
    } = this;

    if (signal) {
      process.kill(worker.pid, signal);
    } else if (worker.send) {
      worker.send('SSWP_HMR');
    } else {
      this._error('hot reloaded but no way to tell the worker');
    }

    callback();
  }

  afterEmit(compilation, callback) {
    this.scriptFile = this._getScript(compilation);

    if (this.worker) {
      return this._hmrWorker(compilation, callback);
    }

    if (!this.scriptFile) return;

    this._runWorker(callback);
  }

  _getMonitor() {
    const loaderPath = require.resolve('./monitor-loader');

    return `!!${loaderPath}!${loaderPath}`;
  }

  _amendEntry(entry) {
    if (typeof entry === 'function') return (...args) => Promise.resolve(entry(...args)).then(this._amendEntry.bind(this));

    const monitor = this._getMonitor();

    if (typeof entry === 'string') return [entry, monitor];
    if (Array.isArray(entry)) return [...entry, monitor];

    if (typeof entry === 'object') {
      return Object.assign({}, entry, {
        [this.options.entryName]: this._amendEntry(entry[this.options.entryName])
      });
    }

    throw new Error('Cannot parse webpack `entry` option: %O', entry);
  }

  apply(compiler) {
    const inject = this.options.inject; // webpack v4+

    if (webpackMajorVersion >= 4) {
      const plugin = {
        name: 'StartServerPlugin'
      }; // webpack v5+

      if (webpackMajorVersion >= 5) {
        if (inject) {
          compiler.hooks.make.tap(plugin, compilation => {
            compilation.addEntry(compilation.compiler.context, _webpack.default.EntryPlugin.createDependency(this._getMonitor(), {
              name: this.options.entryName
            }), this.options.entryName, () => {});
          });
        }
      } else {
        if (inject) {
          compiler.options.entry = this._amendEntry(compiler.options.entry);
        }
      }

      compiler.hooks.afterEmit.tapAsync(plugin, this.afterEmit);
    } else {
      // webpack v3-
      if (inject) {
        compiler.options.entry = this._amendEntry(compiler.options.entry);
      }

      compiler.plugin('after-emit', this.afterEmit);
    }
  }

}

exports.default = StartServerPlugin;
module.exports = StartServerPlugin;

================================================
FILE: packages/razzle-start-server-webpack-plugin/dist/monitor-loader.js
================================================
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _monitor = _interopRequireDefault(require("./monitor"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// This loader just returns the monitor source
// this way it can be embedded without processing or messing with external handling
const monitorSrc = `(${_monitor.default.toString()})()`;

const loader = function () {
  return monitorSrc;
};

var _default = loader;
exports.default = _default;

================================================
FILE: packages/razzle-start-server-webpack-plugin/dist/monitor.js
================================================
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

// Monitor server script startup and reload. Should be added at the end of entries
const monitorFn = () => {
  // Handle hot updates, copied with slight adjustments from webpack/hot/signal.js
  if (module.hot) {
    const log = (type, msg) => console[type](`sswp> ${msg}`); // TODO don't show this when sending signal instead of message


    log('log', 'Handling Hot Module Reloading');

    var checkForUpdate = function checkForUpdate(fromUpdate) {
      module.hot.check().then(function (updatedModules) {
        if (!updatedModules) {
          if (fromUpdate) log('log', 'Update applied.');else log('warn', 'Cannot find update.');
          return;
        }

        return module.hot.apply({
          ignoreUnaccepted: true,
          // TODO probably restart
          onUnaccepted: function (data) {
            log('warn', '\u0007Ignored an update to unaccepted module ' + data.chain.join(' -> '));
          }
        }).then(function (renewedModules) {
          require('webpack/hot/log-apply-result')(updatedModules, renewedModules);

          checkForUpdate(true);
        });
      }).catch(function (err) {
        var status = module.hot.status();

        if (['abort', 'fail'].indexOf(status) >= 0) {
          if (process.send) {
            process.send('SSWP_HMR_FAIL');
          }

          log('warn', 'Cannot apply update.');
          log('warn', '' + err.stack || err.message);
          log('error', 'Quitting process - will reload on next file change\u0007\n\u0007\n\u0007');
          process.exit(222);
        } else {
          log('warn', 'Update failed: ' + err.stack || err.message);
        }
      });
    };

    process.on('message', function (message) {
      if (message !== 'SSWP_HMR') return;

      if (module.hot.status() !== 'idle') {
        log('warn', 'Got signal but currently in ' + module.hot.status() + ' state.');
        log('warn', 'Need to be in idle state to start hot update.');
        return;
      }

      checkForUpdate();
    });
  } // Tell our plugin we loaded all the code without initially crashing


  if (process.send) {
    process.send('SSWP_LOADED');
  }
};

var _default = monitorFn;
exports.default = _default;

================================================
FILE: packages/razzle-start-server-webpack-plugin/package.json
================================================
{
  "name": "razzle-start-server-webpack-plugin",
  "version": "4.2.18",
  "description": "Automatically start your server once Webpack's build completes.",
  "main": "dist/StartServerPlugin.js",
  "files": [
    "dist"
  ],
  "scripts": {
    "prebuild": "rimraf dist",
    "build": "babel src -d dist",
    "release": "github-semantic-version --bump --changelog --push --publish",
    "prepublishOnly": "yarn run build",
    "pretest": "yarn run build",
    "test-project": "sh test/test-project.sh test-project",
    "test-project-hmr": "sh test/test-project.sh test-project-hmr",
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com:jaredpalmer/razzle.git",
    "directory": "packages/razzle-start-server-webpack-plugin"
  },
  "keywords": [
    "webpack",
    "server",
    "start",
    "watch",
    "restart",
    "express"
  ],
  "author": "Eric Clemmons <eric@smarterspam.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/jaredpalmer/razzle/issues"
  },
  "homepage": "https://github.com/jaredpalmer/razzle",
  "gsv": {
    "majorLabel": "Version: Major",
    "minorLabel": "Version: Minor",
    "patchLabel": "Version: Patch"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
    "@babel/preset-env": "^7.8.7",
    "@babel/register": "^7.8.6",
    "expect": "^22.4.0",
    "express": "^4.17.1",
    "mocha": "^5.0.1",
    "rimraf": "^2.6.2"
  },
  "peerDependencies": {
    "webpack": "~4||~5"
  }
}


================================================
FILE: packages/razzle-start-server-webpack-plugin/src/StartServerPlugin.js
================================================
import sysPath from 'path';
import childProcess from 'child_process';
import webpack from 'webpack';

const webpackMajorVersion =
  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;

export default class StartServerPlugin {
  constructor(options) {
    if (options == null) {
      options = {};
    }
    if (typeof options === 'string') {
      options = {entryName: options};
    }
    this.options = Object.assign(
      {
        verbose: true, // print logs
        entryName: 'main', // What to run
        once: false, // Run once and exit when worker exits
        nodeArgs: [], // Node arguments for worker
        scriptArgs: [], // Script arguments for worker
        signal: false, // Send a signal instead of a message
        // Only listen on keyboard in development, so the server doesn't hang forever
        restartable: process.env.NODE_ENV === 'development',
        inject: true, // inject monitor to script
        killOnExit: true, // issue SIGKILL on child process exit
        killOnError: true, // issue SIGKILL on child process error
        killTimeout: 1000, // timeout before SIGKILL in milliseconds
      },
      options
    );
    if (this.options.args) {
      throw new Error('options.args is now options.scriptArgs');
    }
    if (!Array.isArray(this.options.scriptArgs)) {
      throw new Error('options.args has to be an array of strings');
    }
    if (this.options.signal === true) {
      this.options.signal = 'SIGUSR2';
      this.options.inject = false;
    }
    this.afterEmit = this.afterEmit.bind(this);
    this.apply = this.apply.bind(this);
    this._handleChildError = this._handleChildError.bind(this);
    this._handleChildExit = this._handleChildExit.bind(this);
    this._handleChildQuit = this._handleChildQuit.bind(this);
    this._handleChildMessage = this._handleChildMessage.bind(this);
    this._handleWebpackExit = this._handleWebpackExit.bind(this);
    this._handleProcessKill = this._handleProcessKill.bind(this);

    this.worker = null;
    if (this.options.restartable && !options.once) {
      this._enableRestarting();
    }
  }

  _info(msg, ...args) {
    if (this.options.verbose) console.log(`sswp> ${msg}`, ...args);
  }

  _error(msg, ...args) {
    console.error(`sswp> !!! ${msg}`, ...args);
  }

  _worker_error(msg, ...args) {
    process.stderr.write(msg);
  }

  _worker_info(msg, ...args) {
    process.stdout.write(msg);
  }

  _enableRestarting() {
    this._info('Type `rs<Enter>` to restart the worker');
    process.stdin.setEncoding('utf8');
    process.stdin.on('data', (data) => {
      if (data.trim() === 'rs') {
        if (this.worker) {
          this._info('Killing worker...');
          process.kill(this.worker.pid);
        } else {
          this._runWorker();
        }
      }
    });
  }

  _getScript(compilation) {
    const {entryName} = this.options;
    const entrypoints = compilation.entrypoints;
    const entry = entrypoints.get
      ? entrypoints.get(entryName)
      : entrypoints[entryName];
    if (!entry) {
      this._info('compilation: %O', compilation);
      throw new Error(
        `Requested entry "${entryName}" does not exist, try one of: ${(entrypoints.keys
          ? entrypoints.keys()
          : Object.keys(entrypoints)
        ).join(' ')}`
      );
    }

    const runtimeChunk = webpack.EntryPlugin && (entry.runtimeChunk || entry._entrypointChunk)
    const runtimeChunkFiles = runtimeChunk && runtimeChunk.files && runtimeChunk.files.values()
    const entryScript = (runtimeChunkFiles && runtimeChunkFiles.next().value) || ((entry.chunks[0] || {}).files || [])[0]
    if (!entryScript) {
      this._error("Entry chunk not outputted: %O", entry)
      return
    }
    const {path} = compilation.outputOptions;
    return sysPath.resolve(path, entryScript);
  }
  _getExecArgv() {
    const {options} = this;
    const execArgv = (options.nodeArgs || []).concat(process.execArgv);
    return execArgv;
  }

  _handleChildQuit() {
    this.worker = null;
  }

  _handleChildExit(code, signal) {
    this._error(`Script exited with ${signal ? `signal ${signal}` : `code ${code}`}`);
    this.worker = null;

    if (code === 143 || signal === 'SIGTERM') {
      if (!this.workerLoaded) {
        this._error('Script did not load, or HMR failed; not restarting');
        return;
      }
      if (this.options.once) {
        this._info('Only running script once, as requested');
        return;
      }

      this.workerLoaded = false;
      this._runWorker();
      return;
    }

    if (this.options.killOnExit) {
      this._handleProcessKill();
    }
  }

  _handleWebpackExit() {
    if (this.worker) {
      process.kill(this.worker.pid, 'SIGINT');
    }
  }

  _handleChildError(err) {
    this._error('Script errored');
    this.worker = null;

    if (this.options.killOnError) {
      this._handleProcessKill();
    }
  }

  _handleProcessKill() {
    const pKill = () => process.kill(process.pid, 'SIGKILL');

    if (!isNaN(this.options.killTimeout)) {
      setTimeout(pKill, this.options.killTimeout);
    } else {
      pKill();
    }
  }

  _handleChildMessage(message) {
    if (message === 'SSWP_LOADED') {
      this.workerLoaded = true;
      this._info('Script loaded');
      if (process.env.NODE_ENV === 'test' && this.options.once) {
        process.kill(this.worker.pid);
      }
    } else if (message === 'SSWP_HMR_FAIL') {
      this.workerLoaded = false;
    }
  }

  _runWorker(callback) {
    if (this.worker) return;
    const {
      scriptFile,
      options: {scriptArgs},
    } = this;

    const execArgv = this._getExecArgv();
    const extScriptArgs = ['--color', '--ansi', ...scriptArgs];

    if (this.options.verbose) {
      const cmdline = [...execArgv, scriptFile, '--', ...extScriptArgs].join(' ');
      this._info(`running \`node ${cmdline}\``);
    }

    const worker = childProcess.fork(scriptFile, extScriptArgs, {
      execArgv,
      silent: true,
      env: Object.assign(process.env, { FORCE_COLOR: 3 })
    });
    worker.on('exit', this._handleChildExit);
    worker.on('quit', this._handleChildQuit);
    worker.on('error', this._handleChildError);
    worker.on('message', this._handleChildMessage);
    worker.stdout.on('data', this._worker_info);
    worker.stderr.on('data', this._worker_error);

    process.on('SIGINT', this._handleWebpackExit);

    this.worker = worker;

    if (callback) callback();
  }

  _hmrWorker(compilation, callback) {
    const {
      worker,
      options: {signal},
    } = this;
    if (signal) {
      process.kill(worker.pid, signal);
    } else if (worker.send) {
      worker.send('SSWP_HMR');
    } else {
      this._error('hot reloaded but no way to tell the worker');
    }
    callback();
  }

  afterEmit(compilation, callback) {
    this.scriptFile = this._getScript(compilation);

    if (this.worker) {
      return this._hmrWorker(compilation, callback);
    }

    if (!this.scriptFile) return;

    this._runWorker(callback);
  }

  _getMonitor() {
    const loaderPath = require.resolve('./monitor-loader');
    return `!!${loaderPath}!${loaderPath}`;
  }

  _amendEntry(entry) {
    if (typeof entry === 'function')
      return (...args) =>
        Promise.resolve(entry(...args)).then(this._amendEntry.bind(this));

    const monitor = this._getMonitor();
    if (typeof entry === 'string') return [entry, monitor];
    if (Array.isArray(entry)) return [...entry, monitor];
    if (typeof entry === 'object') {
      return Object.assign({}, entry, {
        [this.options.entryName]: this._amendEntry(
          entry[this.options.entryName]
        ),
      });
    }
    throw new Error('Cannot parse webpack `entry` option: %O', entry);
  }

  apply(compiler) {
    const inject = this.options.inject;
    // webpack v4+
    if (webpackMajorVersion >= 4) {
      const plugin = {name: 'StartServerPlugin'};
      // webpack v5+
      if (webpackMajorVersion >= 5) {
        if (inject) {
          compiler.hooks.make.tap(plugin, (compilation) => {
            compilation.addEntry(
              compilation.compiler.context,
              webpack.EntryPlugin.createDependency(this._getMonitor(), {
                name: this.options.entryName,
              }),
              this.options.entryName,
              () => {}
            );
          });
        }
      } else {
        if (inject) {
          compiler.options.entry = this._amendEntry(compiler.options.entry);
        }
      }
      compiler.hooks.afterEmit.tapAsync(plugin, this.afterEmit);
    } else {
      // webpack v3-
      if (inject) {
        compiler.options.entry = this._amendEntry(compiler.options.entry);
      }
      compiler.plugin('after-emit', this.afterEmit);
    }
  }
}

module.exports = StartServerPlugin;


================================================
FILE: packages/razzle-start-server-webpack-plugin/src/monitor-loader.js
================================================
// This loader just returns the monitor source
// this way it can be embedded without processing or messing with external handling
import monitorFn from './monitor';

const monitorSrc = `(${monitorFn.toString()})()`;

const loader = function () {
  return monitorSrc;
};

export default loader;


================================================
FILE: packages/razzle-start-server-webpack-plugin/src/monitor.js
================================================
// Monitor server script startup and reload. Should be added at the end of entries
const monitorFn = () => {
  // Handle hot updates, copied with slight adjustments from webpack/hot/signal.js
  if (module.hot) {
    const log = (type, msg) => console[type](`sswp> ${msg}`);
    // TODO don't show this when sending signal instead of message
    log('log', 'Handling Hot Module Reloading');
    var checkForUpdate = function checkForUpdate(fromUpdate) {
      module.hot
        .check()
        .then(function (updatedModules) {
          if (!updatedModules) {
            if (fromUpdate) log('log', 'Update applied.');
            else log('warn', 'Cannot find update.');
            return;
          }

          return module.hot
            .apply({
              ignoreUnaccepted: true,
              // TODO probably restart
              onUnaccepted: function (data) {
                log(
                  'warn',
                  '\u0007Ignored an update to unaccepted module ' +
                    data.chain.join(' -> ')
                );
              },
            })
            .then(function (renewedModules) {
              require('webpack/hot/log-apply-result')(
                updatedModules,
                renewedModules
              );

              checkForUpdate(true);
            });
        })
        .catch(function (err) {
          var status = module.hot.status();
          if (['abort', 'fail'].indexOf(status) >= 0) {
            if (process.send) {
              process.send('SSWP_HMR_FAIL');
            }
            log('warn', 'Cannot apply update.');
            log('warn', '' + err.stack || err.message);
            log(
              'error',
              'Quitting process - will reload on next file change\u0007\n\u0007\n\u0007'
            );
            process.exit(222);
          } else {
            log('warn', 'Update failed: ' + err.stack || err.message);
          }
        });
    };

    process.on('message', function (message) {
      if (message !== 'SSWP_HMR') return;

      if (module.hot.status() !== 'idle') {
        log(
          'warn',
          'Got signal but currently in ' + module.hot.status() + ' state.'
        );
        log('warn', 'Need to be in idle state to start hot update.');
        return;
      }

      checkForUpdate();
    });
  }

  // Tell our plugin we loaded all the code without initially crashing
  if (process.send) {
    process.send('SSWP_LOADED');
  }
};

export default monitorFn;


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/SilentPlugin.js
================================================
import Plugin from '..';

class SilentPlugin extends Plugin {
  _worker_error(msg, ...args) {}

  _worker_info(msg, ...args) {}
}

module.exports = SilentPlugin;


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/cases/test-project/index.js
================================================
// be slightly async to allow HMR code to send to plugin
setTimeout(() => {
  console.log('Test project ran sucessfully');
}, 100);


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/cases/test-project/webpack.config.js
================================================
const path = require('path');
const webpack = require('webpack');
const StartServerPlugin = require('../../SilentPlugin');

const webpackMajorVersion =
  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;

const is_test = process.env.NODE_ENV == 'test';

module.exports = Object.assign(
  {
    watch: !is_test,
    entry: {main: __dirname},
    target: 'node',
    plugins: [new StartServerPlugin({once: true, verbose: !is_test})],
    output: {
      path: path.resolve(__dirname, '..', '..', 'js', 'test-project'),
      filename: 'server.js',
    },
  },
  webpackMajorVersion !== 3 ? {mode: 'development'} : {}
);


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/cases/test-project-hmr/index.js
================================================
// be slightly async to allow HMR code to send to plugin
setTimeout(() => {
  console.log('Test project ran sucessfully');
}, 100);

module.hot.accept();


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/cases/test-project-hmr/webpack.config.js
================================================
const path = require('path');
const webpack = require('webpack');
const StartServerPlugin = require('../../SilentPlugin');

const webpackMajorVersion =
  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;

const is_test = process.env.NODE_ENV == 'test';

module.exports = Object.assign(
  {
    watch: !is_test,
    entry: {main: [__dirname, 'webpack/hot/poll?300', 'webpack/hot/signal']},
    target: 'node',
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new StartServerPlugin({once: is_test, verbose: !is_test}),
    ],
    output: {
      path: path.resolve(__dirname, '..', '..', 'js', 'test-project-hmr'),
      filename: 'server.js',
    },
  },
  webpackMajorVersion !== 3 ? {mode: 'development'} : {}
);


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/index.test.js
================================================
import fs from 'fs';
import path from 'path';
import webpack from 'webpack';
import expect from 'expect';
import {compareDirectory, compareWarning} from './utils';
import Plugin from '..';

const webpackMajorVersion =
  typeof webpack.version !== 'undefined' ? parseInt(webpack.version[0]) : 3;

describe('StartServerPluginWebpackCases', () => {
  const casesDirectory = path.resolve(__dirname, 'cases');
  const outputDirectory = path.resolve(__dirname, 'js');

  for (const directory of fs.readdirSync(casesDirectory)) {
    if (!/^(\.|_)/.test(directory)) {
      // eslint-disable-next-line no-loop-func
      it(`${directory} should compile and start the server`, (done) => {
        const directoryForCase = path.resolve(casesDirectory, directory);
        const outputDirectoryForCase = path.resolve(outputDirectory, directory);
        // eslint-disable-next-line import/no-dynamic-require, global-require
        const webpackConfig = require(path.resolve(
          directoryForCase,
          'webpack.config.js'
        ));

        for (const config of [].concat(webpackConfig)) {
          Object.assign(
            config,
            {
              context: directoryForCase,
              output: Object.assign(
                {
                  path: outputDirectoryForCase,
                },
                config.output
              ),
            },
            config
          );
        }

        webpack(webpackConfig, (err, stats) => {
          if (err) {
            done(err);
            return;
          }

          /*
          // eslint-disable-next-line no-console
          console.log(
            stats.toString({
              context: path.resolve(__dirname, '..'),
              chunks: true,
              chunkModules: true,
              modules: false,
            })
          );
          */

          if (stats.hasErrors()) {
            done(
              new Error(
                stats.toString({
                  context: path.resolve(__dirname, '..'),
                  errorDetails: true,
                })
              )
            );

            return;
          }

          const expectedDirectory = path.resolve(directoryForCase, 'expected');
          const expectedDirectoryByVersion = path.join(
            expectedDirectory,
            `webpack-${webpackMajorVersion}`
          );

          if (fs.existsSync(expectedDirectoryByVersion)) {
            compareDirectory(
              outputDirectoryForCase,
              expectedDirectoryByVersion
            );
          } else if (fs.existsSync(expectedDirectory)) {
            compareDirectory(outputDirectoryForCase, expectedDirectory);
          }

          const expectedWarning = path.resolve(directoryForCase, 'warnings.js');
          if (fs.existsSync(expectedWarning)) {
            const actualWarning = stats.toString({
              all: false,
              warnings: true,
            });
            compareWarning(actualWarning, expectedWarning);
          }

          done();
        });
      }, 10000);
    }
  }
});

describe('StartServerPlugin', function () {
  it('should be `import`-able', function () {
    expect(Plugin).toBeInstanceOf(Function);
  });

  it('should be `require`-able', function () {
    expect(require('..')).toBe(Plugin);
  });

  it('should accept a string entryName', function () {
    const p = new Plugin('test');
    expect(p.options.entryName).toBe('test');
  });

  it('should accept an options object', function () {
    const p = new Plugin({whee: true});
    expect(p.options.whee).toBe(true);
  });

  it('should calculate nodeArgs', function () {
    const p = new Plugin({nodeArgs: ['meep'], scriptArgs: ['moop']});
    const nodeArgs = p._getExecArgv();
    expect(nodeArgs.filter((a) => a === 'meep').length).toBe(1);
  });

  it('should calculate args', function () {
    const p = new Plugin({
      nodeArgs: ['meep'],
      scriptArgs: ['moop', 'bleep', 'third'],
    });
    const args = p.options.scriptArgs;
    expect(args).toEqual(['moop', 'bleep', 'third']);
  });

  it('should accept string entry', function () {
    const p = new Plugin();
    const entry = p._amendEntry('meep');
    expect(entry).toBeInstanceOf(Array);
    expect(entry[0]).toEqual('meep');
    expect(entry[1]).toContain('monitor');
  });
  it('should accept array entry', function () {
    const p = new Plugin();
    const entry = p._amendEntry(['meep', 'moop']);
    expect(entry).toBeInstanceOf(Array);
    expect(entry.slice(0, 2)).toEqual(['meep', 'moop']);
    expect(entry[2]).toContain('monitor');
  });
  it('should accept object entry', function () {
    const p = new Plugin({entryName: 'boom'});
    const entry = p._amendEntry({boom: 'meep', beep: 'foom'});
    expect(entry.beep).toEqual('foom');
    expect(entry.boom).toBeInstanceOf(Array);
    expect(entry.boom[0]).toEqual('meep');
    expect(entry.boom[1]).toContain('monitor');
  });
  it('should accept function entry', function (cb) {
    const p = new Plugin();
    const entryFn = p._amendEntry((arg) => arg);
    expect(entryFn).toBeInstanceOf(Function);
    const entry = entryFn('meep');
    expect(entry).toBeInstanceOf(Promise);
    entry.then((entry) => {
      expect(entry[0]).toEqual('meep');
      expect(entry[1]).toContain('monitor');
      cb();
    });
  });
});


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/js/test-project/server.js
================================================
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({

/***/ "../../../dist/monitor-loader.js!../../../dist/monitor-loader.js":
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** /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 ***!
  \***********************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("(() => {\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");

/***/ }),

/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("// 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?");

/***/ }),

/***/ 0:
/*!********************************************************************************************************************************************************************************************************************************!*\
  !*** 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 ***!
  \********************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("__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");

/***/ })

/******/ });

================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/js/test-project-hmr/server.js
================================================
/******/ (function(modules) { // webpackBootstrap
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	function hotDownloadUpdateChunk(chunkId) {
/******/ 		var chunk = require("./" + "" + chunkId + "." + hotCurrentHash + ".hot-update.js");
/******/ 		hotAddUpdateChunk(chunk.id, chunk.modules);
/******/ 	}
/******/
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	function hotDownloadManifest() {
/******/ 		try {
/******/ 			var update = require("./" + "" + hotCurrentHash + ".hot-update.json");
/******/ 		} catch (e) {
/******/ 			return Promise.resolve();
/******/ 		}
/******/ 		return Promise.resolve(update);
/******/ 	}
/******/
/******/ 	//eslint-disable-next-line no-unused-vars
/******/ 	function hotDisposeChunk(chunkId) {
/******/ 		delete installedChunks[chunkId];
/******/ 	}
/******/
/******/ 	var hotApplyOnUpdate = true;
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	var hotCurrentHash = "a0368f43305e48de2ec2";
/******/ 	var hotRequestTimeout = 10000;
/******/ 	var hotCurrentModuleData = {};
/******/ 	var hotCurrentChildModule;
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	var hotCurrentParents = [];
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	var hotCurrentParentsTemp = [];
/******/
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	function hotCreateRequire(moduleId) {
/******/ 		var me = installedModules[moduleId];
/******/ 		if (!me) return __webpack_require__;
/******/ 		var fn = function(request) {
/******/ 			if (me.hot.active) {
/******/ 				if (installedModules[request]) {
/******/ 					if (installedModules[request].parents.indexOf(moduleId) === -1) {
/******/ 						installedModules[request].parents.push(moduleId);
/******/ 					}
/******/ 				} else {
/******/ 					hotCurrentParents = [moduleId];
/******/ 					hotCurrentChildModule = request;
/******/ 				}
/******/ 				if (me.children.indexOf(request) === -1) {
/******/ 					me.children.push(request);
/******/ 				}
/******/ 			} else {
/******/ 				console.warn(
/******/ 					"[HMR] unexpected require(" +
/******/ 						request +
/******/ 						") from disposed module " +
/******/ 						moduleId
/******/ 				);
/******/ 				hotCurrentParents = [];
/******/ 			}
/******/ 			return __webpack_require__(request);
/******/ 		};
/******/ 		var ObjectFactory = function ObjectFactory(name) {
/******/ 			return {
/******/ 				configurable: true,
/******/ 				enumerable: true,
/******/ 				get: function() {
/******/ 					return __webpack_require__[name];
/******/ 				},
/******/ 				set: function(value) {
/******/ 					__webpack_require__[name] = value;
/******/ 				}
/******/ 			};
/******/ 		};
/******/ 		for (var name in __webpack_require__) {
/******/ 			if (
/******/ 				Object.prototype.hasOwnProperty.call(__webpack_require__, name) &&
/******/ 				name !== "e" &&
/******/ 				name !== "t"
/******/ 			) {
/******/ 				Object.defineProperty(fn, name, ObjectFactory(name));
/******/ 			}
/******/ 		}
/******/ 		fn.e = function(chunkId) {
/******/ 			if (hotStatus === "ready") hotSetStatus("prepare");
/******/ 			hotChunksLoading++;
/******/ 			return __webpack_require__.e(chunkId).then(finishChunkLoading, function(err) {
/******/ 				finishChunkLoading();
/******/ 				throw err;
/******/ 			});
/******/
/******/ 			function finishChunkLoading() {
/******/ 				hotChunksLoading--;
/******/ 				if (hotStatus === "prepare") {
/******/ 					if (!hotWaitingFilesMap[chunkId]) {
/******/ 						hotEnsureUpdateChunk(chunkId);
/******/ 					}
/******/ 					if (hotChunksLoading === 0 && hotWaitingFiles === 0) {
/******/ 						hotUpdateDownloaded();
/******/ 					}
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 		fn.t = function(value, mode) {
/******/ 			if (mode & 1) value = fn(value);
/******/ 			return __webpack_require__.t(value, mode & ~1);
/******/ 		};
/******/ 		return fn;
/******/ 	}
/******/
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	function hotCreateModule(moduleId) {
/******/ 		var hot = {
/******/ 			// private stuff
/******/ 			_acceptedDependencies: {},
/******/ 			_declinedDependencies: {},
/******/ 			_selfAccepted: false,
/******/ 			_selfDeclined: false,
/******/ 			_selfInvalidated: false,
/******/ 			_disposeHandlers: [],
/******/ 			_main: hotCurrentChildModule !== moduleId,
/******/
/******/ 			// Module API
/******/ 			active: true,
/******/ 			accept: function(dep, callback) {
/******/ 				if (dep === undefined) hot._selfAccepted = true;
/******/ 				else if (typeof dep === "function") hot._selfAccepted = dep;
/******/ 				else if (typeof dep === "object")
/******/ 					for (var i = 0; i < dep.length; i++)
/******/ 						hot._acceptedDependencies[dep[i]] = callback || function() {};
/******/ 				else hot._acceptedDependencies[dep] = callback || function() {};
/******/ 			},
/******/ 			decline: function(dep) {
/******/ 				if (dep === undefined) hot._selfDeclined = true;
/******/ 				else if (typeof dep === "object")
/******/ 					for (var i = 0; i < dep.length; i++)
/******/ 						hot._declinedDependencies[dep[i]] = true;
/******/ 				else hot._declinedDependencies[dep] = true;
/******/ 			},
/******/ 			dispose: function(callback) {
/******/ 				hot._disposeHandlers.push(callback);
/******/ 			},
/******/ 			addDisposeHandler: function(callback) {
/******/ 				hot._disposeHandlers.push(callback);
/******/ 			},
/******/ 			removeDisposeHandler: function(callback) {
/******/ 				var idx = hot._disposeHandlers.indexOf(callback);
/******/ 				if (idx >= 0) hot._disposeHandlers.splice(idx, 1);
/******/ 			},
/******/ 			invalidate: function() {
/******/ 				this._selfInvalidated = true;
/******/ 				switch (hotStatus) {
/******/ 					case "idle":
/******/ 						hotUpdate = {};
/******/ 						hotUpdate[moduleId] = modules[moduleId];
/******/ 						hotSetStatus("ready");
/******/ 						break;
/******/ 					case "ready":
/******/ 						hotApplyInvalidatedModule(moduleId);
/******/ 						break;
/******/ 					case "prepare":
/******/ 					case "check":
/******/ 					case "dispose":
/******/ 					case "apply":
/******/ 						(hotQueuedInvalidatedModules =
/******/ 							hotQueuedInvalidatedModules || []).push(moduleId);
/******/ 						break;
/******/ 					default:
/******/ 						// ignore requests in error states
/******/ 						break;
/******/ 				}
/******/ 			},
/******/
/******/ 			// Management API
/******/ 			check: hotCheck,
/******/ 			apply: hotApply,
/******/ 			status: function(l) {
/******/ 				if (!l) return hotStatus;
/******/ 				hotStatusHandlers.push(l);
/******/ 			},
/******/ 			addStatusHandler: function(l) {
/******/ 				hotStatusHandlers.push(l);
/******/ 			},
/******/ 			removeStatusHandler: function(l) {
/******/ 				var idx = hotStatusHandlers.indexOf(l);
/******/ 				if (idx >= 0) hotStatusHandlers.splice(idx, 1);
/******/ 			},
/******/
/******/ 			//inherit from previous dispose call
/******/ 			data: hotCurrentModuleData[moduleId]
/******/ 		};
/******/ 		hotCurrentChildModule = undefined;
/******/ 		return hot;
/******/ 	}
/******/
/******/ 	var hotStatusHandlers = [];
/******/ 	var hotStatus = "idle";
/******/
/******/ 	function hotSetStatus(newStatus) {
/******/ 		hotStatus = newStatus;
/******/ 		for (var i = 0; i < hotStatusHandlers.length; i++)
/******/ 			hotStatusHandlers[i].call(null, newStatus);
/******/ 	}
/******/
/******/ 	// while downloading
/******/ 	var hotWaitingFiles = 0;
/******/ 	var hotChunksLoading = 0;
/******/ 	var hotWaitingFilesMap = {};
/******/ 	var hotRequestedFilesMap = {};
/******/ 	var hotAvailableFilesMap = {};
/******/ 	var hotDeferred;
/******/
/******/ 	// The update info
/******/ 	var hotUpdate, hotUpdateNewHash, hotQueuedInvalidatedModules;
/******/
/******/ 	function toModuleId(id) {
/******/ 		var isNumber = +id + "" === id;
/******/ 		return isNumber ? +id : id;
/******/ 	}
/******/
/******/ 	function hotCheck(apply) {
/******/ 		if (hotStatus !== "idle") {
/******/ 			throw new Error("check() is only allowed in idle status");
/******/ 		}
/******/ 		hotApplyOnUpdate = apply;
/******/ 		hotSetStatus("check");
/******/ 		return hotDownloadManifest(hotRequestTimeout).then(function(update) {
/******/ 			if (!update) {
/******/ 				hotSetStatus(hotApplyInvalidatedModules() ? "ready" : "idle");
/******/ 				return null;
/******/ 			}
/******/ 			hotRequestedFilesMap = {};
/******/ 			hotWaitingFilesMap = {};
/******/ 			hotAvailableFilesMap = update.c;
/******/ 			hotUpdateNewHash = update.h;
/******/
/******/ 			hotSetStatus("prepare");
/******/ 			var promise = new Promise(function(resolve, reject) {
/******/ 				hotDeferred = {
/******/ 					resolve: resolve,
/******/ 					reject: reject
/******/ 				};
/******/ 			});
/******/ 			hotUpdate = {};
/******/ 			var chunkId = "main";
/******/ 			// eslint-disable-next-line no-lone-blocks
/******/ 			{
/******/ 				hotEnsureUpdateChunk(chunkId);
/******/ 			}
/******/ 			if (
/******/ 				hotStatus === "prepare" &&
/******/ 				hotChunksLoading === 0 &&
/******/ 				hotWaitingFiles === 0
/******/ 			) {
/******/ 				hotUpdateDownloaded();
/******/ 			}
/******/ 			return promise;
/******/ 		});
/******/ 	}
/******/
/******/ 	// eslint-disable-next-line no-unused-vars
/******/ 	function hotAddUpdateChunk(chunkId, moreModules) {
/******/ 		if (!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId])
/******/ 			return;
/******/ 		hotRequestedFilesMap[chunkId] = false;
/******/ 		for (var moduleId in moreModules) {
/******/ 			if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
/******/ 				hotUpdate[moduleId] = moreModules[moduleId];
/******/ 			}
/******/ 		}
/******/ 		if (--hotWaitingFiles === 0 && hotChunksLoading === 0) {
/******/ 			hotUpdateDownloaded();
/******/ 		}
/******/ 	}
/******/
/******/ 	function hotEnsureUpdateChunk(chunkId) {
/******/ 		if (!hotAvailableFilesMap[chunkId]) {
/******/ 			hotWaitingFilesMap[chunkId] = true;
/******/ 		} else {
/******/ 			hotRequestedFilesMap[chunkId] = true;
/******/ 			hotWaitingFiles++;
/******/ 			hotDownloadUpdateChunk(chunkId);
/******/ 		}
/******/ 	}
/******/
/******/ 	function hotUpdateDownloaded() {
/******/ 		hotSetStatus("ready");
/******/ 		var deferred = hotDeferred;
/******/ 		hotDeferred = null;
/******/ 		if (!deferred) return;
/******/ 		if (hotApplyOnUpdate) {
/******/ 			// Wrap deferred object in Promise to mark it as a well-handled Promise to
/******/ 			// avoid triggering uncaught exception warning in Chrome.
/******/ 			// See https://bugs.chromium.org/p/chromium/issues/detail?id=465666
/******/ 			Promise.resolve()
/******/ 				.then(function() {
/******/ 					return hotApply(hotApplyOnUpdate);
/******/ 				})
/******/ 				.then(
/******/ 					function(result) {
/******/ 						deferred.resolve(result);
/******/ 					},
/******/ 					function(err) {
/******/ 						deferred.reject(err);
/******/ 					}
/******/ 				);
/******/ 		} else {
/******/ 			var outdatedModules = [];
/******/ 			for (var id in hotUpdate) {
/******/ 				if (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {
/******/ 					outdatedModules.push(toModuleId(id));
/******/ 				}
/******/ 			}
/******/ 			deferred.resolve(outdatedModules);
/******/ 		}
/******/ 	}
/******/
/******/ 	function hotApply(options) {
/******/ 		if (hotStatus !== "ready")
/******/ 			throw new Error("apply() is only allowed in ready status");
/******/ 		options = options || {};
/******/ 		return hotApplyInternal(options);
/******/ 	}
/******/
/******/ 	function hotApplyInternal(options) {
/******/ 		hotApplyInvalidatedModules();
/******/
/******/ 		var cb;
/******/ 		var i;
/******/ 		var j;
/******/ 		var module;
/******/ 		var moduleId;
/******/
/******/ 		function getAffectedStuff(updateModuleId) {
/******/ 			var outdatedModules = [updateModuleId];
/******/ 			var outdatedDependencies = {};
/******/
/******/ 			var queue = outdatedModules.map(function(id) {
/******/ 				return {
/******/ 					chain: [id],
/******/ 					id: id
/******/ 				};
/******/ 			});
/******/ 			while (queue.length > 0) {
/******/ 				var queueItem = queue.pop();
/******/ 				var moduleId = queueItem.id;
/******/ 				var chain = queueItem.chain;
/******/ 				module = installedModules[moduleId];
/******/ 				if (
/******/ 					!module ||
/******/ 					(module.hot._selfAccepted && !module.hot._selfInvalidated)
/******/ 				)
/******/ 					continue;
/******/ 				if (module.hot._selfDeclined) {
/******/ 					return {
/******/ 						type: "self-declined",
/******/ 						chain: chain,
/******/ 						moduleId: moduleId
/******/ 					};
/******/ 				}
/******/ 				if (module.hot._main) {
/******/ 					return {
/******/ 						type: "unaccepted",
/******/ 						chain: chain,
/******/ 						moduleId: moduleId
/******/ 					};
/******/ 				}
/******/ 				for (var i = 0; i < module.parents.length; i++) {
/******/ 					var parentId = module.parents[i];
/******/ 					var parent = installedModules[parentId];
/******/ 					if (!parent) continue;
/******/ 					if (parent.hot._declinedDependencies[moduleId]) {
/******/ 						return {
/******/ 							type: "declined",
/******/ 							chain: chain.concat([parentId]),
/******/ 							moduleId: moduleId,
/******/ 							parentId: parentId
/******/ 						};
/******/ 					}
/******/ 					if (outdatedModules.indexOf(parentId) !== -1) continue;
/******/ 					if (parent.hot._acceptedDependencies[moduleId]) {
/******/ 						if (!outdatedDependencies[parentId])
/******/ 							outdatedDependencies[parentId] = [];
/******/ 						addAllToSet(outdatedDependencies[parentId], [moduleId]);
/******/ 						continue;
/******/ 					}
/******/ 					delete outdatedDependencies[parentId];
/******/ 					outdatedModules.push(parentId);
/******/ 					queue.push({
/******/ 						chain: chain.concat([parentId]),
/******/ 						id: parentId
/******/ 					});
/******/ 				}
/******/ 			}
/******/
/******/ 			return {
/******/ 				type: "accepted",
/******/ 				moduleId: updateModuleId,
/******/ 				outdatedModules: outdatedModules,
/******/ 				outdatedDependencies: outdatedDependencies
/******/ 			};
/******/ 		}
/******/
/******/ 		function addAllToSet(a, b) {
/******/ 			for (var i = 0; i < b.length; i++) {
/******/ 				var item = b[i];
/******/ 				if (a.indexOf(item) === -1) a.push(item);
/******/ 			}
/******/ 		}
/******/
/******/ 		// at begin all updates modules are outdated
/******/ 		// the "outdated" status can propagate to parents if they don't accept the children
/******/ 		var outdatedDependencies = {};
/******/ 		var outdatedModules = [];
/******/ 		var appliedUpdate = {};
/******/
/******/ 		var warnUnexpectedRequire = function warnUnexpectedRequire() {
/******/ 			console.warn(
/******/ 				"[HMR] unexpected require(" + result.moduleId + ") to disposed module"
/******/ 			);
/******/ 		};
/******/
/******/ 		for (var id in hotUpdate) {
/******/ 			if (Object.prototype.hasOwnProperty.call(hotUpdate, id)) {
/******/ 				moduleId = toModuleId(id);
/******/ 				/** @type {TODO} */
/******/ 				var result;
/******/ 				if (hotUpdate[id]) {
/******/ 					result = getAffectedStuff(moduleId);
/******/ 				} else {
/******/ 					result = {
/******/ 						type: "disposed",
/******/ 						moduleId: id
/******/ 					};
/******/ 				}
/******/ 				/** @type {Error|false} */
/******/ 				var abortError = false;
/******/ 				var doApply = false;
/******/ 				var doDispose = false;
/******/ 				var chainInfo = "";
/******/ 				if (result.chain) {
/******/ 					chainInfo = "\nUpdate propagation: " + result.chain.join(" -> ");
/******/ 				}
/******/ 				switch (result.type) {
/******/ 					case "self-declined":
/******/ 						if (options.onDeclined) options.onDeclined(result);
/******/ 						if (!options.ignoreDeclined)
/******/ 							abortError = new Error(
/******/ 								"Aborted because of self decline: " +
/******/ 									result.moduleId +
/******/ 									chainInfo
/******/ 							);
/******/ 						break;
/******/ 					case "declined":
/******/ 						if (options.onDeclined) options.onDeclined(result);
/******/ 						if (!options.ignoreDeclined)
/******/ 							abortError = new Error(
/******/ 								"Aborted because of declined dependency: " +
/******/ 									result.moduleId +
/******/ 									" in " +
/******/ 									result.parentId +
/******/ 									chainInfo
/******/ 							);
/******/ 						break;
/******/ 					case "unaccepted":
/******/ 						if (options.onUnaccepted) options.onUnaccepted(result);
/******/ 						if (!options.ignoreUnaccepted)
/******/ 							abortError = new Error(
/******/ 								"Aborted because " + moduleId + " is not accepted" + chainInfo
/******/ 							);
/******/ 						break;
/******/ 					case "accepted":
/******/ 						if (options.onAccepted) options.onAccepted(result);
/******/ 						doApply = true;
/******/ 						break;
/******/ 					case "disposed":
/******/ 						if (options.onDisposed) options.onDisposed(result);
/******/ 						doDispose = true;
/******/ 						break;
/******/ 					default:
/******/ 						throw new Error("Unexception type " + result.type);
/******/ 				}
/******/ 				if (abortError) {
/******/ 					hotSetStatus("abort");
/******/ 					return Promise.reject(abortError);
/******/ 				}
/******/ 				if (doApply) {
/******/ 					appliedUpdate[moduleId] = hotUpdate[moduleId];
/******/ 					addAllToSet(outdatedModules, result.outdatedModules);
/******/ 					for (moduleId in result.outdatedDependencies) {
/******/ 						if (
/******/ 							Object.prototype.hasOwnProperty.call(
/******/ 								result.outdatedDependencies,
/******/ 								moduleId
/******/ 							)
/******/ 						) {
/******/ 							if (!outdatedDependencies[moduleId])
/******/ 								outdatedDependencies[moduleId] = [];
/******/ 							addAllToSet(
/******/ 								outdatedDependencies[moduleId],
/******/ 								result.outdatedDependencies[moduleId]
/******/ 							);
/******/ 						}
/******/ 					}
/******/ 				}
/******/ 				if (doDispose) {
/******/ 					addAllToSet(outdatedModules, [result.moduleId]);
/******/ 					appliedUpdate[moduleId] = warnUnexpectedRequire;
/******/ 				}
/******/ 			}
/******/ 		}
/******/
/******/ 		// Store self accepted outdated modules to require them later by the module system
/******/ 		var outdatedSelfAcceptedModules = [];
/******/ 		for (i = 0; i < outdatedModules.length; i++) {
/******/ 			moduleId = outdatedModules[i];
/******/ 			if (
/******/ 				installedModules[moduleId] &&
/******/ 				installedModules[moduleId].hot._selfAccepted &&
/******/ 				// removed self-accepted modules should not be required
/******/ 				appliedUpdate[moduleId] !== warnUnexpectedRequire &&
/******/ 				// when called invalidate self-accepting is not possible
/******/ 				!installedModules[moduleId].hot._selfInvalidated
/******/ 			) {
/******/ 				outdatedSelfAcceptedModules.push({
/******/ 					module: moduleId,
/******/ 					parents: installedModules[moduleId].parents.slice(),
/******/ 					errorHandler: installedModules[moduleId].hot._selfAccepted
/******/ 				});
/******/ 			}
/******/ 		}
/******/
/******/ 		// Now in "dispose" phase
/******/ 		hotSetStatus("dispose");
/******/ 		Object.keys(hotAvailableFilesMap).forEach(function(chunkId) {
/******/ 			if (hotAvailableFilesMap[chunkId] === false) {
/******/ 				hotDisposeChunk(chunkId);
/******/ 			}
/******/ 		});
/******/
/******/ 		var idx;
/******/ 		var queue = outdatedModules.slice();
/******/ 		while (queue.length > 0) {
/******/ 			moduleId = queue.pop();
/******/ 			module = installedModules[moduleId];
/******/ 			if (!module) continue;
/******/
/******/ 			var data = {};
/******/
/******/ 			// Call dispose handlers
/******/ 			var disposeHandlers = module.hot._disposeHandlers;
/******/ 			for (j = 0; j < disposeHandlers.length; j++) {
/******/ 				cb = disposeHandlers[j];
/******/ 				cb(data);
/******/ 			}
/******/ 			hotCurrentModuleData[moduleId] = data;
/******/
/******/ 			// disable module (this disables requires from this module)
/******/ 			module.hot.active = false;
/******/
/******/ 			// remove module from cache
/******/ 			delete installedModules[moduleId];
/******/
/******/ 			// when disposing there is no need to call dispose handler
/******/ 			delete outdatedDependencies[moduleId];
/******/
/******/ 			// remove "parents" references from all children
/******/ 			for (j = 0; j < module.children.length; j++) {
/******/ 				var child = installedModules[module.children[j]];
/******/ 				if (!child) continue;
/******/ 				idx = child.parents.indexOf(moduleId);
/******/ 				if (idx >= 0) {
/******/ 					child.parents.splice(idx, 1);
/******/ 				}
/******/ 			}
/******/ 		}
/******/
/******/ 		// remove outdated dependency from module children
/******/ 		var dependency;
/******/ 		var moduleOutdatedDependencies;
/******/ 		for (moduleId in outdatedDependencies) {
/******/ 			if (
/******/ 				Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)
/******/ 			) {
/******/ 				module = installedModules[moduleId];
/******/ 				if (module) {
/******/ 					moduleOutdatedDependencies = outdatedDependencies[moduleId];
/******/ 					for (j = 0; j < moduleOutdatedDependencies.length; j++) {
/******/ 						dependency = moduleOutdatedDependencies[j];
/******/ 						idx = module.children.indexOf(dependency);
/******/ 						if (idx >= 0) module.children.splice(idx, 1);
/******/ 					}
/******/ 				}
/******/ 			}
/******/ 		}
/******/
/******/ 		// Now in "apply" phase
/******/ 		hotSetStatus("apply");
/******/
/******/ 		if (hotUpdateNewHash !== undefined) {
/******/ 			hotCurrentHash = hotUpdateNewHash;
/******/ 			hotUpdateNewHash = undefined;
/******/ 		}
/******/ 		hotUpdate = undefined;
/******/
/******/ 		// insert new code
/******/ 		for (moduleId in appliedUpdate) {
/******/ 			if (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) {
/******/ 				modules[moduleId] = appliedUpdate[moduleId];
/******/ 			}
/******/ 		}
/******/
/******/ 		// call accept handlers
/******/ 		var error = null;
/******/ 		for (moduleId in outdatedDependencies) {
/******/ 			if (
/******/ 				Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)
/******/ 			) {
/******/ 				module = installedModules[moduleId];
/******/ 				if (module) {
/******/ 					moduleOutdatedDependencies = outdatedDependencies[moduleId];
/******/ 					var callbacks = [];
/******/ 					for (i = 0; i < moduleOutdatedDependencies.length; i++) {
/******/ 						dependency = moduleOutdatedDependencies[i];
/******/ 						cb = module.hot._acceptedDependencies[dependency];
/******/ 						if (cb) {
/******/ 							if (callbacks.indexOf(cb) !== -1) continue;
/******/ 							callbacks.push(cb);
/******/ 						}
/******/ 					}
/******/ 					for (i = 0; i < callbacks.length; i++) {
/******/ 						cb = callbacks[i];
/******/ 						try {
/******/ 							cb(moduleOutdatedDependencies);
/******/ 						} catch (err) {
/******/ 							if (options.onErrored) {
/******/ 								options.onErrored({
/******/ 									type: "accept-errored",
/******/ 									moduleId: moduleId,
/******/ 									dependencyId: moduleOutdatedDependencies[i],
/******/ 									error: err
/******/ 								});
/******/ 							}
/******/ 							if (!options.ignoreErrored) {
/******/ 								if (!error) error = err;
/******/ 							}
/******/ 						}
/******/ 					}
/******/ 				}
/******/ 			}
/******/ 		}
/******/
/******/ 		// Load self accepted modules
/******/ 		for (i = 0; i < outdatedSelfAcceptedModules.length; i++) {
/******/ 			var item = outdatedSelfAcceptedModules[i];
/******/ 			moduleId = item.module;
/******/ 			hotCurrentParents = item.parents;
/******/ 			hotCurrentChildModule = moduleId;
/******/ 			try {
/******/ 				__webpack_require__(moduleId);
/******/ 			} catch (err) {
/******/ 				if (typeof item.errorHandler === "function") {
/******/ 					try {
/******/ 						item.errorHandler(err);
/******/ 					} catch (err2) {
/******/ 						if (options.onErrored) {
/******/ 							options.onErrored({
/******/ 								type: "self-accept-error-handler-errored",
/******/ 								moduleId: moduleId,
/******/ 								error: err2,
/******/ 								originalError: err
/******/ 							});
/******/ 						}
/******/ 						if (!options.ignoreErrored) {
/******/ 							if (!error) error = err2;
/******/ 						}
/******/ 						if (!error) error = err;
/******/ 					}
/******/ 				} else {
/******/ 					if (options.onErrored) {
/******/ 						options.onErrored({
/******/ 							type: "self-accept-errored",
/******/ 							moduleId: moduleId,
/******/ 							error: err
/******/ 						});
/******/ 					}
/******/ 					if (!options.ignoreErrored) {
/******/ 						if (!error) error = err;
/******/ 					}
/******/ 				}
/******/ 			}
/******/ 		}
/******/
/******/ 		// handle errors in accept handlers and self accepted module load
/******/ 		if (error) {
/******/ 			hotSetStatus("fail");
/******/ 			return Promise.reject(error);
/******/ 		}
/******/
/******/ 		if (hotQueuedInvalidatedModules) {
/******/ 			return hotApplyInternal(options).then(function(list) {
/******/ 				outdatedModules.forEach(function(moduleId) {
/******/ 					if (list.indexOf(moduleId) < 0) list.push(moduleId);
/******/ 				});
/******/ 				return list;
/******/ 			});
/******/ 		}
/******/
/******/ 		hotSetStatus("idle");
/******/ 		return new Promise(function(resolve) {
/******/ 			resolve(outdatedModules);
/******/ 		});
/******/ 	}
/******/
/******/ 	function hotApplyInvalidatedModules() {
/******/ 		if (hotQueuedInvalidatedModules) {
/******/ 			if (!hotUpdate) hotUpdate = {};
/******/ 			hotQueuedInvalidatedModules.forEach(hotApplyInvalidatedModule);
/******/ 			hotQueuedInvalidatedModules = undefined;
/******/ 			return true;
/******/ 		}
/******/ 	}
/******/
/******/ 	function hotApplyInvalidatedModule(moduleId) {
/******/ 		if (!Object.prototype.hasOwnProperty.call(hotUpdate, moduleId))
/******/ 			hotUpdate[moduleId] = modules[moduleId];
/******/ 	}
/******/
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {},
/******/ 			hot: hotCreateModule(moduleId),
/******/ 			parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
/******/ 			children: []
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// __webpack_hash__
/******/ 	__webpack_require__.h = function() { return hotCurrentHash; };
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return hotCreateRequire(0)(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ({

/***/ "../../../../../node_modules/webpack/hot/log-apply-result.js":
/*!*****************************************!*\
  !*** (webpack)/hot/log-apply-result.js ***!
  \*****************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("/*\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?");

/***/ }),

/***/ "../../../../../node_modules/webpack/hot/log.js":
/*!****************************!*\
  !*** (webpack)/hot/log.js ***!
  \****************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("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?");

/***/ }),

/***/ "../../../../../node_modules/webpack/hot/poll.js?300":
/*!*********************************!*\
  !*** (webpack)/hot/poll.js?300 ***!
  \*********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("/* 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?");

/***/ }),

/***/ "../../../../../node_modules/webpack/hot/signal.js":
/*!*******************************!*\
  !*** (webpack)/hot/signal.js ***!
  \*******************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("/*\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?");

/***/ }),

/***/ "../../../dist/monitor-loader.js!../../../dist/monitor-loader.js":
/*!***********************************************************************************************************************************************************************************************************************!*\
  !*** /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 ***!
  \***********************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("(() => {\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");

/***/ }),

/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("// 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?");

/***/ }),

/***/ 0:
/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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 ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("__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");

/***/ })

/******/ });

================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/test-project.sh
================================================
#!/bin/sh

$(npm bin)/webpack-cli --config test/cases/$1/webpack.config.js


================================================
FILE: packages/razzle-start-server-webpack-plugin/tests/utils.js
================================================
import fs from 'fs';
import path from 'path';
import expect from 'expect';

export function compareDirectory(actual, expected) {
  const files = fs.readdirSync(expected);

  for (const file of files) {
    const absoluteFilePath = path.resolve(expected, file);

    const stats = fs.lstatSync(absoluteFilePath);

    if (stats.isDirectory()) {
      compareDirectory(
        path.resolve(actual, file),
        path.resolve(expected, file)
      );
    } else if (stats.isFile()) {
      const content = fs.readFileSync(path.resolve(expected, file), 'utf8');
      const actualContent = fs.readFileSync(path.resolve(actual, file), 'utf8');

      expect(actualContent).toEqual(content);
    }
  }
}

export function compareWarning(actual, expectedFile) {
  if (!fs.existsSync(expectedFile)) {
    return;
  }

  // eslint-disable-next-line global-require, import/no-dynamic-require
  const expected = require(expectedFile);

  expect(actual.trim()).toBe(expected.trim());
}


================================================
FILE: scripts/bootstrap-examples.js
================================================
const yargs = require('yargs');
const execa = require('execa');
const fs = require('fs-extra');
const path = require('path');

const rootDir =  path.resolve(__dirname, '..');
const defaultExample = 'packages/create-razzle-app/templates/default';

let argv = yargs
  .usage('$0 [<example>...] [-s|--stage=<stage>] [-c|--copy-only] [-a|--all]')
  .command({
    command: '*',
    builder: yargs => {
      return yargs
        .option('c', {
          alias: 'copy-only',
          describe: 'only copy',
          type: 'boolean',
          default: false,
        })
        .option('a', {
          alias: 'all',
          describe: 'bootstrap all',
          type: 'boolean',
          default: false,
        })
        .option('s', {
          alias: 'stage',
          describe: 'stage directory',
          default: false,
          type: 'string'
        })
        .option('d', {
          alias: 'default',
          describe: 'bootstrap default example',
          type: 'boolean',
          default: false,
        });
    },
    handler: async argv => {

      const packageJsonData = JSON.parse(
        await fs.readFile(path.join(rootDir, 'package.json'))
      );

      const packageMetaData = JSON.parse(
        await fs.readFile(path.join(rootDir, 'package.meta.json'))
      );

      const examples = (
        await fs.readdir(path.join(rootDir, 'examples'), {
          withFileTypes: true,
        })
      )
        .filter(item => item.isDirectory())
        .map(item => item.name);

      const exampleNamesMap = (argv.all
        ? [defaultExample].concat(examples)
        : argv._).map(example => {
          return [example, example.includes('/') ? example : `examples/${example}`];
        });

      const exampleDirs = exampleNamesMap.map(example =>example[1]);

      let extraWorkspaceDirs = [];
      let extraNoHoist = [];

      if (exampleDirs) {
        const missing = exampleDirs
          .map(example => {
            const examplePackageJson = path.join(rootDir, example, 'package.json');
            if (!fs.existsSync(examplePackageJson)) {
              return example;
            }
            let examplePackageJsonData = {};
            try {
              examplePackageJsonData = JSON.parse(fs.readFileSync(examplePackageJson));
            } catch {
              console.log(`failed to read json ${examplePackageJson}`);
              process.exit(1);
            }
            const razzle_meta = examplePackageJsonData.razzle_meta||{};
            extraNoHoist = extraNoHoist.concat((razzle_meta.nohoist||[]).map(nohoist=>`${example}/${nohoist}`))
            extraWorkspaceDirs = extraWorkspaceDirs
              .concat([example])
              .concat(razzle_meta.extraWorkspacedirs || []);
            return false;
          })
          .filter(x => Boolean(x));

          if (missing.length) {
            console.log(`${missing.join(', ')} not found in ${rootDir}`);
            process.exit(1);
          }
      }
      packageJsonData.workspaces = packageJsonData.workspaces.concat(extraWorkspaceDirs);
      packageJsonData.workspaces.nohoist = (packageJsonData.workspaces.nohoist||[]).concat(extraNoHoist);

      const jsonString = JSON.stringify(packageJsonData, null, '  ') + '\n';
      if (jsonString) {
        try {
          fs.writeFileSync(path.join(rootDir, 'package.json'), jsonString);
        } catch {
          console.log(`failed to write json ${item}`);
        }
      } else {
        console.log(`not writing empty json ${item}`);
      }

      await execa("yarn install --no-lockfile", { shell: true, stdio: 'inherit' });
      exampleDirs
        .map(example => {
          fs.ensureDirSync(path.join(rootDir, example, 'node_modules', '.bin'))
          fs.writeFileSync(path.join(rootDir, example, 'node_modules', '.bin', 'restrap'), `#!/usr/bin/env node
'use strict';
const execa = require('execa');
execa("cd ${rootDir} && yarn bootstrap-examples ${example}", { shell: true, stdio: 'inherit' });`);
      fs.chmodSync(path.join(rootDir, example, 'node_modules', '.bin', 'restrap'), 0o775)
        })


      packageJsonData.workspaces = packageMetaData.workspaces;
      const resetJsonString = JSON.stringify(packageJsonData, null, '  ') + '\n';
      if (resetJsonString) {
        try {
          fs.writeFileSync(path.join(rootDir, 'package.json'), resetJsonString);
        } catch {
          console.log(`failed to write json ${item}`);
        }
      } else {
        console.log(`not writing empty json ${item}`);
      }

    },
  })
  .help().argv;


================================================
FILE: scripts/build-docs.js
================================================
'use strict';

const execa = require('execa');
const util = require('util');
const glob = util.promisify(require('glob'));
const updateSection = require('update-section');
const transform = require('doctoc/lib/transform');
const fs = require('fs-extra');
const path = require('path');

const rootDir = process.cwd();

var startDocToc = '<!-- 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 -->'
  , endDocToc   = '<!-- END doctoc generated instructions please keep comment here to allow auto update -->'

var startContributors = '<!-- 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 -->'
  , endContributors   = '<!-- END contributors generated instructions please keep comment here to allow auto update -->'

function matchesStartDocToc(line) {
  return (/<!-- START doctoc /).test(line);
}

function matchesEndDocToc(line) {
  return (/<!-- END doctoc /).test(line);
}

function matchesStartContributors(line) {
  return (/<!-- START contributors /).test(line);
}

function matchesEndContributors(line) {
  return (/<!-- END contributors /).test(line);
}


function updatePackageJson(packageJson, branch, dependencyVersions, version) {
  fs.pathExists(packageJson).then(async exists => {
    if (exists) {
      const packageJsonData = JSON.parse(await fs.readFile(packageJson));
      const newPackageJsonData = ["dependencies", "devDependencies", "peerDependencies"].reduce((acc, depType) => {
        if (acc[depType]) {
          acc[depType] = Object.keys(acc[depType]).reduce((depsAcc, dep) => {
            if (dependencyVersions[dep]) {
              depsAcc[dep] = dependencyVersions[dep];
            }

            return depsAcc;
          }, acc[depType]);
        }
        return acc;
      }, packageJsonData);

      packageJsonData['version'] = version;

      console.log(JSON.stringify(newPackageJsonData, null, '  '));
      return fs.writeFile(packageJson, JSON.stringify(newPackageJsonData, null, '  ')+'\n');
    }
  })
}

const tocDocs = [
  path.join(rootDir, '.github', 'CODE_OF_CONDUCT.md'),
  path.join(rootDir, '.github', 'CONTRIBUTING.md'),
];

const contributorsDocs = [
  path.join(rootDir, 'packages', 'razzle', 'README.md'),
];

for (let tocDoc of tocDocs) {
  fs.readFile(tocDoc).then(data=>{
    return {
      headings: data.toString().replace(/^((?!#.+$).*\n)/gm, ''),
      document: data.toString()
    };
  }).then(info=>{
    const newToc = transform(info.headings).data.replace(/^((?!\s*\-.+$).*\n)/gm, '');
    const newDoc = updateSection(info.document, startDocToc+newToc+endDocToc, matchesStartDocToc, matchesEndDocToc);
    return fs.writeFile(tocDoc, newDoc);
  }).catch(err=>{
    console.log(err)
  })
}

for (let contributorsDoc of contributorsDocs) {
  fs.readFile(contributorsDoc).then(data=>{
    const allContributors = JSON.parse(fs.readFileSync(path.join(rootDir, '.all-contributorsrc')));
    const contributors = '\n' +
        allContributors.contributors.map(contributor=>`- **${contributor.name}** - [@${contributor.login}](${contributor.profile})\n` +
        `  - **Contributions:** ` + contributor.contributions.join(', ') ).join('\n')
      + '\n';
    return {
      contributors: contributors,
      document: data.toString()
    };
  }).then(info=>{
    console.log(info.contributors);
    const newDoc = updateSection(info.document, startContributors+info.contributors+endContributors, matchesStartContributors, matchesEndContributors);
    return fs.writeFile(contributorsDoc, newDoc);
  }).catch(err=>{
    console.log(err)
  })
}

execa('git', ['rev-parse', '--abbrev-ref', 'HEAD'], {shell: true}).then(async ({stdout}) => {
  const branch = stdout.split('\n')[0];
  const lernaJson = JSON.parse(await fs.readFile(path.join(rootDir, 'lerna.json')));
  const internalPeerDependencyVersions = JSON.parse(await fs.readFile(
    path.join(rootDir, 'scripts', 'internalPeerDependencyVersions.json')));

  const packageJsons = (await Promise.all(lernaJson.packages.map(item =>
    glob(item+'/package.json'))
  )).flat();

  const internalPackages = Object.fromEntries((await Promise.all(packageJsons.map(async item =>
    JSON.parse(await fs.readFile(item))
  ))).map(item=>([item.name, lernaJson.version])));

  const dependencyVersions = {...internalPeerDependencyVersions, ...internalPackages};

  const releaseBranches = lernaJson.command.publish.allowBranch;
  const preReleaseBranches = releaseBranches.filter(b=>b!=='master');

  packageJsons.map(item=>updatePackageJson(item, branch, dependencyVersions, lernaJson.version))

  const docSite = branch == 'master' ? 'https://razzlejs.org/' : `https://razzle-git-${branch}.jared.vercel.app/`;
  const readmePath = path.join(rootDir, 'packages', 'razzle', 'README.md');
  fs.readFile(readmePath).then(content => {
    const updated = content.toString().replace(/https:\/\/razzle.*?(\.org|\.app)\//g, docSite);
    return fs.writeFile(readmePath, updated);
  })
  const npxCmd = 'npx create-razzle-app' + ( preReleaseBranches.includes(branch) ? `@${branch}` : '');
  const startedPath = path.join(rootDir, 'website/pages/getting-started.mdx');
  fs.readFile(startedPath).then(content => {
    const updated = content.toString().replace(/npx create-razzle-app@?[^\s]*/g, npxCmd);
    return fs.writeFile(startedPath, updated);
  })
});


================================================
FILE: scripts/exampleDependencyVersions.json
================================================
{
  "express": "^4.17.1",
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "serve": "^11.3.2",
  "mini-css-extract-plugin": "^0.9.0",
  "webpack-dev-server": "^3.11.2"
}


================================================
FILE: scripts/internalPeerDependencyVersions.json
================================================
{
  "webpack-dev-server": "^3.11.0",
  "mini-css-extract-plugin": "^0.9.0",
  "webpack": "~4||~5"
}


================================================
FILE: scripts/new-example.js
================================================
const yargs = require('yargs');
const execa = require('execa');
const fs = require('fs-extra');
const path = require('path');

const rootDir = process.cwd();

let argv = yargs
.usage(
  '$0 <from> <to> [-b|--bootstrap]')
.command({
  command: '*',
  builder: yargs => {
    return yargs
      .option('b', {
        alias: 'bootstrap',
        describe: 'bootstrap example',
        type: 'boolean',
        default: true,
      });
  },
  handler: async argv => {
    console.log(argv);
    const templatePath = path.join(rootDir, `examples/${argv._[0]}`);
    const projectPath = path.join(rootDir, `examples/${argv._[1]}`);
    const relativePath = `examples/${argv._[1]}`;
    fs.copy(templatePath, projectPath)
    .then(async function() {

          const packageJsonData = JSON.parse(
            await fs.readFile(path.join(projectPath, 'package.json'))
          );
          packageJsonData.name = `razzle-examples-${argv._[1]}`
          const jsonString = JSON.stringify(packageJsonData, null, '  ') + '\n';
            if (jsonString) {
              try {
                fs.writeFileSync(path.join(projectPath, 'package.json'), jsonString);
              } catch {
                console.log(`failed to write json ${item}`);
              }
            } else {
              console.log(`not writing empty json ${item}`);
            }
            if (argv.bootstrap) {
              execa.sync(`yarn`, ['bootstrap-examples', relativePath],
                { stdio: 'inherit', cwd: rootDir })
            }
            console.log(`Type\ncd ${relativePath}\nTo work on the new example`);

    })
  },
})
.help().argv;


================================================
FILE: scripts/publish-all.js
================================================
const yargs = require('yargs');
const execa = require('execa');
const fs = require('fs-extra');
const path = require('path');
const semver = require('semver');
const inquirer = require('inquirer');
const util = require('util');
const glob = util.promisify(require('glob'));

const rootDir = process.cwd();

let argv = yargs
.usage(
  '$0 [-p|--preid] [-s|--semver-keyword] [-t|--tag] [-c|--commit] [-u|--untag] [--push] [--noninteractive]'
)
.command({
  command: '*',
  builder: yargs => {
    return yargs
    .option('p', {
      alias: 'preid',
      describe: 'the npm release id',
      default: 'latest',
      type: 'string',
    })
    .option('s', {
      alias: 'semver-keyword',
      describe: 'the semver keyword',
      default: 'patch',
      type: 'string',
    })
    .option('t', {
      alias: 'tag',
      describe: 'add git tag',
      type: 'boolean',
      default: false,
    })
    .option('u', {
      alias: 'untag',
      describe: 'untag current version',
      type: 'boolean',
      default: false,
    })
    .option('c', {
      alias: 'commit',
      describe: 'add git commit',
      type: 'boolean',
      default: false,
    })
    .option('pu', {
      alias: 'push',
      describe: 'push changes and tag',
      type: 'boolean',
      default: false,
    })
    .option('i', {
      alias: 'noninteractive',
      describe: `don't ask for confirmation`,
      type: 'boolean',
      default: false,
    });
  },
  handler: async argv => {

    const preId = argv.preid;
    const semverKeyword =
    preId !== 'latest'
    ? argv.semverKeyword == 'patch'
    ? 'prerelease'
    : argv.semverKeyword
    : argv.semverKeyword;

    let packageJsonData = JSON.parse(
      fs.readFileSync(path.join(rootDir, 'package.json'))
    );

    if (!argv.untag) {
      if (preId !== 'latest') {
        packageJsonData.version = semver.inc(
          packageJsonData.version,
          semverKeyword,
          preId
        );
      } else {
        packageJsonData.version = semver.inc(
          packageJsonData.version,
          semverKeyword
        );
      }

      if (!argv.noninteractive) {
        await inquirer.prompt([
          {
            type: 'confirm',
            name: 'publish',
            message: `Are you sure you want to release v${packageJsonData.version}?`,
          }
        ]).then((answers) => {
          if (answers.publish === false) {
            process.exit(1);
          }
        });


      }

      const examplesGlob = 'examples/*/';

      const examples = await glob(examplesGlob);

      const packageJsonGlobs = packageJsonData.workspaces.concat(
        'examples/*'
      );

      const packageJsons = (
        await Promise.all(
          packageJsonGlobs.map(item => glob(item + '/package.json'))
        )
      )
      .flat()
      .concat(['lerna.json', 'package.json', 'packages/create-razzle-app/templates/default/package.json']);

      const packageVersions = packageJsons
      .map(item => {
        try {
          return JSON.parse(fs.readFileSync(item));
        } catch {
          console.log(`failed to parse json ${item}`);
        }
      })
      .map(item => [
        item.name || 'it-is-lerna',
        item.version,
        packageJsonData.version,
      ]);

      const packageNames = packageVersions.map(item => item[0]);
      const commitCmd = `git commit -a -m "chore: bumped versions to ${packageJsonData.version}"`;
      const tagCmd = `git tag -am "v${packageJsonData.version}" v${packageJsonData.version}`;
      const tagRemoteCmd = `git push origin refs/tags/v${packageJsonData.version}`;
      const unTagCmd = `git tag -d v${packageJsonData.version}`;
      const unTagRemoteCmd = `git push origin :refs/tags/v${packageJsonData.version}`;
      const pushCmd = `git push origin`;
      const pullCmd = `git pull origin`;

      const officialExamples = 'module.exports = '
      + JSON.stringify(
        examples.map(example=>path.basename(example)
      ), null, '  ') + ';\n';

      await fs.writeFile(
        'packages/create-razzle-app/lib/officialExamples.js',
        officialExamples);
        console.log(
          Object.fromEntries(packageVersions.map(item => [item[0], item[2]]))
        );
        packageJsons.map(item => {
          let json = JSON.parse(fs.readFileSync(item));
          json.version = packageJsonData.version;
          let newJson = [
            'dependencies',
            'devDependencies',
            'peerDependencies',
          ].reduce((acc, depType) => {
            if (acc[depType]) {
              acc[depType] = Object.keys(acc[depType]).reduce(
                (depsAcc, dep) => {
                  if (packageNames.includes(dep)) {
                    depsAcc[dep] = packageJsonData.version;
                  }

                  return depsAcc;
                },
                acc[depType]
              );
            }
            return acc;
          }, json);
          console.log(newJson);
          const jsonString = JSON.stringify(json, null, '  ') + '\n';
          if (jsonString) {
            try {
              return fs.writeFileSync(item, jsonString);
            } catch {
              console.log(`failed to write json ${item}`);
            }
          } else {
            console.log(`not writing empty json ${item}`);
          }
        });

        if (argv.commit) {
          console.log(`\nRunning: '${commitCmd}'`);
          await execa(commitCmd, { shell: true, stdio: 'inherit' });
        } else {
          console.log(`\nNot running: '${commitCmd}'`);
          console.log(`Run '${commitCmd}' to commit.`);
        }
        if (argv.commit && argv.tag) {
          console.log(`\nRunning: '${tagCmd}'`);
          console.log(`Run '${unTagCmd}' to untag.`);
          await execa(tagCmd, { shell: true, stdio: 'inherit' });
          if (argv.push) {
            console.log(`\nRunning: '${pushCmd}'`);
            await execa(pushCmd, { shell: true, stdio: 'inherit' });
            console.log(`\nRunning: '${tagRemoteCmd}'`);
            await execa(tagRemoteCmd, { shell: true, stdio: 'inherit' });
            console.log(`Run '${unTagRemoteCmd}' to untag in remote.`);
            console.log(`\nRunning: '${pullCmd}'`);
            await execa(pullCmd, { shell: true, stdio: 'inherit' });
          } else {
            console.log(`\nNot running: '${pushCmd}'`);
            console.log(`Run '${pushCmd}' to push to origin.`);
            console.log(`\nNot running: '${tagRemoteCmd}'`);
            console.log(`Run '${tagRemoteCmd}' to tag in remote.`);
          }
        } else {
          console.log(`\nNot running: '${tagCmd}'`);
          console.log(`Run '${tagCmd}' to tag.`);
          console.log(`Run '${tagRemoteCmd}' to tag in remote.`);
        }
        console.log('Check that everything is ok and push to origin');
      } else {
        console.log(`\nRunning: '${unTagCmd}'`);
        console.log(`Run '${unTagRemoteCmd}' to untag in remote.`);
        await execa(unTagCmd, {
          shell: true,
          stdio: 'inherit',
        });
      }
    },
  })
  .help().argv;


================================================
FILE: scripts/publish-to-npm.js
================================================
'use strict';
const yargs = require('yargs');
const execa = require('execa');
const util = require('util');
const glob = util.promisify(require('glob'));
const fs = require('fs-extra');
const path = require('path');

const rootDir = process.cwd();

let argv = yargs
  .usage(
    '$0 [-t|--tag]'
  )
  .command({
    command: '*',
    builder: yargs => {
      return yargs
        .option('t', {
          alias: 'tag',
          describe: 'the npm dist-tag',
          default: 'latest',
          type: 'string',
        });
    },
    handler: async argv => {

			const packageJsonData = JSON.parse(
				await fs.readFile(path.join(rootDir, 'package.json'))
			);

			const packageDirs = (
				await Promise.all(packageJsonData.workspaces.map((item) => glob(item)))
			).flat();

      // await execa(`npm profile get --registry=https://registry.npmjs.org/ `, { shell: true, stdio: 'inherit' });

			await Promise.all(packageDirs.map((item) => {
				const publishCmd = `npm publish --tag ${argv.tag} --registry=https://registry.npmjs.org/ --access public`;
				return execa(publishCmd, { shell: true, stdio: 'inherit', cwd: path.join(rootDir, item) });
			}))

    },
  })
  .help().argv;


================================================
FILE: scripts/release-notes.js
================================================
const got = require('got');

async function main() {
  const res = await got(
    'https://api.github.com/repos/jaredpalmer/razzle/releases',
    {
      responseType: 'json',
    }
  );

  const allReleases = res.body
    .map(({ id, tag_name, created_at, body }) => ({
      id,
      tag_name,
      created_at,
      body: body
        .replace(/\r\n/g, '\n')
        .split('\n')
        .map(e => e.trim()),
    }))
    .sort((a, b) => a.created_at.localeCompare(b.created_at));

  const targetVersion = /v(.*?-)/
    .exec(allReleases.filter(e => /v.*?-/.exec(e.tag_name)).pop().tag_name)
    .pop();

  const releases = allReleases.filter(v => v.tag_name.includes(targetVersion));

  const lineItems = {
    '### Minor Changes': [],
    '### Patches': [],
    '### Credits': [],
  };

  Object.keys(lineItems).forEach(header => {
    releases.forEach(release => {
      const headerIndex = release.body.indexOf(header);
      if (!~headerIndex) return;

      let headerLastIndex = release.body
        .slice(headerIndex + 1)
        .findIndex(v => v.startsWith('###'));

      if (~headerLastIndex) {
        headerLastIndex = headerLastIndex + headerIndex;
      } else {
        headerLastIndex = release.body.length - 1;
      }

      if (header === '### Credits') {
        release.body.slice(headerIndex, headerLastIndex + 1).forEach(e => {
          const re = /@[a-z\d](?:[a-z\d]|-(?=[a-z\d])){0,38}/gi;
          let m;
          do {
            m = re.exec(e);
            if (m) {
              lineItems[header].push(m.pop());
            }
          } while (m);
        });
      } else {
        release.body.slice(headerIndex, headerLastIndex + 1).forEach(e => {
          if (!e.startsWith('-')) {
            return;
          }

          lineItems[header].push(e);
        });
      }
    });
  });

  let finalMessage = [];
  Object.keys(lineItems).forEach(header => {
    let items = lineItems[header];
    if (!items.length) {
      return;
    }

    finalMessage.push(header);
    finalMessage.push('');

    if (header === '### Credits') {
      items = [...new Set(items)];
      let creditsMessage = `Huge thanks to `;
      if (items.length > 1) {
        creditsMessage += items.slice(0, items.length - 1).join(`, `);
        creditsMessage += `, and `;
      }

      creditsMessage += items[items.length - 1];
      creditsMessage += ` for helping!`;

      finalMessage.push(creditsMessage);
    } else {
      items.forEach(e => finalMessage.push(e));
    }

    finalMessage.push('');
  });

  const firstVersion = releases[0].tag_name;
  const lastVersion = releases[releases.length - 1].tag_name;

  // Add compare link
  finalMessage.push(
    `https://github.com/jaredpalmer/razzle/compare/${firstVersion}...${lastVersion}`
  );

  return {
    version: targetVersion.slice(0, -1),
    firstVersion,
    lastVersion,
    content: finalMessage.join('\n'),
  };
}
Promise.resolve()
  .then(main)
  .then(notes => console.log(String(notes.content)));


================================================
FILE: scripts/try-example.js
================================================
const yargs = require('yargs');
const execa = require('execa');
const fs = require('fs-extra');
const path = require('path');
const util = require('../test/fixtures/util');

let argv = yargs
.usage('$0 <example> <stage> [-c|--copy-only]')
.command({
  command: '*',
  builder: (yargs) => {
    return yargs.option('c', {
      alias: 'copy-only',
      describe: 'only copy',
      default: false
    })
  },
  handler: argv => {
    const exampleName = argv._[0];
    const stageName = argv._[1] || 'example';
    console.log(`Setting up ${exampleName} with yalc as ${stageName}`)
    util.yalcSetupStageWithExample(
      stageName,
      exampleName
    );
  }
})
.help()
.argv


================================================
FILE: scripts/update-examples.js
================================================
'use strict';

const execa = require('execa');
const util = require('util');
const glob = util.promisify(require('glob'));
const updateSection = require('update-section');
const fs = require('fs-extra');
const path = require('path');

const rootDir = process.cwd();

var startInstall =
    '<!-- 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 -->",
  endInstall =
    '<!-- END install generated instructions please keep comment here to allow auto update -->';

function matchesStartInstall(line) {
  return /<!-- START install /.test(line);
}

function matchesEndInstall(line) {
  return /<!-- END install /.test(line);
}

function updateInstallSection(
  example,
  readme,
  branch,
  releaseBranches,
  preReleaseBranches
) {
  fs.readFile(readme).then(content => {
    let update = '';
    if (releaseBranches.includes(branch)) {
      const preReleaseBranch = preReleaseBranches.includes(branch);
      const tag = preReleaseBranch ? `@${branch}` : '';
      const info = preReleaseBranch
        ? `\nThis is the ${branch} release documentation for this example\n\n`
        : '';
      update = `${info}Create and start the example:\n\n`;
      update += `\`\`\`bash\nnpx create-razzle-app${tag} --example ${example} ${example}\n\n`;
      update += `cd ${example}\nyarn start\n\`\`\`\n`;
    } else {
      update =
        '\nThis is the development documentation for this example\n\nClone the `razzle` repository:\n\n';
      update += `\`\`\`bash\ngit clone https://github.com/jaredpalmer/razzle.git\n\n`;
      update += `cd razzle\nyarn install --frozen-lockfile --ignore-engines --network-timeout 30000\n\`\`\`\n\n`;
      update += `Create and start the example:\n\n`;
      update += `\`\`\`bash\nnode -e 'require("./test/fixtures/util").setupStageWithExample("${example}", "${example}", symlink=false, yarnlink=true, install=true, test=false);'\n\n`;
      update += `cd ${example}\nyarn start\n\`\`\`\n`;
    }
    const contentString = content.toString();
    if (matchesStartInstall(contentString)) {
      const updated = updateSection(
        contentString,
        startInstall + update + endInstall,
        matchesStartInstall,
        matchesEndInstall
      );
      return fs.writeFile(readme, updated);
    }
  });
}

function updatePackageJson(
  example,
  packageJson,
  branch,
  dependencyVersions,
) {
  fs.pathExists(packageJson).then(async exists => {
    if (exists) {
      const packageJsonData = JSON.parse(await fs.readFile(packageJson));
      const newPackageJsonData = ['dependencies', 'devDependencies'].reduce(
        (acc, depType) => {
          if (acc[depType]) {
            acc[depType] = Object.keys(acc[depType]).reduce((depsAcc, dep) => {
              if (dependencyVersions[dep]) {
                depsAcc[dep] = dependencyVersions[dep];
              }

              return depsAcc;
            }, acc[depType]);
          }
          return acc;
        },
        packageJsonData
      );


      return fs.writeFile(
        packageJson,
        JSON.stringify(newPackageJsonData, null, '  ') + "\n"
      );
    }
  });
}

execa('git', ['rev-parse', '--abbrev-ref', 'HEAD'], { shell: true }).then(
  async ({ stdout }) => {
    const branch = stdout.split('\n')[0];
    const lernaJson = JSON.parse(
      await fs.readFile(path.join(rootDir, 'lerna.json'))
    );

    const exampleDependencyVersions = JSON.parse(
      await fs.readFile(
        path.join(rootDir, 'scripts', 'exampleDependencyVersions.json')
      )
    );

    const packageJsons = (
      await Promise.all(
        lernaJson.packages.map(item => glob(item + '/package.json'))
      )
    ).flat();

    const packageVersions = Object.fromEntries(
      (
        await Promise.all(
          packageJsons.map(async item => JSON.parse(await fs.readFile(item)))
        )
      ).map(item => [item.name, item.version])
    );

    const dependencyVersions = {
      ...exampleDependencyVersions,
      ...packageVersions,
    };

    const releaseBranches = lernaJson.command.publish.allowBranch;
    const preReleaseBranches = releaseBranches.filter(b => b !== 'master');

    fs.readdir(path.join(rootDir, 'examples'), { withFileTypes: true }).then(
      items => {
        return items
          .filter(item => item.isDirectory())
          .map(item => {
            updateInstallSection(
              item.name,
              path.join(rootDir, 'examples', item.name, 'README.md'),
              branch,
              releaseBranches,
              preReleaseBranches
            );
            updatePackageJson(
              item.name,
              path.join(rootDir, 'examples', item.name, 'package.json'),
              branch,
              dependencyVersions
            );
          });
      }
    );

    updatePackageJson(
      'default',
      path.join(
        rootDir,
        'packages',
        'create-razzle-app',
        'templates',
        'default',
        'package.json'
      ),
      branch,
      dependencyVersions
    );

    const loadExamplePath =
      'packages/create-razzle-app/lib/utils/load-example.js';
    fs.readFile(loadExamplePath).then(content => {
      const updated = content
        .toString()
        .replace(
          /(?=const branch.*?yarn update-examples)(.*?)'.*?'/,
          "$1'" + branch + "'"
        );
      return fs.writeFile(loadExamplePath, updated);
    });

    const installExamplePath = 'packages/create-razzle-app/lib/index.js';
    fs.readFile(installExamplePath).then(content => {
      const updated = content
        .toString()
        .replace(
          /(?=const branch.*?yarn update-examples)(.*?)'.*?'/,
          "$1'" + branch + "'"
        );
      return fs.writeFile(installExamplePath, updated);
    });
  }
);


================================================
FILE: scripts/yalc-publish-all.js
================================================
const util = require('../test/fixtures/util');

util.yalcPublishPushAll();


================================================
FILE: test/e2e/create-razzle-app.test.js
================================================
/**
 * @jest-environment node
 */
'use strict';

const shell = require('shelljs');
const fs = require('fs');

const util = require('../fixtures/util');
const path = require("path");

const silent = !process.env.NOISY_TESTS;
shell.config.verbose = !silent;
shell.config.silent = silent;

const stageName = 'stage-cra';
const craPath = path.join('../node_modules/.bin/create-razzle-app');
const testPackage = 'razzle-example-basic';
const testRepo = 'https://github.com/fivethreeo/razzle-example-basic';

const directoryExists = (dirPath) => fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();
const fileExists = (dirPath) => fs.existsSync(dirPath);

describe('create-razzle-app', () => {
  beforeAll(() => {
    util.teardownStage(stageName);
  });

  it('should create app from default template', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --no-install`
    );
    expect(directoryExists('cra/node_modules')).toBeFalsy();

    expect(fileExists('cra/yarn.lock')).toBeFalsy();

    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });
  //
  // it('should create app from default template and install packages', () => {
  //   util.setupStage(stageName);
  //   const output = shell.exec(
  //     `${craPath} cra`--verbose
  //   );
  //   expect(directoryExists('cra/node_modules')).toBeTruthy();
  //
  //   expect(fileExists('cra/yarn.lock')).toBeTruthy();
  //
  //   expect(fileExists('cra/package.json')).toBeTruthy();
  //
  //   expect(directoryExists('cra/src')).toBeTruthy();
  //   expect(fileExists('cra/src/index.js')).toBeTruthy();
  //
  //   expect(output.code).toBe(0);
  // });

  it('should create app from official example', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example basic --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from npm example', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example ${testPackage} --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from npm example at tag', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example ${testPackage}@latest --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from npm example in subdir', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example ${testPackage}:subexample --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from github example', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example ${testRepo} --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from github example at branch', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example ${testRepo}@master --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from github example in subdir', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example ${testRepo}:subexample --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from git example', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example git+${testRepo}.git --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from git example at branch', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example git+${testRepo}.git@master --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from git example in subdir', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example git+${testRepo}.git:subexample --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should create app from file example', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${craPath} cra --verbose --example file:../examples/basic --no-install`
    );
    expect(fileExists('cra/package.json')).toBeTruthy();

    expect(directoryExists('cra/src')).toBeTruthy();
    expect(fileExists('cra/src/index.js')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should exit with an error code when no project name is supplied', () => {
    util.setupStage(stageName);
    const output = shell.exec(
      `${path.join(craPath)}`, {
      silent: true,
    });

    expect(output.code).toBe(1);
  });

  afterEach(() => {
    util.teardownStage(stageName);
  });
});


================================================
FILE: test/e2e/razzle-build.test.js
================================================
/**
 * @jest-environment node
 */
'use strict';

const path = require('path');
const fs = require('fs-extra');
const shell = require('shelljs');
const util = require('../fixtures/util');

const silent = !process.env.NOISY_TESTS;
shell.config.verbose = !silent;
shell.config.silent = silent;

process.env.RAZZLE_NONINTERACTIVE = "true";

const stageName = 'stage-build';

const directoryExists = (dirPath) => fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();
const fileExists = (dirPath) => fs.existsSync(dirPath);

describe('razzle build', () => {
  beforeAll(() => {
    util.teardownStage(stageName);
  });

  it('should compile files into a build directory', () => {
    util.setupStageWithFixture(stageName, 'build-default');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    // Create server.js
    expect(fileExists('build/server.js')).toBeTruthy();
    expect(fileExists('build/server.js.map')).toBeTruthy();

    // Should copy static assets from src/public directory
    expect(fileExists('build/public/nothing.txt')).toBeTruthy();

    // Should compile client bundle to js directory
    expect(directoryExists('build/public/static/js')).toBeTruthy();
    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);
    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);

    // should compile client image assets to media directory
    expect(directoryExists('build/public/static/media')).toBeTruthy();
    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);

    // should compile client css to css directory
    expect(directoryExists('build/public/static/css')).toBeTruthy();
    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);

    expect(output.code).toBe(0);
  });

  it('should compile files with a custom .babelrc', () => {
    util.setupStageWithFixture(stageName, 'build-with-babelrc');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    // Create server.js
    expect(fileExists('build/server.js')).toBeTruthy();
    expect(fileExists('build/server.js.map')).toBeTruthy();

    // Should copy static assets from src/public directory
    expect(fileExists('build/public/nothing.txt')).toBeTruthy();

    // Should compile client bundle to js directory
    expect(directoryExists('build/public/static/js')).toBeTruthy();
    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);
    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);

    // should compile client image assets to media directory
    expect(directoryExists('build/public/static/media')).toBeTruthy();
    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);

    // should compile client css to css directory
    expect(directoryExists('build/public/static/css')).toBeTruthy();
    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);

    expect(output.code).toBe(0);
  });

  it('should compile files with a custom razzle.config.js', () => {
    util.setupStageWithFixture(stageName, 'build-with-custom-config');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    // We modify the default server output filename -> custom.js
    expect(fileExists('build/custom.js')).toBeTruthy();
    expect(fileExists('build/custom.js.map')).toBeTruthy();

    // Should compile client bundle to js directory
    expect(directoryExists('build/public/static/js')).toBeTruthy();
    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);
    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);

    // should compile client image assets to media directory
    expect(directoryExists('build/public/static/media')).toBeTruthy();
    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);

    // should compile client css to css directory
    expect(directoryExists('build/public/static/css')).toBeTruthy();
    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);

    expect(output.code).toBe(0);
  });

  it('should compile files with a plugin in razzle.config.js', () => {
    util.setupStageWithExample(stageName, 'with-scss');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    // Should compile client bundle to js directory
    expect(directoryExists('build/public/static/js')).toBeTruthy();
    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);
    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);

    // should compile client css to css directory
    expect(directoryExists('build/public/static/css')).toBeTruthy();
    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);

    expect(output.code).toBe(0);
  });

  it('should compile files in spa mode', () => {
    util.setupStageWithFixture(stageName, 'build-default-spa');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    // Create index.html
    expect(fileExists('build/public/index.html')).toBeTruthy();

    // SHOULD NOT Create server.js
    expect(fileExists('build/server.js')).toBeFalsy();
    expect(fileExists('build/server.js.map')).toBeFalsy();

    // Should copy static assets from src/public directory
    expect(fileExists('build/public/nothing.txt')).toBeTruthy();

    // Should compile client bundle to js directory
    expect(directoryExists('build/public/static/js')).toBeTruthy();
    expect(shell.ls('build/public/static/js/client.*.js').code).toBe(0);
    expect(shell.ls('build/public/static/js/client.*.js.map').code).toBe(0);

    // should compile client image assets to media directory
    expect(directoryExists('build/public/static/media')).toBeTruthy();
    expect(shell.ls('build/public/static/media/logo.*.png').code).toBe(0);

    // should compile client css to css directory
    expect(directoryExists('build/public/static/css')).toBeTruthy();
    expect(shell.ls('build/public/static/css/client.*.css').code).toBe(0);

    expect(output.code).toBe(0);
  });

  it('should compile with plugin options', () => {
    const stagePath = util.setupStageWithExample(stageName, 'with-scss-options');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    const assets = JSON.parse(fs.readFileSync(path.join(stagePath, 'build/assets.json')));
    const css = fs.readFileSync(path.join(stagePath, 'build', 'public', assets.client.css[0]));

    expect(css.toString().includes("razzle-scss-prepend")).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should compile with promise config', () => {
    const stagePath = util.setupStageWithExample(stageName, 'with-promise-config');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    // We modify the default server output filename -> custom.js
    expect(fileExists('build/custom.js')).toBeTruthy();
    expect(fileExists('build/custom.js.map')).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should compile with jsconfig paths', () => {
    const stagePath = util.setupStageWithExample(stageName, 'with-jsconfig-paths');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    const assets = JSON.parse(fs.readFileSync(path.join(stagePath, 'build/assets.json')));
    const js = fs.readFileSync(path.join(stagePath, 'build', 'public', assets.client.js[0]));

    expect(js.toString().includes("Something Extra")).toBeTruthy();

    expect(output.code).toBe(0);
  });

  it('should exit with an error code when the custom config is invalid', () => {
    util.setupStageWithFixture(stageName, 'build-with-custom-config-invalid');
    const output = shell.exec('yarn build', {
      silent: true,
    });

    expect(output.code).toBe(1);
  });


  it('should compile with development build', () => {
    const stagePath = util.setupStageWithExample(stageName, 'with-development-build');
    const output = shell.exec('yarn build --noninteractive');
    // Create asset manifest
    expect(fileExists('build/assets.json')).toBeTruthy();

    const assets = JSON.parse(fs.readFileSync(path.join(stagePath, 'build/assets.json')));
    const js = fs.readFileSync(path.join(stagePath, 'build', 'public', assets.client.js[0]));

    expect(output.code).toBe(0);
  });

  it('should exit with an error code when the custom config is invalid', () => {
    util.setupStageWithFixture(stageName, 'build-with-custom-config-invalid');
    const output = shell.exec('yarn build', {
      silent: true,
    });

    expect(output.code).toBe(1);
  });

  afterEach(() => {
    util.teardownStage(stageName);
  });
});


================================================
FILE: test/e2e/razzle-start-spa.test.js
================================================
/**
 * @jest-environment node
 */
"use strict";

const shell = require("shelljs");
const util = require("../fixtures/util");
const kill = require("../utils/psKill");
const path = require("path");
const fs = require("fs");

const silent = !process.env.NOISY_TESTS;
shell.config.verbose = !silent;
shell.config.silent = silent;

process.env.RAZZLE_NONINTERACTIVE = "true";

const spew = false;

const stageName = 'stage-start-spa';

describe('razzle start', () => {
  describe('razzle basic example', () => {

    beforeAll(() => {
      util.teardownStage(stageName);
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef

    it('should start a dev server for spa mode', () => {
      util.setupStageWithExample(stageName, 'basic-spa');
      let outputTest;
      const run = new Promise(resolve => {
        const child = shell.exec(
          `${path.join('../node_modules/.bin/razzle')} start`,
          () => {
            resolve(outputTest);
          }
        );
        child.stdout.on('data', data => {
          if (!silent) console.log(data);
          if (data.includes('> SPA Started on port 3000') && typeof outputTest == 'undefined') {
            shell.exec('sleep 5');
            const devServerOutput = shell.exec(
              'curl -sb -o "" localhost:3000/static/js/bundle.js'
            );
            if (spew) console.log('devServerOutput:' + devServerOutput.stdout);
            outputTest = devServerOutput.stdout.includes("React");
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          if (!silent) console.log('stderr:' + data);
        });
      });
      return run.then((test) => expect(test).toBeTruthy());
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 400000; // eslint-disable-line no-undef

    it('should build and run in spa mode', () => {
      util.setupStageWithExample(stageName, 'basic-spa');
      let outputTest;
      shell.exec(`${path.join('../node_modules/.bin/razzle')} build --noninteractive`);
      const run = new Promise(resolve => {
        const child = shell.exec(
          `${path.join('../node_modules/.bin/serve')} -s ${path.join('build/public')}`,
          () => {
            shell.exec('sleep 5');
            resolve(outputTest);
          }
        );
        child.stdout.on('data', data => {
          if (!silent) console.log(data);
          if (data.includes('http://localhost:5000') && typeof outputTest == 'undefined') {
            shell.exec('sleep 5');
            // we use serve package and it will run in prot 5000
            const output = shell.exec("curl -I localhost:5000");
            if (spew) console.log('serverOutput:' + output.stdout);
            outputTest = output.stdout.includes("200");
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          if (!silent) console.log('stderr:' + data);
        });
      });
      return run.then((test) => expect(test).toBeTruthy());
    });

    afterEach(() => {
      util.teardownStage(stageName);
    });

  });
});


================================================
FILE: test/e2e/razzle-start.test.js
================================================
/**
 * @jest-environment node
 */
'use strict';

const fs = require('fs');
const shell = require('shelljs');
const util = require('../fixtures/util');
const kill = require('../utils/psKill');
const path = require('path');

const silent = !process.env.NOISY_TESTS;
shell.config.verbose = !silent;
shell.config.silent = silent;

process.env.RAZZLE_NONINTERACTIVE = "true";

const spew = false;

const stageName = 'stage-start';

describe('razzle start', () => {
  describe('razzle basic example', () => {
    beforeAll(() => {
      util.teardownStage(stageName);
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef

    it('should start a dev server', () => {
      util.setupStageWithExample(stageName, 'basic');
      let outputTest;
      const run = new Promise(resolve => {
        const child = shell.exec(`${path.join('../node_modules/.bin/razzle')} start --verbose`, () => {
          resolve(outputTest);
        });
        child.stdout.on('data', data => {
          if (!silent) console.log(data);
          if (data.includes('Server-side HMR Enabled!') && typeof outputTest == 'undefined') {
            shell.exec('sleep 5');
            const devServerOutput = shell.exec(
              'curl -sb -o "" localhost:3001/static/js/client.js'
            );
            if (spew) console.log('devServerOutput:' + devServerOutput.stdout);
            outputTest = devServerOutput.stdout.includes('React');
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          if (!silent) console.log('stderr:' + data);
        });
      });
      return run.then(test => expect(test).toBeTruthy());
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef

    it('should start a dev server on different port', () => {
      util.setupStageWithExample(stageName, 'with-custom-devserver-options');
      let outputTest;
      const run = new Promise(resolve => {
        const child = shell.exec(`${path.join('../node_modules/.bin/razzle')} start --verbose`, () => {
          resolve(outputTest);
        });
        child.stdout.on('data', data => {
          if (!silent) console.log(data);
          if (data.includes('Server-side HMR Enabled!') && typeof outputTest == 'undefined') {
            shell.exec('sleep 5');
            const devServerOutput = shell.exec(
              'curl -sb -o "" localhost:3002/static/js/client.js'
            );
            if (spew) console.log('devServerOutput:' + devServerOutput.stdout);
            outputTest = devServerOutput.stdout.includes(
              'index.js?http://localhost:3002'
            );
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          if (!silent) console.log('stderr:' + data);
        });
      });
      return run.then(test => expect(test).toBeTruthy());
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000; // eslint-disable-line no-undef

    it('should start a dev server with custom environment variables on different port', () => {
      util.setupStageWithExample(stageName, 'with-custom-environment-variables');
      let outputTest;
      const run = new Promise(resolve => {
        const child = shell.exec(`node ${path.join('./node_modules/razzle/bin/razzle.js')} start --verbose`, () => {
          resolve(outputTest);
        });
        child.stdout.on('data', data => {
          if (data.includes('Server-side HMR Enabled!')) {
            shell.exec('sleep 5');
            const devServerOutput = shell.exec(
              'curl -sb -o "" localhost:4001/static/js/client.js'
            );
            outputTest = devServerOutput.stdout.includes(
              'index.js?http://localhost:4001'
            );
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          console.log(data);
        });
      });
      return run.then(test => expect(test).toBeTruthy());
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 400000; // eslint-disable-line no-undef

    it('should start a dev server with react refresh', () => {
      util.setupStageWithExample(stageName, 'with-experimental-refresh');
      let outputTest;
      const run = new Promise(resolve => {
        const child = shell.exec(`node ${path.join('./node_modules/razzle/bin/razzle.js')} start --verbose`, () => {
          resolve(outputTest);
        });
        child.stdout.on('data', data => {
          if (data.includes('Server-side HMR Enabled!')) {
            shell.exec('sleep 5');
            const devServerOutput = shell.exec(
              'curl -sb -o "" localhost:3001/static/js/client.js'
            );
            outputTest = devServerOutput.stdout.includes(
              'index.js?http://localhost:3001'
            );
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          console.log(data);
        });
      });
      return run.then(test => expect(test).toBeTruthy());
    });

    jasmine.DEFAULT_TIMEOUT_INTERVAL = 400000; // eslint-disable-line no-undef

    it('should build and run', () => {
      util.setupStageWithExample(stageName, 'basic');
      let outputTest;
      shell.exec(`${path.join('../node_modules/.bin/razzle')} build --noninteractive`);
      const run = new Promise(resolve => {
        const child = shell.exec(`node ${path.join('build/server.js')}`, () => {
          resolve(outputTest);
        });
        child.stdout.on('data', data => {
          if (!silent) console.log(data);
          if (data.includes('> Started on port 3000') && typeof outputTest == 'undefined') {
            shell.exec('sleep 5');
            const output = shell.exec('curl -I localhost:3000');
            if (spew) console.log('serverOutput:' + output.stdout);
            outputTest = output.stdout.includes('200');
            kill(child.pid, 'SIGINT');
          }
        });
        child.stderr.on('data', data => {
          if (!silent) console.log('stderr:' + data);
        });
      });
      return run.then(test => expect(test).toBeTruthy());
    });

    it('should exit with an error code and display the error when the custom config throws an error', () => {
      const stagePath = util.setupStageWithExample(stageName, 'basic');
      fs.writeFileSync(
        path.join(stagePath, 'razzle.config.js'),
        `
        module.exports = {
          modifyWebpackConfig() {
            throw new Error("Oops");
          }
        }
      `
      );

      return new Promise((resolve, reject) => {
        shell.exec(
          `node ${path.join(
            '../node_modules/razzle/bin/razzle.js'
          )} start --verbose`,
          { timeout: 5000 },
          (returnCode, stdout) => {
            if (returnCode === 1 && stdout.includes('Error: Oops')) {
              resolve();
            } else {
              reject('Unexpected successful return code.');
            }
          }
        );
      });
    });

    afterEach(() => {
      util.teardownStage(stageName);
    });
  });
});


================================================
FILE: test/examples/isomorphic-examples.test.js
================================================
/**
* @jest-environment node
*
* Theese test checks that the examples installs with packages from npm,
* that they build, the dev server runs as expected and is reachable at port 3000
*/
'use strict';
//
//
//
// require('leaked-handles').set({
//     fullStack: true, // use full stack traces
//     timeout: 30000, // run every 30 seconds instead of 5.
//     debugSockets: true // pretty print tcp thrown exceptions.
// });


const puppeteer = require('puppeteer');
const terminate = require('terminate');
const semver = require('semver');
const assert = require('assert');
const os = require('os');
const fs = require('fs-extra');
const rfs = require('fs');
const execa = require('execa');
const util = require('util');
const glob = util.promisify(require('glob'));
const axios = require('axios');
const isDocker = require('is-docker');
const razzleUtil = require('../fixtures/util');


const path = require("path");
const copy = require('recursive-copy');
const mkdtemp = util.promisify(fs.mkdtemp);
const mkdtempTpl = path.join(os.tmpdir(), 'example-');

const directoryExists = (dirPath) => fs.existsSync(dirPath) && fs.lstatSync(dirPath).isDirectory();
const fileExists = (dirPath) => fs.existsSync(dirPath);

const rootDir = path.join(path.resolve(__dirname), '..', '..');
const testArtifactsDir = path.join(rootDir, 'test-artifacts');

const silent = !process.env.NOISY_TESTS;
const stdio = 'pipe';

const useCra = process.env.NPM_TAG !== 'development';

const use_package_manager = typeof process.env.PACKAGE_MANAGER === 'undefined' ? 'default' : process.env.PACKAGE_MANAGER;

const useYalc = use_package_manager === 'yalc';

const package_manager = use_package_manager === 'default' || useYalc ? 'yarn' : use_package_manager;

const cra_package_manager = use_package_manager === 'default' ? false : use_package_manager;

const install_deps_args = ['yarn', 'yalc'].indexOf(package_manager) !== -1 ?
[ "install", "--ignore-engines" ] :
[ "install" ];

const webpack_deps = typeof process.env.WEBPACK_DEPS !== 'undefined' ? process.env.WEBPACK_DEPS.split(' ') : false;

const add_webpack_deps_args = package_manager === 'yarn' ?
[ "add", "--dev", "-W"].concat(webpack_deps).concat([ "--ignore-engines" ]) :
[ "install", "--save-dev"].concat(webpack_deps);

const use_npm_tag = typeof process.env.NPM_TAG === 'undefined' || process.env.NPM_TAG === 'latest' ? '' : `@${process.env.NPM_TAG}`;

const writeLogs = true;

let examples =
    { simple: [
      { example: 'basic', path: 'examples/basic' },
      { example: 'basic-server', path: 'examples/basic-server' },
      { example: 'basic-spa', path: 'examples/basic-spa' },
      {
        example: 'with-custom-babel-config',
        path: 'examples/with-custom-babel-config'
      },
      {
        example: 'with-custom-devserver-options',
        path: 'examples/with-custom-devserver-options'
      },
      {
        example: 'with-custom-environment-variables',
        path: 'examples/with-custom-environment-variables'
      },
      {
        example: 'with-custom-target-babel-config',
        path: 'examples/with-custom-target-babel-config'
      },
      {
        example: 'with-custom-webpack-config',
        path: 'examples/with-custom-webpack-config'
      },
      { example: 'with-eslint', path: 'examples/with-eslint' },
      {
        example: 'with-experimental-refresh',
        path: 'examples/with-experimental-refresh'
      },
      {
        example: 'with-firebase-functions',
        path: 'examples/with-firebase-functions'
      },
      { example: 'with-heroku', path: 'examples/with-heroku' },
      { example: 'with-hyperapp', path: 'examples/with-hyperapp' },
      { example: 'with-inferno', path: 'examples/with-inferno' },
      {
        example: 'with-jest-snapshots',
        path: 'examples/with-jest-snapshots'
      },
      {
        example: 'with-jsconfig-paths',
        path: 'examples/with-jsconfig-paths'
      },
      { example: 'with-jsxstyle', path: 'examples/with-jsxstyle' },
      { example: 'with-koa', path: 'examples/with-koa' },
      { example: 'with-less', path: 'examples/with-less' },
      {
        example: 'with-loadable-components',
        path: 'examples/with-loadable-components'
      },
      { example: 'with-material-ui', path: 'examples/with-material-ui' },
      { example: 'with-mdx', path: 'examples/with-mdx' },
      { example: 'with-now', path: 'examples/with-now' },
      { example: 'with-now-v2', path: 'examples/with-now-v2' },
      { example: 'with-polka', path: 'examples/with-polka' },
      { example: 'with-preact', path: 'examples/with-preact' },
      {
        example: 'with-promise-config',
        path: 'examples/with-promise-config'
      },
      {
        example: 'with-react-native-web',
        path: 'examples/with-react-native-web'
      },
      { example: 'with-react-router', path: 'examples/with-react-router' },
      !semver.satisfies(process.version, '~10||~13') && {
        example: 'with-react-server-components',
        path: 'examples/with-react-server-components'
      },
      { example: 'with-redux', path: 'examples/with-redux' },
      { example: 'with-scss', path: 'examples/with-scss' },
      { example: 'with-scss-options', path: 'examples/with-scss-options' },
      {
        example: 'with-single-exposed-port',
        path: 'examples/with-single-exposed-port'
      },
      {
        example: 'with-styled-components',
        path: 'examples/with-styled-components'
      },
      { example: 'with-svelte', path: 'examples/with-svelte' },
      !semver.satisfies(process.version, '~10') && {
        example: 'with-tailwindcss', path: 'examples/with-tailwindcss' },
      { example: 'with-typescript', path: 'examples/with-typescript' },
      {
        example: 'with-typescript-plugin',
        path: 'examples/with-typescript-plugin'
      },
      {
        example: 'with-vendor-bundle',
        path: 'examples/with-vendor-bundle'
      },
      { example: 'with-vue', path: 'examples/with-vue' },
      { example: 'with-vue-router', path: 'examples/with-vue-router' },
      {
        example: 'with-webpack-public-path',
        path: 'examples/with-webpack-public-path'
      }
    ].filter(x=>x), complex: [
    { example: 'with-monorepo', path: 'examples/with-monorepo' }, // test timing ssues
    { example: 'with-monorepo-without-workspaces', path: 'examples/with-monorepo-without-workspaces' }, // test timing ssues
    {
      example: 'with-module-federation', // test timing ssues
      path: 'examples/with-module-federation'
    },
    { example: 'with-reason-react', path: 'examples/with-reason-react' }, // test timing ssues
    {
      example: 'with-typeorm-graphql', // test timing ssues
      path: 'examples/with-typeorm-graphql'
    },
    // { example: 'with-elm', path: 'examples/with-elm' }, // requires elm binary
    // {
    //   example: 'with-devcert-https', // may not be possible to test
    //   path: 'examples/with-devcert-https'
    // }
  ]
};

let browser;
let page;

beforeAll(async function(done) {
  if (isDocker()) {
    const response = await axios.get(
      "http://localhost:9222/json/version"
    );
    const browserWSEndpoint = response.data.webSocketDebuggerUrl;
    browser = await puppeteer.connect({ browserWSEndpoint  });
  } else {
    browser = await puppeteer.launch({ headless: process.env.HEADLESS !== "false"  });
  }
  page = await browser.newPage();
  await fs.ensureDir(testArtifactsDir);

  if (useYalc) {
    razzleUtil.yalcPublishAll();
  }
  // const res = await glob('examples/*')
  // examples=res.map(ex=>({example: ex.split('/')[1], path: ex}))
  // console.log(examples)
  done();
});

afterAll(async function(done) {
  if (!isDocker()) {
    await browser.close();
  }
  await new Promise((r) => setTimeout(r, 3000));
  done();
});
Object.keys(examples).forEach((exampleType) => {


  describe(`tests for ${exampleType} isomorphic examples`, () => {

    console.log(`Testing ${exampleType} examples:\n${examples[exampleType].map(e=>e.example).join("\n")}`);

    examples[exampleType].forEach(exampleinfo => {
      const example=exampleinfo.example;

      describe(`tests for the ${example} example`, () => {
        let tempDir;
        let craDir;
        let razzleMeta;

        beforeAll(async function(done) {

          razzleMeta = JSON.parse(await fs.readFile(
            path.join(rootDir, exampleinfo.path, 'package.json'))).razzle_meta||{};

          mkdtemp(mkdtempTpl, (err, directory) => {
            tempDir = directory;
            craDir = path.join(directory, 'example');
            console.log('Using tempdir: ' + tempDir);

            if (!useCra) {
              copy(path.join(rootDir, exampleinfo.path), tempDir, { dot: true },async function(error, results) {
                if (error) {
                  console.error('Copy failed: ' + error);
                } else {
                  // console.info('Copied ' + results.length + ' files');
                }
                if (useYalc) {
                  const packages = razzleUtil.removeWorkspacePackages(tempDir);
                  razzleUtil.yalcAddAll(packages, tempDir);
                }
                done();
              })
            } else {
              done();
            }
          })
        });

        afterAll(async function(done) {
          fs.remove(tempDir, err => {
            assert(!err)
            done();
          });
        });

        jest.setTimeout(300000);

        it(`should install packages`, async function(done) {
          if (!useCra) {
            const subprocess = execa(package_manager,
              install_deps_args,
              {stdio: stdio, cwd: tempDir, all: writeLogs })

            if (writeLogs) {
              const write = rfs.createWriteStream(
                path.join(testArtifactsDir, `${example}-${package_manager}-install.txt`));
              subprocess.all.pipe(write);
            }

            subprocess.then(({exitCode})=>{
              assert.equal(exitCode, 0)
              done();
            })
            await subprocess;
          } else {
            console.log("Skipped install packages");
            done();
          }
        }, 300000);

        jest.setTimeout(300000);

        it(`should run create-razzle-app successfully`, async function(done) {

          if (useCra) {
            const subprocess = execa("npx", [
              `create-razzle-app${use_npm_tag}`,,
              cra_package_manager && `--${cra_package_manager}`,
              "--verbose",
              "--example",
              example,
              "example"
            ].filter(x=>x), {stdio: stdio, cwd: tempDir, all: writeLogs });
            if (writeLogs) {
              const write = rfs.createWriteStream(
                path.join(testArtifactsDir, `${example}-create-razzle-app.txt`));
              subprocess.all.pipe(write);
            }

            subprocess.then(async ({exitCode})=>{
              assert.equal(exitCode, 0)
              done();
            })
            await subprocess;
          } else {
            console.log("Skipped run create-razzle-app successfully");
            done();
          }
        }, 300000);

        jest.setTimeout(300000);

        it(`should use specific webpack and html-webpack-plugin`, async function(done) {
          if (webpack_deps && !razzleMeta.forceWebpack) {
            console.log(`Installing ${webpack_deps.join(' ')} using ${package_manager}`);
            const subprocess = execa(package_manager,
              add_webpack_deps_args
            , {stdio: stdio, cwd: useCra ? craDir : tempDir, all: writeLogs });
            if (writeLogs) {
              const write = rfs.createWriteStream(
                path.join(testArtifactsDir, `${example}-add-deps.txt`));
              subprocess.all.pipe(write);
            }

            subprocess.then(({exitCode})=>{
              assert.equal(exitCode, 0)
              done();
            })
            await subprocess;
          } else {
            console.log("Skipped use specific webpack and html-webpack-plugin");
            done();
          }
        }, 300000);

        jest.setTimeout(300000);

        it(`should build successfully`, async function(done) {
          const subprocess = execa(package_manager, ["build", "--noninteractive"],
          {stdio: stdio, cwd: useCra ? craDir : tempDir, all: writeLogs })

          if (writeLogs) {
            const write = rfs.createWriteStream(
              path.join(testArtifactsDir, `${example}-${package_manager}-build.txt`));
            subprocess.all.pipe(write);
          }

          subprocess.then(({exitCode})=>{
            assert.equal(exitCode, 0)
            done();
          })
          await subprocess;
        }, 300000);

        jest.setTimeout(300000);

        it(`should start devserver and exit`, async function(done) {

          const subprocess = execa(package_manager, ["start"],
          {stdio: stdio, cwd: useCra ? craDir : tempDir, all: writeLogs })

          if (writeLogs) {
            const write = rfs.createWriteStream(
              path.join(testArtifactsDir, `${example}-${package_manager}-start.txt`));
            subprocess.all.pipe(write);
          }

          let resolved = false;
          let timer;

          try {
            await new Promise(async (resolve, reject) =>{
              console.info(`${package_manager} start for ${example} `);
              const waitForData = data => {
                if (data.toString().includes('Server-side HMR Enabled!') || data.toString().includes('> SPA Started on port')) {
                  resolved = true;
                  subprocess.off('data', waitForData)
                  clearTimeout(timer);
                  resolve();
                }
              }
              timer = setTimeout(function() {
                subprocess.off('data', waitForData)
                reject();
              }, 30000)
              subprocess.stdout.on('data', waitForData);
            })
          } catch {
          }
          if (razzleMeta.yarnStartDelay) {
            await new Promise((r) => setTimeout(r, razzleMeta.yarnStartDelay));
          }
          if (resolved) {
            try {
              await page.goto(`${razzleMeta.protocol||'http'}://localhost:${razzleMeta.port||'3000'}/`);
              await page.screenshot({ path: path.join(testArtifactsDir, `${example}.png`) });
            } catch {

            }
          }

          await new Promise((r) => setTimeout(r, 2000));

          terminate(subprocess.pid, 'SIGINT', { timeout: 3000 }, async () => {
            terminate(subprocess.pid);
            assert.ok(resolved, `yarn start for ${example} failed`);
            done();
          });

        }, 300000);

      });
    });
  });

});


================================================
FILE: test/fixtures/build-default/package.json
================================================
{
  "scripts": {
    "build": "razzle build"
  },
  "name": "build-default",
  "license": "MIT"
}


================================================
FILE: test/fixtures/build-default/public/nothing.txt
================================================
nothing

================================================
FILE: test/fixtures/build-default/src/client.css
================================================
body {
  margin: 0;
}


================================================
FILE: test/fixtures/build-default/src/client.js
================================================
require('./client.css');
const logo = require('./logo.png');

module.exports = { client: true, logo };


================================================
FILE: test/fixtures/build-default/src/index.js
================================================
module.exports = { server: true };


================================================
FILE: test/fixtures/build-default-spa/package.json
================================================
{
  "scripts": {
    "build": "razzle build"
  },
  "name": "build-default-spa",
  "license": "MIT"
}


================================================
FILE: test/fixtures/build-default-spa/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

================================================
FILE: test/fixtures/build-default-spa/public/nothing.txt
================================================
nothing

================================================
FILE: test/fixtures/build-default-spa/razzle.config.js
================================================
'use strict';

module.exports = {
  options: {
    buildType: 'spa',
  }
};


================================================
FILE: test/fixtures/build-default-spa/src/client.css
================================================
body {
  margin: 0;
}


================================================
FILE: test/fixtures/build-default-spa/src/client.js
================================================
require('./client.css');
const logo = require('./logo.png');

module.exports = { client: true, logo };


================================================
FILE: test/fixtures/build-with-babelrc/.babelrc
================================================
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

================================================
FILE: test/fixtures/build-with-babelrc/package.json
================================================
{
  "scripts": {
    "build": "razzle build"
  },
  "name": "build-with-babelrc",
  "license": "MIT"
}


================================================
FILE: test/fixtures/build-with-babelrc/public/nothing.txt
================================================
nothing

================================================
FILE: test/fixtures/build-with-babelrc/src/client.css
================================================
body {
  margin: 0;
}


================================================
FILE: test/fixtures/build-with-babelrc/src/client.js
================================================
require('./client.css');
const logo = require('./logo.png');

module.exports = { client: true, logo };


================================================
FILE: test/fixtures/build-with-babelrc/src/index.js
================================================
module.exports = { server: true };


================================================
FILE: test/fixtures/build-with-custom-config/package.json
================================================
{
  "scripts": {
    "build": "razzle build"
  },
  "name": "build-with-custom-config",
  "license": "MIT"
}


================================================
FILE: test/fixtures/build-with-custom-config/public/nothing.txt
================================================
nothing

================================================
FILE: test/fixtures/build-with-custom-config/razzle.config.js
================================================
'use strict';

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    if (opts.env.target === 'node' && !opts.env.dev) {
      config.output.filename = 'custom.js';
    }

    return config;
  },
};


================================================
FILE: test/fixtures/build-with-custom-config/src/client.css
================================================
body {
  margin: 0;
}


================================================
FILE: test/fixtures/build-with-custom-config/src/client.js
================================================
require('./client.css');
const logo = require('./logo.png');

module.exports = { client: true, logo };


================================================
FILE: test/fixtures/build-with-custom-config/src/index.js
================================================
module.exports = { server: true };


================================================
FILE: test/fixtures/build-with-custom-config-invalid/package.json
================================================
{
  "scripts": {
    "build": "razzle build"
  },
  "name": "build-with-custom-config-invalid",
  "license": "MIT"
}


================================================
FILE: test/fixtures/build-with-custom-config-invalid/public/nothing.txt
================================================
nothing

================================================
FILE: test/fixtures/build-with-custom-config-invalid/razzle.config.js
================================================
'use strict';
// Package is not installed in order to simulate bad config
const BundleAnalyzerPlugin = require('somethingnothere')
  .BundleAnalyzerPlugin;

module.exports = {
  modifyWebpackConfig(opts) {
    const config = opts.webpackConfig;
    if (opts.env.target === 'web') {
      config.plugins = [...config.plugins, new BundleAnalyzerPlugin()];
    }

    return config;
  },
};


================================================
FILE: test/fixtures/build-with-custom-config-invalid/src/client.css
================================================
body {
  margin: 0;
}


================================================
FILE: test/fixtures/build-with-custom-config-invalid/src/client.js
================================================
require('./client.css');
const logo = require('./logo.png');

module.exports = { client: true, logo };


================================================
FILE: test/fixtures/build-with-custom-config-invalid/src/index.js
================================================
module.exports = { server: true };


================================================
FILE: test/fixtures/util.js
================================================
'use strict';

const shell = require('shelljs');
const path = require('path');
const glob = require('glob');

const rootDir = path.join(path.resolve(__dirname), '..', '..');

const fs = require('fs-extra');

const silent = true;

function flatten(arr) {
  return arr.reduce(function (flat, toFlatten) {
    return flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten);
  }, []);
}

const getWorkspaceDirs = (absolute = false) => {
  const rootJson = JSON.parse(fs.readFileSync(path.join(rootDir, 'package.json')));
  const workspaceDirs = flatten(rootJson.workspaces.map(item =>
    glob.sync(item, {cwd: rootDir, absolute: absolute})
  ));
  return workspaceDirs;
};

const getWorkspacePackages = () => {
  const packages = getWorkspaceDirs(true)
    .map(item => JSON.parse(fs.readFileSync(path.join(item, 'package.json'))).name);
  return packages;
};

const removeWorkspacePackages = (fromPath) => {
  const stagePath = fromPath || process.cwd();
  const workspacePackages = getWorkspacePackages();
  const packageJson = path.join(stagePath, 'package.json');

  if (fs.existsSync(packageJson)) {
    const packageJsonData = JSON.parse(fs.readFileSync(packageJson));

    const newPackageJsonData = ["dependencies", "devDependencies"].reduce((acc, depType) => {
      if (acc.packageJsonData[depType]) {
        acc.packageJsonData[depType] = Object.keys(acc.packageJsonData[depType]).reduce((depsAcc, dep) => {
          if (workspacePackages.includes(dep)) {
            acc.removedPackages.push(dep);
            delete depsAcc[dep];
          }
          return depsAcc;
        }, acc.packageJsonData[depType]);
      }
      return acc;
    }, { packageJsonData: packageJsonData, removedPackages: []});

    fs.writeFileSync(packageJson, JSON.stringify(newPackageJsonData.packageJsonData, null, '  '));
    return newPackageJsonData.removedPackages;
  }
};

const resolutionsYalc = (fromPath) => {
  const stagePath = fromPath || process.cwd();
  const packageJson = path.join(stagePath, 'package.json');

  if (fs.existsSync(packageJson)) {
    const packageJsonData = JSON.parse(fs.readFileSync(packageJson));

    const newPackageJsonData = ["dependencies", "devDependencies"].reduce((acc, depType) => {
      acc.resolutions = acc.resolutions || {};
      if (acc[depType]) {
        Object.keys(acc[depType]).reduce((depsAcc, dep) => {
          if (acc[depType][dep].indexOf('.yalc') !== -1) {
            acc.resolutions[dep] = acc[depType][dep];
          }
          return depsAcc;
        }, acc[depType]);
      }
      return acc;
    }, packageJsonData);

    return fs.writeFileSync(packageJson, JSON.stringify(newPackageJsonData, null, '  '));
  }
};

const scriptsYalc = (fromPath) => {
  const stagePath = fromPath || process.cwd();
  const packageJson = path.join(stagePath, 'package.json');

  if (fs.existsSync(packageJson)) {
    const packageJsonData = JSON.parse(fs.readFileSync(packageJson));
    packageJsonData.scripts = packageJsonData.scripts || {};
    packageJsonData.scripts['updateyalc'] = `cd ${rootDir} && yarn yalc-publish-all`;
    return fs.writeFileSync(packageJson, JSON.stringify(packageJsonData, null, '  '));
  }
};

const copyExample = (exampleName, stageName) => {
  const stagePath = path.join(process.cwd(), stageName);
  fs.copySync(path.join(rootDir, 'examples', exampleName), stagePath);
  return stagePath;
};

const yalcPublishAll = () => {
  return getWorkspaceDirs().map(dir=>shell.exec(`yalc publish ${dir}`))
};

const yalcPublishPushAll = () => {
  return getWorkspaceDirs().map(dir=>shell.exec(`yalc publish --push ${dir}`))
};

const yalcAddAll = (packages, cwd) => {
  if (packages) {
    console.log('Installing ' + packages + ' with yalc');
  }
  return (packages ? packages : getWorkspacePackages()).map(pkg=>shell.exec(`yalc add --no-pure ${pkg}`, { cwd: cwd ? cwd : process.cwd() }))
};

const setupStageWithExample = (
  stageName,
  exampleName,
  symlink=true,
  yarnlink=false,
  install=false,
  test=false
) => {
  const packagesPath = path.join(rootDir, 'packages');

  let silentState = shell.config.silent; // save old silent state
  let verboseState = shell.config.verbose; // save old silent state

  shell.config.verbose = !silent;
  shell.config.silent = silent;

  const stagePath = copyExample(exampleName, stageName);

  shell.cd(stagePath);
  if (install) {
    shell.exec("yarn install", { env: Object.assign(process.env, {NODE_ENV:"development"}) });
  }
  if (symlink) {
    fs.ensureSymlinkSync(
      path.join(rootDir, 'node_modules'),
      path.join(stagePath, 'node_modules')
    );
    fs.ensureSymlinkSync(
      path.join(rootDir, 'node_modules', '.bin'),
      path.join(stagePath, 'node_modules', '.bin')
    );
    fs.ensureSymlinkSync(
      packagesPath,
      path.join(stagePath, 'packages')
    );
  }
  if (yarnlink) {
    const dirs = fs.readdirSync(packagesPath, { withFileTypes:true })
      .map(dir=>{ return dir.isDirectory ? dir.name: dir });
    for (const packageName of dirs) {
      const packagePath = path.join(packagesPath, packageName);
      shell.cd(packagePath);
      shell.exec(`yarn link`);
      shell.cd(stagePath);
      shell.exec(`yarn link ${packageName}`);
      if (!silent) console.log(`Linked ${packageName} to ${stagePath}`);
    }
  }
  if (test) {
    shell.exec("yarn run test", { env: Object.assign(process.env, {CI:"true"}) });
  }

  shell.config.verbose = verboseState;
  shell.config.silent = silentState;

  return stagePath;
};

module.exports = {

  getWorkspaceDirs: getWorkspaceDirs,

  getWorkspacePackages: getWorkspacePackages,

  removeWorkspacePackages: removeWorkspacePackages,

  yalcPublishAll: yalcPublishAll,

  yalcPublishPushAll: yalcPublishPushAll,

  yalcAddAll: yalcAddAll,

  yalcSetupStageWithExample: (
    stageName,
    exampleName
  ) => {

    let silentState = shell.config.silent; // save old silent state
    let verboseState = shell.config.verbose; // save old silent state

    shell.config.verbose = true;
    shell.config.silent = false;

    yalcPublishAll();
    const stagePath = copyExample(exampleName, stageName);
    removeWorkspacePackages(stagePath);

    shell.cd(stagePath);

    yalcAddAll();

    resolutionsYalc(stagePath);

    scriptsYalc(stagePath);

    shell.exec("yarn install", { env: Object.assign(process.env, {NODE_ENV:"development"}) });

    shell.config.verbose = verboseState;
    shell.config.silent = silentState;

    return stagePath;
  },


  copyExample: copyExample,

  setupStage: (stageName) => {
    const stagePath = path.join(rootDir, stageName);
    fs.ensureDirSync(stagePath);
    shell.cd(stagePath);
  },

  setupStageWithFixture: (stageName, fixtureName) => {
    const stagePath = path.join(rootDir, stageName);

    fs.copySync(path.join(rootDir, 'test', 'fixtures', fixtureName), stagePath);

    fs.ensureSymlinkSync(
      path.join(rootDir, 'node_modules'),
      path.join(stagePath, 'node_modules')
    );
    fs.ensureSymlinkSync(
      path.join(rootDir, 'packages'),
      path.join(stagePath, 'packages')
    );
    shell.cd(stagePath);
  },

  setupStageWithExample: setupStageWithExample,

  teardownStage: stageName => {
    shell.cd(rootDir);
    fs.removeSync(path.join(rootDir, stageName));
  },

  rootDir,
};


================================================
FILE: test/jest.e2e.config.json
================================================
{
  "roots": ["<rootDir>/e2e"],
  "collectCoverageFrom": ["**/*.js"],
  "testMatch": [
      "<rootDir>/e2e/**/*(*.)@(spec|test).(ts|js)?(x)"
  ]
}


================================================
FILE: test/jest.examples.config.js
================================================
const testType = process.env.COMPLEX !== "true" ? "simple" : "complex";

module.exports = {
  roots: ["<rootDir>/examples"],
  collectCoverageFrom: ["**/*.js"],
  testMatch: [
    "<rootDir>/examples/**/*(*.)@(spec|test).(ts|js)?(x)"
  ],
  reporters: [
    "default",
    ["jest-html-reporters", {
      pageTitle: `${testType} examples tests report.html`,
      filename: `test-artifacts/${testType}-examples-report.html`,
    }]
  ]
};


================================================
FILE: test/utils/psKill.js
================================================
'use strict';

const psTree = require('ps-tree');

// Loops through processes and kills them
module.exports = (pid, signal = 'SIGKILL', callback) => {
  psTree(pid, (err, children) => {
    let arr = [pid].concat(children.map(p => p.PID));
    arr = arr.filter((item, poss) => arr.indexOf(item) === poss);
    arr.forEach(tpid => {
      try {
        process.kill(tpid, signal);
      } catch (ex) {
        const logger = console;
        logger.log('Could not kill process', tpid, ex);
      }
    });
    if (callback) {
      callback();
    }
  });
};


================================================
FILE: website/.babelrc
================================================
{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-macros", "./.nextra/babel-plugin-nextjs-mdx-patch"]
}

================================================
FILE: website/.github/CODEOWNERS
================================================
* @jaredpalmer


================================================
FILE: website/.gitignore
================================================
node_modules
.next
.DS_Store
yarn-error.log

================================================
FILE: website/.nextra/arrow-right.js
================================================
export default ({ width = 24, height = 24, ...props }) => {
  return (
    <svg
      width={width}
      height={height}
      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
        d="M3 12h18m0 0l-6.146-6M21 12l-6.146 6"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  )
}


================================================
FILE: website/.nextra/babel-plugin-nextjs-mdx-patch.js
================================================
/**
 * Currently it's not possible to export data fetching functions from MDX pages
 * because MDX includes them in `layoutProps`, and Next.js removes them at some
 * point, causing a `ReferenceError`.
 *
 * https://github.com/mdx-js/mdx/issues/742#issuecomment-612652071
 *
 * This plugin can be removed once MDX removes `layoutProps`, at least that
 * seems to be the current plan.
 */

// https://nextjs.org/docs/basic-features/data-fetching
const DATA_FETCH_FNS = ['getStaticPaths', 'getStaticProps', 'getServerProps']

module.exports = () => {
  return {
    visitor: {
      ObjectProperty(path) {
        if (
          DATA_FETCH_FNS.includes(path.node.value.name) &&
          path.findParent(
            (path) =>
              path.isVariableDeclarator() &&
              path.node.id.name === 'layoutProps',
          )
        ) {
          path.remove()
        }
      },
    },
  }
}

// https://github.com/vercel/next.js/issues/12053#issuecomment-622939046


================================================
FILE: website/.nextra/config.js
================================================
import userConfig from '../nextra.config';

const defaultConfig = {
  nextLinks: true,
  prevLinks: true,
  search: true,
};

export default () => {
  return { ...defaultConfig, ...userConfig };
};


================================================
FILE: website/.nextra/directories.js
================================================
import preval from 'preval.macro'
import title from 'title'

const excludes = ['/_app.js', '/_document.js', '/_error.js']

// watch all meta files
const meta = {}
function importAll(r) {
  return r.keys().forEach(key => {
    meta[key.slice(1)] = r(key)
  })
}
importAll(require.context('../pages/', true, /meta\.json$/))

// use macro to load the file list
const items = preval`
  const { readdirSync, readFileSync } = require('fs')
  const { resolve, join } = require('path')
  const extension = /\.(mdx?|jsx?)$/
  
  function getFiles(dir, route) {
    const files = readdirSync(dir, { withFileTypes: true })

    // go through the directory
    const items = files
      .map(f => {
        const filePath = resolve(dir, f.name)
        const fileRoute = join(route, f.name.replace(extension, '').replace(/^index$/, ''))

        if (f.isDirectory()) {
          const children = getFiles(filePath, fileRoute)
          if (!children.length) return null
          return { name: f.name, children, route: fileRoute }
        } else if (f.name === 'meta.json') {
          return null
        } else if (extension.test(f.name)) {
          return { name: f.name.replace(extension, ''), route: fileRoute }
        }
      })
      .map(item => {
        if (!item) return
        return { ...item, metaPath: join(route, 'meta.json') }
      })
      .filter(Boolean)

    return items
  }
  module.exports = getFiles(join(process.cwd(), 'pages'), '/')
`

const attachPageConfig = function (items) {
  let folderMeta = null
  let fnames = null

  return items
    .filter(item => !excludes.includes(item.name))
    .map(item => {
      const { metaPath, ...rest } = item
      folderMeta = meta[metaPath]
      if (folderMeta) {
        fnames = Object.keys(folderMeta)
      }

      const pageConfig = folderMeta?.[item.name]

      if (rest.children) rest.children = attachPageConfig(rest.children)

      if (pageConfig) {
        if (typeof pageConfig === 'string') {
          return { ...rest, title: pageConfig }
        }
        return { ...rest, ...pageConfig }
      } else {
        if (folderMeta) {
          return null
        }
        return { ...rest, title: title(item.name) }
      }
    })
    .filter(Boolean)
    .sort((a, b) => {
      if (folderMeta) {
        return fnames.indexOf(a.name) - fnames.indexOf(b.name)
      }
      // by default, we put directories first
      if (!!a.children !== !!b.children) {
        return !!a.children ? -1 : 1
      }
      // sort by file name
      return a.name < b.name ? -1 : 1
    })
}

export default () => {
  return attachPageConfig(items)
}


================================================
FILE: website/.nextra/docsearch.js
================================================
import { useRef, useEffect } from 'react'

export default function () {
  const input = useRef(null)

  useEffect(() => {
    const inputs = ['input', 'select', 'button', 'textarea']

    const down = (e) => {
      if (
        document.activeElement &&
        inputs.indexOf(document.activeElement.tagName.toLowerCase() !== -1)
      ) {
        if (e.key === '/') {
          e.preventDefault()
          input.current?.focus()
        }
      }
    }

    window.addEventListener('keydown', down)
    return () => window.removeEventListener('keydown', down)
  }, [])

  useEffect(() => {
    if (window.docsearch) {
      window.docsearch({
        apiKey: '247dd86c8ddbbbe6d7a2d4adf4f3a68a',
        indexName: 'vercel_swr',
        inputSelector: 'input#algolia-doc-search'
      })
    }
  }, [])

  return <div className="relative w-full md:w-64 mr-2">
    <input
      id="algolia-doc-search"
      className="appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-full"
      type="search"
      placeholder='Search ("/" to focus)'
      ref={input}
    />
  </div>
}


================================================
FILE: website/.nextra/github-icon.js
================================================
export default ({ height = 40 }) => {
  return <svg height={height} viewBox="0 0 24 24" fill="none">
    <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"/>
  </svg>
}

================================================
FILE: website/.nextra/layout.js
================================================
import React, {
  useState,
  useEffect,
  useMemo,
  useContext,
  createContext,
} from 'react';
import { useRouter } from 'next/router';
import Head from 'next/head';
import Link from 'next/link';
import slugify from '@sindresorhus/slugify';
import 'focus-visible';
import cn from 'classnames';
import { SkipNavContent } from '@reach/skip-nav';

import Theme from './theme';
import SSGContext from './ssg';
import Search from './search';
// import DocSearch from './docsearch'
import GitHubIcon from './github-icon';
import ArrowRight from './arrow-right';

import getDirectories from './directories';
import getConfig from './config';

const config = getConfig();
const directories = getDirectories();
const TreeState = new Map();
const titleType = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
const MenuContext = createContext(false);

const flatten = (list) => {
  return list.reduce((flat, toFlatten) => {
    return flat.concat(
      toFlatten.children ? flatten(toFlatten.children) : toFlatten
    );
  }, []);
};

const flatDirectories = flatten(directories);

function Folder({ item, anchors }) {
  const route = useRouter().route + '/';
  const active = route.startsWith(item.route + '/');
  const open = TreeState[item.route] ?? item?.open ?? false;
  const [_, render] = useState(false);

  useEffect(() => {
    if (active) {
      TreeState[item.route] = true;
    }
  }, [active]);

  return (
    <li
      className={cn({
        'active-route': active,
        active: open,
      })}
    >
      <button
        onClick={() => {
          if (active) return;
          TreeState[item.route] = !open;
          render((x) => !x);
        }}
        className="focus:shadow-outline"
      >
        {item.title}
      </button>
      <div
        style={{
          display: open ? '' : 'none',
        }}
      >
        <Menu dir={item.children} base={item.route} anchors={anchors} />
      </div>
    </li>
  );
}

function File({ item, anchors }) {
  const { setMenu } = useContext(MenuContext);
  const route = useRouter().route + '/';
  const active = route.startsWith(item.route + '/');

  let title = item.title;
  // if (item.title.startsWith('> ')) {
  // title = title.substr(2)
  if (anchors?.length) {
    if (active) {
      return (
        <li className={active ? 'active' : ''}>
          <Link href={item.route}>
            <a>{title}</a>
          </Link>
          <ul>
            {anchors.map((anchor) => {
              const slug = slugify(anchor || '');
              return (
                <li key={`a-${slug}`}>
                  <a
                    href={'#' + slug}
                    onClick={() => setMenu(false)}
                    className="focus:shadow-outline"
                  >
                    <span className="flex">
                      <span className="mr-2 opacity-25">#</span>
                      <span className="inline-block">{anchor}</span>
                    </span>
                  </a>
                </li>
              );
            })}
          </ul>
        </li>
      );
    }
  }

  return (
    <li className={active ? 'active' : ''}>
      <Link href={item.route}>
        <a onClick={() => setMenu(false)} className="focus:shadow-outline">
          {title}
        </a>
      </Link>
    </li>
  );
}

function Menu({ dir, anchors }) {
  return (
    <ul>
      {dir.map((item) => {
        if (item.children) {
          return <Folder key={item.name} item={item} anchors={anchors} />;
        }
        return <File key={item.name} item={item} anchors={anchors} />;
      })}
    </ul>
  );
}

function Sidebar({ show, anchors }) {
  return (
    <aside
      className={`h-screen bg-white flex-shrink-0 w-full md:w-64 md:border-r md:block fixed md:sticky z-10 ${
        show ? '' : 'hidden'
      }`}
      style={{
        top: '4rem',
        height: 'calc(100vh - 4rem)',
      }}
    >
      <div className="sidebar w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto">
        <Menu dir={directories} anchors={anchors} />
      </div>
    </aside>
  );
}

const NextLink = ({ currentIndex }) => {
  let next = flatDirectories[currentIndex + 1];

  if (!config.nextLinks || !next) {
    return null;
  }

  return (
    <Link href={next.route}>
      <a className="text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center ml-2">
        {next.title}
        <ArrowRight className="inline ml-1 flex-shrink-0" />
      </a>
    </Link>
  );
};

const PrevLink = ({ currentIndex }) => {
  let prev = flatDirectories[currentIndex - 1];

  if (!config.prevLinks || !prev) {
    return null;
  }

  return (
    <Link href={prev.route}>
      <a className="text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center mr-2">
        <ArrowRight className="transform rotate-180 inline mr-1 flex-shrink-0" />
        {prev.title}
      </a>
    </Link>
  );
};

const Layout = ({ filename, full, title: _title, ssg = {}, children }) => {
  const [menu, setMenu] = useState(false);
  const router = useRouter();
  const { route, pathname } = router;

  const filepath = route.slice(0, route.lastIndexOf('/') + 1);
  const titles = React.Children.toArray(children).filter((child) =>
    titleType.includes(child.props.mdxType)
  );
  const anchors = titles
    .filter((child) => child.props.mdxType === 'h2')
    .map((child) => child.props.children);

  useEffect(() => {
    if (menu) {
      document.body.classList.add('overflow-hidden');
    } else {
      document.body.classList.remove('overflow-hidden');
    }
  }, [menu]);

  const currentIndex = useMemo(
    () => flatDirectories.findIndex((dir) => dir.route === pathname),
    [flatDirectories, pathname]
  );

  const title =
    flatDirectories[currentIndex]?.title ||
    titles.find((child) => child.props.mdxType === 'h1')?.props.children ||
    'Untitled';

  const props = {
    filepath: filepath + filename,
    route,
  };

  return (
    <>
      <Head>
        <title>
          {title}
          {config.titleSuffix || ''}
        </title>
        {config.head ? config.head(props) : null}
      </Head>
      <div className="main-container flex flex-col">
        <nav className="flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b px-6 ">
          <div className="mr-6 md:mr-0 md:w-full flex items-center">
            <Link href="/">
              <a className="no-underline text-current inline-flex items-center p-2 -m-2 hover:opacity-75">
                {config.logo}
              </a>
            </Link>
          </div>

          {config.search && <Search directories={flatDirectories} />}
          {/* <DocSearch /> */}

          {config.github ? (
            <a
              className="text-current p-2 -mr-2"
              href={config.github}
              target="_blank"
              rel="noopener"
              aria-label="GitHub Repository"
            >
              <GitHubIcon height={28} />
            </a>
          ) : null}
          <button
            className="block md:hidden p-2 -mr-2 ml-2"
            onClick={() => setMenu(!menu)}
          >
            <svg
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <line x1="3" y1="12" x2="21" y2="12"></line>
              <line x1="3" y1="6" x2="21" y2="6"></line>
              <line x1="3" y1="18" x2="21" y2="18"></line>
            </svg>
          </button>
        </nav>
        <div className="flex flex-1 h-full">
          <MenuContext.Provider value={{ setMenu }}>
            <Sidebar show={menu} anchors={anchors} />
          </MenuContext.Provider>
          <SSGContext.Provider value={ssg}>
            {full ? (
              <content className="relative pt-16 w-full overflow-x-hidden">
                {children}
              </content>
            ) : (
              <>
                <SkipNavContent />
                <content className="relative pt-20 pb-16 px-6 md:px-8 w-full max-w-full overflow-x-hidden">
                  <main className="max-w-screen-md">
                    <Theme>{children}</Theme>
                    <footer className="mt-24">
                      <nav className="flex flex-row items-center justify-between">
                        <div>
                          <PrevLink currentIndex={currentIndex} />
                        </div>

                        <div>
                          <NextLink currentIndex={currentIndex} />
                        </div>
                      </nav>

                      <hr />

                      {config.footer ? config.footer(props) : null}
                    </footer>
                  </main>{' '}
                </content>
              </>
            )}
          </SSGContext.Provider>
        </div>
      </div>
    </>
  );
};

export default (filename) => {
  return (props) => <Layout filename={filename} {...props} />;
};


================================================
FILE: website/.nextra/nextra-loader.js
================================================
module.exports = function(source, map) {
  this.cacheable()
  const fileName = this.resourcePath.slice(this.resourcePath.lastIndexOf('/') + 1)
  const prefix = `import withNextraLayout from '.nextra/layout'\n\n`
  const suffix = `\n\nexport default withNextraLayout("${fileName}")`
  source = prefix + source + suffix
  this.callback(null, source, map)
}


================================================
FILE: website/.nextra/nextra.js
================================================
const path = require('path')

module.exports = (pluginOptions = {
  extension: /\.mdx?$/
}) => (nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx']
}) => {
  const extension = pluginOptions.extension || /\.mdx$/

  return Object.assign({}, nextConfig, {
    webpack(config, options) {
      
      config.resolve.symlinks = false

      config.module.rules.push({
        test: extension,
        use: [
          options.defaultLoaders.babel,
          {
            loader: '@mdx-js/loader',
            options: pluginOptions.options
          },
          {
            loader: path.resolve('.nextra', 'nextra-loader.js')
          }
        ]
      })

      if (typeof nextConfig.webpack === 'function') {
        return nextConfig.webpack(config, options)
      }

      return config
    }
  })
}


================================================
FILE: website/.nextra/search.js
================================================
import { useMemo, useCallback, useRef, useState, useEffect } from 'react';
import matchSorter from 'match-sorter';
import cn from 'classnames';
import { useRouter } from 'next/router';
import Link from 'next/link';

const Item = ({ title, active, href, onMouseOver, search }) => {
  const highlight = title.toLowerCase().indexOf(search.toLowerCase());

  return (
    <Link href={href}>
      <a className="block no-underline" onMouseOver={onMouseOver}>
        <li
          className={cn('py-2 px-3 text-gray-800', {
            'bg-gray-100': active,
          })}
        >
          {title.substring(0, highlight)}
          <span className="bg-teal-300">
            {title.substring(highlight, highlight + search.length)}
          </span>
          {title.substring(highlight + search.length)}
        </li>
      </a>
    </Link>
  );
};

const Search = ({ directories }) => {
  const router = useRouter();
  const [show, setShow] = useState(false);
  const [search, setSearch] = useState('');
  const [active, setActive] = useState(0);
  const input = useRef(null);

  const results = useMemo(() => {
    if (!search) return [];

    // Will need to scrape all the headers from each page and search through them here
    // (similar to what we already do to render the hash links in sidebar)
    // We could also try to search the entire string text from each page
    return matchSorter(directories, search, { keys: ['title'] });
  }, [search]);

  const handleKeyDown = useCallback(
    (e) => {
      switch (e.key) {
        case 'ArrowDown': {
          e.preventDefault();
          if (active + 1 < results.length) {
            setActive(active + 1);
          }
          break;
        }
        case 'ArrowUp': {
          e.preventDefault();
          if (active - 1 >= 0) {
            setActive(active - 1);
          }
          break;
        }
        case 'Enter': {
          router.push(results[active].route);
          break;
        }
      }
    },
    [active, results, router]
  );

  useEffect(() => {
    setActive(0);
  }, [search]);

  useEffect(() => {
    const inputs = ['input', 'select', 'button', 'textarea'];

    const down = (e) => {
      if (
        document.activeElement &&
        inputs.indexOf(document.activeElement.tagName.toLowerCase() !== -1)
      ) {
        if (e.key === '/') {
          e.preventDefault();
          input.current.focus();
        } else if (e.key === 'Escape') {
          setShow(false);
        }
      }
    };

    window.addEventListener('keydown', down);
    return () => window.removeEventListener('keydown', down);
  }, []);

  const renderList = show && results.length > 0;

  return (
    <div className="relative w-full md:w-64 mr-2">
      {renderList && (
        <div className="search-overlay z-1" onClick={() => setShow(false)} />
      )}
      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
        <svg
          fill="none"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="2"
          viewBox="0 0 24 24"
          stroke="currentColor"
          className="h-4 w-4 text-gray-400"
        >
          <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
      <input
        onChange={(e) => {
          setSearch(e.target.value);
          setShow(true);
        }}
        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"
        type="search"
        placeholder='Search ("/" to focus)'
        onKeyDown={handleKeyDown}
        onFocus={() => setShow(true)}
        ref={input}
        aria-label="Search documentation"
      />
      {renderList && (
        <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">
          {results.map((res, i) => {
            return (
              <Item
                key={`search-item-${i}`}
                title={res.title}
                href={res.route}
                active={i === active}
                search={search}
                onMouseOver={() => setActive(i)}
              />
            );
          })}
        </ul>
      )}
    </div>
  );
};

export default Search;


================================================
FILE: website/.nextra/ssg.js
================================================
import { createContext, useContext } from 'react'

const SSGContext = createContext({})

export default SSGContext
export const useSSG = () => useContext(SSGContext)


================================================
FILE: website/.nextra/styles.css
================================================
@tailwind base;

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}
@supports (font-variation-settings: normal) {
  html {
    font-family: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI',
      'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
      'Helvetica Neue', sans-serif;
  }
}

html {
  @apply subpixel-antialiased;
  font-size: 16px;
  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
}
body {
  @apply bg-white;
}

h1 {
  @apply text-4xl font-bold tracking-tight;
}
h2 {
  @apply text-3xl font-semibold tracking-tight mt-10;
  @apply border-b;
}
h3 {
  @apply text-2xl font-semibold tracking-tight mt-8;
}
h4 {
  @apply text-xl font-semibold tracking-tight mt-8;
}
h5 {
  @apply text-lg font-semibold tracking-tight mt-8;
}
h6 {
  @apply text-base font-semibold tracking-tight mt-8;
}
a {
  @apply text-blue-600 underline;
}
p {
  @apply mt-6 leading-7;
}
hr {
  @apply my-8;
}
code {
  @apply p-1 text-sm text-gray-800 bg-gray-500 bg-opacity-25 rounded;
}
pre {
  @apply p-4 bg-gray-200 rounded-lg mt-6 mb-4 overflow-x-auto scrolling-touch;
}
pre code {
  @apply p-0 text-black bg-transparent rounded-none;
}
a code {
  @apply text-current no-underline;
}
figure {
  @apply mb-8 relative;
}
video {
  @apply absolute top-0 left-0;
  cursor: pointer;
}
figure figcaption {
  @apply text-sm text-gray-600;
}
@media (min-width: 768px) {
  figure {
    /* allow figures to overflow, but not exceeding the viewport width */
    @apply -mr-56;
    max-width: calc(100vw - 20rem);
  }
}

@tailwind components;
@tailwind utilities;

.main-container {
  min-height: 100vh;
}

.sidebar {
  @apply select-none;
}
.sidebar ul ul {
  @apply ml-5;
}
.sidebar a:focus-visible,
.sidebar button:focus-visible {
  @apply shadow-outline;
}
.sidebar li.active > a {
  @apply font-semibold text-black bg-gray-200;
}
.sidebar button,
.sidebar a {
  @apply block w-full text-left text-base text-black no-underline text-gray-600 mt-1 p-2 rounded select-none outline-none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.sidebar a:hover,
.sidebar button:hover {
  @apply text-gray-900 bg-gray-100;
}

.sidebar .active-route > button {
  @apply text-black font-medium;
}

.sidebar .active-route > button:hover {
  @apply text-current bg-transparent cursor-default;
}

content ul {
  @apply list-disc ml-6 mt-6;
}
content li {
  @apply mt-2;
}
.subheading-anchor {
  margin-top: -84px;
  display: inline-block;
  position: absolute;
  width: 1px;
}

.subheading-anchor + a:hover .anchor-icon,
.subheading-anchor + a:focus .anchor-icon {
  opacity: 1;
}
.anchor-icon {
  opacity: 0;
  @apply ml-2 text-gray-500;
}

h2 a {
  @apply no-underline;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

.search-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.algolia-autocomplete .algolia-docsearch-suggestion--category-header span {
  display: inline-block;
}
.algolia-autocomplete .ds-dropdown-menu {
  width: 500px;
  min-width: 300px;
  max-width: calc(100vw - 50px);
}

[data-reach-skip-link] {
  @apply sr-only;
}

[data-reach-skip-link]:focus {
  @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;
}


================================================
FILE: website/.nextra/theme.js
================================================
import { MDXProvider } from '@mdx-js/react'
import slugify from '@sindresorhus/slugify'
import Link from 'next/link'
import Highlight, { defaultProps } from 'prism-react-renderer'

const THEME = {
  plain: {
    color: '#000',
    backgroundColor: 'transparent',
  },
  styles: [
    {
      types: ['keyword'],
      style: {
        color: '#ff0078',
        fontWeight: 'bold',
      },
    },
    {
      types: ['comment'],
      style: {
        color: '#999',
        fontStyle: 'italic',
      },
    },
    {
      types: ['string', 'url', 'attr-value'],
      style: {
        color: '#028265',
      },
    },
    {
      types: ['builtin', 'char', 'constant', 'language-javascript'],
      style: {
        color: '#000',
      },
    },
    {
      types: ['attr-name'],
      style: {
        color: '#d9931e',
        fontStyle: 'normal',
      },
    },
    {
      types: ['punctuation', 'operator'],
      style: {
        color: '#333',
      },
    },
    {
      types: ['number', 'function', 'tag'],
      style: {
        color: '#0076ff',
      },
    },
    {
      types: ['boolean', 'regex'],
      style: {
        color: '#d9931e',
      },
    },
  ],
}

// Anchor links

const HeaderLink = ({ tag: Tag, children, ...props }) => {
  const slug = slugify(children || '')
  return (
    <Tag {...props}>
      <span className="subheading-anchor" id={slug} />
      <a href={'#' + slug} className="text-current no-underline no-outline">
        {children}
        <span className="anchor-icon select-none" aria-hidden>#</span>
      </a>
    </Tag>
  )
}

const H2 = ({ children, ...props }) => {
  return (
    <HeaderLink tag="h2" {...props}>
      {children}
    </HeaderLink>
  )
}

const H3 = ({ children, ...props }) => {
  return (
    <HeaderLink tag="h3" {...props}>
      {children}
    </HeaderLink>
  )
}

const H4 = ({ children, ...props }) => {
  return (
    <HeaderLink tag="h4" {...props}>
      {children}
    </HeaderLink>
  )
}

const H5 = ({ children, ...props }) => {
  return (
    <HeaderLink tag="h5" {...props}>
      {children}
    </HeaderLink>
  )
}

const H6 = ({ children, ...props }) => {
  return (
    <HeaderLink tag="h6" {...props}>
      {children}
    </HeaderLink>
  )
}

const A = ({ children, ...props }) => {
  const isExternal = props.href?.startsWith('https://')
  if (isExternal) {
    return (
      <a target="_blank" rel="noopener" {...props}>
        {children}
      </a>
    )
  }
  return (
    <Link href={props.href}>
      <a {...props}>{children}</a>
    </Link>
  )
}

const Code = ({ children, className, highlight, ...props }) => {
  if (!className) return <code {...props}>{children}</code>

  const highlightedLines = highlight ? highlight.split(',').map(Number) : []

  // https://mdxjs.com/guides/syntax-highlighting#all-together
  const language = className.replace(/language-/, '')
  return (
    <Highlight
      {...defaultProps}
      code={children.trim()}
      language={language}
      theme={THEME}
    >
      {({ className, style, tokens, getLineProps, getTokenProps }) => (
        <code className={className} style={{ ...style }}>
          {tokens.map((line, i) => (
            <div
              key={i}
              {...getLineProps({ line, key: i })}
              style={
                highlightedLines.includes(i + 1)
                  ? {
                      background: '#cce0f5',
                      margin: '0 -1rem',
                      padding: '0 1rem',
                    }
                  : null
              }
            >
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          ))}
        </code>
      )}
    </Highlight>
  )
}

const components = {
  h2: H2,
  h3: H3,
  h4: H4,
  h5: H5,
  h6: H6,
  a: A,
  code: Code,
}

export default ({ children }) => {
  return <MDXProvider components={components}>{children}</MDXProvider>
}


================================================
FILE: website/components/features.js
================================================
import React from 'react';
export default () => (
  <div>
    <p className="text-lg mb-2 text-gray-600 md:text-xl">
      Build modern JavaScript applications. From zero to production.
    </p>
  </div>
);


================================================
FILE: website/components/logo.js
================================================
import React from 'react';

export const Logo = ({ height }) => (
  <svg height={height} viewBox="0 0 728 131">
    <title>{'Group 4'}</title>
    <defs>
      <linearGradient
        x1=".258%"
        y1="49.75%"
        x2="101.258%"
        y2="49.75%"
        id="prefix__c"
      >
        <stop stopColor="#3023AE" offset="0%" />
        <stop stopColor="#53A0FD" offset="70.741%" />
        <stop stopColor="#B4EC51" offset="100%" />
      </linearGradient>
      <linearGradient
        x1="101.258%"
        y1="49.75%"
        x2=".258%"
        y2="49.75%"
        id="prefix__d"
      >
        <stop stopColor="#3023AE" offset="0%" />
        <stop stopColor="#53A0FD" offset="70.741%" />
        <stop stopColor="#B4EC51" offset="100%" />
      </linearGradient>
      <linearGradient
        x1=".258%"
        y1="49.75%"
        x2="101.258%"
        y2="49.75%"
        id="prefix__e"
      >
        <stop stopColor="#3023AE" offset="0%" />
        <stop stopColor="#53A0FD" offset="70.741%" />
        <stop stopColor="#B4EC51" offset="100%" />
      </linearGradient>
      <linearGradient
        x1=".258%"
        y1="49.75%"
        x2="101.258%"
        y2="49.75%"
        id="prefix__f"
      >
        <stop stopColor="#3023AE" offset="0%" />
        <stop stopColor="#53A0FD" offset="70.741%" />
        <stop stopColor="#B4EC51" offset="100%" />
      </linearGradient>
      <linearGradient
        x1=".258%"
        y1="49.75%"
        x2="101.258%"
        y2="49.75%"
        id="prefix__g"
      >
        <stop stopColor="#3023AE" offset="0%" />
        <stop stopColor="#53A0FD" offset="70.741%" />
        <stop stopColor="#B4EC51" offset="100%" />
      </linearGradient>
      <linearGradient
        x1=".258%"
        y1="49.75%"
        x2="101.258%"
        y2="49.75%"
        id="prefix__h"
      >
        <stop stopColor="#3023AE" offset="0%" />
        <stop stopColor="#53A0FD" offset="70.741%" />
        <stop stopColor="#B4EC51" offset="100%" />
      </linearGradient>
      <path
        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"
        id="prefix__a"
      />
    </defs>
    <g fill="none" fillRule="evenodd">
      <mask id="prefix__b" fill="#fff">
        <use xlinkHref="#prefix__a" />
      </mask>
      <use fill="#FFF" xlinkHref="#prefix__a" />
      <g mask="url(#prefix__b)">
        <path
          fill="#000"
          d="M-321.581-241.135L820.96 418.512l-17.452 30.229-1142.542-659.647z"
        />
        <path
          fill="url(#prefix__c)"
          d="M0 34.905h1319.293V69.81H0z"
          transform="rotate(30 289.173 -720.646)"
        />
        <path
          fill="#000"
          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"
        />
        <path
          fill="url(#prefix__c)"
          d="M0 69.81h1319.293v34.905H0z"
          transform="rotate(30 93.772 -773.003)"
        />
        <path
          fill="url(#prefix__d)"
          d="M-40.981-10.981h1319.293v34.905H-40.981z"
          transform="rotate(30 93.772 -773.003)"
        />
        <path
          fill="#000"
          d="M-426.296-59.763L716.245 599.884l-17.452 30.228L-443.75-29.534z"
        />
        <g>
          <path
            fill="#000"
            d="M14.65-432.364L1157.19 227.282l-17.452 30.229L-2.803-402.136z"
          />
          <path
            fill="url(#prefix__c)"
            d="M0 34.905h1319.293V69.81H0z"
            transform="rotate(30 814.128 -188.845)"
          />
          <path
            fill="#000"
            d="M-20.255-371.907l1142.541 659.646-17.452 30.229L-37.708-341.679z"
          />
          <g>
            <path
              fill="#000"
              d="M-55.16-311.45L1087.38 348.197l-17.452 30.228L-72.613-281.22z"
            />
            <path
              fill="url(#prefix__c)"
              d="M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z"
              transform="rotate(30 618.727 -241.203)"
            />
            <path
              fill="#000"
              d="M-90.065-250.993l1142.541 659.647-17.452 30.229-1142.542-659.647z"
            />
          </g>
        </g>
        <g>
          <path
            fill="#000"
            d="M-36.824-203.173l1239.73 451.224-11.939 32.8-1239.73-451.224z"
          />
          <path
            fill="url(#prefix__c)"
            d="M0 34.905h1319.293V69.81H0z"
            transform="rotate(20 557.715 -206.007)"
          />
          <path
            fill="#000"
            d="M-60.7-137.573L1179.03 313.65l-11.939 32.8-1239.73-451.225z"
          />
          <g>
            <path
              fill="#000"
              d="M-84.577-71.974l1239.73 451.225-11.938 32.8L-96.515-39.174z"
            />
            <path
              fill="url(#prefix__c)"
              d="M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z"
              transform="rotate(20 260.78 -258.365)"
            />
            <path
              fill="#000"
              d="M-108.454-6.374l1239.73 451.225-11.938 32.8-1239.73-451.225z"
            />
          </g>
        </g>
        <g>
          <path
            fill="#000"
            d="M-231.11 351.479l267-462.458 21.45 12.384-267 462.458z"
          />
          <path
            fill="url(#prefix__e)"
            d="M0 24.768h534v24.768H0z"
            transform="rotate(-60 188.835 375.886)"
          />
          <path
            fill="#000"
            d="M-188.21 376.247l267-462.458 21.45 12.384-267 462.458z"
          />
          <g>
            <path
              fill="#000"
              d="M-157.487 420.414L132.675-82.161l23.382 13.5-290.161 502.575z"
            />
            <path
              fill="url(#prefix__f)"
              d="M25 52.726h534.39v24.863H25z"
              transform="rotate(-60 264.083 361.22)"
            />
            <path
              fill="url(#prefix__g)"
              d="M.534.402h580.323v27H.534z"
              transform="rotate(-60 264.083 361.22)"
            />
            <path
              fill="#000"
              d="M-101.09 426.456L166.107-36.34l21.532 12.432-267.195 462.796z"
            />
          </g>
        </g>
        <g>
          <path
            fill="#000"
            d="M341.875-524.215l1142.54 659.647-17.452 30.228-1142.54-659.646z"
          />
          <path
            fill="url(#prefix__c)"
            d="M0 34.905h1319.293V69.81H0z"
            transform="rotate(30 1149.136 375.84)"
          />
          <path
            fill="#000"
            d="M306.97-463.758L1449.51 195.89l-17.452 30.228-1142.54-659.646z"
          />
          <g>
            <path
              fill="#000"
              d="M272.065-403.3l1142.54 659.646-17.452 30.229-1142.54-659.647z"
            />
            <path
              fill="url(#prefix__c)"
              d="M0 69.81h1319.293v34.905H0zM0 0h1319.293v34.905H0z"
              transform="rotate(30 953.735 323.482)"
            />
            <path
              fill="#000"
              d="M237.16-342.843L1379.7 316.803l-17.452 30.229-1142.54-659.647z"
            />
          </g>
        </g>
        <g>
          <path
            fill="#000"
            d="M746.149-263.604l527.77 628.972-29.331 24.612-527.77-628.972z"
          />
          <path
            fill="url(#prefix__h)"
            d="M0 38.289h821.064v38.289H0z"
            transform="rotate(50 655.724 668.259)"
          />
          <path
            fill="#000"
            d="M687.487-214.38l527.77 628.971-29.332 24.612-527.77-628.972z"
          />
          <g>
            <path
              fill="#000"
              d="M628.825-165.157l527.77 628.972-29.332 24.611-527.77-628.971z"
            />
            <path
              fill="url(#prefix__h)"
              d="M0 76.578h821.064v38.289H0zM0 0h821.064v38.289H0z"
              transform="rotate(50 532.558 610.825)"
            />
            <path
              fill="#000"
              d="M570.162-115.934l527.77 628.972-29.33 24.612-527.77-628.972z"
            />
          </g>
        </g>
      </g>
    </g>
  </svg>
);


================================================
FILE: website/components/video.js
================================================
import { useRef, useCallback, useEffect } from 'react'
import { useInView } from 'react-intersection-observer'
import 'intersection-observer'

export default ({ src, caption, ratio }) => {
  const [inViewRef, inView] = useInView({
    threshold: 1,
  })
  const videoRef = useRef()

  const setRefs = useCallback(
    (node) => {
      // Ref's from useRef needs to have the node assigned to `current`
      videoRef.current = node
      // Callback refs, like the one from `useInView`, is a function that takes the node as an argument
      inViewRef(node)

      if (node) {
        node.addEventListener('click', function () {
          if (this.paused) {
            this.play()
          } else {
            this.pause()
          }
        })
      }
    },
    [inViewRef]
  )

  useEffect(() => {
    if (!videoRef || !videoRef.current) {
      return
    }

    if (inView) {
      videoRef.current.play()
    } else {
      videoRef.current.pause()
    }
  }, [inView])

  return (
    <figure>
      <div style={{ paddingBottom: ratio * 100 + '%' }}/>
      <video loop muted autoPlay playsInline ref={setRefs}>
        <source src={src} type="video/mp4" />
      </video>
      {caption && <figcaption>{caption}</figcaption>}
    </figure>
  )
}


================================================
FILE: website/jsconfig.json
================================================
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

================================================
FILE: website/next.config.js
================================================
const withNextra = require('./.nextra/nextra')();
module.exports = withNextra();


================================================
FILE: website/nextra.config.js
================================================
import { Logo } from 'components/logo';

export default {
  github: 'https://github.com/jaredpalmer/razzle',
  titleSuffix: ' – Razzle',
  logo: (
    <>
      <Logo height={22} />
      <span className=" font-extrabold hidden md:inline sr-only">Razzle</span>
      <span className="mx-3 text-gray-600 font-normal hidden md:inline whitespace-no-wrap">
        React applications. From zero to <em>production.</em>
      </span>
    </>
  ),
  head: () => (
    <>
      {/* Favicons, meta */}
      <link
        rel="apple-touch-icon"
        sizes="180x180"
        href="/favicon/apple-touch-icon.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="32x32"
        href="/favicon/favicon-32x32.png"
      />
      <link
        rel="icon"
        type="image/png"
        sizes="16x16"
        href="/favicon/favicon-16x16.png"
      />
      <link rel="manifest" href="/favicon/site.webmanifest" />

      <meta name="msapplication-TileColor" content="#ffffff" />
      <meta name="theme-color" content="#ffffff" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta httpEquiv="Content-Language" content="en" />
      <meta
        name="description"
        content="Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications."
      />
      <meta
        name="og:description"
        content="Build production ready React applications. Razzle is toolchain for modern static and dynamic websites and web applications."
      />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="@jaredpalmer" />
      <meta name="twitter:image" content="https://razzlejs.org/og_image.png" />
      <meta name="og:title" content="Razzle: React Apps. Zero to Production." />
      <meta name="og:url" content="https://razzlejs.org" />
      <meta name="og:image" content="https://razzlejs.org/og_image.png" />
      <meta name="apple-mobile-web-app-title" content="Razzle" />
      {/* <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
        media="print"
        onload="this.media='all'"
      /> */}
    </>
  ),
  footer: ({ filepath }) => (
    <>
      <div className="mt-24 flex justify-between flex-col-reverse md:flex-row items-center md:items-end">
        <a
          href="https://jaredpalmer.com/?utm_source=razzle"
          target="_blank"
          rel="noopener"
          className="inline-flex items-center no-underline text-current font-semibold"
        >
          <span className="mr-1">A Jared Palmer Project</span>
        </a>
        <div className="mt-6" />
        <a
          className="text-sm"
          href={
            'https://github.com/jaredpalmer/razzle/tree/master/website/pages' +
            filepath
          }
          target="_blank"
          rel="noopener"
        >
          Edit this page on GitHub
        </a>
      </div>
    </>
  ),
};


================================================
FILE: website/package.json
================================================
{
  "name": "razzle-site",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "start": "next",
    "build": "rm -fr .next && next build"
  },
  "author": "Jared Palmer",
  "license": "MIT",
  "dependencies": {
    "@reach/skip-nav": "^0.10.5",
    "@sindresorhus/slugify": "^1.0.0",
    "classnames": "^2.2.6",
    "focus-visible": "^5.1.0",
    "intersection-observer": "^0.10.0",
    "markdown-to-jsx": "^6.11.4",
    "match-sorter": "^4.1.0",
    "next": "^9.4.4",
    "next-google-fonts": "^1.1.0",
    "prism-react-renderer": "^1.1.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-intersection-observer": "^8.26.2"
  },
  "devDependencies": {
    "@mdx-js/loader": "^1.6.5",
    "babel-plugin-macros": "^2.8.0",
    "postcss-preset-env": "^6.7.0",
    "preval.macro": "^5.0.0",
    "tailwindcss": "^1.4.6",
    "title": "^3.4.2"
  }
}


================================================
FILE: website/pages/_app.js
================================================
import '.nextra/styles.css'
import GoogleFonts from 'next-google-fonts'

export default function Nextra({ Component, pageProps }) {
  return (
    <>
      <GoogleFonts
        href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
        rel="stylesheet"
      />
      <Component {...pageProps} />
    </>
  )
}


================================================
FILE: website/pages/_document.js
================================================
import React from 'react'
import Document, { Html, Head, Main, NextScript } from 'next/document'
import { SkipNavLink } from '@reach/skip-nav'

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <SkipNavLink />
        <body>
          <Main />
          <NextScript />
          <script
            src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
            async
            defer
          />
        </body>
      </Html>
    )
  }
}

export default MyDocument


================================================
FILE: website/pages/change-log.mdx
================================================
import { useContext } from 'react';
import Markdown from 'markdown-to-jsx';

import { useSSG } from '.nextra/ssg';

export const getStaticProps = ({ params }) => {
  return (
    fetch('https://api.github.com/repos/jaredpalmer/razzle/releases')
      .then((res) => res.json())
      // we keep the most recent 3 releases here
      .then((releases) => ({ props: { ssg: releases.slice(0, 10) } }))
  );
};

export const ReleasesRenderer = () => {
  const releases = useSSG();
  return (
    <Markdown>
      {releases
        .map((release) => {
          return `## <a href="${
            release.html_url
          }" target="_blank" rel="noopener">${
            release.tag_name
          }</a>\n\nPublished on ${new Date(
            release.published_at
          ).toDateString()}.\n\n${release.body}`;
        })
        .join('\n\n')}
    </Markdown>
  );
};

# Change Log

Please visit the [Razzle release page](https://github.com/jaredpalmer/razzle/releases) for all historical releases.

<ReleasesRenderer />


================================================
FILE: website/pages/deployment-options/aws.md
================================================
# Deploy Razzle on AWS


Add razzle config.

```js
// razzle.config.js
'use strict';
const path = require('path');

module.exports = {
  options: {
    buildType: 'serverless'
  },
  modifyPaths({
    paths,
  }) {
    paths.prodAppServerIndexJs = path.join(paths.appSrc, 'index.prod');
    return paths;
  },
  modifyWebpackConfig({
    env: {
      target,
      dev,
    },
    webpackConfig,
    paths,
  }) {
    if (target === 'node') {
      if (!dev) {
        webpackConfig.entry.server = [paths.prodAppServerIndexJs];
      }
    }
    return webpackConfig;
  },
};
```

Modify `src/server.js` like so:

```js
const public_bucket_domain = process.env.PUBLIC_BUCKET_DOMAIN || '';
const public_bucket_url = public_bucket_domain ? `https://${public_bucket_domain}` : '';

const cssLinksFromAssets = (assets, entrypoint) => {
  return assets[entrypoint] ? assets[entrypoint].css ?
  assets[entrypoint].css.map(asset=>
    `<link rel="stylesheet" href="${public_bucket_url}${asset}">`
  ).join('') : '' : '';
};

const jsScriptTagsFromAssets = (assets, entrypoint, extra = '') => {
  return assets[entrypoint] ? assets[entrypoint].js ?
  assets[entrypoint].js.map(asset=>
    `<script src="${public_bucket_url}${asset}"${extra}></script>`
  ).join('') : '' : '';
};
```

Add this to `src/index.prod.js`

```js
const serverless = require('serverless-http');

module.exports = {
  handler: serverless(require('./server').default)
};
```

Add serverless-http dependency

```bash
yarn add serverless-http
```

Build the Razzle project

```bash
yarn build
```

Init cdk app

```bash
mkdir razzle-cdk
cd razzle-cdk

cdk init app --language typescript
```

Add `razzle-cdk` dependencies in `razzle-cdk` directory

```bash
yarn 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
```

Add `razzle-cdk/bin/razzle-cdk.ts`

```typescript
// bin/cdk.ts
#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from '@aws-cdk/core';
import { RazzleCdkStack } from '../lib/razzle-cdk-stack';

const app = new cdk.App();
new RazzleCdkStack(app, 'RazzleCdkStack', {name:'basic'});
```

Add `razzle-cdk/lib/helpers.ts`

```typescript
// razzle-cdk/lib/helpers.ts
import * as SSM from '@aws-cdk/aws-ssm';
import * as CDK from '@aws-cdk/core';

export const getParam = (scope: CDK.Construct, name: string) => {
  return SSM.StringParameter.valueForStringParameter(scope, name);
};

export interface ConfigProps extends CDK.StackProps {
  name: string;
}

export class ModeStack extends CDK.Stack {
  public readonly mode: string = this.node.tryGetContext('mode') || 'development';
  public readonly Mode: string =
    this.mode.replace(/^\w/, (c: string) => c.toUpperCase());

  constructor(scope: CDK.Construct, id: string, props?: ConfigProps) {
    super(scope, id, props);
  }
}
```

Add `razzle-cdk/lib/razzle-cdk-stack.ts`

```typescript
// razzle-cdk/lib/razzle-cdk-stack.ts
import * as CDK from '@aws-cdk/core';
import * as S3 from '@aws-cdk/aws-s3';
import * as S3Deployment from '@aws-cdk/aws-s3-deployment';
import * as Lambda from '@aws-cdk/aws-lambda';
import * as APIGateway from '@aws-cdk/aws-apigateway';
import * as SSM from '@aws-cdk/aws-ssm';
import * as SecretsManager from '@aws-cdk/aws-secretsmanager';

import { ConfigProps, getParam, ModeStack } from './helpers';

export class RazzleCdkStack extends ModeStack {
  constructor(app: CDK.App, id: string, props: ConfigProps) {
    super(app, id, props);

    /**
     * S3 bucket to the /public folder
     */
    const publicBucketName = `my-razzle-app-bucket-public-files-${this.mode}`;
    const bucketPublicFiles = new S3.Bucket(this, publicBucketName, {
      publicReadAccess: true,
      bucketName: publicBucketName.toLowerCase(),
    });

    /**
     * Store S3 bucket name
     */
    new SSM.StringParameter(this, `MyRazzleAppBucketAssetsName${this.Mode}`, {
      description: `My Razzle App S3 Bucket Name for Assets on ${this.Mode}`,
      parameterName: `/${props.name}/S3/Assets/Name`,
      stringValue: bucketPublicFiles.bucketName,
    });

    /**
     * Store S3 domainName name
     */
    new SSM.StringParameter(this, `MyRazzleAppBucketAssetsDomainName${this.Mode}`, {
      description: `My Razzle App S3 Bucket DomainName for Assets on ${this.Mode}`,
      parameterName: `/${props.name}/S3/Assets/DomainName`,
      stringValue: bucketPublicFiles.bucketDomainName,
    });

    /**
     * Deploy public folder of build to `my-razzle-app-bucket-public-files-${this.mode}` bucket
     */
    new S3Deployment.BucketDeployment(this, `${publicBucketName}-deploy`, {
      sources: [S3Deployment.Source.asset('../build/public')],
      destinationBucket: bucketPublicFiles,
    });

    /**
     * Environment Variables for SSR Function
     */
    const environmentKeys = [
      'NODE_ENV',
    ];

    const environmentSecret = SecretsManager.Secret.fromSecretAttributes(
      this,
      `MyRazzleAppEnvironmentSecret${this.Mode}`,
      {
        secretArn: getParam(this, `MyRazzleAppSecretsArn${this.Mode}`),
      },
    );

    let environment: { [key: string]: string } = {};
    for (const key of environmentKeys) {
      environment[key] = environmentSecret.secretValueFromJson(key).toString();
    }

    environment['PUBLIC_BUCKET_DOMAIN'] = bucketPublicFiles.bucketRegionalDomainName;

    /**
     * Razzle SSR Function
     */
    const myRazzleAppSsrFunction = new Lambda.Function(this, `MyRazzleAppSSRFunction${this.Mode}`, {
      description: `Lambda Function that runs My Razzle App SSR on ${this.Mode}`,
      code: Lambda.Code.fromAsset('../build', {
        exclude: ['public', 'static', '*.json'],
      }),
      handler: 'server.handler',
      runtime: Lambda.Runtime.NODEJS_12_X,
      memorySize: 512,
      timeout: CDK.Duration.seconds(5),
      environment,
      tracing: Lambda.Tracing.ACTIVE,
    });

    /**
     * Razzle ApiGateway
     */
    const razzleSsrApiGatewayName = `MyRazzleAppSSRApiGateway${this.Mode}`;
    const api = new APIGateway.RestApi(this, razzleSsrApiGatewayName, {
      description: `ApiGateway that exposes My Razzle App SSR on ${this.Mode}`,
      binaryMediaTypes: ['*/*'],
      endpointTypes: [APIGateway.EndpointType.REGIONAL],
      deployOptions: {
        stageName: this.mode,
      },
    });
    const integration = new APIGateway.LambdaIntegration(myRazzleAppSsrFunction);
    const root = api.root;
    const pathApi = api.root.addResource('{proxy+}');

    root.addMethod('GET', integration);
    pathApi.addMethod('ANY', integration);

    /**
     * Razzle ApiGateway ID
     */
    new SSM.StringParameter(this, `MyRazzleAppAPIGatewayRestId${this.Mode}`, {
      description: `My Razzle App ApiGateway ID on ${this.Mode}`,
      parameterName: `/${props.name}/APIGateway/ApiId`,
      stringValue: api.restApiId,
    });
  }
}
```

Bootstrap and deploy

```bash
aws configure
echo '{"NODE_ENV": "development" }' | jq '.' > mycreds.json
aws secretsmanager create-secret --name MyRazzleAppEnvironmentSecretDevelopment \
    --description "My Development secrets created with the CLI" \
    --secret-string file://mycreds.json > arn.json
arn=($(cat arn.json | jq --raw-output '.ARN'))
echo $arn
aws ssm put-parameter --name=MyRazzleAppSecretsArnDevelopment --value=$arn
yarn cdk bootstrap
yarn cdk deploy
```


================================================
FILE: website/pages/deployment-options/azure.md
================================================
# Deploy Razzle on Azure

[Install the Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli)

Add razzle config

```js
// razzle.config.js
'use strict';

module.exports = {
  options: {
    forceRuntimeEnvVars: ['HOST', 'PORT']
  }
};
```

Create web.config

```xml
<?xml version="1.0" encoding="utf-8"?>
<!--
     web.config
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- 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 -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="build/server.js" verb="*" modules="iisnode"/>
    </handlers>
    <rewrite>
      <rules>
        <!-- Do not interfere with requests for node-inspector debugging -->
        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
          <match url="^build/server.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="build/public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="build/server.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled
      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <iisnode watchedFiles="web.config;*.js"/>
  </system.webServer>
</configuration>
```

Zip the Razzle project

```bash
zip -r site.zip * -x "build/*" "node_modules/*"
```

Login to Azure

```bash
az login
```

Deploy the Razzle project to Azure

```bash
webappname=myRazzle$RANDOM

# Create a resource group.
az group create \
  --location westeurope \
  --name myResourceGroup

# Create an App Service plan in `FREE` tier.
az appservice plan create \
  --name myAppServicePlan \
  --resource-group myResourceGroup \
  --sku FREE \
  --is-linux

# Create a web app.
az webapp create \
  --name $webappname \
  --resource-group myResourceGroup \
  --plan myAppServicePlan \
  --runtime "node|12-lts"

# Enable building with zip deploy
az webapp config appsettings set \
  --name $webappname \
  --resource-group myResourceGroup \
  --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

# Get ZipDeploy publishing profile and query for publish URL and credentials
creds=($(az webapp deployment list-publishing-profiles \
  --name $webappname \
  --resource-group myResourceGroup \
  --query "[?contains(publishMethod, 'ZipDeploy')].[publishUrl,userName,userPWD]" \
  --output tsv))

# Use cURL to perform http zip upload. You can use any http tool to do this instead.
curl -X POST \
  -u ${creds[1]}:${creds[2]} \
  --data-binary @"site.zip" \
  https://${creds[0]}/api/zipdeploy

# Copy the result of the following command into a browser to see the static HTML site.
echo https://$webappname.azurewebsites.net
```


================================================
FILE: website/pages/deployment-options/layer0.md
================================================
# Deploy Razzle on Layer0
  
- Install Layer0 CLI by the following command:
```bash
npm i -g @layer0/cli
```

- Initialize the Razzle project with Layer0 by the following command:
```bash
0 init
```

- Run `layer0 deploy` to get deploying right away.


================================================
FILE: website/pages/deployment-options/meta.json
================================================
{
  "aws": "AWS",
  "azure": "Azure",
  "plesk": "Plesk",
  "vercel": "Vercel",
  "layer0": "Layer0"
}


================================================
FILE: website/pages/deployment-options/plesk.md
================================================
# Deploy Razzle on Plesk

First make sure your Plesk install supports Node.js

Go 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`.

If 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:

Under home click `Add or Remove Components`.

Then click `Add/Remove Components` - Under `Web hosting` set `NodeJS support` and
`Phusion Passenger server` to `install` and click continue.

After you made sure your Plesk supports Node.js add razzle config.

```js
// razzle.config.js
'use strict';

module.exports = {
  options: {
    forceRuntimeEnvVars: ['HOST', 'PORT']
  }
};
```

Create `handler.js` in the app root

```js
// handler.js
module.exports = require('./build/server.js');
```

Build the Razzle project and make a tar archive

```bash
yarn build
tar czvf site.tar.gz build package.json handler.js
```

Go into `File Manager` for your domain on Plesk.

Create a `site` directory in the `Home directory` upload the site.tar.gz here and extract it.

Go into the domain manager for your domain. Click the `Node.js` icon.

Set `Document Root` to `/site/build/public`,  `Application Root` to `/site` and `Application Startup File` to `handler.js`.   

Then click `Enable Node.js` followed by `NPM Install` at the top.

Go into the domain manager for your domain. Click `Open in web`.


================================================
FILE: website/pages/deployment-options/vercel.md
================================================
# Deploy Razzle on Vercel

Create this vercel.json in the root directory of your project:

```json
{
    "name": "my-razzle-app",
    "version": 2,
    "builds": [
        {
            "src": "build/public/**",
            "use": "@vercel/static"
        },
        {
            "src": "build/server.js",
            "use": "@vercel/node"
        }
    ],
    "routes": [
        { "src": "/favicon.ico", "dest": "build/public/favicon.ico" },
        { "src": "/robots.txt", "dest": "build/public/robots.txt" },
        { "src": "/static/(.*)", "dest": "build/public/static/$1" },
        { "src": "/(.*)", "dest": "build/server.js" }

    ]
}
```

Then do a local build with 'yarn build'.

Afterwards deploy from a local terminal with 'vercel'


================================================
FILE: website/pages/docs/customization.md
================================================
# Customization

## Options

As of Razzle 3.2, you can modify some parts of Razzle with options.

We show the default options here:

```js
//./razzle.config.js
module.exports = {
  options: {
    verbose: false, // set to true to get more info/error output
    debug: { // debug flags
      options: false, // print webpackOptions that will be used in webpack config
      config: false, // print webpack config
      nodeExternals: false // print node externals debug info 
    },
    buildType: 'iso', // or 'spa', 'serveronly', 'iso-serverless' and 'serveronly-serverless'
    cssPrefix: 'static/css',
    jsPrefix: 'static/js',
    mediaPrefix: 'static/media',
    staticCssInDev: false, // static css in development build (incompatible with css hot reloading)
    browserslist: undefined, // or what your apps package.json says
    enableSourceMaps: true,
    enableReactRefresh: false,
    enableTargetBabelrc: false, // enable to use .babelrc.node and .babelrc.web
    enableBabelCache: true,
    forceRuntimeEnvVars: [], // force env vars to be read from env e.g. ['HOST', 'PORT']
    disableWebpackbar: false, // can be true to disable all environments or target to disable specific environment such as "node" or "web"
    staticExport: {
      parallel: 5, // how many pages to render at a time
      routesExport: 'routes',
      renderExport: 'render',
      scriptInline: false,
      windowRoutesVariable: 'RAZZLE_STATIC_ROUTES',
      windowRoutesDataVariable: 'RAZZLE_STATIC_DATA_ROUTES'
    },
  },
};
```

More options will be added in the future, some options now in experimental will be moved here.

## Plugins

As of Razzle 2.0, you can add your plugins to modify your setup.

- [TypeScript](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-typescript)
- [Vue](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-vue)
- [Elm](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-elm)
- [MDX](https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-mdx)
- [See All](https://www.npmjs.com/search?q=razzle-plugin)

### Using Plugins

You 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...

```bash
yarn add razzle-plugin-xxxx
```

```js
//./razzle.config.js
module.exports = {
  plugins: ['xxxx'],
};
```


### Writing Plugins

Plugins are simply a collection of functions that modify and return Razzle/webpack/jest configuration.

There are five functions that can be used to hook into Razzle configuration.

- modifyOptions - modifies default Razzle options and options passed to Razzle in the `options` key in `razzle.config.js`.
- modifyPaths - modifies default Razzle paths.
- modifyWebpackOptions - modifies some default options that will be used to configure webpack/ webpack loaders and plugins.
- modifyWebpackConfig - modifies the created webpack config.
- modifyJestConfig - modifies jest config that is used to run tests for yor app.

Here is a complete plugin that uses all five functions, usually you just need `modifyWebpackConfig` and/or `modifyWebpackOptions`.

```js
'use strict';

module.exports = {
  modifyOptions({
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the default options/ options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
    },
  }) {
    // Do some stuff...
    return razzleOptions;
  },
  modifyPaths({
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
    },
    paths, // the default paths that will be used by Razzle.
  }) {
    // Do some stuff...
    return paths;
  },
  modifyWebpackOptions({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the default options that will be used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    if (target === 'web') {
      // client only
    }

    if (target === 'node') {
      // server only
    }

    if (dev) {
      // dev only
    } else {
      // prod only
    }

    // Do some stuff...
    return webpackOptions;
  },
  modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    if (target === 'web') {
      // client only
    }

    if (target === 'node') {
      // server only
    }

    if (dev) {
      // dev only
    } else {
      // prod only
    }

    // Do some stuff...
    return webpackConfig;
  },
  modifyJestConfig({
    jestConfig, // the created jest config
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    // Do some stuff...
    return jestConfig;
  },
};
```

Plugins also support using promises, this example uses `modifyWebpackConfig` but promises are supported in all hooks.

```js
'use strict';

module.exports = {
  modifyWebpackConfig({
    env: { target, dev },
    webpackConfig,
    webpackObject,
    options: { pluginOptions, razzleOptions, webpackOptions },
    paths,
  }) {
    return new Promise(async resolve => {
      if (target === 'web') {
        // client only
      }

      if (target === 'node') {
        // server only
      }

      if (dev) {
        // dev only
        await getDevcert();
      } else {
        // prod only
      }

      // Do some stuff...
      resolve(webpackConfig);
    });
  },
};
```

### Using scoped packages

Razzle supports plugins using scoped packages.

Name your plugin `@scope-name/razzle-plugin-<name>`

And reference it in your `razzle.config.js` as follows

```
//./razzle.config.js
module.exports = {
  plugins: ['@scope-name/name'],
};
```

Note that `razzle-plugin-` is omitted

## Customizing Babel Config

Razzle 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.

To 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.

Here's an example `.babelrc` file:

```json
{
  "presets": ["razzle/babel"],
  "plugins": []
}
```

You 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`.

To add presets/plugins **without configuring them**, you can do it this way:

```json
{
  "presets": ["razzle/babel"],
  "plugins": ["@babel/plugin-proposal-do-expressions"]
}
```

To add presets/plugins **with custom configuration**, do it on the `razzle/babel` preset like so:

```json
{
  "presets": [
    [
      "razzle/babel",
      {
        "preset-env": {},
        "transform-runtime": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}
```

To learn more about the available options for each config, visit their documentation site.

> Razzle uses the **current** Node.js version for server-side compilations.

> The `modules` option on `"preset-env"` should be kept to `false`, otherwise webpack code splitting is turned off.

## Extending Webpack

You can also extend the underlying webpack config. Create a file called `razzle.config.js` in your project's root.

All the hook functions supported in plugins is also supported here. We show only one function here for brevity.

In Razzle 3.3 `modify` was deprecated. In Razzle 4.0 it was replaced with `modifyWebpackConfig`.

```js
// razzle.config.js

module.exports = {
  modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that will be used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    if (target === 'web') {
      // client only
    }

    if (target === 'node') {
      // server only
    }

    if (dev) {
      // dev only
    } else {
      // prod only
    }

    // Do some stuff...
    return webpackConfig;
  },
};
```

A 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:

```js
// razzle.config.js
const modifications = require('my-razzle-modifictions');

module.exports = modifications;
```

Last 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.

#### New in razzle 3.2

`razzle.config.js` modify also support using promises

```js
// razzle.config.js

module.exports = {
  modifyWebpackConfig({
    env: { target, dev },
    webpackConfig,
    webpackObject,
    options: { razzleOptions, webpackOptions },
    paths,
  }) {
    return new Promise(async resolve => {
      if (target === 'web') {
        // client only
      }

      if (target === 'node') {
        // server only
      }

      if (dev) {
        // dev only
        await getDevcert();
      } else {
        // prod only
      }

      // Do some stuff...
      resolve(webpackConfig);
    });
  },
};
```

## CSS Modules

Razzle 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`.

```jsx
import React from 'react';
import styles from './style.module.css';

const Component = () => <div className={styles.className} />;

export default Component;
```

## Polyfills

Polyfills for IE 9, IE 10, and IE 11 are no longer included by default (but you can opt in!)
We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.

First, install `react-app-polyfill`:

`npm install react-app-polyfill`
or

`yarn add react-app-polyfill`
Next, place one of the following lines at the very top of `src/client.js:`

```javascript
import 'react-app-polyfill/ie9'; // For IE 9-11 support
import 'react-app-polyfill/ie11'; // For IE 11 support
```

## Transpilation of external modules

If you need to transpile external modules with arrow functions etc.

Make sure the modules are not externalized and are added to the babelRule include.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackOptions({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    options: {
      webpackOptions, // the default options that will be used to configure webpack/ webpack loaders and plugins
    }
  }) {
    webpackOptions.notNodeExternalResMatch = (request, context) => {
       return /themodule|anothermodule/.test(request)
    };
    webpackOptions.babelRule.include = webpackOptions.babelRule.include.concat([
      /themodule/,
      /anothermodule/
    ]);
    return webpackOptions;
  }
};
```

## Absolute Imports

You 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.

Below 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:

```json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```

To make the Jest test runner work with absolute imports, you'll need to add a `jest` configuration option to your package.json:

```jsonc
{
  "name": "my-razzle-app",
  "version": "1.0.0",
  "license": "MIT",
  /* ...dependencies, etc... */
  "jest": {
    "moduleDirectories": ["node_modules", "src"]
  }
}
```

Now 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:

```js
import Button from 'components/Button';
```

## Aliased Paths/ Modules

You 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.

```json
{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@extra/*": ["../extra/*"]
    }
  }
}
```

Now 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:

```js
import Button from '@extra/components/Button';
```

## Experimental

Razzle has support for some experimental features. Coming soon.


================================================
FILE: website/pages/docs/environment-variables.md
================================================
# Environment Variables

## Build-time Variables

**The following environment variables are embedded during the build time.**

- `process.env.RAZZLE_PUBLIC_DIR`: Absolute path to the public directory in the server's filesystem.
- `process.env.RAZZLE_ASSETS_MANIFEST`: Path to a file containing compiled asset outputs
- `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.
- `process.env.VERBOSE`: default is false, setting this to true will not clear the console when you make edits in development (useful for debugging).
- `process.env.PORT`: The `BUILD_TARGET=server` build listens on this port for all NODE_ENVs. default is `3000`
- `process.env.HOST`: The IP address that the server will bind to. default is `0.0.0.0`, for INADDR_ANY
- `process.env.NODE_ENV`: `'development'` or `'production'`
- `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.
- `process.env.BUILD_TARGET`: either `'client'` or `'server'`
- `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`.
- `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}/`

You can create your own custom environment variables that will be inlined during the build. They must start
with `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.

These 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`.

## Runtime Variables

Using 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`...

```js
// config.js
export const runtimeConfig =
  typeof window !== 'undefined'
    ? {
        // client
        myThing: window.env.myThing,
        anotherThing: window.env.anotherThing,
      }
    : {
        // server
        myThing: process.env.MY_THING,
        anotherThing: process.env.ANOTHER_THING,
      };
```

Now we set `window.env` as `runtimeConfig` when we go to render the HTML.

```js
import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript'; // Safer stringify, prevents XSS attacks
import { runtimeConfig } from './config';
const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);

const server = express();

server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const markup = renderToString(<App />);
    res.send(
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${chunks.client.css.map(path => `<link rel="stylesheet" href="${path}">`)}
    </head>
    <body>
        <div id="root">${markup}</div>
        <script>window.env = ${serialize(runtimeConfig)};</script>
        ${chunks.client.js.map(path => `<script src="${path}" defer crossorigin></script>`)}        
    </body>
</html>`
    );
  });

export default server;
```

## Adding Temporary Environment Variables In Your Shell

Defining environment variables can vary between OSes. It’s also important to know that this manner is temporary for the
life of the shell session.

### Windows (cmd.exe)

```cmd
set RAZZLE_SECRET_CODE=abcdef&&npm start
```

(Note: the lack of whitespace is intentional.)

### Linux, macOS (Bash)

```bash
RAZZLE_SECRET_CODE=abcdef npm start
```

## Adding Environment Variables In .env

To define permanent environment variables, create a file called .env in the root of your project:

```
RAZZLE_SECRET_CODE=abcdef
```

## Expanding Environment Variables In .env

Expand variables already on your machine for use in your `.env` file.

For example, to get the environment variable `npm_package_version`:

```
RAZZLE_VERSION=$npm_package_version
# also works:
# RAZZLE_VERSION=${npm_package_version}
```

Or expand variables local to the current `.env` file:

```
DOMAIN=www.example.com
RAZZLE_FOO=$DOMAIN/foo
RAZZLE_BAR=$DOMAIN/bar
```

### What other .env files are can be used?

- `.env`: Default.
- `.env.local`: Local overrides. **This file is loaded for all environments except test.**
- `.env.development`, `.env.test`, `.env.production`: Environment-specific settings.
- `.env.development.local`, `.env.test.local`, `.env.production.local`: Local overrides of environment-specific settings.

Files on the left have more priority than files on the right:

- `npm start`: `.env.development.local`, `.env.development`, `.env.local`, `.env`
- `npm run build`: `.env.production.local`, `.env.production`, `.env.local`, `.env`
- `npm test`: `.env.test.local`, `.env.test`, `.env` (note `.env.local` is missing)

These variables will act as the defaults if the machine does not explicitly set them.<br/>
Please refer to the [dotenv documentation](https://github.com/motdotla/dotenv) for more details.

> Note: If you are defining environment variables for development, your CI and/or hosting platform will most likely need
> 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).


================================================
FILE: website/pages/docs/experimental-features.md
================================================
# Experimental Features

Razzle has support for some experimental features. Coming soon.


================================================
FILE: website/pages/docs/how-it-works.md
================================================
# How Razzle Works

**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.

In 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.


================================================
FILE: website/pages/docs/meta.json
================================================
{
  "customization": "Customization",
  "single-page-applications": "Single Page Applications",
  "environment-variables": "Environment Variables",
  "static-export": "Static Site Generation",
  "experimental-features": "Experimental Features",
  "how-it-works": "How Razzle Works",
  "upgrade-guide": "Upgrade guide"
}


================================================
FILE: website/pages/docs/single-page-applications.md
================================================
# [Single Page Applications](https://github.com/jaredpalmer/razzle/blob/master/examples/basic-spa/)

In 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:

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="icon" href="<%= process.env.PUBLIC_PATH %>favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
  <%= htmlWebpackPlugin.tags.headTags %>
  <!--
      Notice the use of <%= process.env.PUBLIC_PATH %> in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "<%= process.env.PUBLIC_PATH %>/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.
      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <%= htmlWebpackPlugin.tags.bodyTags %>
</body>
</html>
```

Finally, pass `buildType` to your `razzle.config.js` options like so:

```js
'use strict';

module.exports = {
  options: {
    buildType: 'spa',
  }
};
```

This effectively turns Razzle into [create-react-app](https://create-react-app.dev).


================================================
FILE: website/pages/docs/static-export.md
================================================
# Static Site Generation

## What is Static Site Generation (SSG)?

Think 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.

## How To Enable SSG:

Add `export` to your `package.json`'s scripts like so:

```diff
"scripts": {
+  "export": "razzle export",
}
```

Add a `static_export.js` to your src dir:

```js
// ./src/static_export.js

import { renderApp } from './server';

export const render = (req, res) => {
  const { html } = renderApp(req, res);

  res.json({ html });
};

export const routes = () => {
  return ['/', '/about'];
};
```

Run `npm export` or `yarn export`:

Renders a static version of specified routes to the build folder based on the built production app.
Your prerendered app is ready to be served!

## How Razzle SSG Works?

Basically 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.

## Can I use Razzle SSG with X?

Razzle not only works with React, but also Reason, Elm, Vue, Angular, Svelte, and most importantly......whatever comes next

#### render()

Behind 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.
The 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`.

You should call `renderToString()` (or what ever your framework gives you to do SSR) in this function and then pass the result to `res.json()`

```js
export const render = (req, res) => {
  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  res.json({ html });
};
```

(You can re-export your SRR logic from server.js file and use it `static_export`)

#### routes()

You 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`.
You should get all paths that your app has from your CMS in this method and then return it:

```js
export const routes = async () => {
  // data should be an array of strings ["/", "/product/A", "/blog/1", "/blog/2"]
  const { data } = await getAppPaths();
  return data;
};
```

#### Page data

You may also need to save the data that your page uses to re-hydrate the app on the client side.
You 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.

```js
export const render = async (req, res) => {
  const data = await getDataForRoute(req.url);

  const html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );

  res.json({ html, data });
};
```

(NOTE: You should change how your app fetches data on client-side, to read data from `page-data.json`)

## TypeScript Support

Static 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!

## Advanced Configuration

```js
// razzle.config.js

module.exports = {
  options: {
    staticExport: {
      parallel: 5, // how many pages to render at a time
      routesExport: 'routes',
      renderExport: 'render',
      scriptInline: false,
      windowRoutesVariable: 'RAZZLE_STATIC_ROUTES',
      windowRoutesDataVariable: 'RAZZLE_STATIC_DATA_ROUTES',
    },
  },
};
```


================================================
FILE: website/pages/docs/upgrade-guide.md
================================================
# Upgrade guide from 3.x to 4.x

## Dependencies

Update/add razzle core dependencies

```bash
yarn add --dev \
  razzle \
  razzle-dev-utils \
  babel-preset-razzle
```

... and Razzle peerDependencies

Update/add razzle peerdependencies

```bash
yarn add --dev \
  webpack-dev-server@3.11.0 \
  mini-css-extract-plugin@0.9.0 \
  postcss@8.2.4
```

Choose your webpack version

```bash
yarn add --dev webpack@5.24.0 html-webpack-plugin@5.2.0
# or
yarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2
```

Update/add razzle plugins if you use any

```bash
yarn add --dev razzle-plugin-scss
```

## Spa apps

Remove `--type=spa` from scripts

```json
{
  "scripts": {
    "start": "razzle start --type=spa",
    "build": "razzle build --type=spa"
  }
}
```

Add Options

```js
//./razzle.config.js
module.exports = {
  options: {
    buildType: 'spa'
  },
};
```

Update the [template](https://razzlejs.org/docs/single-page-applications)

## Plugins

Plugins are now multiple functions as opposed to one before.

E.g. change:

```js
'use strict';

module.exports = function myRazzlePlugin(config, { target, dev }, webpack, options) {
  // Do some stuff to config
  return config;
};
```

To:

```js
'use strict';

module.exports = {
  modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      pluginOptions, // the options passed to the plugin ({ name:'pluginname', options: { key: 'value'}})
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    // Do some stuff to webpackConfig
    return webpackConfig;
  }
};
```

You can also make use of `modifyOptions`, `modifyPaths`, `modifyWebpackOptions` and `modifyJestConfig`.

To make plugins simpler and more composable.

## Extending Webpack

Modify is now multiple functions as opposed to one before.

E.g. change:

```js
'use strict';
// razzle.config.js

module.exports = {
  modify: (config, { target, dev }, webpack) => {
    // do something to config
    return config;
  },
};
```

To:

```js
'use strict';

module.exports = {
  modifyWebpackConfig({
    env: {
      target, // the target 'node' or 'web'
      dev, // is this a development build? true or false
    },
    webpackConfig, // the created webpack config
    webpackObject, // the imported webpack node module
    options: {
      razzleOptions, // the modified options passed to Razzle in the `options` key in `razzle.config.js` (options: { key: 'value'})
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    },
    paths, // the modified paths that will be used by Razzle.
  }) {
    // Do some stuff to webpackConfig
    return webpackConfig;
  }
};
```

You can also make use of `modifyOptions`, `modifyPaths`, `modifyWebpackOptions` and `modifyJestConfig`.

To make extending webpack simpler.


================================================
FILE: website/pages/getting-started.mdx
================================================
import Link from 'next/link';

# Getting Started

## Quick Start

```sh
npx create-razzle-app my-app
cd my-app
npm start
```

> 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.

_([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))_

Then open http://localhost:3000/ to see your app. Your console should look like this:

<img
  src="https://cloud.githubusercontent.com/assets/4060187/26324663/b31788c4-3f01-11e7-8e6f-ffa48533af54.png"
  width="500px"
  alt="Razzle Development Mode"
/>

**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!

## Razzle has many examples, we might have one that fits your needs

See: [The examples](https://github.com/jaredpalmer/razzle/tree/master/examples)

## Commands

Below is a list of commands you will probably find useful.

### npm start

Runs the project in development mode.
You can view your application at `http://localhost:3000`

The page will reload if you make edits.

### npm run build

Builds the app for production to the build folder.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

By default this uses NODE_ENV=production and asks if you want to run it.

If you don't want the confirmation add --noninteractive to your build command.

If you want to use a different env file e.g. .env.something-staging file you can add --node-env=something-staging

### npm run start:prod

Runs the compiled app in production.

You can again view your application at `http://localhost:3000`

### npm test

Runs the test watcher (Jest) in an interactive mode.
By default, runs tests related to files changed since the last commit.

### npm export

Exports 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.

### rs

If 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.

<img
  src="https://user-images.githubusercontent.com/4060187/37915268-209644d0-30e7-11e8-8ef7-086b529ede8c.png"
  width="500px"
  alt="Razzle Hot Restart"
/>

## Dependencies

To make sure Razzle is installed properly make sure Razzle devDependencies are installed, run:

```bash
yarn add --dev \
  razzle \
  razzle-dev-utils \
  babel-preset-razzle
```

... and Razzle peerDependencies are installed, run:

```bash
yarn add --dev \
  webpack-dev-server@3.11.0 \
  mini-css-extract-plugin@0.9.0 \
  postcss@8.2.4
```

Choose your webpack version

```bash
yarn add --dev webpack@5.65.0 html-webpack-plugin@5.2.0
# or
yarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2
```

Also if there are issues, try adding specific package versions to resolutions in `package.json`.

## Common issues

If you have issues with css this might be related to postcss being resolved wrong.

To fix this add:

```json
{
  "postcss": "8.2.4"
}
```
To resolutions in your package.json. For npm see [here](https://stackoverflow.com/questions/52416312/npm-equivalent-of-yarn-resolutions).

If you get an error like this:

```
node_modules/react-images-upload/index.css:1
.fileUploader {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
```

It means node tries to use `index.css` as a node module.

To fix this make sure the module with the css is not externalized.

```js
// razzle.config.js
'use strict';

module.exports = {
  modifyWebpackOptions({
    options: {
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    }
  }) {

      webpackOptions.notNodeExternalResMatch = (request, context) => {
         return /react-images-upload/.test(request)
      };

    return webpackOptions;
  },
};
```

Dev server not starting and no errors show up

Make razzle more verbose:

```js
// razzle.config.js
'use strict';

module.exports = {
  options: {
    verbose: true
  }
};
```

## Debugging with Inspector

- `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/).

- `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/).

- `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/).

- `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/).


================================================
FILE: website/pages/index.mdx
================================================
import Features from 'components/features';

# Razzle

<Features />

JavaScript 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.

**Razzle comes with the "battery-pack included"**:

- 🔥 Universal Hot Module Replacement, so both the client and server update whenever you make edits. No annoying restarts necessary
- Comes with your favorite ES6 JavaScript goodies (through `babel-preset-razzle`)
- Comes with the same CSS setup as [create-react-app](https://github.com/facebook/create-react-app)
- 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
- Escape hatches for customization via `.babelrc` and `razzle.config.js`
- [Jest](https://github.com/facebook/jest) test runner setup with sensible defaults via `razzle test`
- SPA mode, build client side apps with razzle

## Not ready for Razzle 4.0?

[Razzle 3 docs](https://razzle-git-three-jared.vercel.app/)

## Getting help

If 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.


================================================
FILE: website/pages/meta.json
================================================
{
  "index": "Introduction",
  "getting-started": "Getting Started",
  "docs": { "title": "Documentation", "open": true },
  "deployment-options": "Deployment Options",
  "plugins": "Razzle plugins",
  "change-log": "Change Log",
  "contributing": "Contributing"
}


================================================
FILE: website/pages/plugins/meta.json
================================================
{
  "razzle-plugin-bundle-analyzer": "razzle-plugin-bundle-analyzer",
  "razzle-plugin-graphql": "razzle-plugin-graphql",
  "razzle-plugin-less": "razzle-plugin-less",
  "razzle-plugin-mdx": "razzle-plugin-mdx",
  "razzle-plugin-php": "razzle-plugin-php",
  "razzle-plugin-scss": "razzle-plugin-scss",
  "razzle-plugin-svelte": "razzle-plugin-svelte",
  "razzle-plugin-typescript": "razzle-plugin-typescript",
  "razzle-plugin-vue": "razzle-plugin-vue"
}


================================================
FILE: website/postcss.config.js
================================================
module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env']
}

================================================
FILE: website/public/favicon/site.webmanifest
================================================
{"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"}

================================================
FILE: website/tailwind.config.js
================================================
module.exports = {
  purge: ['./components/**/*.js', './pages/**/*.md', './pages/**/*.mdx', './.nextra/**/*.js', './nextra.config.js'],
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['inter', 'sans-serif'],
    },
    letterSpacing: {
      tight: '-0.015em'
    }
  }
}