[ { "path": ".changeset/README.md", "content": "# Changesets\n\nHello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works\nwith multi-package repos, or single-package repos to help you version and publish your code. You can\nfind the full documentation for it [in our repository](https://github.com/changesets/changesets)\n\nWe have a quick list of common questions to get you started engaging with this project in\n[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)\n" }, { "path": ".changeset/config.json", "content": "{\n \"$schema\": \"https://unpkg.com/@changesets/config@1.6.0/schema.json\",\n \"changelog\": \"@changesets/cli/changelog\",\n \"commit\": false,\n \"linked\": [],\n \"access\": \"public\",\n \"baseBranch\": \"main\",\n \"ignore\": [\"@snowpack/test-*\"]\n}\n" }, { "path": ".editorconfig", "content": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = space\nindent_size = 2\ninsert_final_newline = true\n" }, { "path": ".github/CODEOWNERS", "content": "* @snowpackjs/maintainers\ndocs/* @snowpackjs/docs\n" }, { "path": ".github/ISSUE_TEMPLATE/---bug-report.yml", "content": "name: \"\\U0001F41B Bug Report\"\ndescription: Report an issue or possible bug\ntitle: \"\\U0001F41B BUG:\"\nlabels: []\nassignees: []\nbody:\n - type: markdown\n attributes:\n value: |\n Thank you for taking the time to file a bug report! Please fill out this form as completely as possible.\n - type: checkboxes\n attributes:\n label: Quick checklist\n options:\n - label: I am using the **latest version of Snowpack** and all plugins.\n - type: input\n attributes:\n label: What package manager are you using?\n placeholder: npm, yarn, pnpm\n validations:\n required: true\n - type: input\n attributes:\n label: What operating system are you using?\n placeholder: macOS, Windows, Linux\n validations:\n required: true\n - type: textarea\n attributes:\n label: Describe the bug\n description: A clear and concise description of what the bug is.\n validations:\n required: true\n - type: textarea\n attributes:\n label: Steps to reproduce\n description: Describe the bug in steps that we can reproduce ourselves.\n value: |\n 1. `npx create-snowpack-app` using template \n 2. ...\n 3. ...\n 4. ...\n 5. Error! Describe what went wrong (and what was expected instead)...\n validations:\n required: true\n - type: input\n attributes:\n label: Link to minimal reproducible example (optional)\n description: 'Issues with easy reproductions are more likely to get fixed, faster.'\n placeholder: 'https://github.com/username/repo'\n" }, { "path": ".github/ISSUE_TEMPLATE/---feature-request.yml", "content": "name: \"\\U0001F4A1 Feature Request\"\ndescription: 'Submit an RFC or suggest an idea for this project'\ntitle: \"\\U0001F4A1 RFC: \"\nlabels: ['feature']\nassignees: []\nbody:\n - type: markdown\n attributes:\n value: Thanks for taking the time to suggest a new feature! Please fill out this form as completely as possible.\n - type: textarea\n attributes:\n label: Motivation\n description: |\n A quick, clear and concise description of what the problem is.\n\n **Please include links to relevant issues, Discord convos, and anything else.**\n placeholder: I want to be able to...\n validations:\n required: true\n - type: textarea\n attributes:\n label: Proposed solution\n description: Your take on one (or more) possible solution(s) to problem.\n value: |\n ### Possible solutions\n\n ### Alternatives considered\n\n ### Risks, downsides, and/or tradeoffs\n validations:\n required: true\n - type: textarea\n attributes:\n label: Detailed design\n description: |\n 🛑 **Just looking for feedback on an idea? Leave this section blank.**\n\n Otherwise, explain the exact steps required to implement this change.\n Include specific details that would help someone implement this feature.\n - type: textarea\n attributes:\n label: Open questions\n description: |\n Are there any open questions remaining? List them here.\n - type: checkboxes\n attributes:\n label: Help make it happen!\n description: 'Tip: RFCs with contributing authors are much more likely to get done!'\n options:\n - label: I am willing to submit a PR to implement this change.\n - label: I am willing to submit a PR to implement this change, but would need some guidance.\n - label: I am not willing to submit a PR to implement this change.\n validations:\n required: true\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\ncontact_links:\n - name: 💬 Everything else\n about: Ask questions and get help from our community!\n url: https://github.com/withastro/snowpack/discussions\n" }, { "path": ".github/ISSUE_TEMPLATE.md", "content": "\n\n**Original Discussion:** \n**/cc** \n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## Changes\n\n\n\n\n## Testing\n\n\n\n\n## Docs\n\n\n\n" }, { "path": ".github/workflows/format.yml", "content": "name: 'Format Code'\n\non:\n push:\n branches:\n - main\n\nenv:\n node_version: 14\n\njobs:\n format:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n with:\n ref: ${{ github.head_ref }}\n - uses: actions/setup-node@v2\n with:\n node-version: ${{ env.node_version }}\n - name: yarn install\n run: yarn --frozen-lockfile\n env:\n CI: true\n - name: yarn format\n run: yarn format\n - name: Commit changes\n uses: stefanzweifel/git-auto-commit-action@v4\n with:\n commit_message: '[ci] yarn format'\n branch: ${{ github.head_ref }}\n push_options: --force\n" }, { "path": ".github/workflows/lint.yml", "content": "name: Lint Code\n\non:\n push:\n branches:\n - main\n pull_request:\n\nenv:\n node_version: 14\n\njobs:\n lint:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ env.node_version }}\n uses: actions/setup-node@v2\n with:\n node-version: ${{ env.node_version }}\n - name: lint\n run: |\n yarn --ignore-engines --frozen-lockfile\n yarn build\n yarn lint\n" }, { "path": ".github/workflows/release.yml", "content": "# Inspired by https://bret.io/projects/package-automation/\n\nname: Create Release\n\non:\n workflow_dispatch:\n inputs:\n tag:\n description: 'what kind of release? (ex: \"next\", \"latest\")'\n required: true\n packagePath:\n description: 'path to package? (ex: \"snowpack\", \"plugins/plugin-babel\")'\n required: true\n\nenv:\n node_version: 14\n\njobs:\n version_and_release:\n runs-on: ubuntu-latest\n steps:\n # SETUP:\n - uses: actions/checkout@v2\n with:\n fetch-depth: 0\n - name: Use Node.js ${{ env.node_version }}\n uses: actions/setup-node@v2\n with:\n node-version: ${{ env.node_version }}\n # (REQUIRED) setting a registry enables the NODE_AUTH_TOKEN env variable where we can set an npm token.\n registry-url: 'https://registry.npmjs.org'\n - run: git config --global user.email \"github-ci@snowpack.dev\"\n - run: git config --global user.name \" ${{ github.actor }}\"\n - run: yarn --frozen-lockfile\n\n # PUBLISH:\n - run: node -e \"require('./scripts/release.cjs')('${{ github.event.inputs.packagePath }}', '${{ github.event.inputs.tag }}')\"\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".github/workflows/test.yml", "content": "name: Test Code\n\non:\n push:\n branches:\n - main\n pull_request:\n\njobs:\n test:\n runs-on: ${{ matrix.os }}\n strategy:\n matrix:\n os: [ubuntu-latest, windows-latest]\n node-version: [12.x, 14.x, 16.x]\n steps:\n - uses: actions/checkout@v2\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v2\n with:\n node-version: ${{ matrix.node-version }}\n - name: build\n run: |\n yarn --ignore-engines --frozen-lockfile\n yarn build\n env:\n CI: true\n - name: test\n run: yarn test\n env:\n CI: true\n" }, { "path": ".gitignore", "content": ".DS_Store\n.build\n.idea\n.snowpack\n.vercel\nlerna-debug.log\nnode_modules\npackage-lock.json\ncreate-snowpack-app/*/build\ntest/__temp__\ntest/build/**/build\ntest/build/**/TEST_BUILD_OUT\ntest/build/**/web_modules\ntest/create-snowpack-app/test-install\ntest/esinstall/**/web_modules\nyarn-error.log\n\n# Ignore files that are copied from /docs\nwww/_template/**/*.md\n!www/_template/posts/**/*.md\n" }, { "path": ".prettierignore", "content": "vendor\ndist\ntest/build/**/build\ncreate-snowpack-app/**/build\npackages\npkg\nTEST_BUILD_OUT\nweb_modules\ntest/create-snowpack-app/test-install\n.snowpack\n" }, { "path": "CHANGELOG.md", "content": "# Changelog\n\n## Version 3.x\n\nThe CHANGELOG.md for the current 3.x version of Snowpack is maintained in the `/snowpack` directory at: https://github.com/withastro/snowpack/blob/main/snowpack/CHANGELOG.md\n\n## Version 2.x\n\nThe CHANGELOG.md for version 2.x is currently maintained in a discussion so that you can subscribe for updates:\n**https://github.com/withastro/snowpack/discussions/1183**\n" }, { "path": "CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nIn the interest of fostering an open and welcoming environment, we as\ncontributors and maintainers pledge to making participation in our project and\nour community a harassment-free experience for everyone, regardless of age, body\nsize, disability, ethnicity, sex characteristics, gender identity and expression,\nlevel of experience, education, socio-economic status, nationality, personal\nappearance, race, religion, or sexual identity and orientation.\n\n## Our Standards\n\nExamples of behavior that contributes to creating a positive environment\ninclude:\n\n- Using welcoming and inclusive language\n- Being respectful of differing viewpoints and experiences\n- Gracefully accepting constructive criticism\n- Focusing on what is best for the community\n- Showing empathy towards other community members\n\nExamples of unacceptable behavior by participants include:\n\n- The use of sexualized language or imagery and unwelcome sexual attention or\n advances\n- Trolling, insulting/derogatory comments, and personal or political attacks\n- Public or private harassment\n- Publishing others' private information, such as a physical or electronic\n address, without explicit permission\n- Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Our Responsibilities\n\nProject maintainers are responsible for clarifying the standards of acceptable\nbehavior and are expected to take appropriate and fair corrective action in\nresponse to any instances of unacceptable behavior.\n\nProject maintainers have the right and responsibility to remove, edit, or\nreject comments, commits, code, wiki edits, issues, and other contributions\nthat are not aligned to this Code of Conduct, or to ban temporarily or\npermanently any contributor for other behaviors that they deem inappropriate,\nthreatening, offensive, or harmful.\n\n## Scope\n\nThis Code of Conduct applies both within project spaces and in public spaces\nwhen an individual is representing the project or its community. Examples of\nrepresenting a project or community include using an official project e-mail\naddress, posting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event. Representation of a project may be\nfurther defined and clarified by project maintainers.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported by contacting the project team at info@pika.dev. All\ncomplaints will be reviewed and investigated and will result in a response that\nis deemed necessary and appropriate to the circumstances. The project team is\nobligated to maintain confidentiality with regard to the reporter of an incident.\nFurther details of specific enforcement policies may be posted separately.\n\nProject maintainers who do not follow or enforce the Code of Conduct in good\nfaith may face temporary or permanent repercussions as determined by other\nmembers of the project's leadership.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,\navailable at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see\nhttps://www.contributor-covenant.org/faq\n" }, { "path": "CONTRIBUTING.md", "content": "# Contributions Welcome!\n\nInterested in contributing? We'd love your help!\n\nIf you run into problems or find something confusing, please share it with us in [this discussion](https://github.com/withastro/snowpack/discussions/958). A great experience for new contributors is very important to us!\n\nPlease note that all activity on the [`snowpackjs/snowpack` repository](https://github.com/withastro/snowpack) and our [Discord][discord] is moderated and will be strictly enforced under Snowpack's [Contributor Code of Conduct](CODE_OF_CONDUCT.md).\n\nOur [issue tracker](https://github.com/withastro/snowpack/issues) is always organized with a selection of high-priority bugs, feature requests, and [\"help wanted!\"](https://github.com/withastro/snowpack/issues?q=is%3Aissue+is%3Aopen+label%3A%22help+wanted%22)/[\"good first issue\"](https://github.com/withastro/snowpack/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) items. For general package troubleshooting and discussions, check out our [Package Community](https://www.pika.dev/npm/snowpack/discuss) discussion board.\n\n## Requirements\n\nSnowpack uses [yarn workspaces](https://classic.yarnpkg.com/) to manage multiple packages contained in this repository. To contribute, [make sure that you have Yarn installed on your machine](https://classic.yarnpkg.com/en/docs/install).\n\n## Initial setup\n\n```bash\ngit clone https://github.com/withastro/snowpack.git\ncd snowpack\nyarn\n```\n\n## Checking out and building a branch\n\n```bash\ngit checkout some-branch-name\nyarn # in case dependencies have changed\nyarn build # re-builds all packages\n# that's it! Your monorepo is set up and ready to run/test.\n```\n\n## Build after changes\n\nSome packages in the repo are written in JavaScript, and require no build step. Others (like Snowpack itself) are written in TypeScript, and require a build step to run.\n\n```bash\n# Option 1: A one-time build step\nyarn build\n\n# Option 2: Start a persistent TypeScript watcher, recompiling on every change\n# Recommended for active development, when many changes are required\nyarn build:watch\n```\n\n## Updating and adding packages\n\nSince this is a monorepo with several packages, if you want to update/add packages in the subrepos like `create-snowpack-app/app-template-11ty` you'll want to run the commands in the target subdirectory like\n\n```bash\ncd create-snowpack-app/app-template-vue\nyarn add vue@latest\n```\n\n## Tests\n\nWe recommend running all tests before you submit a PR. Tests will not work unless you have run a build `yarn build`.\n\n### Running tests\n\nFrom the repository's root folder, run\n\n```bash\nyarn build\nyarn test\nyarn test:dev # sometimes flaky on windows, see #1171\n```\n\n### Snapshot tests\n\n_Update March 2021: we’re working on improving this and would love your help converting old test directories to smaller TypeScript tests/fixtures!_\n\nAll new tests should live in either `test/snowpack`, `test/esinstall`, or the `test` directory of one of our plugins (ex: `plugins/plugin-dotenv/test/plugin.test.js`). `test/build` is considered legacy and is in the process of getting converted into `test/snowpack`.\n\nThe way our snapshot tests work is they test Snowpack by building a project. Because Snowpack's build method uses the dev server internally, this is a good way to test the build behavior of both dev & build together.\n\nYou'll almost always have a \"failed\" snapshot test when you make a contribution because your new change will make the final build different. You'll want to take a new snapshot. To do this run:\n\n```bash\nyarn test -u\n```\n\nYou'll notice this changes the snapshot file. Commit this change and submit it along with your PR.\n\n### Filtering tests\n\nJest supports basic test filtering to only run a subset of our test suite. The [`--testNamePattern`](https://jestjs.io/docs/en/cli#--testnamepatternregex) flag also works as well.\n\n```bash\nyarn test treeshake\n```\n\n## Run local snowpack in another project\n\nYou can run your local snowpack by path\n\n```bash\nyarn build\ncd path/to/some-other-project\n/path/to/snowpack-repository/snowpack/index.bin.js dev --verbose --reload\n```\n\nOr by linking the global `snowpack` library to your local clone\n\n```bash\ncd snowpack\nnpm link\ncd path/to/some-other-project\nsnowpack dev --verbose --reload\n```\n\nTo test a local version of the CLI tool use\n\n```bash\nnode /path/to/snowpack-repository/create-snowpack-app/cli [my-new-dir] --template @snowpack/app-template-vue\n```\n\nTo test a local version of the `create-snowpack-app` templates use\n\n```bash\nnpx create-snowpack-app [my-new-dir] --template ./path/to/template\n```\n\nNote the path must start with must start with a `.` to be considered local\n\nThe `--verbose` flag enables additional logs which will help to identify the source of a problem. The `--reload` will clear the local cache which might have been created by a different `snowpack` version. Learn more about [Snowpack's CLI flags](/reference/cli-command-line-interface).\n\n## Documentation\n\nThe [Snowpack website](https://snowpack.dev) source is located in [`/www`](./www). The documentation source files are located in [`/docs`](./docs) for contributor convenience.\n\nThe directories inside of `/docs` are automatically copied to `/www/_template`, so relative URLs in the documentation use `/www` as their base path.\n\n### Localization\n\nIf you’d like to help localize, we’d love your help! This is our proposed structure for [`/docs`](./docs):\n\n- English translations in the root (e.g. `/docs/tutorials/getting-started.md` is English)\n- All other languages located in `/docs/[ISO 639-1]/` folders, mirroring structure (e.g. `/docs/tutorials/es/getting-started.md`).\n\nSome other considerations:\n\n- The `.md` filename should match its English name, only to mark it as the same document. Within the document itself, the title shown to users will be localized.\n- We’re open to having locale-specific guides that don’t exist in English, but please [start a discussion][discussion] before doing so, so we understand the context.\n\n## Pull Request Guidelines\n\nCheckout a topic branch from a base branch, e.g. `main`, and merge back against that branch.\n\nIf adding a feature, it probably should have been brought up in a [discussion][discussion] instead before the PR was created.\n\nSome tips for creating your first pull request:\n\n- Provide background for why a PR was created.\n- Link to any relevant issues, discussions, or past PRs.\n- Add accompanying tests if applicable.\n- Ensure all tests have been passed.\n- Be sure to add a [changesets][changesets] message along with your commit! Our friendly 🤖 bot will help guide you with more instructions.\n\n## Discussion\n\n[Join the Pika Discord][discord]\n\n[changesets]: https://github.com/atlassian/changesets\n[discord]: https://discord.gg/rS8SnRk\n[discussion]: https://github.com/withastro/snowpack/discussions\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2019 Fred K. Schott\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "> **Update (April 20, 2022):** Snowpack is no longer actively maintained and is not recommended for new projects.\n> \n> Check out [Vite](https://vitejs.dev/) for a well-maintained Snowpack alternative. \n> See also: [esbuild](https://esbuild.github.io/), [parcel](https://parceljs.org/)\n\n

Snowpack

\n\nSnowpack is a lightning-fast frontend build tool, designed to leverage JavaScript's native module system (known as ESM). It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow.\n\n### Key Features\n\n- Develop faster, with a dev server that starts up in **50ms or less.**\n- See changes reflected [instantly in the browser.](https://www.snowpack.dev/concepts/hot-module-replacement)\n- Integrate your favorite bundler for a [production-optimized build.](https://www.snowpack.dev/concepts/build-pipeline)\n- Enjoy out-of-the-box support for [TypeScript, JSX, CSS Modules and more.](https://www.snowpack.dev/reference/supported-files)\n- Connect your favorite tools with [third-party plugins.](https://www.snowpack.dev/plugins)\n\n**💁 More info at the official [Snowpack website ➞](https://snowpack.dev)**\n\n
\n\n> **Contributor Guidelines:** [CONTRIBUTING.md](./CONTRIBUTING.md) \n> **License:** [MIT](https://github.com/withastro/snowpack/blob/main/LICENSE)\n" }, { "path": "create-snowpack-app/README.md", "content": "## 👉 [`create-snowpack-app`](./cli)\n" }, { "path": "create-snowpack-app/app-scripts-lit-element/package.json", "content": "{\n \"name\": \"@snowpack/app-scripts-lit-element\",\n \"version\": \"2.0.0\",\n \"main\": \"snowpack.config.js\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-scripts-lit-element#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-scripts-lit-element\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.14.0\",\n \"@snowpack/plugin-babel\": \"^2.1.7\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-scripts-lit-element/snowpack.config.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst url = require('url');\n\nconst isTS = fs.existsSync(url.pathToFileURL(path.join(process.cwd(), 'tsconfig.json')));\n\nmodule.exports = {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: ['@snowpack/plugin-babel', '@snowpack/plugin-dotenv'],\n devOptions: {},\n packageOptions: {},\n};\n" }, { "path": "create-snowpack-app/app-scripts-lit-element/tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\",\n /* more strict checking for errors that per-file transpilers like `esbuild` would crash */\n \"isolatedModules\": true,\n /* noEmit - We only use TypeScript for type checking. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true\n }\n}\n" }, { "path": "create-snowpack-app/app-scripts-preact/babel.config.json", "content": "{\n \"presets\": [\n [\n \"@babel/preset-react\",\n {\n \"pragma\": \"h\",\n \"pragmaFrag\": \"Fragment\"\n }\n ],\n [\n \"@babel/preset-typescript\",\n {\n \"jsxPragma\": \"h\"\n }\n ]\n ],\n \"env\": {\n \"development\": {\n \"plugins\": [\"@prefresh/babel-plugin\"]\n }\n }\n}\n" }, { "path": "create-snowpack-app/app-scripts-preact/jest/babelTransform.js", "content": "// @remove-file-on-eject\n/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n('use strict');\n\nconst babelJest = require('babel-jest');\n\nmodule.exports = babelJest.createTransformer({\n presets: [\n [\n '@babel/preset-env',\n {\n targets: {\n node: 'current',\n },\n },\n ],\n [\n '@babel/preset-react',\n {\n pragma: 'h',\n pragmaFrag: 'Fragment',\n },\n ],\n [\n '@babel/preset-typescript',\n {\n jsxPragma: 'h',\n },\n ],\n ],\n});\n" }, { "path": "create-snowpack-app/app-scripts-preact/jest/cssTransform.js", "content": "// @remove-on-eject-begin\n/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n// @remove-on-eject-end\n'use strict';\n\n// This is a custom Jest transformer turning style imports into empty objects.\n// http://facebook.github.io/jest/docs/en/webpack.html\n\nmodule.exports = {\n process() {\n return 'module.exports = {};';\n },\n getCacheKey() {\n // The output is always the same.\n return 'cssTransform';\n },\n};\n" }, { "path": "create-snowpack-app/app-scripts-preact/jest/fileTransform.js", "content": "'use strict';\nconst path = require('path');\n\nmodule.exports = {\n process(src, filename) {\n const assetFilename = path.basename(filename);\n return `module.exports = {\n __esModule: true,\n default: ${JSON.stringify(assetFilename)},\n };`;\n },\n};\n" }, { "path": "create-snowpack-app/app-scripts-preact/jest.config.js", "content": "const fs = require('fs');\nconst path = require('path');\n\n// Use this instead of `paths.testsSetup` to avoid putting\n// an absolute filename into configuration after ejecting.\n// const setupTestsFile = fs.existsSync(paths.testsSetup)\n// ? `/src/setupTests.js`\n// : undefined;\nconst setupTestsFile = true;\n\nmodule.exports = function () {\n return {\n verbose: true,\n\n setupFiles: [require.resolve('react-app-polyfill/jsdom')],\n setupFilesAfterEnv: setupTestsFile ? ['/jest.setup.js'] : [],\n testMatch: [\n '/src/**/__tests__/**/*.{js,jsx,ts,tsx}',\n '/src/**/*.{spec,test}.{js,jsx,ts,tsx}',\n ],\n transform: {\n '^.+\\\\.(js|jsx|ts|tsx)$': path.resolve(__dirname, 'jest/babelTransform.js'),\n '^.+\\\\.css$': path.resolve(__dirname, 'jest/cssTransform.js'),\n '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': path.resolve(__dirname, 'jest/fileTransform.js'),\n },\n transformIgnorePatterns: ['node_modules'],\n // transformIgnorePatterns: [\n // \"[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|ts|tsx)$\",\n // \"^.+\\\\.module\\\\.(css|sass|scss)$\",\n // ],\n };\n};\n" }, { "path": "create-snowpack-app/app-scripts-preact/package.json", "content": "{\n \"name\": \"@snowpack/app-scripts-preact\",\n \"version\": \"2.0.1\",\n \"main\": \"snowpack.config.js\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-scripts-preact#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-scripts-preact\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.14.0\",\n \"@babel/preset-env\": \"^7.14.0\",\n \"@babel/preset-react\": \"^7.13.13\",\n \"@babel/preset-typescript\": \"^7.13.0\",\n \"@prefresh/babel-plugin\": \"^0.4.1\",\n \"@prefresh/snowpack\": \"^3.1.2\",\n \"@snowpack/plugin-babel\": \"^2.1.7\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"babel-jest\": \"^26.6.3\",\n \"react-app-polyfill\": \"^2.0.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-scripts-preact/snowpack.config.js", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst cwd = process.cwd();\nconst isTS = fs.existsSync(path.join(cwd, 'tsconfig.json'));\n\nmodule.exports = {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: ['@snowpack/plugin-babel', '@prefresh/snowpack', '@snowpack/plugin-dotenv'],\n packageOptions: {},\n};\n" }, { "path": "create-snowpack-app/app-scripts-preact/tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"h\",\n \"baseUrl\": \"./\",\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\",\n /* more strict checking for errors that per-file transpilers like `esbuild` would crash */\n \"isolatedModules\": true,\n /* noEmit - We only use TypeScript for type checking. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true\n }\n}\n" }, { "path": "create-snowpack-app/app-scripts-react/babel.config.json", "content": "{\n \"presets\": [[\"@babel/preset-react\"], \"@babel/preset-typescript\"]\n}\n" }, { "path": "create-snowpack-app/app-scripts-react/jest/babelTransform.js", "content": "// @remove-file-on-eject\n/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';\n\nconst importMetaBabelPlugin = require('./importMetaBabelPlugin');\nconst babelJestModule = require('babel-jest');\nconst babelJest = babelJestModule.__esModule ? babelJestModule.default : babelJestModule;\n\nmodule.exports = babelJest.createTransformer({\n presets: ['babel-preset-react-app', '@babel/preset-react', '@babel/preset-typescript'],\n plugins: [[importMetaBabelPlugin]],\n});\n" }, { "path": "create-snowpack-app/app-scripts-react/jest/cssTransform.js", "content": "// @remove-on-eject-begin\n/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n// @remove-on-eject-end\n'use strict';\n\n// This is a custom Jest transformer turning style imports into empty objects.\n// http://facebook.github.io/jest/docs/en/webpack.html\n\nmodule.exports = {\n process() {\n return 'module.exports = {};';\n },\n getCacheKey() {\n // The output is always the same.\n return 'cssTransform';\n },\n};\n" }, { "path": "create-snowpack-app/app-scripts-react/jest/esbuildTransform.js", "content": "// NOTE: THIS IS CURRENTLY DISABLED UNTIL ESBUILD SUPPORTS ESM->CJS WITHOUT BUNDLING\n// SEE: https://github.com/evanw/esbuild/issues/109\n\n'use strict';\nconst path = require('path');\nconst execa = require('execa');\nconst esbuildPath = require.resolve('esbuild');\nconst esbuildBin = path.resolve(esbuildPath, '..', '..', 'bin', 'esbuild');\n\nmodule.exports = {\n process(code, filename) {\n const result = execa.sync(\n esbuildBin,\n [\n `--loader=${path.extname(filename).substr(1)}`,\n '--format=cjs',\n '--platform=node',\n '--target=es2019',\n ],\n {input: code},\n );\n return {code: result.stdout};\n },\n};\n" }, { "path": "create-snowpack-app/app-scripts-react/jest/fileTransform.js", "content": "'use strict';\nconst path = require('path');\n\nmodule.exports = {\n process(src, filename) {\n const assetFilename = path.basename(filename);\n return `module.exports = {\n __esModule: true,\n default: ${JSON.stringify(assetFilename)},\n };`;\n },\n};\n" }, { "path": "create-snowpack-app/app-scripts-react/jest/importMetaBabelPlugin.js", "content": "'use strict';\n\nconst template = require('@babel/template').default;\n\n/**\n * Add import.meta.env support\n * Note: import.meta.url is not supported at this time\n */\nmodule.exports = function importMetaBabelPlugin() {\n const ast = template.ast(`\n ({\n env: {\n ...Object.fromEntries(\n Object.entries(process.env).filter(([k]) => /^SNOWPACK_PUBLIC_/.test(k)),\n ),\n MODE: 'test',\n NODE_ENV: 'test',\n },\n })\n`);\n return {\n visitor: {\n MetaProperty(path) {\n path.replaceWith(ast);\n },\n },\n };\n};\n" }, { "path": "create-snowpack-app/app-scripts-react/jest.config.js", "content": "const fs = require('fs');\nconst path = require('path');\n\n// Use this instead of `paths.testsSetup` to avoid putting\n// an absolute filename into configuration after ejecting.\n// const setupTestsFile = fs.existsSync(paths.testsSetup)\n// ? `/src/setupTests.js`\n// : undefined;\nconst setupTestsFile = true;\n\nmodule.exports = function () {\n return {\n verbose: true,\n\n setupFiles: [require.resolve('react-app-polyfill/jsdom')],\n setupFilesAfterEnv: setupTestsFile ? ['/jest.setup.js'] : [],\n testMatch: [\n '/src/**/__tests__/**/*.{js,jsx,ts,tsx}',\n '/src/**/*.{spec,test}.{js,jsx,ts,tsx}',\n ],\n transform: {\n '^.+\\\\.(js|jsx|ts|tsx)$': path.resolve(__dirname, 'jest/babelTransform.js'),\n '^.+\\\\.css$': path.resolve(__dirname, 'jest/cssTransform.js'),\n '^(?!.*\\\\.(js|jsx|ts|tsx|css|json)$)': path.resolve(__dirname, 'jest/fileTransform.js'),\n },\n transformIgnorePatterns: ['node_modules'],\n testEnvironment: 'jsdom',\n // transformIgnorePatterns: [\n // \"[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|ts|tsx)$\",\n // \"^.+\\\\.module\\\\.(css|sass|scss)$\",\n // ],\n };\n};\n" }, { "path": "create-snowpack-app/app-scripts-react/package.json", "content": "{\n \"name\": \"@snowpack/app-scripts-react\",\n \"version\": \"2.0.1\",\n \"main\": \"snowpack.config.js\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-scripts-react#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-scripts-react\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.14.0\",\n \"@babel/preset-react\": \"^7.13.13\",\n \"@babel/preset-typescript\": \"^7.13.0\",\n \"@snowpack/plugin-babel\": \"^2.1.7\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-react-refresh\": \"^2.5.0\",\n \"@snowpack/plugin-typescript\": \"^1.2.1\",\n \"babel-jest\": \"^27.2.2\",\n \"babel-preset-react-app\": \"^10.0.0\",\n \"react-app-polyfill\": \"^2.0.0\"\n },\n \"peerDependencies\": {\n \"jest\": \"^27.2.2\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-scripts-react/snowpack.config.js", "content": "const fs = require('fs');\nconst path = require('path');\n\nconst cwd = process.cwd();\nconst isTS = fs.existsSync(path.join(cwd, 'tsconfig.json'));\n\nmodule.exports = {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: [\n '@snowpack/plugin-react-refresh',\n '@snowpack/plugin-babel',\n '@snowpack/plugin-dotenv',\n ...(isTS ? ['@snowpack/plugin-typescript'] : []),\n ],\n devOptions: {},\n packageOptions: {},\n};\n" }, { "path": "create-snowpack-app/app-scripts-react/tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\",\n /* more strict checking for errors that per-file transpilers like `esbuild` would crash */\n \"isolatedModules\": true,\n /* noEmit - We only use TypeScript for type checking. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true\n }\n}\n" }, { "path": "create-snowpack-app/app-scripts-svelte/jest/babelTransform.js", "content": "// @remove-file-on-eject\n/**\n * Copyright (c) 2014-present, Facebook, Inc.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';\nconst fs = require('fs');\nconst path = require('path');\nconst babelJest = require('babel-jest');\nconst importMetaBabelPlugin = require('./importMetaBabelPlugin');\n\nconst userBabelConfig = getUserBabelConfig();\n\nmodule.exports = babelJest.createTransformer({\n presets: [\n [\n '@babel/preset-env',\n {\n targets: {\n node: 'current',\n },\n },\n ],\n ...(userBabelConfig.presets || []),\n ],\n plugins: [[importMetaBabelPlugin]],\n});\n\nfunction getUserBabelConfig() {\n const userBabelConfigLoc = path.join(process.cwd(), 'babel.config.json');\n if (fs.existsSync(userBabelConfigLoc)) {\n return require(userBabelConfigLoc);\n }\n\n return {};\n}\n" }, { "path": "create-snowpack-app/app-scripts-svelte/jest/importMetaBabelPlugin.js", "content": "'use strict';\n\nconst template = require('@babel/template').default;\n\n/**\n * Add import.meta.env support\n * Note: import.meta.url is not supported at this time\n */\nmodule.exports = function importMetaBabelPlugin() {\n const ast = template.ast(`\n ({\n env: {\n ...Object.fromEntries(\n Object.entries(process.env).filter(([k]) => /^SNOWPACK_PUBLIC_/.test(k)),\n ),\n MODE: 'test',\n NODE_ENV: 'test',\n },\n })\n`);\n return {\n visitor: {\n MetaProperty(path) {\n path.replaceWith(ast);\n },\n },\n };\n};\n" }, { "path": "create-snowpack-app/app-scripts-svelte/jest.config.js", "content": "const fs = require('fs');\nconst path = require('path');\n\n// Use this instead of `paths.testsSetup` to avoid putting\n// an absolute filename into configuration after ejecting.\n// const setupTestsFile = fs.existsSync(paths.testsSetup)\n// ? `/src/setupTests.js`\n// : undefined;\nconst setupTestsFile = true;\n\nmodule.exports = function () {\n const userSvelteConfig = getUserSvelteConfig();\n\n return {\n testMatch: [\n '/src/**/__tests__/**/*.{js,jsx,ts,tsx}',\n '/src/**/*.{spec,test}.{js,jsx,ts,tsx}',\n ],\n transform: {\n '^.+\\\\.svelte$': ['jest-transform-svelte', {preprocess: userSvelteConfig.preprocess}],\n '^.+\\\\.(js|ts)$': path.resolve(__dirname, 'jest/babelTransform.js'),\n },\n moduleFileExtensions: ['js', 'ts', 'svelte'],\n testPathIgnorePatterns: ['node_modules'],\n transformIgnorePatterns: ['node_modules'],\n bail: false,\n verbose: true,\n setupFilesAfterEnv: setupTestsFile ? ['/jest.setup.js'] : [],\n };\n};\n\nfunction getUserSvelteConfig() {\n const userSvelteConfigLoc = path.join(process.cwd(), 'svelte.config.js');\n if (fs.existsSync(userSvelteConfigLoc)) {\n return require(userSvelteConfigLoc);\n }\n\n return {};\n}\n" }, { "path": "create-snowpack-app/app-scripts-svelte/package.json", "content": "{\n \"name\": \"@snowpack/app-scripts-svelte\",\n \"version\": \"2.0.1\",\n \"main\": \"snowpack.config.js\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-scripts-svelte#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-scripts-svelte\"\n },\n \"peerDependencies\": {\n \"svelte\": \"^3.21.0\"\n },\n \"devDependencies\": {\n \"svelte\": \"^3.21.0\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.14.0\",\n \"@babel/preset-typescript\": \"^7.13.0\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-svelte\": \"^3.6.1\",\n \"babel-jest\": \"^26.6.3\",\n \"jest-transform-svelte\": \"^2.1.1\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-scripts-svelte/snowpack.config.js", "content": "module.exports = {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: ['@snowpack/plugin-svelte', '@snowpack/plugin-dotenv'],\n};\n" }, { "path": "create-snowpack-app/app-scripts-vue/package.json", "content": "{\n \"name\": \"@snowpack/app-scripts-vue\",\n \"version\": \"2.0.0\",\n \"main\": \"snowpack.config.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-scripts-vue#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-scripts-vue\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.0.4\",\n \"@snowpack/plugin-vue\": \"^2.2.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-scripts-vue/snowpack.config.js", "content": "module.exports = {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: ['@snowpack/plugin-vue', '@snowpack/plugin-dotenv'],\n};\n" }, { "path": "create-snowpack-app/app-scripts-vue/tsconfig.base.json", "content": "{\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"es2015\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\",\n /* more strict checking for errors that per-file transpilers like `esbuild` would crash */\n \"isolatedModules\": true,\n /* noEmit - We only use TypeScript for type checking. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true\n }\n}\n" }, { "path": "create-snowpack-app/app-template-11ty/.eleventy.js", "content": "module.exports = function (eleventyConfig) {\n eleventyConfig.setTemplateFormats([\n // Templates:\n 'html',\n 'njk',\n 'md',\n // Static Assets:\n 'css',\n 'jpeg',\n 'jpg',\n 'png',\n 'svg',\n 'woff',\n 'woff2',\n ]);\n eleventyConfig.addPassthroughCopy('static');\n\n return {\n dir: {\n input: '_template',\n includes: '../_includes',\n output: '_output',\n },\n };\n};\n" }, { "path": "create-snowpack-app/app-template-11ty/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-11ty/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-11ty/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-11ty/_includes/layouts/base.njk", "content": "\n\n \n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n \n \n \n \n \n
\n\n {{ content | safe }}\n \n\n" }, { "path": "create-snowpack-app/app-template-11ty/_output/about/index.html", "content": "\n\n \n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n \n \n \n \n \n
\n\n

About

\n

11ty, powered by Snowpack.

\n
\n

Back to Home

\n\n \n\n" }, { "path": "create-snowpack-app/app-template-11ty/_output/index.html", "content": "\n\n \n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n \n \n \n \n \n
\n\n \n\n\nAbout Page\n \n\n" }, { "path": "create-snowpack-app/app-template-11ty/_output/static/index.css", "content": "body {\n background: #222;\n color: #eee;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n}\na {\n color: #aaa;\n}\n.banner {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.banner img,\n.banner svg {\n display: block;\n padding: 1.5rem;\n}\n\n#canvas {\n display: block;\n margin: 0rem auto;\n width: 720px;\n height: 420px;\n}\n" }, { "path": "create-snowpack-app/app-template-11ty/_template/about.md", "content": "---\nlayout: layouts/base.njk\n---\n\n# About\n\n[11ty](https://www.11ty.dev/), powered by [Snowpack](http://snowpack.dev/).\n\n
\n\n[Back to Home](/)\n" }, { "path": "create-snowpack-app/app-template-11ty/_template/index.njk", "content": "---\nlayout: layouts/base.njk\n---\n\n\n\nAbout Page" }, { "path": "create-snowpack-app/app-template-11ty/_template/static/index.css", "content": "body {\n background: #222;\n color: #eee;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n}\na {\n color: #aaa;\n}\n.banner {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.banner img,\n.banner svg {\n display: block;\n padding: 1.5rem;\n}\n\n#canvas {\n display: block;\n margin: 0rem auto;\n width: 720px;\n height: 420px;\n}\n" }, { "path": "create-snowpack-app/app-template-11ty/_template/static/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-11ty/package.json", "content": "{\n \"name\": \"@snowpack/app-template-11ty\",\n \"description\": \"A preconfigured template for Snowpack with Eleventy\",\n \"version\": \"2.0.1\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-11ty#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-11ty\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.js\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.js\\\"\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {\n \"canvas-confetti\": \"^1.2.0\"\n },\n \"devDependencies\": {\n \"@11ty/eleventy\": \"^0.11.0\",\n \"@snowpack/plugin-run-script\": \"^2.3.0\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.3.7\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-11ty/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n _output: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: [\n ['@snowpack/plugin-run-script', { cmd: 'eleventy', watch: '$1 --watch' }],\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n // Eleventy updates multiple files at once, so add a 300ms delay before we trigger a browser update\n hmrDelay: 300,\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-11ty/src/index.js", "content": "/**\n * This file is just a silly example to show everything working in the browser.\n * When you're ready to start on your site, clear the file. Happy hacking!\n **/\n\nimport confetti from 'canvas-confetti';\n\nconfetti.create(document.getElementById('canvas'), {\n resize: true,\n useWorker: true,\n})({ particleCount: 200, spread: 200 });\n" }, { "path": "create-snowpack-app/app-template-blank/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-blank/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-blank/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-blank/package.json", "content": "{\n \"name\": \"@snowpack/app-template-blank\",\n \"description\": \"A preconfigured template for Snowpack with Prettier\",\n \"version\": \"2.2.0\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-blank#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-blank\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.js\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.js\\\"\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {},\n \"devDependencies\": {\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.3.7\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-blank/public/index.html", "content": "\n\n \n \n \n \n \n \n \n Snowpack App\n \n \n \n

Page has been open for 0 seconds.

\n

\n \n Learn web development\n \n

\n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-blank/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-blank/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: [\n /* ... */\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-blank/src/index.css", "content": "body {\n font-size: calc(10px + 2vmin);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n#img {\n display: block;\n margin: auto;\n height: 128px;\n width: 128px;\n padding: 2rem;\n}\n\np {\n display: block;\n margin: 1rem auto;\n text-align: center;\n}\n\n#counter {\n background-color: rgb(46, 94, 130);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\na {\n color: rgb(46, 94, 130);\n}\n" }, { "path": "create-snowpack-app/app-template-blank/src/index.js", "content": "const counter = document.querySelector('#counter');\nlet seconds = 0;\n\nsetInterval(() => {\n seconds += 1;\n counter.textContent = seconds;\n}, 1000);\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-blank-typescript/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/package.json", "content": "{\n \"name\": \"@snowpack/app-template-blank-typescript\",\n \"description\": \"A preconfigured template for Snowpack with Typescript\",\n \"version\": \"2.2.0\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-blank-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-blank-typescript\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.{ts,js}\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.{ts,js}\\\"\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {},\n \"devDependencies\": {\n \"@snowpack/plugin-typescript\": \"^1.2.1\",\n \"@types/snowpack-env\": \"^2.3.3\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.3.7\",\n \"typescript\": \"^4.3.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/public/index.html", "content": "\n\n \n \n \n \n \n \n \n Snowpack App\n \n \n \n

Page has been open for 0 seconds.

\n

\n \n Learn web development\n \n

\n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: [\n [\n '@snowpack/plugin-typescript',\n {\n /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */\n ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),\n },\n ],\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/src/index.css", "content": "body {\n font-size: calc(10px + 2vmin);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n#img {\n display: block;\n margin: auto;\n height: 128px;\n width: 128px;\n padding: 2rem;\n}\n\np {\n display: block;\n margin: 1rem auto;\n text-align: center;\n}\n\n#counter {\n background-color: rgb(46, 94, 130);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\na {\n color: rgb(46, 94, 130);\n}\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/src/index.ts", "content": "const counter = document.querySelector('#counter') as HTMLSpanElement;\nlet seconds = 0;\n\nsetInterval(() => {\n seconds += 1;\n counter.textContent = seconds.toString();\n}, 1000);\n\nexport {};\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/tsconfig.json", "content": "{\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n /* paths - import rewriting/resolving */\n \"paths\": {\n // If you configured any Snowpack aliases, add them here.\n // Add this line to get types for streaming imports (packageOptions.source=\"remote\"):\n // \"*\": [\".snowpack/types/*\"]\n // More info: https://www.snowpack.dev/guides/streaming-imports\n },\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\",\n /* more strict checking for errors that per-file transpilers like `esbuild` would crash */\n \"isolatedModules\": true,\n /* noEmit - We only use TypeScript for type checking. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"useDefineForClassFields\": true\n }\n}\n" }, { "path": "create-snowpack-app/app-template-blank-typescript/types/static.d.ts", "content": "/* Use this file to declare any custom file extensions for importing */\n/* Use this folder to also add/extend a package d.ts file, if needed. */\n\n/* CSS MODULES */\ndeclare module '*.module.css' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.scss' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.sass' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.less' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.styl' {\n const classes: { [key: string]: string };\n export default classes;\n}\n\n/* CSS */\ndeclare module '*.css';\ndeclare module '*.scss';\ndeclare module '*.sass';\ndeclare module '*.less';\ndeclare module '*.styl';\n\n/* IMAGES */\ndeclare module '*.svg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.bmp' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.gif' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpeg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.png' {\n const ref: string;\n export default ref;\n}\n\n/* CUSTOM: ADD YOUR OWN HERE */\n" }, { "path": "create-snowpack-app/app-template-lit-element/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-lit-element/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds the app for production to the `dist/` folder.\nIt correctly bundles the app in production mode and optimizes the build for the best performance.\n\n## Directives\n\nIn case you need to add a directive like `classMap` you should add the extension to the import:\n\n```\nimport { classMap } from \"lit-html/directives/class-map.js\";\n```\n" }, { "path": "create-snowpack-app/app-template-lit-element/babel.config.json", "content": "{\n \"plugins\": [\n [\"@babel/plugin-proposal-decorators\", { \"decoratorsBeforeExport\": true }],\n [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }]\n ]\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element/package.json", "content": "{\n \"name\": \"@snowpack/app-template-lit-element\",\n \"description\": \"A preconfigured template for Snowpack with LitElement\",\n \"version\": \"2.1.2\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-lit-element#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-lit-element\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.js\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.js\\\"\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {\n \"lit-element\": \"^2.4.0\",\n \"lit-html\": \"^1.4.0\"\n },\n \"devDependencies\": {\n \"@babel/plugin-proposal-class-properties\": \"^7.13.0\",\n \"@babel/plugin-proposal-decorators\": \"^7.13.15\",\n \"@snowpack/plugin-babel\": \"^2.1.7\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.3.7\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element/public/index.css", "content": "body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n color: white;\n margin: 0;\n padding: 0;\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element/public/index.html", "content": "\n\n \n \n \n \n \n \n Snowpack App\n \n \n \n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-lit-element/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-lit-element/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: ['@snowpack/plugin-babel', '@snowpack/plugin-dotenv'],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-lit-element/src/app-root.js", "content": "import { customElement, property, LitElement, html, css } from 'lit-element';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @property() message = 'Learn LitElement';\n\n static get styles() {\n return css`\n h1 {\n font-size: 4rem;\n }\n .wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n height: 100vh;\n background-color: #2196f3;\n background: linear-gradient(315deg, #b4d2ea 0%, #2196f3 100%);\n font-size: 24px;\n }\n .link {\n color: white;\n }\n `;\n }\n\n render() {\n return html`\n
\n

LitElement + Snowpack

\n

Edit src/app-root.js and save to reload.

\n \n ${this.message}\n \n
\n `;\n }\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element/src/index.js", "content": "import './app-root';\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds the app for production to the `dist/` folder.\nIt correctly bundles the app in production mode and optimizes the build for the best performance.\n\n## Directives\n\nIn case you need to add a directive like `classMap` you should add the extension to the import:\n\n```\nimport { classMap } from \"lit-html/directives/class-map.js\";\n```\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/babel.config.json", "content": "{\n \"presets\": [\"@babel/preset-typescript\"],\n \"plugins\": [\n [\"@babel/plugin-proposal-decorators\", { \"decoratorsBeforeExport\": true }],\n [\"@babel/plugin-proposal-class-properties\", { \"loose\": true }]\n ]\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/package.json", "content": "{\n \"name\": \"@snowpack/app-template-lit-element-typescript\",\n \"description\": \"A preconfigured template for Snowpack with TypeScript and LitElement\",\n \"version\": \"2.1.3\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-lit-element-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-lit-element-typescript\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.ts\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.ts\\\"\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {\n \"lit-element\": \"^2.4.0\",\n \"lit-html\": \"^1.4.0\"\n },\n \"devDependencies\": {\n \"@babel/plugin-proposal-class-properties\": \"^7.13.0\",\n \"@babel/plugin-proposal-decorators\": \"^7.13.15\",\n \"@babel/preset-typescript\": \"^7.13.0\",\n \"@snowpack/plugin-babel\": \"^2.1.7\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-typescript\": \"^1.2.1\",\n \"@types/snowpack-env\": \"^2.3.3\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.3.7\",\n \"typescript\": \"^4.3.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/public/index.css", "content": "body {\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\", \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\", sans-serif;\n color: white;\n margin: 0;\n padding: 0;\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/public/index.html", "content": "\n\n \n \n \n \n \n \n Snowpack App\n \n \n \n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: [\n '@snowpack/plugin-babel',\n '@snowpack/plugin-dotenv',\n [\n '@snowpack/plugin-typescript',\n {\n /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */\n ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),\n },\n ],\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/src/app-root.ts", "content": "import { customElement, property, LitElement, html, css } from 'lit-element';\n\n@customElement('app-root')\nexport class AppRoot extends LitElement {\n @property() message = 'Learn LitElement';\n\n static get styles() {\n return css`\n h1 {\n font-size: 4rem;\n }\n .wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n height: 100vh;\n background-color: #2196f3;\n background: linear-gradient(315deg, #b4d2ea 0%, #2196f3 100%);\n font-size: 24px;\n }\n .link {\n color: white;\n }\n `;\n }\n\n render() {\n return html`\n
\n

LitElement + Snowpack

\n

Edit src/app-root.ts and save to reload.

\n \n ${this.message}\n \n
\n `;\n }\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/src/index.ts", "content": "import './app-root';\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/tsconfig.json", "content": "{\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n /* paths - import rewriting/resolving */\n \"paths\": {\n // If you configured any Snowpack aliases, add them here.\n // Add this line to get types for streaming imports (packageOptions.source=\"remote\"):\n // \"*\": [\".snowpack/types/*\"]\n // More info: https://www.snowpack.dev/guides/streaming-imports\n },\n /* noEmit - Snowpack builds (emits) files, not tsc. */\n \"noEmit\": true,\n /* LitElement - Add decorator support! */\n \"experimentalDecorators\": true,\n \"emitDecoratorMetadata\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"types\": [\"snowpack-env\"],\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\"\n }\n}\n" }, { "path": "create-snowpack-app/app-template-lit-element-typescript/types/static.d.ts", "content": "/* Use this file to declare any custom file extensions for importing */\n/* Use this folder to also add/extend a package d.ts file, if needed. */\n\n/* CSS MODULES */\ndeclare module '*.module.css' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.scss' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.sass' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.less' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.styl' {\n const classes: { [key: string]: string };\n export default classes;\n}\n\n/* CSS */\ndeclare module '*.css';\ndeclare module '*.scss';\ndeclare module '*.sass';\ndeclare module '*.less';\ndeclare module '*.styl';\n\n/* IMAGES */\ndeclare module '*.svg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.bmp' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.gif' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpeg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.png' {\n const ref: string;\n export default ref;\n}\n\n/* CUSTOM: ADD YOUR OWN HERE */\n" }, { "path": "create-snowpack-app/app-template-minimal/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-minimal/index.css", "content": "/* Add CSS styles here! */\nbody {\n font-family: sans-serif;\n}\n" }, { "path": "create-snowpack-app/app-template-minimal/index.html", "content": "\n\n \n \n \n \n \n Starter Snowpack App\n \n \n

Welcome to Snowpack!

\n \n \n\n" }, { "path": "create-snowpack-app/app-template-minimal/index.js", "content": "/* Add JavaScript code here! */\nconsole.log('Hello World! You did it! Welcome to Snowpack :D');\n" }, { "path": "create-snowpack-app/app-template-minimal/package.json", "content": "{\n \"name\": \"@snowpack/app-template-minimal\",\n \"description\": \"A preconfigured minimal template for Snowpack\",\n \"version\": \"2.1.1\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-preact#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-minimal\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"main\": \"index.js\",\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"devDependencies\": {\n \"snowpack\": \"^3.3.7\"\n }\n}\n" }, { "path": "create-snowpack-app/app-template-minimal/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n /* ... */\n },\n plugins: [\n /* ... */\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-preact/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-preact/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-preact/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm test\n\nLaunches the test runner in the interactive watch mode.\nSee the section about running tests for more information.\n\n### npm run build\n\nBuilds the app for production to the `build/` folder.\nIt correctly bundles Preact in production mode and optimizes the build for the best performance.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-preact/package.json", "content": "{\n \"name\": \"@snowpack/app-template-preact\",\n \"description\": \"A preconfigured template for Snowpack with Preact\",\n \"version\": \"2.1.2\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-preact#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-preact\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.{js,jsx}\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.{js,jsx}\\\"\",\n \"test\": \"web-test-runner \\\"src/**/*.test.jsx\\\"\"\n },\n \"dependencies\": {\n \"preact\": \"^10.5.13\"\n },\n \"devDependencies\": {\n \"@prefresh/snowpack\": \"^3.0.0\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/web-test-runner-plugin\": \"^0.2.2\",\n \"@testing-library/preact\": \"^2.0.1\",\n \"@web/test-runner\": \"^0.13.3\",\n \"chai\": \"^4.3.4\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.8.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-preact/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-preact/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-preact/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: ['@snowpack/plugin-dotenv', '@prefresh/snowpack'],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n\n alias: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-preact/src/App.css", "content": ".App {\n text-align: center;\n}\n.App code {\n background: #FFF3;\n padding: 4px 8px;\n border-radius: 4px;\n}\n.App p {\n margin: 0.4rem;\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n.App-logo {\n height: 36vmin;\n pointer-events: none;\n margin-bottom: 3rem;\n animation: App-logo-spin infinite 1.6s ease-in-out alternate;\n}\n@keyframes App-logo-spin {\n from {\n transform: scale(1);\n }\n to {\n transform: scale(1.06);\n }\n}\n" }, { "path": "create-snowpack-app/app-template-preact/src/App.jsx", "content": "import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport logo from './logo.png';\nimport './App.css';\n\nfunction App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.jsx and save to reload.\n

\n

\n Page has been open for {count} seconds.\n

\n

\n \n Learn Preact\n \n

\n
\n
\n );\n}\n\nexport default App;\n" }, { "path": "create-snowpack-app/app-template-preact/src/App.test.jsx", "content": "import { h } from 'preact';\nimport { render } from '@testing-library/preact';\nimport { expect } from 'chai';\nimport App from './App';\n\ndescribe('', () => {\n it('renders learn react link', () => {\n const { getByText } = render();\n const linkElement = getByText(/learn preact/i);\n expect(document.body.contains(linkElement));\n });\n});\n" }, { "path": "create-snowpack-app/app-template-preact/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n" }, { "path": "create-snowpack-app/app-template-preact/src/index.jsx", "content": "import { h, render } from 'preact';\nimport 'preact/devtools';\nimport App from './App.js';\nimport './index.css';\n\nrender(, document.getElementById('root'));\n" }, { "path": "create-snowpack-app/app-template-preact/web-test-runner.config.js", "content": "process.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-preact-typescript/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm test\n\nLaunches the test runner in the interactive watch mode.\nSee the section about running tests for more information.\n\n### npm run build\n\nBuilds the app for production to the `build/` folder.\nIt correctly bundles Preact in production mode and optimizes the build for the best performance.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/package.json", "content": "{\n \"name\": \"@snowpack/app-template-preact-typescript\",\n \"description\": \"A preconfigured template for Snowpack with Preact and Typescript\",\n \"version\": \"2.1.3\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-preact-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-preact-typescript\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.{js,jsx}\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.{js,jsx}\\\"\",\n \"test\": \"web-test-runner \\\"src/**/*.test.tsx\\\"\"\n },\n \"dependencies\": {\n \"preact\": \"^10.5.13\"\n },\n \"devDependencies\": {\n \"@prefresh/snowpack\": \"^3.0.0\",\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-typescript\": \"^1.2.1\",\n \"@snowpack/web-test-runner-plugin\": \"^0.2.2\",\n \"@testing-library/preact\": \"^2.0.1\",\n \"@types/chai\": \"^4.2.17\",\n \"@types/mocha\": \"^8.2.2\",\n \"@web/test-runner\": \"^0.13.3\",\n \"chai\": \"^4.3.4\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.8.0\",\n \"typescript\": \"^4.3.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: [\n '@prefresh/snowpack',\n '@snowpack/plugin-dotenv',\n [\n '@snowpack/plugin-typescript',\n {\n /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */\n ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),\n },\n ],\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/src/App.css", "content": ".App {\n text-align: center;\n}\n.App code {\n background: #FFF3;\n padding: 4px 8px;\n border-radius: 4px;\n}\n.App p {\n margin: 0.4rem;\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n.App-logo {\n height: 36vmin;\n pointer-events: none;\n margin-bottom: 3rem;\n animation: App-logo-spin infinite 1.6s ease-in-out alternate;\n}\n@keyframes App-logo-spin {\n from {\n transform: scale(1);\n }\n to {\n transform: scale(1.06);\n }\n}\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/src/App.test.tsx", "content": "import { h } from 'preact';\nimport { render } from '@testing-library/preact';\nimport { expect } from 'chai';\nimport App from './App';\n\ndescribe('', () => {\n it('renders learn react link', () => {\n const { getByText } = render();\n const linkElement = getByText(/learn preact/i);\n expect(document.body.contains(linkElement));\n });\n});\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/src/App.tsx", "content": "import { h } from 'preact';\nimport { useState, useEffect } from 'preact/hooks';\nimport logo from './logo.png';\nimport './App.css';\n\nfunction App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.jsx and save to reload.\n

\n

\n Page has been open for {count} seconds.\n

\n

\n \n Learn Preact\n \n

\n
\n
\n );\n}\n\nexport default App;\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/src/index.tsx", "content": "import { h, render } from 'preact';\nimport 'preact/devtools';\nimport App from './App.js';\nimport './index.css';\n\nconst root = document.getElementById('root')\n\nif (root) {\n render(, root);\n}\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/tsconfig.json", "content": "{\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"h\",\n \"baseUrl\": \"./\",\n /* paths - import rewriting/resolving */\n \"paths\": {\n // If you configured any Snowpack aliases, add them here.\n // Add this line to get types for streaming imports (packageOptions.source=\"remote\"):\n // \"*\": [\".snowpack/types/*\"]\n // More info: https://www.snowpack.dev/guides/streaming-imports\n },\n /* noEmit - Snowpack builds (emits) files, not tsc. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"types\": [\"mocha\", \"snowpack-env\"],\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\"\n }\n}\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/types/static.d.ts", "content": "/* Use this file to declare any custom file extensions for importing */\n/* Use this folder to also add/extend a package d.ts file, if needed. */\n\n/* CSS MODULES */\ndeclare module '*.module.css' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.scss' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.sass' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.less' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.styl' {\n const classes: { [key: string]: string };\n export default classes;\n}\n\n/* CSS */\ndeclare module '*.css';\ndeclare module '*.scss';\ndeclare module '*.sass';\ndeclare module '*.less';\ndeclare module '*.styl';\n\n/* IMAGES */\ndeclare module '*.svg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.bmp' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.gif' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpeg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.png' {\n const ref: string;\n export default ref;\n}\n\n/* CUSTOM: ADD YOUR OWN HERE */\n" }, { "path": "create-snowpack-app/app-template-preact-typescript/web-test-runner.config.js", "content": "process.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n" }, { "path": "create-snowpack-app/app-template-react/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-react/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-react/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like \"@snowpack/plugin-webpack\" to your `snowpack.config.mjs` config file.\n\n### npm test\n\nLaunches the application test runner.\nRun with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode.\n" }, { "path": "create-snowpack-app/app-template-react/package.json", "content": "{\n \"name\": \"@snowpack/app-template-react\",\n \"description\": \"A preconfigured template for Snowpack with React\",\n \"version\": \"2.1.2\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-react\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.{js,jsx}\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.{js,jsx}\\\"\",\n \"test\": \"web-test-runner \\\"src/**/*.test.jsx\\\"\"\n },\n \"dependencies\": {\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-react-refresh\": \"^2.5.0\",\n \"@snowpack/web-test-runner-plugin\": \"^0.2.2\",\n \"@testing-library/react\": \"^11.2.6\",\n \"@web/test-runner\": \"^0.13.3\",\n \"chai\": \"^4.3.4\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.8.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-react/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-react/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-react/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-react/src/App.css", "content": ".App {\n text-align: center;\n}\n.App code {\n background: #FFF3;\n padding: 4px 8px;\n border-radius: 4px;\n}\n.App p {\n margin: 0.4rem;\n}\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n" }, { "path": "create-snowpack-app/app-template-react/src/App.jsx", "content": "import React, { useState, useEffect } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.jsx and save to reload.\n

\n

\n Page has been open for {count} seconds.\n

\n

\n \n Learn React\n \n

\n
\n
\n );\n}\n\nexport default App;\n" }, { "path": "create-snowpack-app/app-template-react/src/App.test.jsx", "content": "import * as React from 'react';\nimport { render } from '@testing-library/react';\nimport { expect } from 'chai';\nimport App from './App';\n\ndescribe('', () => {\n it('renders learn react link', () => {\n const { getByText } = render();\n const linkElement = getByText(/learn react/i);\n expect(document.body.contains(linkElement));\n });\n});\n" }, { "path": "create-snowpack-app/app-template-react/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n" }, { "path": "create-snowpack-app/app-template-react/src/index.jsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App.jsx';\nimport './index.css';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root'),\n);\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n}\n" }, { "path": "create-snowpack-app/app-template-react/web-test-runner.config.js", "content": "process.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n" }, { "path": "create-snowpack-app/app-template-react-typescript/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-react-typescript/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\"\n}\n" }, { "path": "create-snowpack-app/app-template-react-typescript/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like \"@snowpack/plugin-webpack\" to your `snowpack.config.mjs` config file.\n\n### npm test\n\nLaunches the application test runner.\nRun with the `--watch` flag (`npm test -- --watch`) to run in interactive watch mode.\n" }, { "path": "create-snowpack-app/app-template-react-typescript/package.json", "content": "{\n \"name\": \"@snowpack/app-template-react-typescript\",\n \"description\": \"A preconfigured template for Snowpack with React and TypeScript\",\n \"version\": \"2.1.3\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-react-typescript\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"format\": \"prettier --write \\\"src/**/*.{js,jsx,ts,tsx}\\\"\",\n \"lint\": \"prettier --check \\\"src/**/*.{js,jsx,ts,tsx}\\\"\",\n \"test\": \"web-test-runner \\\"src/**/*.test.tsx\\\"\"\n },\n \"dependencies\": {\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-react-refresh\": \"^2.5.0\",\n \"@snowpack/plugin-typescript\": \"^1.2.1\",\n \"@snowpack/web-test-runner-plugin\": \"^0.2.2\",\n \"@testing-library/react\": \"^11.2.6\",\n \"@types/chai\": \"^4.2.17\",\n \"@types/mocha\": \"^8.2.2\",\n \"@types/react\": \"^17.0.4\",\n \"@types/react-dom\": \"^17.0.3\",\n \"@types/snowpack-env\": \"^2.3.3\",\n \"@web/test-runner\": \"^0.13.3\",\n \"chai\": \"^4.3.4\",\n \"prettier\": \"^2.2.1\",\n \"snowpack\": \"^3.8.0\",\n \"typescript\": \"^4.3.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-react-typescript/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-react-typescript/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-react-typescript/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: { url: '/', static: true },\n src: { url: '/dist' },\n },\n plugins: [\n '@snowpack/plugin-react-refresh',\n '@snowpack/plugin-dotenv',\n [\n '@snowpack/plugin-typescript',\n {\n /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */\n ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),\n },\n ],\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-react-typescript/src/App.css", "content": ".App {\n text-align: center;\n}\n.App code {\n background: #FFF3;\n padding: 4px 8px;\n border-radius: 4px;\n}\n.App p {\n margin: 0.4rem;\n}\n\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n" }, { "path": "create-snowpack-app/app-template-react-typescript/src/App.test.tsx", "content": "import * as React from 'react';\nimport { render } from '@testing-library/react';\nimport { expect } from 'chai';\nimport App from './App';\n\ndescribe('', () => {\n it('renders learn react link', () => {\n const { getByText } = render();\n const linkElement = getByText(/learn react/i);\n expect(document.body.contains(linkElement));\n });\n});\n" }, { "path": "create-snowpack-app/app-template-react-typescript/src/App.tsx", "content": "import React, { useState, useEffect } from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\ninterface AppProps {}\n\nfunction App({}: AppProps) {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.tsx and save to reload.\n

\n

\n Page has been open for {count} seconds.\n

\n

\n \n Learn React\n \n

\n
\n
\n );\n}\n\nexport default App;\n" }, { "path": "create-snowpack-app/app-template-react-typescript/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n monospace;\n}\n" }, { "path": "create-snowpack-app/app-template-react-typescript/src/index.tsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport './index.css';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root'),\n);\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n}\n" }, { "path": "create-snowpack-app/app-template-react-typescript/tsconfig.json", "content": "{\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n /* paths - import rewriting/resolving */\n \"paths\": {\n // If you configured any Snowpack aliases, add them here.\n // Add this line to get types for streaming imports (packageOptions.source=\"remote\"):\n // \"*\": [\".snowpack/types/*\"]\n // More info: https://www.snowpack.dev/guides/streaming-imports\n },\n /* noEmit - Snowpack builds (emits) files, not tsc. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"types\": [\"mocha\", \"snowpack-env\"],\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\"\n }\n}\n" }, { "path": "create-snowpack-app/app-template-react-typescript/types/static.d.ts", "content": "/* Use this file to declare any custom file extensions for importing */\n/* Use this folder to also add/extend a package d.ts file, if needed. */\n\n/* CSS MODULES */\ndeclare module '*.module.css' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.scss' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.sass' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.less' {\n const classes: { [key: string]: string };\n export default classes;\n}\ndeclare module '*.module.styl' {\n const classes: { [key: string]: string };\n export default classes;\n}\n\n/* CSS */\ndeclare module '*.css';\ndeclare module '*.scss';\ndeclare module '*.sass';\ndeclare module '*.less';\ndeclare module '*.styl';\n\n/* IMAGES */\ndeclare module '*.svg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.bmp' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.gif' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpeg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.png' {\n const ref: string;\n export default ref;\n}\n\n/* CUSTOM: ADD YOUR OWN HERE */\n" }, { "path": "create-snowpack-app/app-template-react-typescript/web-test-runner.config.js", "content": "process.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n" }, { "path": "create-snowpack-app/app-template-svelte/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-svelte/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm test\n\nLaunches the test runner in the interactive watch mode.\nSee the section about running tests for more information.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-svelte/package.json", "content": "{\n \"name\": \"@snowpack/app-template-svelte\",\n \"description\": \"A preconfigured template for Snowpack with Svelte\",\n \"version\": \"2.1.2\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-svelte\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"test\": \"web-test-runner \\\"src/**/*.test.js\\\"\"\n },\n \"dependencies\": {\n \"svelte\": \"^3.37.0\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-svelte\": \"^3.6.1\",\n \"@snowpack/web-test-runner-plugin\": \"^0.2.2\",\n \"@testing-library/svelte\": \"^3.0.3\",\n \"@web/test-runner\": \"^0.13.3\",\n \"chai\": \"^4.3.4\",\n \"snowpack\": \"^3.8.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-svelte/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-svelte/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-svelte/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: ['@snowpack/plugin-svelte', '@snowpack/plugin-dotenv'],\n routes: [\n /* Example: Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-svelte/src/App.svelte", "content": "\n\n\n\n
\n
\n \"logo\"\n

Edit src/App.svelte and save to reload.

\n

Page has been open for {count} seconds.

\n

\n \n Learn Svelte\n \n

\n
\n
\n" }, { "path": "create-snowpack-app/app-template-svelte/src/App.test.js", "content": "import {render} from '@testing-library/svelte';\nimport {expect} from 'chai';\nimport App from './App.svelte';\n\ndescribe('', () => {\n it('renders learn svelte link', () => {\n const {getByText} = render(App);\n const linkElement = getByText(/learn svelte/i);\n expect(document.body.contains(linkElement));\n });\n});\n" }, { "path": "create-snowpack-app/app-template-svelte/src/index.js", "content": "import App from './App.svelte';\n\nlet app = new App({\n target: document.body,\n});\n\nexport default app;\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n import.meta.hot.dispose(() => {\n app.$destroy();\n });\n}\n" }, { "path": "create-snowpack-app/app-template-svelte/web-test-runner.config.js", "content": "process.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-svelte-typescript/CHANGELOG.md", "content": "# @snowpack/app-template-svelte-typescript\n\n## 2.1.5\n\n### Patch Changes\n\n- fed2c940: Remove default language option as its use is discouraged\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm test\n\nLaunches the test runner in the interactive watch mode.\nSee the section about running tests for more information.\n\n### npm run build\n\nBuilds a static copy of your site to the `build/` folder.\nYour app is ready to be deployed!\n\n**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.mjs` config file.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/package.json", "content": "{\n \"name\": \"@snowpack/app-template-svelte-typescript\",\n \"description\": \"A preconfigured template for Snowpack with Svelte and TypeScript\",\n \"version\": \"2.1.5\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-svelte-typescript\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"test\": \"web-test-runner \\\"src/**/*.test.ts\\\"\"\n },\n \"dependencies\": {\n \"svelte\": \"^3.37.0\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.2.0\",\n \"@snowpack/plugin-svelte\": \"^3.6.1\",\n \"@snowpack/plugin-typescript\": \"^1.2.1\",\n \"@snowpack/web-test-runner-plugin\": \"^0.2.2\",\n \"@testing-library/svelte\": \"^3.0.3\",\n \"@tsconfig/svelte\": \"^1.0.10\",\n \"@types/chai\": \"^4.2.17\",\n \"@types/mocha\": \"^8.2.2\",\n \"@types/snowpack-env\": \"^2.3.3\",\n \"@web/test-runner\": \"^0.13.3\",\n \"chai\": \"^4.3.4\",\n \"snowpack\": \"^3.8.8\",\n \"svelte-preprocess\": \"^4.7.2\",\n \"typescript\": \"^4.3.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: [\n '@snowpack/plugin-svelte',\n '@snowpack/plugin-dotenv',\n [\n '@snowpack/plugin-typescript',\n {\n /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */\n ...(process.versions.pnp ? {tsc: 'yarn pnpify tsc'} : {}),\n },\n ],\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/src/App.svelte", "content": "\n\n\n\n
\n
\n \"logo\"/\n

Edit src/App.svelte and save to reload.

\n

Page has been open for {count} seconds.

\n

\n \n Learn Svelte\n \n

\n
\n
\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/src/App.test.ts", "content": "import {render} from '@testing-library/svelte';\nimport {expect} from 'chai';\nimport App from './App.svelte';\n\ndescribe('', () => {\n it('renders learn svelte link', () => {\n const {getByText} = render(App);\n const linkElement = getByText(/learn svelte/i);\n expect(document.body.contains(linkElement));\n });\n});\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/src/index.ts", "content": "import App from './App.svelte';\n\nvar app = new App({\n target: document.body,\n});\n\nexport default app;\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n import.meta.hot.dispose(() => {\n app.$destroy();\n });\n}\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/svelte.config.js", "content": "const autoPreprocess = require('svelte-preprocess');\n\nmodule.exports = {\n preprocess: autoPreprocess(),\n};\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/tsconfig.json", "content": "{\n \"extends\": \"@tsconfig/svelte/tsconfig.json\",\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n /* paths - import rewriting/resolving */\n \"paths\": {\n // If you configured any Snowpack aliases, add them here.\n // Add this line to get types for streaming imports (packageOptions.source=\"remote\"):\n // \"*\": [\".snowpack/types/*\"]\n // More info: https://www.snowpack.dev/guides/streaming-imports\n },\n /* noEmit - Snowpack builds (emits) files, not tsc. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"types\": [\"mocha\", \"snowpack-env\"],\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"useDefineForClassFields\": true,\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\"\n }\n}\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/types/static.d.ts", "content": "/* Use this file to declare any custom file extensions for importing */\n/* Use this folder to also add/extend a package d.ts file, if needed. */\n\n/* CSS MODULES */\ndeclare module '*.module.css' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.scss' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.sass' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.less' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.styl' {\n const classes: {[key: string]: string};\n export default classes;\n}\n\n/* CSS */\ndeclare module '*.css';\ndeclare module '*.scss';\ndeclare module '*.sass';\ndeclare module '*.less';\ndeclare module '*.styl';\n\n/* IMAGES */\ndeclare module '*.svg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.bmp' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.gif' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpeg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.png' {\n const ref: string;\n export default ref;\n}\n\n/* CUSTOM: ADD YOUR OWN HERE */\n" }, { "path": "create-snowpack-app/app-template-svelte-typescript/web-test-runner.config.js", "content": "process.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n" }, { "path": "create-snowpack-app/app-template-vue/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-vue/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm test\n\n**⚠️ NOTE:** Vue 3 testing support is still in progress. This template does not ship with a test runner.\n\n### npm run build\n\nBuilds the app for production to the `build/` folder.\nIt correctly bundles Vue in production mode and optimizes the build for the best performance.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-vue/package.json", "content": "{\n \"name\": \"@snowpack/app-template-vue\",\n \"description\": \"A preconfigured template for Snowpack with Vue\",\n \"version\": \"2.1.2\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-vue\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {\n \"vue\": \"^3.0.11\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-vue\": \"^2.4.0\",\n \"snowpack\": \"^3.3.7\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-vue/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-vue/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-vue/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: ['@snowpack/plugin-vue', '@snowpack/plugin-dotenv'],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-vue/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "create-snowpack-app/app-template-vue/src/index.js", "content": "import {createApp} from 'vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.mount('#app');\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n import.meta.hot.dispose(() => {\n app.unmount();\n });\n}\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/.npmignore", "content": ".build\nbuild" }, { "path": "create-snowpack-app/app-template-vue-typescript/README.md", "content": "# New Project\n\n> ✨ Bootstrapped with Create Snowpack App (CSA).\n\n## Available Scripts\n\n### npm start\n\nRuns the app in the development mode.\nOpen http://localhost:8080 to view it in the browser.\n\nThe page will reload if you make edits.\nYou will also see any lint errors in the console.\n\n### npm test\n\n**⚠️ NOTE:** Vue 3 testing support is still in progress. This template does not ship with a test runner.\n\n### npm run build\n\nBuilds the app for production to the `build/` folder.\nIt correctly bundles Vue in production mode and optimizes the build for the best performance.\n\n### Q: What about Eject?\n\nNo eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/package.json", "content": "{\n \"name\": \"@snowpack/app-template-vue-typescript\",\n \"description\": \"A preconfigured template for Snowpack with Vue and TypeScript\",\n \"version\": \"2.1.2\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/app-template-vue-typescript\"\n },\n \"keywords\": [\n \"csa-template\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n \"type-check\": \"tsc\",\n \"test\": \"echo \\\"This template does not include a test runner by default.\\\" && exit 1\"\n },\n \"dependencies\": {\n \"vue\": \"^3.0.11\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.1.0\",\n \"@snowpack/plugin-vue\": \"^2.4.0\",\n \"snowpack\": \"^3.3.7\",\n \"typescript\": \"^4.3.4\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: {url: '/', static: true},\n src: {url: '/dist'},\n },\n plugins: [\n '@snowpack/plugin-vue',\n '@snowpack/plugin-vue/plugin-tsx-jsx.js',\n '@snowpack/plugin-dotenv',\n ],\n routes: [\n /* Enable an SPA Fallback in development: */\n // {\"match\": \"routes\", \"src\": \".*\", \"dest\": \"/index.html\"},\n ],\n optimize: {\n /* Example: Bundle your final build: */\n // \"bundle\": true,\n },\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/src/App.vue", "content": "\n\n\n\n\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/src/index.js", "content": "import {createApp} from 'vue';\nimport App from './App.vue';\n\nconst app = createApp(App);\napp.mount('#app');\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n import.meta.hot.dispose(() => {\n app.unmount();\n });\n}\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/tsconfig.json", "content": "{\n \"include\": [\"src\", \"types\"],\n \"compilerOptions\": {\n \"module\": \"esnext\",\n \"target\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"jsx\": \"preserve\",\n \"baseUrl\": \"./\",\n /* paths - import rewriting/resolving */\n \"paths\": {\n // If you configured any Snowpack aliases, add them here.\n // Add this line to get types for streaming imports (packageOptions.source=\"remote\"):\n // \"*\": [\".snowpack/types/*\"]\n // More info: https://www.snowpack.dev/guides/streaming-imports\n },\n /* noEmit - Snowpack builds (emits) files, not tsc. */\n \"noEmit\": true,\n /* Additional Options */\n \"strict\": true,\n \"skipLibCheck\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"resolveJsonModule\": true,\n \"allowSyntheticDefaultImports\": true,\n \"importsNotUsedAsValues\": \"error\"\n }\n}\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/types/shims-vue.d.ts", "content": "declare module '*.vue' {\n import {defineComponent} from 'vue';\n const component: ReturnType;\n export default component;\n}\n" }, { "path": "create-snowpack-app/app-template-vue-typescript/types/static.d.ts", "content": "/* Use this file to declare any custom file extensions for importing */\n/* Use this folder to also add/extend a package d.ts file, if needed. */\n\n/* CSS MODULES */\ndeclare module '*.module.css' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.scss' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.sass' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.less' {\n const classes: {[key: string]: string};\n export default classes;\n}\ndeclare module '*.module.styl' {\n const classes: {[key: string]: string};\n export default classes;\n}\n\n/* CSS */\ndeclare module '*.css';\ndeclare module '*.scss';\ndeclare module '*.sass';\ndeclare module '*.less';\ndeclare module '*.styl';\n\n/* IMAGES */\ndeclare module '*.svg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.bmp' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.gif' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.jpeg' {\n const ref: string;\n export default ref;\n}\ndeclare module '*.png' {\n const ref: string;\n export default ref;\n}\n\n/* CUSTOM: ADD YOUR OWN HERE */\n" }, { "path": "create-snowpack-app/cli/README.md", "content": "# Create Snowpack App (CSA)\n\n```sh\nnpx create-snowpack-app new-dir --template @snowpack/app-template-NAME [--use-yarn | --use-pnpm | --no-install | --no-git]\n```\n\n## Official App Templates\n\n- [@snowpack/app-template-blank](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-blank)\n- [@snowpack/app-template-blank-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-blank-typescript)\n- [@snowpack/app-template-11ty](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-11ty)\n- [@snowpack/app-template-lit-element](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-lit-element)\n- [@snowpack/app-template-lit-element-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-lit-element-typescript)\n- [@snowpack/app-template-preact](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-preact)\n- [@snowpack/app-template-preact-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-preact-typescript)\n- [@snowpack/app-template-react](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react)\n- [@snowpack/app-template-react-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react-typescript)\n- [@snowpack/app-template-svelte](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte)\n- [@snowpack/app-template-svelte-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte-typescript)\n- [@snowpack/app-template-vue](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue)\n- [@snowpack/app-template-vue-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue-typescript)\n\n### Featured Community Templates\n\n- [snowpack-template-preset-env](https://github.com/argyleink/snowpack-template-preset-env) (PostCSS + Babel)\n- [11st-Starter-Kit](https://github.com/stefanfrede/11st-starter-kit) (11ty +\n Snowpack + tailwindcss)\n- [app-template-rescript-react](https://github.com/jihchi/app-template-rescript-react) (ReScript & rescript-react on top of [@snowpack/app-template-react](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react))\n- [svelte-tailwind](https://github.com/agneym/svelte-tailwind-snowpack) (Adds PostCSS and TailwindCSS using [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess))\n- [snowpack-react-tailwind](https://github.com/mrkldshv/snowpack-react-tailwind) (React + Snowpack + Tailwindcss)\n- [hyperapp-snowpack](https://github.com/bmartel/hyperapp-snowpack) (Hyperapp + Snowpack + TailwindCSS)\n- [snowpack-vue-capacitor-2-demo](https://github.com/brodybits/snowpack-vue-capacitor-2-demo) Demo of Snowpack with Vue and [Capacitor mobile app framework](https://capacitorjs.com/) version 2, originally generated from `@snowpack/vue-template` template, see [discussion #905](https://github.com/withastro/snowpack/discussions/905)\n- [snowpack-react-ssr](https://github.com/matthoffner/snowpack-react-ssr) (React + Server Side Rendering)\n- [snowpack-app-template-preact-hmr-tailwind](https://github.com/Mozart409/snowpack-app-template-preact-hmr-tailwind) (Snowpack + Preact + HMR + Tailwindcss)\n- [snowpack-mdx-chakra](https://github.com/molebox/snowpack-mdx)(An opinionated template setup with MDX, Chakra-ui for styling, theme and components, and React Router v6 for routing.)\n- [app-template-sstt](https://github.com/LBrian/app-template-s2t2) (S2T2 - Snowpack + Svelte + Typescript + TailwindCSS)\n- [snowpack-svelte-ts-tw](https://github.com/GarrettCannon/snowpack-svelte-ts-tw) (Snowpack + Svelte + Typescript + TailwindCSS)\n- [snowpack-template-tailwind](https://github.com/jonalvarezz/snowpack-template-tailwind) (Snowpack + TailwindCSS + Autopublish to GitHub Pages)\n- [glimmer-snowpack](https://github.com/rajasegar/glimmer-snowpack) (Snowpack + [Glimmer.js](https://glimmerjs.com))\n- [snowpack-cycle](https://github.com/rajasegar/snowpack-cycle) (A pre-configured Snowpack app template for [Cycle.js](https://cycle.js.org))\n- [@snowpack-angular/template](https://github.com/YogliB/snowpack-angular/tree/main/templates/base) (A preconfigured template for Snowpack with [Angular](https://angular.io))\n- [snowpack-solid](https://github.com/amoutonbrady/snowpack-solid) (A pre-configured Snowpack app template for [Solid](https://github.com/ryansolid/solid))\n- [snowpack-template-ts-rust-wasm](https://github.com/jake-pauls/snowpack-template-ts-rust-wasm) (Snowpack + Typescript + Rust + WebAssembly)\n- PRs that add a link to this list are welcome!\n" }, { "path": "create-snowpack-app/cli/createSnowpackApp.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst execa = require('execa');\nconst yargs = require('yargs-parser');\nconst {copy, removeSync} = require('fs-extra');\nconst colors = require('kleur');\n\nconst errorAlert = `${colors.red('[ERROR]')}`;\nconst errorLink = `${colors.dim(colors.underline('https://github.com/withastro/snowpack'))}`;\n\nfunction logError(msg) {\n console.error(`${errorAlert} ${msg} ${errorLink}`);\n process.exit(1);\n}\n\nfunction hasPmInstalled(packageManager) {\n try {\n execa.commandSync(`${packageManager} --version`);\n return true;\n } catch (err) {\n return false;\n }\n}\n\nfunction validateArgs(args) {\n const {template, useYarn, usePnpm, force, target, install, verbose, git = true, _} = yargs(args);\n const toInstall = install !== undefined ? install : true;\n const toInitializeGitRepo = git !== undefined ? git : true;\n if (useYarn && usePnpm) {\n logError('You can not use Yarn and pnpm at the same time.');\n }\n if (useYarn && !hasPmInstalled('yarn')) {\n logError(`Yarn doesn't seem to be installed.`);\n }\n if (usePnpm && !hasPmInstalled('pnpm')) {\n logError(`pnpm doesn't seem to be installed.`);\n }\n if (!target && _.length === 2) {\n logError('Missing --target directory.');\n }\n if (typeof template !== 'string') {\n logError('Missing --template argument.');\n }\n if (_.length > 3) {\n logError('Unexpected extra arguments.');\n }\n const targetDirectoryRelative = target || _[2];\n const targetDirectory = path.resolve(process.cwd(), targetDirectoryRelative);\n if (fs.existsSync(targetDirectory) && !force) {\n logError(`${targetDirectory} already exists. Use \\`--force\\` to overwrite this directory.`);\n }\n return {\n template,\n useYarn,\n usePnpm,\n targetDirectoryRelative,\n targetDirectory,\n toInstall,\n toInitializeGitRepo,\n verbose,\n };\n}\n\nasync function verifyProjectTemplate(isLocalTemplate, {template, dir}) {\n let keywords;\n if (isLocalTemplate) {\n const packageManifest = path.join(dir, 'package.json');\n keywords = require(packageManifest).keywords;\n } else {\n try {\n const {stdout} = await execa('npm', ['info', template, 'keywords', '--json']);\n keywords = JSON.parse(stdout);\n } catch (err) {\n console.log();\n if (err.stderr) {\n console.error(\n `${errorAlert} Unable to find \"${colors.cyan(template)}\" in the npm registry.`,\n );\n } else {\n console.log(err);\n }\n console.error(`${errorAlert} Cannot continue safely. Exiting...`);\n process.exit(1);\n }\n }\n\n if (!keywords || !keywords.includes('csa-template')) {\n console.error(\n `\\n${errorAlert} The template is not a CSA template (missing \"${colors.yellow(\n 'csa-template',\n )}\" keyword in package.json), check the template name to make sure you are using the current template name.`,\n );\n console.error(`${errorAlert} Cannot continue safely. Exiting...`);\n process.exit(1);\n }\n}\n\nasync function cleanProject(dir) {\n const packageManifest = path.join(dir, 'package.json');\n removeSync(path.join(dir, 'package-lock.json'));\n removeSync(path.join(dir, 'node_modules'));\n\n const {scripts, webDependencies, dependencies, devDependencies} = require(packageManifest);\n const {prepare, start, build, test, ...otherScripts} = scripts;\n await fs.promises.writeFile(\n packageManifest,\n JSON.stringify(\n {\n scripts: {prepare, start, build, test, ...otherScripts},\n webDependencies,\n dependencies,\n devDependencies,\n },\n null,\n 2,\n ),\n );\n\n const gitignore = path.join(dir, '.gitignore');\n if (!fs.existsSync(gitignore)) {\n await fs.promises.writeFile(gitignore, ['.snowpack', 'build', 'node_modules'].join('\\n'));\n }\n}\n\nasync function initializeGitRepo(targetDirectory) {\n console.log(`\\n - Initializing git repo.\\n`);\n try {\n await execa('git', ['init'], {cwd: targetDirectory});\n await execa('git', ['add', '-A'], {cwd: targetDirectory});\n await execa('git', ['commit', '-m', 'initial commit'], {\n cwd: targetDirectory,\n });\n console.log(` - ${colors.green('Success!')}`);\n } catch (err) {\n console.log(` - ${colors.yellow('Could not complete git repository initialization.')}`);\n }\n}\n\nconst {\n template,\n useYarn,\n usePnpm,\n toInstall,\n toInitializeGitRepo,\n targetDirectoryRelative,\n targetDirectory,\n verbose,\n} = validateArgs(process.argv);\n\nlet installer = 'npm';\nif (useYarn) {\n installer = 'yarn';\n} else if (usePnpm) {\n installer = 'pnpm';\n}\n\nconst isLocalTemplate = template.startsWith('.'); // must start with a `.` to be considered local\nconst installedTemplate = isLocalTemplate\n ? path.resolve(process.cwd(), template) // handle local template\n : path.join(targetDirectory, 'node_modules', template); // handle template from npm/yarn\n\n(async () => {\n await verifyProjectTemplate(isLocalTemplate, {dir: installedTemplate, template});\n\n console.log(`\\n - Using template ${colors.cyan(template)}`);\n console.log(` - Creating a new project in ${colors.cyan(targetDirectory)}`);\n fs.mkdirSync(targetDirectory, {recursive: true});\n await fs.promises.writeFile(path.join(targetDirectory, 'package.json'), `{\"name\": \"my-csa-app\"}`);\n // fetch from npm or GitHub if not local (which will be most of the time)\n if (!isLocalTemplate) {\n try {\n await execa(\n 'npm',\n ['install', template, '--ignore-scripts', '--loglevel', verbose ? 'verbose' : 'error'],\n {\n cwd: targetDirectory,\n all: true,\n },\n );\n } catch (err) {\n // Only log output if the command failed\n console.error(err.all);\n throw err;\n }\n }\n await copy(installedTemplate, targetDirectory);\n await cleanProject(targetDirectory);\n\n if (toInstall) {\n console.log(` - Installing package dependencies. This might take a couple of minutes.\\n`);\n\n const npmInstallOptions = {\n cwd: targetDirectory,\n stdio: 'inherit',\n };\n\n function installProcess(packageManager) {\n switch (packageManager) {\n case 'npm':\n return execa(\n 'npm',\n ['install', '--loglevel', verbose ? 'verbose' : 'error'],\n npmInstallOptions,\n );\n case 'yarn':\n return execa('yarn', [verbose ? '--verbose' : '--silent'], npmInstallOptions);\n case 'pnpm':\n return execa(\n 'pnpm',\n ['install', `--reporter=${verbose ? 'default' : 'silent'}`],\n npmInstallOptions,\n );\n default:\n throw new Error('Unspecified package installer.');\n }\n }\n\n const npmInstallProcess = installProcess(installer);\n npmInstallProcess.stdout && npmInstallProcess.stdout.pipe(process.stdout);\n npmInstallProcess.stderr && npmInstallProcess.stderr.pipe(process.stderr);\n await npmInstallProcess;\n } else {\n console.log(` - Skipping \"${installer} install\" step\\n`);\n }\n\n if (toInitializeGitRepo) {\n await initializeGitRepo(targetDirectory);\n }\n\n function formatCommand(command, description) {\n return ' ' + command.padEnd(17) + colors.dim(description);\n }\n\n console.log(``);\n console.log(colors.bold(colors.underline(`Quickstart:`)));\n console.log(``);\n console.log(` cd ${targetDirectoryRelative}`);\n console.log(` ${installer} start`);\n console.log(``);\n console.log(colors.bold(colors.underline(`All Commands:`)));\n console.log(``);\n console.log(\n formatCommand(\n `${installer} install`,\n `Install your dependencies. ${\n toInstall ? '(We already ran this one for you!)' : '(You asked us to skip this step!)'\n }`,\n ),\n );\n console.log(formatCommand(`${installer} start`, 'Start your development server.'));\n console.log(formatCommand(`${installer} run build`, 'Build your website for production.'));\n console.log(formatCommand(`${installer} test`, 'Run your tests.'));\n console.log(``);\n})();\n" }, { "path": "create-snowpack-app/cli/index.js", "content": "#!/usr/bin/env node\n'use strict';\n\nconst currentVersion = process.versions.node;\nconst requiredMajorVersion = parseInt(currentVersion.split('.')[0], 10);\nconst minimumMajorVersion = 10;\n\nif (requiredMajorVersion < minimumMajorVersion) {\n console.error(`Node.js v${currentVersion} is out of date and unsupported!`);\n console.error(`Please use Node.js v${minimumMajorVersion} or higher.`);\n process.exit(1);\n}\n\nrequire('./createSnowpackApp');\n" }, { "path": "create-snowpack-app/cli/package.json", "content": "{\n \"name\": \"create-snowpack-app\",\n \"version\": \"1.10.0\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/create-snowpack-app/cli#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"create-snowpack-app/cli\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"bin\": {\n \"create-snowpack-app\": \"./index.js\"\n },\n \"dependencies\": {\n \"execa\": \"^5.1.1\",\n \"fs-extra\": \"^9.0.0\",\n \"kleur\": \"^4.1.1\",\n \"yargs-parser\": \"^20.0.0\"\n }\n}\n" }, { "path": "docs/README.md", "content": "

Documentation

\n\n**📚 To read our documentation, please visit the official [Snowpack website ➞](https://snowpack.dev)**\n\n---\n\n**🙋 To contribute to our documentation, please read our [Contributor Guidelines ➞](../CONTRIBUTING.md#Documentation)**\n" }, { "path": "docs/concepts/build-pipeline.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: The Build Pipeline\ndescription: Snowpack Build creates a production-ready website with or without a bundler\n---\n\n![build output example](/img/snowpack-build-example.png)\n\n`snowpack build` - When you're ready to deploy your application, run the build command to generate a static production build of your site. Building is tightly integrated with your dev setup so that you are guaranteed to get a near-exact copy of the same code that you saw during development.\n\n### Bundle for Production\n\n**You should be able to use a bundler because you want to, and not because you need to.** That was the original concept that Snowpack was designed to address. Snowpack treats bundling as an optional production optimization, which means you're free to skip over the extra complexity of bundling until you need it.\n\nBy default, `snowpack build` will build your site using the same unbundled approach as the `dev` command. This is fine for most projects, but you also may still want to bundle for production. Legacy browser support, code minification, code-splitting, tree-shaking, dead code elimination, and other performance optimizations can all be handled in Snowpack via bundling.\n\nBundlers normally require dozens or even hundreds of lines of configuration, but with Snowpack it's just a one-line plugin with no config required. This is possible because Snowpack builds your application _before_ sending it to the bundler, so the bundler never sees your custom source code (JSX, TS, Svelte, Vue, etc.) and instead needs to worry only about building common HTML, CSS, and JS.\n\n```js\n// Bundlers plugins are pre-configured to work with Snowpack apps.\n// No config required! You just need to install the plugin first.\n{\n \"plugins\": [[\"@snowpack/plugin-webpack\"]]\n}\n```\n\nSee [our bundling guides](/guides/optimize-and-bundle) for more information about connecting bundled (or unbundled) optimization plugins for your production builds.\n\n## Legacy Browser Support\n\nYou can customize the set of browsers you'd like to support via the `package.json` \"browserslist\" property, going all the way back to IE11. This will be picked up when you run `snowpack build` to build for production.\n\n```js\n/* package.json */\n\"browserslist\": \">0.75%, not ie 11, not UCAndroid >0, not OperaMini all\",\n```\n\nIf you're worried about legacy browsers, you should also add a bundler to your production build. Check out our [section on bundling for deployment](/guides/optimize-and-bundle) for more info.\n\nNote: During development (`snowpack dev`) we perform no transpilation for older browsers. Make sure that you're using a modern browser during development.\n" }, { "path": "docs/concepts/dev-server.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: The Dev Server\ndescription: Snowpack's dev server is fast because it only rebuilds the files you change. Powered by ESM (ES modules).\n---\n\n![dev command output example](/img/snowpack-dev-startup-2.png)\n\n`snowpack dev` - Snowpack's dev server is an instant dev environment for [unbundled development.](/concepts/how-snowpack-works) The dev server will build a file only when it's requested by the browser. That means that Snowpack can start up instantly (usually in **<50ms**) and scale to infinitely large projects without slowing down. In contrast, it's common to see 30+ second dev startup times when building large apps with a traditional bundler.\n\nSnowpack supports JSX & TypeScript source code by default. You can extend your build even further with [custom plugins](/plugins) that connect Snowpack with your favorite build tools: TypeScript, Babel, Vue, Svelte, PostCSS, Sass... go wild!\n" }, { "path": "docs/concepts/hot-module-replacement.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: HMR + Fast Refresh\ndescription: Snowpack's ESM-powered unbundled development means near-instant single file builds that only take 10-25ms to load and update in the browser.\n---\n\nHot Module Replacement (HMR) is the ability to push file updates to the browser without triggering a full page refresh. Imagine changing some CSS, hitting save, and then instantly seeing your change reflected on the page without a refresh. That's HMR.\n\nHMR is not unique to Snowpack. However, Snowpack's ability to leverage ESM for unbundled development introduces near-instant single file builds that only take 10-25ms to load and update in the browser.\n\nSnowpack ships with ready, out-of-the-box HMR support for the following file types:\n\n- CSS\n- CSS Modules\n- JSON\n\nJavaScript HMR is also supported out-of-the-box, but often requires a few additional lines of code to properly integrate with your frontend framework's \"render\" function. See \"Enabling HMR + Fast Refresh\" below.\n\n## Fast Refresh\n\nIn addition to normal HMR, Snowpack also supports **Fast Refresh** for most popular frameworks like React, Preact and Svelte. Fast Refresh is a framework-specific enhancement to HMR, which applies single file updates in a way that preserves component state across updates. Changes to a `` component, for example, would be applied without resetting the component's internal state.\n\nFast Refresh makes development even faster, especially when working on popups and other secondary view states that normally would require a click to re-open or re-visit after every change.\n\n## Enabling HMR + Fast Refresh\n\nSnowpack supports HMR for all popular frontend frameworks. **[Create Snowpack App (CSA)](https://github.com/withastro/snowpack/blob/main/create-snowpack-app) ships with HMR enabled by default.** You can setup HMR yourself with just a few lines of code, and Fast Refresh can be enabled automatically via plugin:\n\n- Preact: [@prefresh/snowpack](https://www.npmjs.com/package/@prefresh/snowpack)\n- React: [@snowpack/plugin-react-refresh](https://www.npmjs.com/package/@snowpack/plugin-react-refresh)\n- Svelte: [@snowpack/plugin-svelte](https://www.npmjs.com/package/@snowpack/plugin-svelte)\n- Vue (HMR only): [A few lines of code](https://github.com/withastro/snowpack/blob/main/create-snowpack-app/app-template-vue/src/index.js#L7-L14)\n\nFor more advanced HMR integrations, Snowpack created the [esm-hmr spec](https://github.com/snowpackjs/esm-hmr), a standard HMR API for any ESM-based dev environment:\n\n```js\n// HMR Code Snippet Example\nif (import.meta.hot) {\n import.meta.hot.accept(({module}) => {\n // Accept the module, apply it into your application.\n });\n}\n```\n\nCheck out the full [ESM-HMR API reference](https://github.com/snowpackjs/esm-hmr) on GitHub.\n" }, { "path": "docs/concepts/how-snowpack-works.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: How Snowpack Works\ndescription: Snowpack serves your application unbundled during development. Each file is built only once and is cached until it changes.\n---\n\n### Summary\n\n**Snowpack is a modern, lightweight build tool for faster web development.** Traditional JavaScript build tools like webpack and Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This rebundling step introduces lag between hitting save on your changes and seeing them reflected in the browser.\n\nSnowpack serves your application **unbundled during development.** Each file needs to be built only once and then is cached forever. When a file changes, Snowpack rebuilds that single file. There's no time wasted re-bundling every change, just instant updates in the browser (made even faster via [Hot-Module Replacement (HMR)](/concepts/hot-module-replacement)). You can read more about this approach in our [Snowpack 2.0 Release Post.](/posts/2020-05-26-snowpack-2-0-release/)\n\nSnowpack's **unbundled development** still supports the same **bundled builds** that you're used to for production. When you go to build your application for production, you can plug in your favorite bundler via an official Snowpack plugin for Webpack or Rollup (coming soon). With Snowpack already handling your build, there's no complex bundler config required.\n\n**Snowpack gets you the best of both worlds:** fast, unbundled development with optimized performance in your bundled production builds.\n\n![webpack vs. snowpack diagram](/img/snowpack-unbundled-example-3.png)\n\n### Unbundled Development\n\n**Unbundled development** is the idea of shipping individual files to the browser during development. Files can still be built with your favorite tools (like Babel, TypeScript, Sass) and then loaded individually in the browser with dependencies thanks to ESM `import` and `export` syntax. Any time you change a file, Snowpack rebuilds only that file.\n\nThe alternative is **bundled development.** Almost every popular JavaScript build tool today focuses on bundled development. Running your entire application through a bundler introduces additional work and complexity to your dev workflow that is unnecessary now that ESM is widely supported. Every change -- on every save -- must be rebundled with the rest of your application before your changes can be reflected in your browser.\n\nUnbundled development has several advantages over the traditional bundled development approach:\n\n- Single-file builds are fast.\n- Single-file builds are deterministic.\n- Single-file builds are easier to debug.\n- Project size doesn’t affect dev speed.\n- Individual files cache better.\n\nThat last point is key: **Every file is built individually and cached indefinitely.** Your dev environment will never build a file more than once and your browser will never download a file twice (until it changes). This is the real power of unbundled development.\n\n### Using NPM Dependencies\n\nNPM packages are mainly published using a module syntax (Common.js, or CJS) that can't run on the web without some build processing. Even if you write your application using browser-native ESM `import` and `export` statements that would all run directly in the browser, trying to import any one npm package will force you back into bundled development.\n\n**Snowpack takes a different approach:** Instead of bundling your entire application for this one requirement, Snowpack processes your dependencies separately. Here's how it works:\n\n```\nnode_modules/react/**/* -> http://localhost:3000/web_modules/react.js\nnode_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js\n```\n\n1. Snowpack scans your website/application for all used npm packages.\n2. Snowpack reads these installed dependencies from your `node_modules` directory.\n3. Snowpack bundles all of your dependencies separately into single JavaScript files. For example: `react` and `react-dom` are converted to `react.js` and `react-dom.js`, respectively.\n4. Each resulting file can be run directly in the browser, and imported via ESM `import` statements.\n5. Because your dependencies rarely change, Snowpack rarely needs to rebuild them.\n\nAfter Snowpack builds your dependencies, any package can be imported and run directly in the browser with zero additional bundling or tooling required. This ability to import npm packages natively in the browser (without a bundler) is the foundation that all unbundled development and the rest of Snowpack is built on top of.\n\n```html\n\n\n \n\n```\n" }, { "path": "docs/guides/babel.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'Babel'\ntags: communityGuide\npublished: true\nimg: '/img/logos/babel.svg'\nimgBackground: '#323330'\ndescription: How to use Babel in your Snowpack project.\n---\n\n[Babel](https://babeljs.io/) is a popular JavaScript transpiler that includes a huge ecosystem of plugins.\n\n**You probably don't need Babel!** Snowpack has built-in support for JSX and TypeScript transpilation. Only use Babel if you need to customize how your JavaScript/TypeScript files are built using custom Babel plugins/presets.\n\n**To use Babel with Snowpack:** add the [@snowpack/plugin-babel](https://www.npmjs.com/package/@snowpack/plugin-babel) plugin to your project.\n\n```diff\n // snowpack.config.mjs\n export default {\n \"plugins\": [\n+ ['@snowpack/plugin-babel'],\n ],\n };\n```\n" }, { "path": "docs/guides/connecting-tools.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: The Snowpack Guide to connecting your favorite tools\ndescription: 'How do you use your favorite tools in Snowpack? This Guide will help you get started'\npublished: true\n---\n\nOne of the most common questions we get is \"How do I connect my favorite tool to Snowpack?\" In this guide we'll go over the three different ways that you can integrate third-party tooling into your Snowpack dev environment or build pipeline:\n\n- Snowpack plugin\n- Integrated CLI script (via `@snowpack/plugin-run-script`)\n- Run separately, outside of Snowpack (ex: in your `package.json`)\n\n## Integrating a Tool With a Snowpack Plugin\n\nThe best way to connect a new tool to Snowpack is to search our [plugin catalog](/plugins) for a relevant plugin. Most likely, someone already created a plugin to help you integrate your favorite tool with ease.\n\nTo add a plugin first install using your package manager, then add the plugin name to the `plugins` section in your Snowpack configuration file. Many plugins have their own totally optional configuration options. These are covered in each plugin's documentation.\n\nFor example, if you'd like to use sass, you can install [`@snowpack/plugin-sass`\n](https://www.npmjs.com/package/@snowpack/plugin-sass) with npm:\n\n```bash\nnpm install @snowpack/plugin-sass\n```\n\nThen if you don't already have a Snowpack configuration file (`snowpack.config.mjs`) you can create one with this command:\n\n```bash\nsnowpack init\n```\n\nOpen up `snowpack.config.mjs` and add the name of your new plugin to the plugins object:\n\n```diff\n // snowpack.config.mjs\n export default {\n plugins: [\n- /* ... */\n+ '@snowpack/plugin-sass',\n ],\n };\n```\n\nWhat about the other optional configuration options? [The `@snowpack/plugin-sass` documentation](https://github.com/withastro/snowpack/tree/main/plugins/plugin-sass) lists all the options and where to put them in the `snowpack.config.mjs` file. If I wanted the `compressed` output `style` I'd turn the `@snowpack/plugin-sass` value into an array with an object containing the configuration:\n\n```diff\n // snowpack.config.mjs\n export default {\n plugins: [\n- '@snowpack/plugin-sass'\n+ ['@snowpack/plugin-sass', { style: 'compressed'}]\n ],\n };\n```\n\nIf there isn't a plugin yet, you might be interested in making one. Check out our [Plugin API](/reference/plugins)\n\n## Connect any other Script/CLI using plugin-run-script and plugin-build-script\n\nIf you can't find a plugin that fits your needs and don't want to write your own, you can also run CLI commands directly as a part of your build using one of our two utility plugins: `@snowpack/plugin-build-script` & `@snowpack/plugin-run-script`.\n\n#### @snowpack/plugin-build-script\n\n```js\n// snowpack.config.mjs\n// [npm install @snowpack/plugin-build-script]\nexport default {\n plugins: [\n [\n '@snowpack/plugin-build-script',\n {\n cmd: 'postcss',\n input: ['.css'],\n output: ['.css'],\n },\n ],\n ],\n};\n```\n\nThis plugin allows you to connect any CLI into your build process. Just give it a `cmd` CLI command that can take input from `stdin` and emit the build result via `stdout`. Check out the [plugin documentation](https://github.com/withastro/snowpack/tree/main/plugins/plugin-build-script) for more information.\n\n#### @snowpack/plugin-run-script\n\n```js\n// snowpack.config.mjs\n// [npm install @snowpack/plugin-run-script]\nexport default {\n plugins: [\n [\n '@snowpack/plugin-run-script',\n {\n cmd: 'eleventy',\n watch: '$1 --watch',\n },\n ],\n ],\n};\n```\n\nThis plugin allows you to run any CLI command as a part of your dev and build workflow. This plugin doesn't affect your build output, but it is useful for connecting developer tooling directly into Snowpack. Use this to add meaningful feedback to your dev console as you type, like TypeScript type-checking and ESLint lint errors. This doesn't affect how Snowpack builds your site. Check out the [plugin documentation](https://github.com/withastro/snowpack/tree/main/plugins/plugin-run-script) for more information.\n\n### Examples\n\n#### PostCSS\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-build-script',\n {\n cmd: 'postcss',\n input: ['.css'],\n output: ['.css'],\n },\n ],\n ],\n};\n```\n\nThe [`postcss-cli`](https://github.com/postcss/postcss-cli) package must be installed manually. You can configure PostCSS with a `postcss.config.js` file in your current working directory.\n\n#### ESLint\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-run-script',\n {\n cmd: 'eslint src --ext .js,.jsx,.ts,.tsx',\n // Optional: Use npm package \"eslint-watch\" to run on every file change\n watch: 'esw -w --clear src --ext .js,.jsx,.ts,.tsx',\n },\n ],\n ],\n};\n```\n" }, { "path": "docs/guides/hmr.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Hot Module Replacement (HMR)\ndescription: Enable Snowpack's Hot Module Replacement (HMR) on your development server.\npublished: false\n---\n\n
\nThis article is a stub, you can help fix it by removing duplicate content from /concepts/hot-module-replacement and writing it in a how-to guide format\n
\n\nHot Module Replacement (HMR) is the ability for Snowpack to push file changes to the browser without triggering a full page refresh. This article is about enabling HMR and connecting to the HMR dev server.\n\nFor instructions on using HMR, refer to the `import.meta.hot` API documentation.\n\n### Is HMR Connected?\n\nYou can tell if HMR is connected by checking your browser dev console. If you see the following message, that means that HMR is enabled and connected.\n\n```\n[ESM-HMR] listening for file changes..\n```\n\n### Enable HMR: Snowpack Dev Server\n\nHMR is enabled by default when you run `snowpack dev`. The Snowpack dev server will add the necessary scripts for your browser, and no configuration is required for most users. You can toggle this support off during development via the [`devOptions.hmr` configuration option](/reference/configuration).\n\n### Enable HMR: Custom Server\n\n_Note: Full HMR is not yet supported. Only full page reloads are currently working. Follow updates here: [https://github.com/withastro/snowpack/issues/1935](https://github.com/withastro/snowpack/issues/1935)_\n\nIf you use your own server (ex: Rails) to serve your application during development, there are a couple of small steps to enable HMR.\n\nHMR is not enabled by default if you are using `snowpack build --watch` for local development (instead of `snowpack dev`). Set `devOptions.hmr: true` in your Snowpack configuration (or, use `--hmr`) to enable HMR support in your application.\n\nWe also recommend that you manually add the Snowpack HMR client to your HTML (development only, not needed in production):\n\n```html\n\n\n```\n\n### Configuring HMR\n\nHMR is powered by a WebSocket connection between the client and Snowpack. If you are having trouble connecting to the client, you may need need to tell it where Snowpack's HMR Websocket server is running.\n\nFirst, make sure that `devOptions.hmr` is set to true. This guarantees that the HMR Websocket is running and ready to accept connections in both `dev` and `build`.\n\nBy default, the client will try to connect to the HMR server at the current host (ex: `localhost`) using one of two ports:\n\n- `snowpack dev`: The same port as the dev server\n- `snowpack build`: port `12321`\n\nYou can control this by setting `devOptions.hmrPort` manually via configuration or setting the following global script variable somewhere on the page **before** the `hmr-client.js` script runs:\n\n```html\n\n\n\n```\n\n### Disable HMR\n\nSet `devOptions.hmr` to false to disable HMR in all cases.\n" }, { "path": "docs/guides/https-ssl-certificates.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: SSL Certificates\ndescription: How to use HTTPs during development and generate SSL certifcates for your Snowpack build.\n---\n\n
\nThis guide has an example repo:\n\n examples/https-ssl-certificates\n\n
\n\n```\nnpm start -- --secure\n```\n\nSnowpack provides an easy way to use a local HTTPS server during development through the use of the `--secure` flag. When enabled, Snowpack will look for a `snowpack.key` and `snowpack.crt` file in the root directory and use that to create an HTTPS server with HTTP2 support enabled. Optionally, you may customize which TLS certificate and private key files by passing them directly to `devOptions.secure`.\n\n```js\nconst fs = require('fs');\n\nconst cert = fs.readFileSync('/path/to/server.crt');\nconst key = fs.readFileSync('/path/to/server.key');\n\nmodule.exports = {\n devOptions: {\n secure: {cert, key},\n },\n};\n```\n\n### Generating SSL Certificates\n\nYou can automatically generate credentials for your project via either:\n\n- [devcert (no install required, but openssl is a prerequisite)](https://github.com/davewasmer/devcert-cli): `npx devcert-cli generate localhost`\n- [mkcert (install required)](https://github.com/FiloSottile/mkcert): `mkcert -install && mkcert -key-file snowpack.key -cert-file snowpack.crt localhost`\n\nIn most situations you should add personally generated certificate files (`snowpack.key` and `snowpack.crt`) to your `.gitignore` file.\n" }, { "path": "docs/guides/jest.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'Jest'\ntags: communityGuide\nimg: '/img/logos/jest.svg'\nimgBackground: '#d14c53'\npublished: true\ndescription: How to use Jest, a popular test runner, with Snowpack.\n---\n\n[Jest](https://jestjs.io/) is a popular Node.js test runner for Node.js & web projects. Jest can be used with any frontend project as long as you configure how Jest should build your frontend files to run on Node.js. Many projects will try to manage this configuration for you, since it can get complicated.\n\nSnowpack ships pre-built Jest configuration files for several popular frameworks. If you need to use Jest for any reason,consider extending one of these packages:\n\n- React: [@snowpack/app-scripts-react](https://www.npmjs.com/package/@snowpack/app-scripts-react)\n- Preact: [@snowpack/app-scripts-preact](https://www.npmjs.com/package/@snowpack/app-scripts-preact)\n- Svelte: [@snowpack/app-scripts-svelte](https://www.npmjs.com/package/@snowpack/app-scripts-svelte)\n\nNote: You will need a `jest.setup.js` file in the root directory of your project.\n\n### Example\n\n```js\n// jest.config.js\n// Example: extending a pre-built Jest configuration file\nmodule.exports = {\n ...require('@snowpack/app-scripts-preact/jest.config.js')(),\n};\n```\n" }, { "path": "docs/guides/optimize-and-bundle.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Optimize & Bundle for Production\npublished: true\ndescription: How to optimize your Snowpack build for production, with or without a bundler.\n---\n\n`snowpack build` builds your site into web native JS, CSS, and HTML files. This \"unbundled\" deployment can be enough for small sites, but many developers prefer to optimize and bundle their final site for production performance.\n\nSnowpack can run all sorts of optimizations on your final build to handle legacy browser support, code minification, code-splitting, tree-shaking, dead code elimination, preloading, bundling, and more.\n\nSnowpack build optimizations come in two flavors: **built-in** (esbuild) & **plugin** (webpack, rollup, or whatever else you might like to run).\n\n### Option 1: Built-in Optimizations\n\nSnowpack recently released a built-in optimization pipeline powered by [esbuild](https://esbuild.github.io/). Using this built-in optimizer, you can now bundle, transpile, and minify your production builds 10x-100x faster than Webpack or Rollup. However, esbuild is still young and [not yet production-ready](https://esbuild.github.io/faq/#production-readiness). At the moment, we only recommended this for smaller projects.\n\n```js\n// snowpack.config.mjs\n// Example: Using Snowpack's built-in bundling support\nexport default {\n optimize: {\n bundle: true,\n minify: true,\n target: 'es2018',\n },\n};\n```\n\nThe full supported interface is:\n\n```ts\nexport interface OptimizeOptions {\n entrypoints: 'auto' | string[] | ((options: {files: string[]}) => string[]);\n preload: boolean;\n bundle: boolean;\n loader?: {[ext: string]: Loader};\n sourcemap: boolean | 'external' | 'inline' | 'both';\n splitting: boolean;\n treeshake: boolean;\n manifest: boolean;\n minify: boolean;\n target: 'es2020' | 'es2019' | 'es2018' | 'es2017';\n}\n```\n\n### Option 2: Optimize Plugins\n\nSnowpack supports popular bundlers via plugin:\n\n- webpack (recommended!): [@snowpack/plugin-webpack](https://www.npmjs.com/package/@snowpack/plugin-webpack)\n- Rollup: [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle)\n\n**For now, we recommend using @snowpack/plugin-webpack until our built-in optimize support is more mature.**\n\nCheck out our [Plugins Catalog](/plugins) to browse all available Snowpack plugins, and read the [Plugins Guide](/guides/plugins) if you're interested in creating your own.\n" }, { "path": "docs/guides/plugins.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Creating Your Own Plugin\ndescription: Learn the basics of our Plugin API through working examples.\n---\n\nA **Snowpack plugin** lets you extend Snowpack with new behaviors. Plugins can hook into different stages of the Snowpack build pipeline to add support for new file types and your favorite dev tools. Add plugins to support Svelte, compile Sass to CSS, convert SVGs to React components, bundle your final build, type check during development, and much more.\n\nThis guide takes you though creating and publishing your first plugin.\n\n- The basic structure of Snowpack plugins\n- How to choose the right hooks from the Snowpack Plugin API\n- How to publish your plugin and add it to our [Plugin](/plugins) directory\n\nPrerequisites: Snowpack plugins are written in JavaScript and run via Node.js so basic knowledge of both is required.\n\n## Creating and testing your first plugin\n\nIn this step you'll create a simple plugin scaffold that you can turn into a fuctional plugin based on the examples in the guide.\n\nCreate a directory for your plugin called `my-snowpack-plugin` and inside it create a `my-snowpack-plugin.js` file:\n\n```js\n// my-snowpack-plugin.js\n// Example: a basic Snowpack plugin file, customize the name of the file and the value of the name in the object\n// snowpackConfig = The Snowpack configuration object\n// pluginOptions = user-provided configuration options\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'my-snowpack-plugin',\n };\n};\n```\n\nTo test your new plugin, run `npm init` to create a basic `package.json` then run `npm link` in your plugin’s directory to expose the plugin globally (on your development machine).\n\nFor testing, [create a new, example Snowpack project](/tutorials/getting-started) in a different directory. In your example Snowpack project, run `npm install && npm link my-snowpack-plugin` (use the name from your plugin’s `package.json`).\n\n> The alternative would be to use `npm install --save-dev path_to_your_plugin`, which would create the \"symlink-like\" entry in your example Snowpack project’s `package.json`\n\nIn your example Snowpack project, add your plugin to the `snowpack.config.mjs` along with any plugin options you’d like to test:\n\n```js\n// snowpack.config.mjs\n// Example: enabling a Snowpack plugin called \"my-snowpack-plugin\"\nexport default {\n plugins: ['my-snowpack-plugin'],\n};\n```\n\n## Testing and Troubleshooting\n\n- TODO: create a full how to test procedure\n- HINT: Add `--verbose` to the command to see the steps, e.g. `snowpack dev --verbose` or `snowpack build --verbose`\n\n## Adding user-configurable options to your plugin\n\nTODO make this a real example\nIn this step, you'll learn how to add user-configurable options to your plugin and to use them in your plugin code.\n\nIn your example Snowpack project, instead of enabling the plugin as a string containing the plugin name, use an array. The first item is name of your plugin and the second a new object containing the plugin options.\n\n```diff\n // snowpack.config.mjs\n export default {\n plugins: [\n- 'my-snowpack-plugin'\n+ ['my-snowpack-plugin', { optionA: 'foo', optionB: true }]\n ]\n };\n```\n\nYou access these through the `pluginOptions`\n\n```diff\n // my-snowpack-plugin.js\n module.exports = function (snowpackConfig, pluginOptions) {\n+ let optionA = pluginOptions.optionA;\n+ let optionB = pluginOptions.optionB;\n return {\n name: 'my-snowpack-plugin',\n };\n };\n```\n\n### Plugin Use-Cases\n\nSnowpack uses an internal **Build Pipeline** to build files in your application for development and production. Every source file passes through the build pipeline, which means that Snowpack can build more than just JavaScript. Images, CSS, SVGs and more can all be built by Snowpack.\n\n#### Build Plugins\n\nSnowpack finds the first plugin that claims to `resolve` the given file. It then calls that plugin's `load()` method to load the file into your application. This is where compiled languages (TypeScript, Sass, JSX, etc.) are loaded and compiled to something that can run on the web (JS, CSS, etc).\n\n#### Transform Plugins\n\nOnce loaded, every file passes through the build pipeline again to run through matching `transform()` methods of all plugins that offer the method. Plugins can transform a file to modify its contents before finishing the file build.\n\n#### Dev Tooling Plugins\n\nSnowpack plugins support a `run()` method which lets you run any CLI tool and connect its output into Snowpack. You can use this to run your favorite dev tools (linters, TypeScript, etc.) with Snowpack and automatically report their output back through the Snowpack developer console. If the command fails, you can optionally fail your production build.\n\n#### Bundler Plugins\n\nSnowpack builds you a runnable, unbundled website by default, but you can optimize this final build with your favorite bundler (webpack, Rollup, Parcel, etc.) through the plugin `optimize()` method. When a bundler plugin is used, Snowpack will run the bundler on your build automatically to optimize it.\n\nSee our official [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack) bundler plugin for an example of using the current interface.\n\n### Example: Getting Started\n\nTo create a Snowpack plugin, you can start with the following file template:\n\n```js\n// my-snowpack-plugin.js\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'my-snowpack-plugin',\n // ...\n };\n};\n```\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n './my-snowpack-plugin.js',\n {\n optionA: 'foo',\n optionB: 'bar',\n },\n ],\n ],\n};\n```\n\nA Snowpack plugin should be distributed as a function that can be called with plugin-specific options to return a plugin object.\nSnowpack will automatically call this function to load your plugin. That function accepts 2 parameters, in this order:\n\n1. the [Snowpack configuration object](/reference/configuration) (`snowpackConfig`)\n1. (optional) user-provided config options (`pluginOptions`)\n\n### Example: Transform a File\n\nFor our first example, we’ll look at transforming a file.\n\n```js\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'my-commenter-plugin',\n async transform({id, contents, isDev, fileExt}) {\n if (fileExt === '.js') {\n return `/* I’m a comment! */ ${contents}`;\n }\n },\n };\n};\n```\n\nThe object returned by this function is a **Snowpack Plugin**. A plugin consists of a `name` property and some hooks into the Snowpack lifecycle to customizes your build pipeline or dev environment. In the example above we have:\n\n- The **name** property: The name of your plugin. This is usually the same as your package name if published to npm.\n- The **transform** method: A function that allows you to transform & modify built files. In this case, we add a simple comment (`/* I’m a comment */`) to the beginning of every JS file in your build.\n\nThis covers the basics of single-file transformations. In our next example, we’ll show how to compile a source file and change the file extension in the process.\n\n### Example: Build From Source\n\nWhen you build files from source, you also have the ability to transform the file type from source code to web code. In this example, we'll use Babel to load several types of files as input and output JavaScript in the final build:\n\n```js\nconst babel = require('@babel/core');\n\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'my-babel-plugin',\n resolve: {\n input: ['.js', '.jsx', '.ts', '.tsx', '.mjs'],\n output: ['.js'],\n },\n async load({filePath}) {\n const result = await babel.transformFileAsync(filePath);\n return result.code;\n },\n };\n};\n```\n\nThis is a simplified version of the official Snowpack Babel plugin, which builds all JavaScript, TypeScript, and JSX files in your application with the `load()` method.\n\nThe `load()` method is responsible for loading and build files from disk while the `resolve` property tells Snowpack which files the plugin can load and what to expect as output. In this case, the plugin claims responsibility for files matching any of the file extensions found in `resolve.input`, and outputs `.js` JavaScript (declared via `resolve.output`). `resolve.output` can also use a multi-part extension such as `.module.css` or `.hbs.js`—files will be matched from most specific extension to least.\n\n**See it in action:** Let's say that we have a source file at `src/components/App.jsx`. Because the `.jsx` file extension matches an extension in our plugin's `resolve.input` array, Snowpack lets this plugin claim responsibility for loading this file. `load()` executes, Babel builds the JSX input file from disk, and JavaScript is returned to the final build.\n\n### Example: Multi-File Building\n\nFor a more complicated example, we’ll take one input file (`.svelte`) and use it to generate 2 output files (`.js` and `.css`).\n\n```js\nconst fs = require('fs').promises;\nconst svelte = require('svelte/compiler');\n\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'my-svelte-plugin',\n resolve: {\n input: ['.svelte'],\n output: ['.js', '.css'],\n },\n async load({filePath}) {\n const fileContents = await fs.readFile(filePath, 'utf-8');\n const {js, css} = svelte.compile(fileContents, {filename: filePath});\n return {\n '.js': js && js.code,\n '.css': css && css.code,\n };\n },\n };\n};\n```\n\nThis is a simplified version of the official Snowpack Svelte plugin. Don't worry if you're not familiar with Svelte, just know that building a Svelte file (`.svelte`) generates both JS & CSS for our final build.\n\nIn that case, the `resolve` property takes only a single `input` file type (`['.svelte']`) but two `output` file types (`['.js', '.css']`). This matches the result of Svelte's build process and the returned entries of our `load()` method.\n\n**See it in action:** Let's say that we have a source file at `src/components/App.svelte`. Because the `.svelte` file extension matches an extension in our plugin's `resolve.input` array, Snowpack lets this plugin claim responsibility for loading this file. `load()` executes, Svelte builds the file from disk, and both JavaScript & CSS are returned to the final build.\n\nNotice that `.svelte` is missing from `resolve.output` and isn't returned by `load()`. Only the files returned by the `load()` method are included in the final build. If you wanted your plugin to keep the original source file in your final build, you could add `{ '.svelte': contents }` to the return object.\n\n### Example: Server-Side Rendering (SSR)\n\nPlugins can produce server-optimized code for SSR via the `load()` plugin hook. The `isSSR` flag tells the plugin that Snowpack is requesting your file for the server, and that it will expect a response that will run on the server.\n\nSome frameworks/languages (like React) run the same code on both the browser and the server. Others (like Svelte) will create different output for the server than the browser. In the example below, we use the `isSSR` flag to tell the Svelte compiler to generate server-optimized code when requested by Snowpack.\n\n```js\nconst svelte = require('svelte/compiler');\nconst fs = require('fs');\n\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'basic-svelte-plugin',\n resolve: {\n input: ['.svelte'],\n output: ['.js', '.css'],\n },\n async load({filePath, isSSR}) {\n const svelteOptions = {\n /* ... */\n };\n const codeToCompile = fs.readFileSync(filePath, 'utf-8');\n const result = svelte.compile(codeToCompile, {\n ...svelteOptions,\n ssr: isSSR,\n });\n // ...\n },\n };\n};\n```\n\nIf you're not sure if your plugin needs special SSR support, you are probably fine to skip this and ignore the `isSSR` flag in your plugin. Many languages won't need this, and SSR is always an intentional opt-in by the user.\n\n### Example: Optimizing & Bundling\n\nSnowpack supports pluggable bundlers and other build optimizations via the `optimize()` hook. This method runs after the build and gives plugins a chance to optimize the final build directory. Webpack, Rollup, and other build-only optimizations should use this hook.\n\n```js\nmodule.exports = function(snowpackConfig, pluginOptions) {\n return {\n name: 'my-custom-webpack-plugin',\n async optimize({ buildDirectory }) {\n await webpack.run({...});\n }\n };\n};\n```\n\nThis is an (obviously) simplified version of the `@snowpack/plugin-webpack` plugin. When the build command has finished building your application, this plugin hook is called with the `buildDirectory` path as an argument. It's up to the plugin to read build files from this directory and write any changes back to the directory. Changes should be made in place, so write files only at the end and be sure to clean up after yourself (if a file is no longer needed after optimizing/bundling, it is safe to remove).\n\n### Testing\n\nTo develop and test a Snowpack plugin, the strategy is the same as with other npm packages:\n\n- Create your new plugin project (either with `npm init` or `yarn init`) with, for example, npm name: `my-snowpack-plugin` and paste in it the above-mentioned code snipped\n- Run `npm link` in your plugin’s project folder to expose the plugin globally (in regard to your development machine).\n- Create a new, example Snowpack project in a different location for testing\n- In your example Snowpack project, run `npm install && npm link my-snowpack-plugin` (use the name from your plugin’s `package.json`).\n - Be aware that `npm install` will remove your linked plugin, so on any install, you will need to redo the `npm link my-snowpack-plugin`.\n - (The alternative would be to use `npm install --save-dev <folder_to_your_plugin_project>`, which would create the \"symlink-like\" entry in your example Snowpack project’s `package.json`)\n\nIn your example Snowpack project, add your plugin to the `snowpack.config.mjs` along with any plugin options you’d like to test:\n\n```js\nexport default {\n plugins: [\n [\n 'my-snowpack-plugin',\n {\n 'option-1': 'testing',\n 'another-option': false,\n },\n ],\n ],\n};\n```\n\n### Publishing a Plugin\n\nTo share a plugin with the world, you can publish it to npm. For example, take a look at [snowpack-plugin-starter-template](https://github.com/withastro/snowpack-plugin-starter-template) which can get you up-and-running quickly. You can either copy this outright or simply take what you need.\n\nIn general, make sure to mind the following checklist:\n\n- ✔️ Your `package.json` file has a `main` entry pointing to the final build\n- ✔️ Your code is compiled to run on Node >= 10\n- ✔️ Your package README contains a list of custom options, if your plugin is configurable\n\n### Tips / Gotchas\n\n- Remember: A source file will always be loaded by the first `load()` plugin to claim it, but the build result will be run through every `transform` function.\n- Snowpack will always keep the original file name (`App`) and only ever change the extension in the build.\n- Extensions in Snowpack always have a leading `.` character (e.g. `.js`, `.ts`). This is to match Node’s `path.extname()` behavior, as well as make sure we’re not matching extension substrings (e.g. if we matched `js` at the end of a file, we also don’t want to match `.mjs` files by accident; we want to be explicit there).\n- The `resolve.input` and `resolve.output` file extension arrays are vital to how Snowpack understands your build pipeline, and are always required for `load()` to run correctly.\n- If `load()` doesn't return anything, the file isn’t loaded and the `load()` of the next suitable plugin is called.\n- If `transform()` doesn't return anything, the file isn’t transformed.\n- If you want to build a plugin that runs some code only on initialization (such as `@snowpack/plugin-dotenv`), put your side-effect code inside the function that returns your plugin. But be sure to still return a plugin object. A simple `{ name }` object will do.\n" }, { "path": "docs/guides/postcss.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'PostCSS'\ntags: communityGuide\npublished: true\nimg: '/img/logos/postcss.svg'\nimgBackground: '#f8f8f2'\ndescription: How to use PostCSS in your Snowpack project.\n---\n\n[PostCSS](https://postcss.org/) is a popular CSS transpiler with support for [a huge ecosystem of plugins.](https://github.com/postcss/postcss#plugins)\n\n**To use PostCSS with Snowpack:** Install [@snowpack/plugin-postcss](https://www.npmjs.com/package/@snowpack/plugin-postcss), [PostCSS](https://www.npmjs.com/package/postcss), and your PostCSS plugins, then add this plugin to your Snowpack config.\n\n```diff\n// snowpack.config.mjs\nexport default {\n+ plugins: ['@snowpack/plugin-postcss'],\n};\n```\n\nLastly, add a `postcss.config.js` file. By default, @snowpack/plugin-postcss looks for this in the root directory of your project, but you can customize this with the `config` option. See [the plugin README](https://www.npmjs.com/package/@snowpack/plugin-postcss) for all available options.\n\n```js\n// postcss.config.js\nmodule.exports = {\n plugins: [\n // Replace below with your plugins\n require('cssnano'),\n require('postcss-preset-env'),\n ],\n};\n```\n\nBe aware that this plugin will run on all CSS in your project, including any files that compiled to CSS (like `.scss` Sass files).\n" }, { "path": "docs/guides/preact.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Preact\ntags: communityGuide\nimg: '/img/logos/preact.svg'\nimgBackground: '#333333'\ndescription: With Snowpack you can import and use Preact without any custom configuration needed.\n---\n\nYou can import and use Preact without any custom configuration needed.\n\n**To use `preact/compat`:** (the Preact+React compatability layer) alias the \"compat\" package to React in your install options:\n\n```js\n// Example: Lets you import \"react\" in your application, but uses preact internally\n// snowpack.config.mjs\nexport default {\n alias: {\n react: 'preact/compat',\n 'react-dom': 'preact/compat',\n },\n};\n```\n" }, { "path": "docs/guides/react-global-imports.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: React + babel-plugin-import-global\npublished: false\n---\n\n
\n This guide has an example repo:\n examples/react-global-imports\n
\n\n_Based on [app-template-react][app-template-react]_\n\nExample of using Snowpack in conjuction with [babel-plugin-import-global][babel-plugin-import-global]. This is useful when you need to need to inject an import statement at the top of every file, such as React:\n\n```jsx\n// \"import React from 'react'\" no longer needed!\nfunction MyComponent() {\n // …\n}\n\nexport default MyComponent;\n```\n\nTo recreate this setup, follow 2 steps:\n\n1. Create a [babel.config.js](./babel.config.js) file in the root of the project. Copy the settings shown.\n2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.mjs](./snowpack.config.js)\n\n### ⚠️ Caveat\n\nWhen you use [@snowpack/plugin-babel][snowpack-babel], you miss out on the faster builds that come from Snowpack‘s default JS builder, [esbuild][esbuild] (we don‘t run both together to avoid conflict). However, if you skip Babel, you will have to manually place `import` statements yourself at the top of every file.\n\nWe‘d recommend being explicit and manually managing every `import` statement yourself. You can simplify your setup, speed up your builds, and you might see benefits from being explicit. In order to do this, simply use our [React starter template][app-template-react]. No setup required.\n\nBut if you‘ve weighed the tradeoffs and decide that a slower build is worth it to get global import functionality, then start from the example here.\n\n[app-template-react]: https://github.com/withastro/snowpack/create-snowpack-app/app-template-react\n[babel-plugin-import-global]: https://www.npmjs.com/package/babel-plugin-import-global\n[esbuild]: https://esbuild.github.io/\n[snowpack-babel]: https://github.com/withastro/snowpack/plugins/plugin-babel\n" }, { "path": "docs/guides/react-loadable-components.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: React + Loadable Components\npublished: false\n---\n\n
\n This guide has an example repo:\n examples/react-loadable-components\n
\n\n_Based on [app-template-react][app-template-react]_\n\nYou can lazy load React components in Snowpack when needed with React‘s builtin `React.lazy` ([docs][react-lazy]):\n\n```jsx\nimport React, {useState, useEffect, Suspense} from 'react';\n\nconst Async = React.lazy(() => import('./Async'));\n\nfunction Component() {\n return (\n
\n Loading...
}>\n \n \n \n );\n}\n```\n\nThis works out-of-the-box in Snowpack, with no configuration needed!\n\n### Learn more\n\n- [`React.lazy` documentation on reactjs.org][react-lazy]\n\n[react-lazy]: https://reactjs.org/docs/code-splitting.html#reactlazy\n" }, { "path": "docs/guides/routing.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Routing\npublished: true\ndescription: This guide will walk you through some common routing scenarios and how to configure the routes option to support them in development.\n---\n\nAs a web build tool, Snowpack has no knowledge of how (or where) your application is served in production. But Snowpack's dev server can be customized to recreate something close to your production environment for local development.\n\nThis guide will walk you through some common routing scenarios and how to configure the `routes` option to support them in development.\n\n### Scenario 1: SPA Fallback Paths\n\nSingle Page Applications (SPA) give the client application complete control over routing logic. The web host itself has no idea what is a valid route and what is a 404, since that logic lives completely in the client. Therefore, every route (valid or not) must be served the same HTML response that will load and run the HTML/JS/CSS application in the browser. This special file is called the \"SPA Fallback\".\n\nTo implement this pattern, you'll want to define a single \"catch-all\" route for development:\n\n```js\n// snowpack.config.mjs\nexport default {\n routes: [\n {\n match: 'routes',\n src: '.*',\n dest: '/index.html',\n },\n ],\n};\n```\n\nThis tells Snowpack's dev server to serve the fallback `/index.html` URL for all routes (`.*` in RegEx means \"match everything\").\n\n`\"match\": \"routes\"` refers to all URLs that either do not include a file extension or that include the \".html\" file extension. If you changed the above example to `\"match\": \"all\"` instead, then all URLs (including JS, CSS, Image files and more) would respond with the fallback HTML file.\n\n### Scenario 2: Proxy API Paths\n\nMany modern frontend applications will talk directly to an API. Often this API is hosted as a seperate application at another domain (ex: `api.example.com/users`) and no special server configuration is needed to talk with it. However in some cases, your API may be hosted at the same domain as your website using a different path scheme (ex: `www.example.com/api/users`).\n\nTo serve the correct API response to a URL like `/api/users` in development, you can configure Snowpack to proxy some requests to another server. In this example, we'll proxy all \"/api/\\*\" requests to another server that we have running locally on port `3001`:\n\n```js\n// snowpack.config.mjs\nimport proxy from 'http2-proxy';\n\nexport default {\n routes: [\n {\n src: '/api/.*',\n dest: (req, res) => {\n // remove /api prefix (optional)\n req.url = req.url.replace(/^\\/api\\//, '/');\n\n return proxy.web(req, res, {\n hostname: 'localhost',\n port: 3001,\n });\n },\n },\n ],\n};\n```\n\nWe recommend the [http2-proxy](https://www.npmjs.com/package/http2-proxy) library for proxying requests to another server, which supports a wide range of options to customize how each request is proxied. But feel free to implement the `dest` proxy function however you like. Your own server logic could even be called directly inside of the `dest` function, however this is not recommended over proxying.\n\n### Scenario 3: Proxy WebSocket Requests\n\nProxied requests can be upgraded to a WebSocket connection via the \"upgrade\" event handler. This allows you to proxy WebSocket requests through the Snowpack dev server during development. You can learn more about the upgrade mechanism on [MDN Web Docs.](https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism#upgrading_to_a_websocket_connection).\n\n```js\n// snowpack.config.mjs\nimport proxy = from 'http2-proxy';\n\nexport default {\n routes: [\n {\n src: '/ws',\n upgrade: (req, socket, head) => {\n const defaultWSHandler = (err, req, socket, head) => {\n if (err) {\n console.error('proxy error', err);\n socket.destroy();\n }\n };\n\n proxy.ws(\n req,\n socket,\n head,\n {\n hostname: 'localhost',\n port: 3001,\n },\n defaultWSHandler,\n );\n },\n },\n ],\n};\n```\n\n### Scenario 4: Custom Server Rendering\n\nIf you only use Snowpack to build assets and rely on your own custom server (ex: Rails, Laravel, etc) for serving HTML, then you probably have no use for routing. Consider reading our guide on [Server-Side Rendering (SSR)](/guides/server-side-render) which explains how to integrate Snowpack into your own server as middleware.\n" }, { "path": "docs/guides/sass.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'Sass'\ntags: communityGuide\npublished: true\nimg: '/img/logos/sass.svg'\nimgBackground: '#bf4080'\ndescription: How to use SASS with Snowpack using the Snowpack SASS plugin\n---\n\n[Sass](https://www.sass-lang.com/) is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.\n\nTo use Sass with Snowpack, install [@snowpack/plugin-sass](https://www.npmjs.com/package/@snowpack/plugin-sass) (Sass automatically included) and add it to your `snowpack.config.mjs` file. See README on npm or [GitHub](https://github.com/withastro/snowpack/tree/main/plugins/plugin-sass#plugin-options) for plugin options.\n\n```diff\n // snowpack.config.mjs\n export default {\n plugins: [\n+ '@snowpack/plugin-sass',\n ],\n };\n```\n" }, { "path": "docs/guides/server-side-render.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Server-Side Rendering (SSR)\ndescription: This guide will walk you through three different options for setting up Snowpack with your own custom server.\npublished: true\n---\n\nServer-side rendering (SSR) can refer to several similar developer stories:\n\n- Using Snowpack with a server web framework like Rails or Express\n- Using Snowpack to power a server-side frontend framework kit like Next.js or SvelteKit\n- Any project configuration where your HTML is generated at runtime, outside of your static build.\n\nThis guide will walk you through three options for setting up Snowpack with your own custom server:\n\n1. `snowpack build --watch` - Serve files out of the static build directory.\n2. `startServer({ ... })` - Serve files on-demand via Snowpack's JavaScript API.\n3. `getServerRuntime({ ... })` - Run your built JS files server-side, directly inside of Node.js.\n\n### Option 1: Static Serving\n\nServing built files directly out of Snowpack's `build/` directory is the easiest way to get started with Snowpack. Run `snowpack build` to build your site to a static directory, and then make sure that your HTML server response includes the appropriate `script` & `link` tags to load your Snowpack-built JavaScript and CSS:\n\n```html\n\n\n```\n\nDuring development, Snowpack will rebuild files on every change thanks to the `--watch` command. To enable dev features like automatic page reloads and hot module replacement (HMR), check out the [\"Custom Server\" section](/guides/hmr#enable-hmr%3A-custom-server) of our HMR guide for more info.\n\nThis setup also has the benefit of pulling from the same `build/` directory in both development and production. You can control this `build/` output behavior yourself by passing different `--out` CLI flags to Snowpack for development vs production. You can even pass entirely different config files via the `--config` CLI flag, or put custom logic in your `snowpack.config.mjs` file to behave differently for different builds.\n\nThe downside of this static approach is that you need to wait for Snowpack to build the entire `build/` directory on startup before your site will run. This is something that all other build tools (like Webpack) have to deal with, but Snowpack has the ability to build files only when they are requested by the browser, leading to ~0ms startup wait time.\n\n### Option 2: On Demand Serving (Middleware)\n\nThe best developer experience is achieved by loading files on-demand. This removes any need for work on startup, giving you a faster developer environment no matter how large your project grows.\n\n```js\nconst {startServer} = require('snowpack');\nconst server = await startServer({ ... });\n\n// Example: Express\n// On request, build each file on request and respond with its built contents\napp.use((req, res, next) => {\n try {\n const buildResult = await server.loadUrl(req.url);\n res.send(buildResult.contents);\n } catch (err) {\n next(err);\n }\n});\n```\n\nNote that you'll still need to set up static file serving out of the `build/` directory for production deployments. For that reason, this can be seen as an enhancement over the static setup in Option 1 for faster development speeds.\n\nWhile our official API is written in JavaScript and requires Node.js to run, you could implement your own API for any language/environment using the `snowpack dev` CLI command to start the server and loading assets directly by fetching each URL.\n\n### Option 3: Server-Side Rendering (SSR)\n\nSome frontend applications are also designed to run on the server. In the two previous sections, we've just been loading and serving Snowpack files to the client. In this final section, we'll look into how your project can run Snowpack-built JavaScript on the server and return server-rendered HTML to the client for a faster first page load.\n\nSnowpack provides an Node.js SSR Runtime API to help you run & render your application server-side. `getServerRuntime()` returns a `runtime` instance that can be used to import Snowpack-built modules into your current Node.js process, on-demand. This runtime handles the transformation from browser ESM to Node.js Common.js (CJS) so that it can run directly in server without issues.\n\n```js\nconst {readFileSync} = require('fs');\nconst {startServer} = require('snowpack');\nconst server = await startServer({ ... });\nconst runtime = server.getServerRuntime();\n\n// Advanced Example: Express + React SSR\napp.use(async (req, res, next) => {\n // Server-side import our React component\n const importedComponent = await runtime.importModule('/dist/MyReactComponent.js');\n const MyReactComponent = importedComponent.exports.default;\n // Render your react component to HTML\n const html = ReactDOMServer.renderToString(React.createElement(MyReactComponent, null));\n // Load contents of index.html\n const htmlFile = readFileSync('./index.html', 'utf8');\n // Inserts the rendered React HTML into our main div\n const document = htmlFile.replace(/
<\\/div>/, `
${html}
`);\n // Sends the response back to the client\n res.send(document);\n});\n```\n\n`getServerRuntime()` is a lower-level tool to help you implement SSR in your project. However, building a custom SSR setup is an advanced task. If you prefer not to implement this yourself, check out some of the new Snowpack-powered application frameworks and static site generators like [SvelteKit](https://svelte.dev/blog/whats-the-deal-with-sveltekit) and [Microsite](https://www.npmjs.com/package/microsite).\n" }, { "path": "docs/guides/streaming-imports.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Streaming Imports\npublished: true\nstream: Fetch your npm dependencies on-demand from a remote ESM CDN.\n---\n\nSnowpack v3.0 introduces a new feature called **Streaming Imports** that fetches imported packages on-demand during development and building. By managing your frontend dependencies with Snowpack, you can leave `npm` for your tooling-only packages or even drop your dependency on `npm`/`yarn`/`pnpm` all together.\n\n## Enable Streaming Imports\n\n```js\n// snowpack.config.mjs\nexport default {\n packageOptions: {\n source: 'remote',\n },\n};\n```\n\nSet `packageOptions.source` to \"remote\" to enable streaming imports. This tells Snowpack to fetch your imports from the Skypack CDN instead of bundling them locally. Read our [full documentation on `packageOptions`](/reference/configuration#packageoptions.source%3Dremote) to learn more about customizing this behavior.\n\n## How Streaming Imports Work\n\nWhen you enable streaming imports and run `snowpack dev`, the local server will start fetching all imports from `https://pkg.snowpack.dev`. For example, `import \"preact\"` in your project will become something like `import \"https://pkg.snowpack.dev/preact\"` in the browser. This tells Snowpack (or the browser) to import your package by URL, and only fetch the package ESM when needed. Snowpack is able to cache the response for future, offline use.\n\nThe translation is done by the web server, so your source file will still contain the bare `import \"preact\"` statement. When you run `snowpack build`, the generated files in the build folder will contain `import '../_snowpack/pkg/preact.js';`.\n\n`pkg.snowpack.dev` is our ESM Package CDN, powered by [Skypack](https://www.skypack.dev/). Every npm package is hosted as ESM, and any legacy non-ESM packages are upconverted to ESM on the CDN itself.\n\n> _**Note:** In some rare cases, a nested import from a package will result in an invalid resource reference on Skypack. Explicitly setting the `packageOptions.origin` to `\"https://cdn.skypack.dev\"` (rather than using the default `pkg.snowpack.dev` shim) seems to resolve the issue._\n\n## Benefits of Streaming Imports\n\nStreaming dependencies have several benefits over the traditional \"npm install + local bundling\" approach:\n\n- **Speed:** Skip the install + build steps for dependencies, and load your dependencies as pre-build ESM code directly from an ESM CDN like [Skypack](https://www.skypack.dev/). Dependencies are cached locally for offline reuse.\n- **Safety:** ESM packages are pre-built and never given access to [run code on your machine](https://www.usenix.org/system/files/sec19-zimmermann.pdf). Packages only run in the browser sandbox.\n- **Simplicity:** ESM packages are managed by Snowpack, so frontend projects that don't need Node.js (Rails, PHP, etc.) can drop the `npm` CLI entirely if they choose.\n- **No Impact on Final Build:** Streaming imports are still transpiled and bundled with the rest of your final build, and tree-shaken to your exact imports. The end result is a final build that's nearly identical to what it would have been otherwise.\n\n## Snowpack-Managed Dependencies\n\nBy default, Snowpack fetches the latest version of every package available. Breaking changes are possible over time without a way to manage your dependencies by version.\n\nSnowpack uses a `snowpack.deps.json` in your project to manage your dependency versions. If you're familiar with `npm install`, your `snowpack.deps.json` file is like a combined `package.json` and `package-lock.json`.\n\nTwo commands are available to work with this file: `snowpack add` and `snowpack rm`.\n\nRunning `snowpack add [package-name]` for the first time will create a new `snowpack.deps.json` file in your project to store information about your new dependency, like desired SemVer version range and lockfile information.\n\n## Using Streaming Imports with TypeScript\n\n```js\n// snowpack.config.mjs /w TypeScript Support\nexport default {\n packageOptions: {\n source: 'remote',\n types: true,\n },\n};\n```\n\nSetting `types=true` tells Snowpack to install TypeScript types in your project. Snowpack will install those types into a local `.snowpack/types` directory in your project, which you can then point to in your project `tsconfig.json` to get automatic types for your npm packages:\n\n```js\n// Example: tsconfig.json /w Snowpack streaming imports\n\"baseUrl\": \"./\",\n\"paths\": {\"*\": [\".snowpack/types/*\"]},\n```\n\nWhen you start your project (with either `snowpack dev` or `snowpack build`) Snowpack will sync this `.snowpack/types` directory and download any new types that you might need. You can also trigger a sync anytime manually via `snowpack prepare`.\n\n## Using Streaming Imports with Non-JS Packages (Svelte, Vue, etc.)\n\nSkypack (the CDN that powers `pkg.snowpack.dev`) will always prefer a package JavaScript entrypoint over any source `.svelte` and `.vue` files. This works for most packages (including most Svelte & Vue packages) but may cause trouble in some projects. In a future release, we'll add better support to build these kinds of packages locally.\n\n## What do I do if a package isn't supported / working?\n\nSkypack (the CDN that powers `pkg.snowpack.dev`) is always improving, and its goal is to support all packages. If you find a package that doesn't work, report it to [Skypack's issue tracker](https://github.com/snowpackjs/skypack-cdn/issues) on GitHub. Many of Snowpack's core contributors also work on Skypack, and will be happy to take a look at the broken package.\n\nIn a future release, we'll add better support to replace broken packages locally.\n" }, { "path": "docs/guides/tailwind-css.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'Tailwind CSS'\ntags: communityGuide\npublished: true\nimg: '/img/logos/tailwind.svg'\nimgBackground: '#f2f8f8'\ndescription: How to use Tailwind CSS with Snowpack.\n---\n\n[Tailwind](https://tailwindcss.com) is a popular class-based CSS utility library. Loading it in Snowpack is easy, and only requires a few steps!\n\n## Setup\n\nTailwind’s [JIT mode][tailwind-jit] is the new, recommended way to use Tailwind. To set this up in a Snowpack project, do the following:\n\n#### 1. Install dependencies\n\nFrom the root of your project, install tailwindcss, PostCSS, and the Snowpack PostCSS plugin.\n\n```\nnpm install --save-dev tailwindcss @snowpack/plugin-postcss postcss\n```\n\n#### 2. Configure\n\nYou’ll need to create two files in the root of your project: `postcss.config.js` and `tailwind.config.js`:\n\n```js\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n // other plugins can go here, such as autoprefixer\n },\n};\n```\n\n```js\n// tailwind.config.js\nmodule.exports = {\n mode: 'jit',\n purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],\n // specify other options here\n};\n```\n\n_Note: be sure to set `purge: []` correctly for your project structure_\n\nAlso, you’ll need to add the Snowpack PostCSS plugin to your Snowpack config, and set the [Tailwind config option][config-tailwind], if you haven‘t already:\n\n```diff\n // snowpack.config.mjs\n export default {\n mount: {\n src: '/_dist',\n public: '/',\n },\n+ devOptions: {\n+ tailwindConfig: './tailwind.config.js',\n+ },\n+ plugins: [\n+ '@snowpack/plugin-postcss',\n+ ],\n };\n```\n\n#### 3. Import Tailwind in your CSS\n\nFrom any global CSS file, add the [Tailwind utilites][tailwind-utilities] you need (if you don’t have a global CSS file, we recommend creating one at `/public/global.css`):\n\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nWhen you load these with Snowpack, you should see these replaced with Tailwind CSS instead.\n\n⚠️ Make sure you’re importing this file in your main HTML file, like so:\n\n```diff\n \n+ \n \n```\n\n## More reading\n\n- [Official Tailwind Documentation][tailwind-postcss]\n- [PostCSS + Snowpack][snowpack-postcss]\n\n[config-tailwind]: https://snowpack.dev/reference/configuration#devoptions.tailwindConfig\n[snowpack-postcss]: /guides/postcss/\n[tailwind-jit]: https://tailwindcss.com/docs/just-in-time-mode\n[tailwind-postcss]: https://tailwindcss.com/docs/installation/#using-tailwind-with-postcss\n[tailwind-utilities]: https://tailwindcss.com/docs/adding-new-utilities#using-css\n" }, { "path": "docs/guides/testing.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Testing\npublished: true\ndescription: How to choose and use a JavaScript test runner for your Snowpack site.\n---\n\nSnowpack supports all of the popular JavaScript testing frameworks that you're already familiar with. Mocha, Jest, Jasmine, AVA and Cypress are all supported in Snowpack applications, if integrated correctly.\n\n**We currently recommend [@web/test-runner](https://www.npmjs.com/package/@web/test-runner) (WTR) for testing in Snowpack projects.** When benchmarked, it performed faster than Jest (our previous recommendation) while also providing an environment for testing that more closely matches production. Most importantly, WTR runs the same Snowpack build pipeline that you've already configured for your project, so there's no second build configuration needed to run your tests. This improves test confidence while removing 100s of extra build dependencies to your project.\n\n### Testing Guides\n\n- [@web/test-runner](/guides/web-test-runner) (Recommended)\n- [jest](/guides/jest)\n" }, { "path": "docs/guides/upgrade-guide.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Snowpack Upgrade Guide\npublished: true\ndescription: How to upgrade to Snowpack v3 from older versions of Snowpack.\n---\n\nSnowpack v3.0 was released on January 12th with several new features and some breaking changes. This guide is designed to help you upgrade a project from older versions of Snowpack v1 or v2.\n\n## Upgrading from Snowpack v3 Release Candidate\n\nOur v3.0 Release Candidate was meant to be a close-to-final release, but some major changes still got in between then and the v3.0 final release. Snowpack will warn when any outdated APIs are used, and guide you through the upgrade process.\n\nIn the future, Snowpack Release Candidates will be much closer to final API.\n\n## Upgrading from Snowpack v2\n\nSnowpack v3.0 was mainly designed around new features, and therefore didn't have many major breaking changes introduced. However, there are some changes to be aware of:\n\n- **Config name changes:** There was some cleanup of legacy behavior and renaming of old configuration values. Snowpack will warn you of all known name changes when run Snowpack v3.0 for the first time, with instructions to help you upgrade.\n- **package.json \"homepage\" no longer sets \"baseUrl\":** This was a behavior of Create React App that we'd originally tried to match. However, it became confusing to explain to users. In Snowpack v3.0, set \"buildOptions.baseUrl\" directly.\n- **Improved support for relative paths in configuration:** All relative paths in configuration files are now relative to the configuration file itself. Previously, all relative config paths were resolved based on the current working directory of wherever you ran Snowpack, which meant that behavior of the config file changed depending on where you ran it. You can also now set the project `\"root\"`/`--root` directory, which is useful if you run Snowpack from a different directory than the project iself (ex: in monorepos).\n- **More clear build file naming:** Snowpack v3.0 introduced some cleanup around build file names that you may see when you upgrade projects. The biggest change is to files like `.svelte` and `.vue`, which now have their JS & CSS built to `.svelte.js` and `.svelte.css` respectively. This change shouldn't be noticable to most, but it is good to know.\n- **More clear handling of absolute import URLs:** In Snowpack, it's now possible to import something by its final URL using an absolute URL. `import \"/dist/index.js\"`, for example, will now import whatever file is built to `/dist/index.js`. Previously, this behavior was undefined. Relative URLs can still be used to import files relative to the source file itself.\n\n## Upgrading from Snowpack v1\n\nSnowpack v1 only supported installing npm packages as ESM, and had a more limited scope than Snowpack does today. If you are coming from Snowpack v1.0, you may be able to use our internal package installer library [esinstall](https://www.npmjs.com/package/esinstall) directly. `esinstall` is a JavaScript library that implements most of what Snowpack v1.0 gave you via the command-line.\n\n`snowpack build` builds your site into web native JS, CSS, and HTML files. This \"unbundled\" deployment can be enough for small sites, but many developers prefer to optimize and bundle their final site for production performance.\n\nSnowpack can run all sorts of optimizations on your final build to handle legacy browser support, code minification, code-splitting, tree-shaking, dead code elimination, preloading, bundling, and more.\n\nSnowpack build optimizations come in two flavors: **built-in** (esbuild) & **plugin** (webpack, rollup, or whatever else you might like to run).\n\n### Option 1: Built-in Optimizations\n\nSnowpack recently released a built-in optimization pipeline powered by [esbuild](https://esbuild.github.io/). Using this built-in optimizer, you can now bundle, transpile, and minify your production builds 10x-100x faster than Webpack or Rollup. However, esbuild is still young and [not yet production-ready](https://esbuild.github.io/faq/#production-readiness). At the moment, we only recommended this for smaller projects.\n\n```js\n// snowpack.config.mjs\n// Example: Using Snowpack's built-in bundling support\nexport default {\n optimize: {\n bundle: true,\n minify: true,\n target: 'es2018',\n },\n};\n```\n\nThe full supported interface is:\n\n```ts\nexport interface OptimizeOptions {\n entrypoints: 'auto' | string[] | ((options: {files: string[]}) => string[]);\n preload: boolean;\n bundle: boolean;\n loader?: {[ext: string]: Loader};\n sourcemap: boolean | 'external' | 'inline' | 'both';\n splitting: boolean;\n treeshake: boolean;\n manifest: boolean;\n minify: boolean;\n target: 'es2020' | 'es2019' | 'es2018' | 'es2017';\n}\n```\n\n### Option 2: Optimize Plugins\n\nSnowpack supports popular bundlers via plugin:\n\n- webpack (recommended!): [@snowpack/plugin-webpack](https://www.npmjs.com/package/@snowpack/plugin-webpack)\n- Rollup: [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle)\n\n**For now, we recommend using @snowpack/plugin-webpack until our built-in optimize support is more mature.**\n\nCheck out our [Plugins Catalog](/plugins) to browse all available Snowpack plugins, and read the [Plugins Guide](/guides/plugins) if you're interested in creating your own.\n" }, { "path": "docs/guides/wasm.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'WASM'\ntags: communityGuide\npublished: true\nimg: '/img/logos/wasm.svg'\nimgBackground: '#f2f2f8'\ndescription: How to use WASM in your Snowpack project.\n---\n\n[WASM (short for WebAssembly)](https://webassembly.org/) is a portable compilation target for programming languages, enabling deployment on the web for client and server applications.\n\n**To use WASM with Snowpack:** Use the browser's native [`WebAssembly`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) & [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) APIs to load a WASM file into your application:\n\n```js\n// Example: Load WASM in your project\nconst wasm = await WebAssembly.instantiateStreaming(\n fetch('/example.wasm'),\n /* { ... } */\n);\n```\n\nIn the future, we may add `import \"/example.wasm\"` ESM import support to automate this support for you. However, today WASM import support differs from bundler-to-bundler.\n\nIn any case, WASM import support would just be a shortcut or wrapper around the code snippet above. You can recreate this helper today in your own project:\n\n```js\n// Example: WASM Loader (move this into some utility/helper file for reuse)\nexport function loadWasm(url, importObject = {module: {}, env: {abort() {}}}) => {\n const result = await WebAssembly.instantiateStreaming(fetch(url), importObject);\n return result.instance; // or, return result;\n}\n\nconst wasm = await loadWasm('/example.wasm');\n```\n" }, { "path": "docs/guides/web-test-runner.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: '@web/test-runner'\ntags: communityGuide\nimg: '/img/logos/modern-web.svg'\nimgBackground: '#f2f2f8'\ndescription: How to use @web/test-runner in your Snowpack project.\n---\n\n[@web/test-runner](https://www.npmjs.com/package/@web/test-runner) is our recommended test runner for Snowpack projects. Read more about why we recommend @web/test-runner in our [Snowpack Testing Guide](/guides/testing).\n\n## Setup\n\nThis guide shows how to set up @web/test-runner and [@snowpack/web-test-runner-plugin](https://www.npmjs.com/package/@snowpack/web-test-runner-plugin) for a React project. The end result recreates the test configuration in [app-template-react](https://github.com/withastro/snowpack/blob/main/create-snowpack-app/app-template-react), one of our Create Snowpack App starter templates. If you're using a different framework, tweak React specific steps appropriately.\n\n#### 1. Install dependencies\n\nThe base testing dependencies (don't hit Enter just yet!):\n\n```\nnpm install --save-dev @web/test-runner @snowpack/web-test-runner-plugin chai\n```\n\nIf using React, Vue, Svelte, or Preact, add the corresponding [Testing Library](https://testing-library.com/) (in this case `@testing-library/react`).\n\nIf using TypeScript, add `@types/mocha` and `@types/chai`.\n\n#### 2. Configure\n\nCreate a new `web-test-runner.config.js` file in your project root:\n\n```js\nprocess.env.NODE_ENV = 'test';\n\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n```\n\n⚠️ Don't add @snowpack/web-test-runner-plugin to plugins in your `snowpack.config.mjs` file! It only needs to be in `web-test-runner.config.js`. If you need to specify test options, use [testOptions](https://www.snowpack.dev/reference/configuration#testoptions).\n\n#### 3. Script\n\nAdd a `test` script to your project `package.json`:\n\n```diff\n\"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\",\n+ \"test\": \"web-test-runner \\\\\\\"src/**/*.test.jsx\\\\\\\"\",\n ...\n},\n```\n\nIf needed, swap `.jsx` with the file type(s) containing your tests.\n\nTo specify multiple test file types, enclose with curly brackets and separate with commas. For example, to match `.jsx`, `.js`, and `.ts` files, the script would be:\n\n```\n\"test\": \"web-test-runner \\\\\\\"src/**/*.test.{jsx,js,ts}\\\\\\\"\",\n```\n\n> 💡 Tip: `wtr` can be used as a shorthand for `web-test-runner`.\n" }, { "path": "docs/guides/web-worker.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'Web Workers'\ntags: communityGuide\npublished: true\ndescription: How to use Web Workers in your Snowpack project.\n---\n\n[Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) are a simple means for web content to run scripts in background threads.\n\n**To use Web Workers with Snowpack:** Use the browser's native [Web Worker API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Web_Workers_API) directly:\n\n```js\n// Example: Load a Web Worker in your project\nconst myWorker = new Worker(new URL('./worker.js', import.meta.url));\n```\n\nPassing a `URL` to the Worker constructor (instead of a string literal) is recommended, but not required. Using a string literal (ex: `new Worker('./worker.js')`) may prevent some optimizations when you build your site for production.\n\nAlso note that the URL passed to the `Worker` must match the final URL which may differ from the path on disk. For example, `./worker.js` would still be used even if the original file on disk was `worker.ts`. `mount` destinations should also be used here, if needed.\n\n### ESM Web Worker Support\n\n**ESM syntax (`import`/`export`) in Web Workers is still not supported in all modern browsers.** Snowpack v3.0.0 and the Snowpack Webpack v5 plugin will both support automatic bundling once released. Until then, you'll need to write self-contained, single-file Web Workers (no ESM `import`/`export` statements) or pre-bundle your web workers yourself.\n\n```js\nconst worker = new Worker(new URL('./esm-worker.js', import.meta.url), {\n name: 'my-worker',\n type: 'module',\n});\n```\n\n\n" }, { "path": "docs/guides/workbox.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Workbox\ntags: communityGuide\ndescription: The Workbox CLI integrates well with Snowpack.\n---\n\n
\nThis article is a stub, you can help expand it into how-to guide format\n
\n\nThe [Workbox CLI](https://developers.google.com/web/tools/workbox/modules/workbox-cli) integrates well with Snowpack. Run the wizard to bootstrap your first configuration file, and then run `workbox generateSW` to generate your service worker.\n\nRemember that Workbox expects to be run every time you deploy, as a part of a production build process. If you don't have one yet, create package.json [`\"deploy\"` and/or `\"build\"` scripts](https://michael-kuehnel.de/tooling/2018/03/22/helpers-and-tips-for-npm-run-scripts.html) to automate your production build process.\n" }, { "path": "docs/posts/2020-05-26-snowpack-2-0-release.md", "content": "---\nlayout: ../../layouts/post.astro\nbannerVideo: '/img/extra-space-4.mp4'\npermalink: '/posts/2020-05-26-snowpack-2-0-release/'\ntitle: Snowpack v2.0\ndescription: 'Build web applications with less tooling and faster iteration.'\ntagline: v2.0.0 release post\ndate: 2020-05-26\n---\n\nAfter 40+ beta versions & release candidates we are very excited to introduce **Snowpack 2.0: A build system for the modern web.**\n\n- Starts up in <50ms and stays fast in large projects.\n- Bundle-free development with bundled production builds.\n- Built-in support for TypeScript, JSX, CSS Modules and more.\n- Works with React, Preact, Vue, Svelte, and all your favorite libraries.\n- [Create Snowpack App (CSA)](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/cli) starter templates.\n\n
\n\n```bash\n# install with npm\nnpm install --save-dev snowpack\n\n# install with yarn\nyarn add --dev snowpack\n```\n\n## The Road to Snowpack 2.0\n\nSnowpack 1.0 was designed for a simple mission: install npm packages to run directly in the browser. The theory was that JavaScript packages are the only thing still **_requiring_** the use of a bundler during development. Remove that requirement, remove the bundler, and speed up web development for everyone.\n\nGuess what? It worked! Thousands of developers started using Snowpack to install their dependencies and build websites with less tooling. A whole new type of faster, lighter-weight dev environment suddenly became possible.\n\n**Snowpack 2.0 is a build system designed for this new era of web development.** Snowpack removes the bundler from your dev environment, leveraging native [ES Module (ESM)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) support to serve built files directly to the browser. This isn't just a faster tool, it's a new approach to web build systems.\n\n## The Rise of O(1) Build Systems\n\n![webpack vs. snowpack diagram](/img/snowpack-unbundled-example-3.png)\n\n**Bundling is a process of `O(n)` complexity.** When you change a file, you can't just rebuild that one file. You often need to rebuild and rebundle an entire chunk of your application across multiple related files to properly accept the new changes.\n\n**Snowpack is an O(1) build system.** The term was first coined by [Ives van Hoorne](https://www.youtube.com/watch?v=Yu9zcJJ4Uz0) and it perfectly encapsulates our vision for the future of web development. Every file built with Snowpack can be expressed as a function: `build(file) => result`. When a file is changed during development, only that file is rebuilt.\n\nThis has several advantages over the traditional bundled dev approach:\n\n- O(1) builds are faster.\n- O(1) builds are predictable.\n- O(1) builds are easy to reason about & configure.\n- Project size doesn't affect build time during development.\n- Individual files cache better.\n\nThat last point is key: every built file is cached individually and reused indefinitely. **If you never change a file, you will never need to re-build it again.**\n\n## `dev` A Faster Dev Environment\n\n![dev command output example](/img/snowpack-dev-startup-2.png)\n\nRun `snowpack dev` to start your new web dev environment and the first thing you'll notice is **how flippin' fast O(1) build tooling is.** Snowpack starts up in less than 50ms. That's no typo: 50 milliseconds or less.\n\nWith no bundling work needed to start, your server spins up immediately. On your very first page load, Snowpack builds your first requested files and then caches them for future use. Even if your project contains a million different files, Snowpack builds only those needed to load the current page. This is how Snowpack stays fast.\n\n`snowpack dev` includes a development server and a bunch of familiar features right out of the box:\n\n- TypeScript Support\n- JSX Support\n- Hot Module Replacement (HMR)\n- Importing CSS & CSS Modules\n- Importing Images & Other Assets\n- Custom Routing\n- Proxying Requests\n\n## Customizing Your Build\n\n[Build Scripts](/concepts/build-pipeline) let you connect your favorite build tools. With Snowpack, you express every build as a linear `input -> build -> output` workflow. This allow Snowpack to pipe your files into and out of any existing UNIX-y CLI tools without the need for a special plugin ecosystem.\n\n```js\n// snowpack.config.json\n{\n \"scripts\": {\n // Pipe every \"*.css\" file through the PostCSS CLI\n // stdin (source file) > postcss > stdout (build output)\n \"build:css\": \"postcss\",\n }\n}\n```\n\nIf you've ever used your `package.json` \"scripts\" config, this format should feel familiar. We love the simplicity of using your CLIs directly without an unnecessary plugin system. We hope this pattern offers a similar intuitive design.\n\nIf you want more control over your build (or want to write your own build tool) Snowpack also supports [third-party JavaScript plugins](/plugins). [Check out our docs](/concepts/build-pipeline) to learn more about customizing your build.\n\n## `build` Bundling for Production\n\n![build output example](/img/snowpack-build-example.png)\n\nTo be clear, Snowpack isn't against bundling for production. In fact, we recommend it. File minification, compression, dead-code elimination and network optimizations can all make a bundled site run faster for your users, which is the ultimate goal of any build tool.\n\nSnowpack treats bundling as a final, production-only build optimization. By bundling as the final step, you avoid mixing build logic and bundle logic in the same huge configuration file. Instead, your bundler gets already-built files and can focus solely on what it does best: bundling.\n\nSnowpack maintains official plugins for both Webpack & Parcel. Connect your favorite, and then run `snowpack build` to build your site for production.\n\n```js\n// snowpack.config.json\n{\n // Optimize your production builds with Webpack\n \"plugins\": [[\"@snowpack/plugin-webpack\", {/* ... */}]]\n}\n```\n\nIf you don't want to use a bundler, that's okay too. Snowpack's default build will give you an unbundled site that also runs just fine. This is what the Snowpack project has been all about from the start: **Use a bundler because you want to, and not because you need to.**\n\n## Try Snowpack Today\n\nWe are so excited to share this all with you today. Download Snowpack to experience the future of web development.\n\n```\nnpm i snowpack@latest --save-dev\n```\n\nIf you already have an existing Snowpack application, Snowpack 2.0 will walk you through updating any outdated configuration. Snowpack's original package installer still works as expected, and with the new `dev` & `build` commands Snowpack even manages your web packages for you.\n\n**[Check out our docs site to learn more.](https://www.snowpack.dev/)**\n\n#### Create Snowpack App\n\nThe easiest way to get started with Snowpack is with [Create Snowpack App (CSA)](https://github.com/withastro/snowpack). CSA automatically initializes a starter application for you with a pre-configured, Snowpack-powered dev environment.\n\n```bash\nnpx create-snowpack-app new-dir --template [SELECT FROM BELOW] [--use-yarn]\n```\n\n- [@snowpack/app-template-blank](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-blank)\n- [@snowpack/app-template-react](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react)\n- [@snowpack/app-template-react-typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react-typescript)\n- [@snowpack/app-template-preact](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-preact)\n- [@snowpack/app-template-svelte](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte)\n- [@snowpack/app-template-vue](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue)\n- [@snowpack/app-template-lit-element](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-lit-element)\n- [@snowpack/app-template-11ty](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-11ty)\n- **[See all community templates](https://github.com/withastro/snowpack/tree/main/create-snowpack-app)**\n\n🐹 Happy hacking!\n\n---\n\n_Thank you to all of our [80+ contributors](https://github.com/withastro/snowpack/graphs/contributors) for making this release possible._\n_Thanks to [Melissa McEwen](https://twitter.com/melissamcewen) & [@TheoOnTwitch](https://twitter.com/TheoOnTwitch) for helping to edit this post._\n" }, { "path": "docs/posts/2020-07-30-snowpack-2-7-release.md", "content": "---\nlayout: ../../layouts/post.astro\ntitle: Snowpack 2.7\ndescription: 'A new plugin API plus smaller, faster production builds.'\ntagline: v2.7.0 release post\npermalink: '/posts/2020-07-30-snowpack-2-7-release/'\ndate: 2020-07-30\nbannerImage: '/img/banner-2.jpg'\n---\n\nHappy release day! We are excited to announce Snowpack v2.7 with a handful of new features improving stability and the overall developer experience:\n\n- **Redesigned plugin API** plus [new guides for plugin authors](/plugins)\n- **Import aliasing** and new ways to customize Snowpack\n- **Improved build performance** with smaller, faster builds\n- **New Svelte + TypeScript** app templates\n- **Bug fixes, usability improvements & more!**\n\n
\n\nPlus, we hit some VERY exciting project milestones last month:\n\n- ❤️ **150** [open source contributors](https://github.com/withastro/snowpack/graphs/contributors) (and growing!)\n- 🏆 **1000+** discussions, issues, and pull requests\n- ⭐️ **10,000+** stars on GitHub\n- 👋 **New companies using Snowpack:** [Alibaba](https://www.1688.com/) & [Airhacks](https://airhacks.com/)\n\n
\n\nIf you've been waiting for an excuse to give Snowpack a try, now is a great time to start! Try out a Create Snowpack App (CSA) template or install Snowpack into any existing project:\n\n```bash\n# install with npm\nnpm install --save-dev snowpack\n\n# install with yarn\nyarn add --dev snowpack\n```\n\n## Redesigned Plugin API\n\nSnowpack v2.7 features an major rewrite of our internal build pipeline to support a more reliable and expressive plugin API. New optimizations and file type builders are unlocked with the redesigned `load()`, `transform()`, `run()` and `optimize()` plugin hooks (with more on the way in future versions).\n\n![snowpack screenshot](/img/snowpack-27-screenshot-1.png)\n\nSnowpack 2.7 is fully backwards compatible with older plugins, so you can upgrade Snowpack without worrying about version mismatches.\n\nEvery hook is documented in our new [Plugins Guide](/plugins) for plugin authors. The new API is heavily inspired by [Rollup](https://rollupjs.org/), so we hope it already feels familiar to many of you.\n\n## Simplified Configuration\n\n![snowpack screenshot](/img/snowpack-27-screenshot-3.png)\n\nSnowpack v2.0 originally introduced the concept of build `\"scripts\"` as a way to configure anything from file building to HTTP request proxying. Scripts were flexible, but hard to document and frustrating to debug.\n\nOur internal plugin rewrite presented an opportunity to improve the developer experience while keeping the flexibility of direct CLI tooling. You can now connect third-party tooling directly into Snowpack's build pipeline using one of two new utility plugins:\n\n- `@snowpack/plugin-build-script`: Use any CLI directly to build files for Snowpack.\n- `@snowpack/plugin-run-script`: Run arbitrary CLI commands during dev/build.\n\nOther options like `mount`, `proxy`, and `alias` (see below) are now easier to customize as well with top-level config options that take the guesswork out of common configuration.\n\nThe `\"scripts\"` configuration format will continue to be supported in Snowpack v2, but we recommend migrating any custom scripts to `\"plugins\"` and plan to remove support in a future major release.\n\n## New: Import Aliasing\n\n![snowpack screenshot](/img/snowpack-27-screenshot-2.png)\n\nIn previous versions of Snowpack, import aliasing was hard to understand and configure (and it didn’t support all types of aliasing). Starting in Snowpack v2.7, [Import Aliases](/reference/configuration) gets a new top-level `alias` config so that you can define as many custom aliases as you'd like. Package import aliases are also supported.\n\n## Improved Build Performance\n\nSnowpack's official webpack plugin is now more powerful than ever, with new support for multi-page website bundling and better default performance settings (based on the [latest research from Google](https://web.dev/granular-chunking-nextjs/)). Special shout out to [@mxmul](https://github.com/mxmul) (Yelp) for leading these community contributions!\n\nIf you don't use a bundler in production, you'll still see a smaller build. That's because Snowpack v2.7 now ships with minification on by default. We plan to keep improving the default unbundled build performance story over the next few releases, so stay tuned.\n\n## Svelte + TypeScript Support\n\n![snowpack screenshot](/img/svelte-ts.png)\n\nLast week, [Svelte announced official support for TypeScript](https://svelte.dev/blog/svelte-and-typescript). We're huge fans of both projects and couldn't pass up the chance to test the new support out in a brand new Svelte + TypeScript app template for Snowpack.\n\nVisit [Create Snowpack App](https://github.com/withastro/snowpack/tree/main/create-snowpack-app) for a list of all of our new app templates.\n\n## Thank You, Contributors!\n\nFinally, Snowpack wouldn't be possible without the [150+ contributors](https://github.com/withastro/snowpack/graphs/contributors) who contributed features, fixes, and documentation improvements. Thanks again for all of your help.\n\n-- Snowpack Maintainers\n\n
\nPsst... In case you missed it, check out our latest project: Skypack - the new JavaScript CDN that lets you load any npm package directly in the browser.\n
\n\n\n\nFollow @snowpackjs on Twitter and don't miss future updates!\n\n" }, { "path": "docs/posts/2020-12-03-snowpack-3-release-candidate.md", "content": "---\nlayout: ../../layouts/post.astro\ntitle: 'Snowpack v3.0 Release Candidate'\ntagline: New features to change the way you build for the web.\ndescription: 'New features to change the way you build for the web. Snowpack v3.0 will release on January 6th, 2021 (the one-year anniversary of its original launch post). This is our biggest release yet with some serious new features, including a new way to load npm packages on-demand that lets you skip the `npm install` step entirely.'\ndate: 2020-12-03\n---\n\n**tl;dr:** Snowpack v3.0 will release on January 6th, 2021 (the one-year anniversary of its original launch post). This is our biggest release yet with some serious new features, including **a new way to load npm imports on-demand** and skip the frontend `npm install` step entirely.\n\n**Update:** Release was delayed for a week for some finishing touches. New release date is January 13th! [More info on Discord](https://discord.com/channels/712696926406967308/783454799051489301/796785330932940800).\n\nBest of all: it's all available to try today!\n\n## What's New?\n\nSnowpack v3 will focus on the polish & official release of four features already available today in the current version of Snowpack (v2.18.0) under the `experiments` flag:\n\n- `experiments.source` - Streaming npm imports, no install step required.\n- `experiments.optimize` - Built-in bundling, preloading, and asset minifying.\n- `experiments.routes` - Advanced config for HTML fallbacks and API proxies.\n- `import 'snowpack'` - A brand new JavaScript API for Snowpack integrations.\n\n\n\n## New: Streaming Package Imports\n\nSnowpack has always pushed the limits of frontend development, and this release is no different. Snowpack v3.0 introduces an exciting new feature to speed up & simplify your development workflow.\n\nTypically, JavaScript dependencies are installed and managed locally by a package manager CLI like `npm`, `yarn` or `pnpm`. Packages are often bloated with unrelated files and almost never run directly in the browser. Additional steps are required to process, build and bundle these installed packages so that they can actually run in browser.\n\n**What if we could simplify this? What if Snowpack could skip the \"npm install\" step entirely and just fetch the relevant, pre-built package code on-demand via ESM?**\n\n```js\n// you do this:\nimport * as React from 'react';\n\n// but get behavior like this:\nimport * as React from 'https://cdn.skypack.dev/react@17.0.1';\n```\n\nThat URL in the example above points to [Skypack](https://www.skypack.dev/), a popular JavaScript CDN that we built to serve every npm package as ESM. Importing dependencies by URL like this is well supported in Snowpack, Deno, and all major browsers. But writing these URLs directly into your source code isn't ideal and makes development impossible without a network connection.\n\n**Snowpack v3.0 brings together the best of both worlds:** Get the simplicity of `import 'react'` in your own source code and let Snowpack fetch these dependencies behind the scenes, pre-built and ready to run in the browser. Snowpack caches everything for you automatically, so you can continue to work offline without relying on Skypack besides the first package fetch.\n\nThis has several benefits over the traditional \"npm install\" approach:\n\n- **Speed:** Skip the install + build steps for dependencies, and load your dependencies as pre-build ESM code.\n- **Safety:** ESM packages are pre-built into JavaScript for you and never given access to [run code on your machine](https://www.usenix.org/system/files/sec19-zimmermann.pdf). Third-party code only ever run in the browser sandbox.\n- **Simplicity:** ESM packages are managed by Snowpack, so frontend projects that don't need Node.js (Rails, PHP, etc.) can drop the npm CLI entirely if they choose.\n- **Same Final Build:** When you build your site for production, package code is transpiled with the rest of your site and tree-shaken to your exact imports, resulting in a final build that's nearly identical.\n\nIf this all sounds too wild for you, don't worry. This is **100% opt-in** behavior for those who want it. By default, Snowpack will continue to pull your npm package dependencies out of your project `node_modules` directory like it always has.\n\nCheck out our guide on [Streaming Package Imports](/guides/streaming-imports) to learn more about how to enable this new behavior in your project today. In a future release, we hope to open this up to custom ESM package sources and other CDNs as well.\n\n![js api](/img/post-snowpackv3-esbuild.png)\n\n## Built-in Optimizations, Powered by esbuild\n\n[esbuild](https://esbuild.github.io/) is a marvel: it performs 100× faster than most other popular bundlers and over 300× faster than Parcel (by esbuild's own benchmarks). esbuild is written in Go, a compiled language that can parallelize heavy bundling workloads where other popular bundlers -- written in JavaScript -- cannot.\n\nSnowpack already uses esbuild internally as our default single-file builder for JavaScript, TypeScript and JSX files. Snowpack v3.0 takes this integration one step further, with a new built-in build optimization pipeline. Bundle, minify, and transpile your site for production in 1/100th of the time of other bundlers.\n\nSnowpack is able to adopt esbuild today thanks to an early bet that we made on the future of bundling: **bundling is a post-build optimization, and not the core foundation that everything is built on top of.** Thanks to this early design decision, esbuild can be plugged in and swapped out of your Snowpack build as easily as any other bundler.\n\nesbuild is still a young project, but it's future looks promising. In the meantime, we will also continue to invest in the existing Webpack & Rollup bundler plugins for a long time to come.\n\nTo get started, check out the `experiments.optimize` option in our newest [Optimizing Your Snowpack Build](/guides/optimize-and-bundle) guide.\n\n![js api](/img/post-snowpackv3-routes.png)\n\n## Routing\n\nSnowpack's new `experiments.routes` configuration lets you define routes that align your dev environment with production. This unlocks some interesting new use-cases, including:\n\n- **API Proxies** - Route all `/api/*` URLs to another URL or localhost port.\n- **SPA Fallbacks** - Serve an app shell `index.html` to all requested routes.\n- **Faster Site Loads** - Speed up your site and serve different HTML shell files for each route.\n- **Island Architecture** - Serve HTML that renders individual components on the page, in parallel. (Made popular by [Jason Miller](https://twitter.com/_developit) in [this blog post](https://jasonformat.com/islands-architecture/)).\n- **Mimic Vercel/Netlify** - Re-create your Vercel or Netlify routes in development. Or, create a Snowpack plugin to automatically generate these routes from your `vercel.json` or `_redirects` file at startup.\n\nWhile API proxying and SPA fallbacks have already been supported in Snowpack for a while now, this brings them all together into a single, expressive new API.\n\n![js api](/img/post-snowpackv3-jsapi.png)\n\n## A New JavaScript API\n\nSnowpack's new JavaScript API grants you more advanced control over Snowpack's dev server and build pipeline, helping you build more powerful integrations on top of Snowpack to unlock new kinds of dev tooling and server-side rendering (SSR) solutions.\n\nThe Svelte team recently made news with [SvelteKit](https://svelte.dev/blog/whats-the-deal-with-sveltekit): An official, zero-effort SSR app framework for Svelte apps. SvelteKit is powered internally by Snowpack, using our brand-new JavaScript API to manage your build pipeline and build files on-demand. Snowpack speeds up development and helps to cut SvelteKit's startup time to near-zero.\n\nCheck out our new [JavaScript API reference](/reference/javascript-interface) to start building your own custom integrations on top of Snowpack. Or, read through our new guide on [Server-Side Rendering](/guides/server-side-render) to get started with a custom SSR integration for production.\n\n## Installation\n\nYou can install the Snowpack v3.0 release candidate today by running:\n\n```\nnpm install snowpack@next\n```\n\nSince all v3.0 features already exist in Snowpack today, our existing documentation site applies to both v2 & v3. At this point only very old, undocumented, legacy behavior has been removed from the `next` v3.0 branch.\n\nFeatures under the `experiments` flag may continue to change as we get closer to the official release date. By the end of the year, you can expect that these features will move out from behind the `experiments` flag and into top-level config objects in the `next` v3.0 branch.\n\nLearn more at [snowpack.dev](https://www.snowpack.dev). Happy hacking!\n" }, { "path": "docs/posts/2021-01-13-snowpack-3-0.md", "content": "---\nlayout: ../../layouts/post.astro\ntitle: 'Snowpack v3.0'\ndescription: Snowpack v3.0 is here! Our biggest release yet with some serious new features, including pre-bundled streaming imports, built-in bundling & optimizations, new JavaScript APIs, and more.'\ndate: 2021-01-13\n---\n\nSnowpack v3.0 is here! This is our biggest release yet with brand new features including:\n\n- **Pre-bundled streaming imports** - Import any npm package, on-demand.\n- **Integrated build optimizations** - Built-in bundling, preloading, minification, and more.\n- **JavaScript API** - Integrate with Snowpack's brand new native JS API.\n- **Node.js Runtime API** - Import your Snowpack-built files directly into Node.js.\n- **Bug fixes, stability improvements, and a whole lot more!**\n\nInstall the newest version of Snowpack to get started:\n\n```\n$ npm install snowpack@^3.0.0\n```\n\nOr, try out one of our updated [Create Snowpack App](https://www.npmjs.com/package/create-snowpack-app) starter templates:\n\n```\n$ npx create-snowpack-app new-project-directory --template @snowpack/app-template-react\n```\n\n## Reimagining Web Development for ESM\n\n1 year ago, Snowpack first released with the mission to reimagine web development for modern JavaScript and ESM. Snowpack leverages modern web features to deliver a frontend build tool that needs just 50ms to start up & react to new file changes, regardless of project size. In comparison, traditional web bundlers could take several seconds or even full minutes to start up in large projects.\n\nSnowpack v3.0 marks another huge leap on our mission to push web development forward with the release of **streaming imports**. Streaming imports make it possible to import any package directly into your project, pre-built and pre-bundled for immediate use. It's the power of the entire JavaScript ecosystem, at your fingertips.\n\n\n\n## What are Streaming Imports?\n\nThe typical web developer installs and manages their JavaScript dependencies locally using a package manager CLI like `npm`, `yarn` or `pnpm`. These npm packages can't run directly in the browser, so additional work is needed to resolve, process, build and bundle these packages for the browser before you can actually use them.\n\n**What if we could simplify this? What if you could skip the \"npm install\" step entirely and just fetch the relevant, pre-built package code on-demand via ESM import?**\n\n```js\n// you do this:\nimport * as React from 'react';\n\n// but get behavior like this:\nimport * as React from 'https://cdn.skypack.dev/react@17.0.1';\n```\n\nThat URL in the example above points to [Skypack](https://www.skypack.dev/), a popular JavaScript CDN that we built to serve every package on npm as ESM. Importing dependencies by URL like this is well supported in Snowpack, Deno, and all major browsers. But writing these URLs directly into your source code isn't ideal and makes development impossible without a network connection.\n\n**Snowpack v3.0 brings together the best of both worlds:** Get the simplicity of `import 'react'` in your own source code and let Snowpack fetch these dependencies behind the scenes, pre-built and ready to run in the browser. Snowpack caches everything for you automatically, so you can continue to work offline after the first package fetch.\n\nThis new workflow has several benefits over the traditional \"npm install\" approach:\n\n- **Speed:** Skip the install + build steps for dependencies, and load your dependencies on-demand as pre-build, pre-bundled ESM code.\n- **Safety:** ESM packages are pre-built into JavaScript for you and never given access to [run code on your machine](https://www.usenix.org/system/files/sec19-zimmermann.pdf). Third-party code only ever runs sandboxed in the browser.\n- **Less Tooling:** ESM packages are managed by Snowpack, so frontend projects that don't need Node.js (Rails, PHP, etc.) can drop the npm CLI entirely if they choose.\n- **Identical Final Build:** When you build your site for production, package code is transpiled with the rest of your site and tree-shaken to your exact set of imports.\n\nThis is our bet on the future of web development. But if this all sounds too wild for you or you have some technical reason to keep managing your dependencies with npm, don't worry. This is **100% opt-in** behavior for those who want it. By default, Snowpack will continue to pull your npm package dependencies out of your project `node_modules` directory like it always has.\n\nCheck out our guide on [Streaming Package Imports](/guides/streaming-imports) to learn more about how to enable this new behavior in your project today.\n\n![js api](/img/post-snowpackv3-esbuild.png)\n\n## Built-in Optimizations, Powered by esbuild\n\n[esbuild](https://esbuild.github.io/) is a marvel: it performs 100x faster than most other popular bundlers their own benchmarks. esbuild is written in Go, a compiled language that can parallelize heavy bundling workloads where other popular bundlers -- written in JavaScript -- cannot.\n\nSnowpack already uses esbuild internally as our default single-file builder for JavaScript, TypeScript and JSX files. Snowpack v3.0 takes this integration one step further, with a new built-in build optimization pipeline. Bundle, minify, and transpile your site for production in 1/100th of the time of other bundlers.\n\nSnowpack is able to adopt esbuild today thanks to an early bet that we made on the future of bundling: **bundling is just a post-build optimization.** Thanks to this early design decision, esbuild can be plugged in and swapped out of your Snowpack build as easily as any other bundler.\n\nesbuild is still a young project, but its future looks promising. In the meantime, we will also continue to invest in the existing bundler plugins for a long time to come, so that more mature projects can continue to use mature bundlers like Webpack & Rollup.\n\nTo get started, check out the `optimize` option in our newest [Optimizing Your Snowpack Build](/guides/optimize-and-bundle) guide.\n\n![js api](/img/post-snowpackv3-jsapi.png)\n\n## A New JavaScript API\n\nSnowpack's new JavaScript API grants you more advanced control over Snowpack's dev server and build pipeline, helping you build more powerful integrations on top of Snowpack to unlock new kinds of dev tooling and server-side rendering (SSR) solutions.\n\n[SvelteKit](https://svelte.dev/blog/whats-the-deal-with-sveltekit) is the new official web app framework from the Svelte team, built with Snowpack. SvelteKit uses our new JavaScript API to manage the build pipeline and build files on-demand. Snowpack helps SvelteKit speed up development, with zero rapid updates on file change and zero upfront server start-up cost.\n\n[Microsite](https://www.npmjs.com/package/microsite) is another exciting new project built with Snowpack. Microsite is a Static Site Generator (SSG) for Preact that features automatic partial hydration, so that you send as little JavaScript down to the client as possible.\n\nCheck out our new [JavaScript API reference](/reference/javascript-interface) to start building your own custom integrations on top of Snowpack.\n\n![js api](/img/post-snowpackv3-runtime.png)\n\n## A New Node.js Runtime\n\nSpeaking of Svelte, this next feature comes directly out of our collaboration with the Svelte team. As a part of building out SvelteKit, Rich Harris created a server-side runtime for Snowpack. This runtime lets you import any Snowpack-built file directly into Node.js, handling things like ESM->CJS conversion and CSS extraction automatically.\n\nThe result is a unified build pipeline across both Node.js and the frontend, with all of the on-demand build performance benefits of Snowpack. Importing frontend code to run in Node.js unlocks features like true server-side rendering (SSR), test runner integrations for Jest/uvu/Mocha, and more.\n\nCheck out our new [SSR guide](/guides/server-side-render) to get started and learn more about all of the different ways that you can connect to your Snowpack build.\n\n
🥳
\n\n## Snowpack's One Year Anniversary\n\nLast week marked Snowpack's one-year anniversary of the original v1.0.0 release. Looking back, I'm blown away by everything that's happened since:\n\n- 150+ releases (from `v0.0.1`, all the way to v3.0 today)\n- [100+ Snowpack plugins](https://www.snowpack.dev/plugins) to choose from (and growing fast!)\n- [100+ individual contributors](https://github.com/withastro/snowpack/graphs/contributors)\n- [15,000+ stars on GitHub](https://github.com/withastro/snowpack/stargazers)\n- #1 Developer Productivity Boost Winner, [2020 JS Open Source Awards](https://osawards.com/javascript/2020)\n- #1 Highest Developer Interest, [2020 State of JS](https://2020.stateofjs.com/en-US/technologies/build-tools/)\n- #1 Highest Developer Satisfaction (tied), 2020 State of JS\n\nA huge thank you to everyone who has contributed code to Snowpack, and the hundreds of developers joining us on GitHub and on [Discord](https://discord.com/invite/snowpack). This project wouldn't exist today without you and your support. Thank you!\n\n-- Fred K. Schott [(@FredKSchott)](https://twitter.com/FredKSchott)\n" }, { "path": "docs/reference/cli-command-line-interface.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Command Line API\ndescription: The Snowpack Command Line tool's API, commands, and flags.\n---\n\n### Commands\n\n```\n$ snowpack --help\n\nsnowpack init Create a new project config file.\nsnowpack dev Develop your app locally.\nsnowpack build Build your app for production.\n\n...\n```\n\n### Flags\n\n```bash\n# Show helpful info\n$ snowpack --help\n\n# Show additional debugging logs\n$ snowpack --verbose\n\n# {devOptions: {open: 'none'}}\n$ snowpack dev --open none\n\n# {buildOptions: {clean: true/false}}\n$ snowpack build --clean\n$ snowpack build --no-clean\n```\n\n**CLI flags will be merged with (and take priority over) your config file values.** Every config value outlined below can also be passed as a CLI flag. Additionally, Snowpack also supports the following flags:\n\n- **`--config [path]`** Set the path to your project config file.\n- **`--help`** Show this help.\n- **`--version`** Show the current version.\n- **`--reload`** Clear the local cache. Useful for troubleshooting installer issues.\n" }, { "path": "docs/reference/common-error-details.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Common Error Details\ndescription: How to troubleshoot common issues and error messagesm, plus our resources for getting help.\n---\n\nThis page details several common issues and error messages. For further help we have an active [GitHub Discussion forum](https://github.com/withastro/snowpack/discussions)and [Discord](https://discord.gg/snowpack). Developers and community contributors frequently answer questions on both.\n\n### No such file or directory\n\n```\nENOENT: no such file or directory, open …/node_modules/csstype/index.js\n```\n\nThis error message would sometimes occur in older versions of Snowpack.\n\n**To solve this issue:** Upgrade to Snowpack `v2.6.0` or higher. If you continue to see this unexpected error in newer versions of Snowpack, please file an issue.\n\n### Package exists but package.json \"exports\" does not include entry\n\nNode.js recently added support for a package.json \"exports\" entry that defines which files you can and cannot import from within a package. Preact, for example, defines an \"exports\" map that allows you to to import \"preact/hooks\" but not \"preact/some/custom/file-path.js\". This allows packages to control their \"public\" interface.\n\nIf you see this error message, that means that you've imported a file path not allowed in the export map. If you believe this to be an error, reach out to the package author to request the file be added to their export map.\n\n### Uncaught SyntaxError: The requested module './XXXXXX.js' does not provide an export named 'YYYYYY'\n\nIf you are using TypeScript, this error could occur if you are importing or exporting something that only exists in TypeScript (like a type or interface) and doesn't actually exist in the final JavaScript code.\n\nOur built-in TypeScript support can detect type-only imports and will attempt to remove them automatically. This is however much more difficult for type-only export statements, because Snowpack cannot detect that an exported symbol is a type without keeping context across multiple files. For example, a statement such as `export { MyInterfaceName }` will not work in Snowpack.\n\n**To solve:** Enable [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) in `tsconfig.json` to identify problematic cases. Use `import type { MyInterfaceName }` and `export type { MyInterfaceName }` to help Snowpack ignore types.\n\nThis error could also appear if named imports are used with older, Common.js npm packages. Thanks to improvements in our package scanner this is no longer a common issue for most packages. However, some packages are written or compiled in a way that makes automatic import scanning impossible.\n\n**To solve:** Use the default import (`import pkg from 'my-old-package'`) for legacy Common.js/UMD packages that cannot be analyzed. Or, add the package name to your `packageOptions.namedExports` configuration for runtime import scanning.\n\n```js\n// snowpack.config.mjs\nexport default {\n packageOptions: {\n namedExports: ['@shopify/polaris-tokens'],\n },\n};\n```\n\n### Installing Non-JS Packages\n\nWhen installing packages from npm, you may encounter some file formats that can run only with additional parsing/processing. First check to see if there is a [Snowpack plugin for the type of file](/plugins).\n\nBecause our internal installer is powered by Rollup, you can also add Rollup plugins to your [Snowpack config](/reference/configuration) to handle these special, rare files:\n\n```diff\n // snowpack.config.mjs\n export default {\n+ rollup: {\n+ plugins: [require('rollup-plugin-sass')()],\n+ },\n };\n```\n\nRefer to [Rollup’s documentation on plugins](https://rollupjs.org/guide/en/#using-plugins) for more information.\n\n### RangeError: Invalid WebSocket frame: RSV1 must be clear\n\n**To solve this issue:** Use any other port than `8080` for the dev server. To do so, specify a port in your [Snowpack config](/reference/configuration):\n\n```diff\n // snowpack.config.mjs\n export default {\n+ devOptions: {\n+ port: 3000,\n+ },\n };\n```\n\n### Package \"[name]\" not found. Have you installed it?\n\nThis warning appears when Snowpack believes something to be in `node_modules`, but can’t find it. This typically happens because you‘ve tried to import something without a leading `/`, `./`, or `../`.\n\nHere are some possible fixes:\n\n#### I’m trying to import a file from npm\n\nIf you were trying to import an npm package, try running the following:\n\n```\nnpm install [package].\n```\n\nThen re-running Snowpack. If the issue still persists, try telling Snowpack where to find this with [an alias](https://www.snowpack.dev/reference/configuration#alias):\n\n```diff\n // snowpack.config.mjs\n export default {\n+ alias: {\n+ myPackage: './path/to/myPackage',\n+ },\n };\n```\n\n#### I’m trying to import a local `.js` file\n\nIf you‘re getting this error while trying to import a local file, the fix usually looks like this:\n\n```diff\n- import myFile from 'myFile.js';\n+ import myFile from './myFile.js';\n```\n\nIf the issue still persists, [please open an issue](https://github.com/withastro/snowpack/issues/new/choose).\n\n#### I’m trying to import a local `.css` file\n\nThe fix for `.css` files is similar to JS. Prefix a `./` to the import path like so:\n\n```diff\n- @import \"myfile.css\";\n+ @import \"./myfile.css\";\n```\n\nWhile it’s true you may be used to writing CSS without the `./`, and a browser respects it, Snowpack works a little differently. Because we let you import from npm seamlessly, `myfile.css` will be resolved as an npm package whereas `/myfile.css`, `./myfile.css`, and `../myfile.css` will be resolved as local project files.\n\nAlso, `./myfile.css` is perfectly-valid, and it’s good to get in the habit of using it consistently to prevent ambiguous resolution.\n" }, { "path": "docs/reference/configuration.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: snowpack.config.js\ndescription: The Snowpack configuration API reference.\n---\n\n```js\n// Example: snowpack.config.mjs\n// The added \"@type\" comment will enable TypeScript type information via VSCode, etc.\n\n/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n plugins: [\n /* ... */\n ],\n};\n```\n\nTo generate a basic configuration file scaffold in your Snowpack project run `snowpack init`.\n\n## mode\n\n**Type**: `\"test\" | \"development\" | \"production\"`\n**Default**: `\"development\"` for `snowpack dev`, `\"production\"` for `snowpack build`.\n\nSpecifies the \"mode\" that Snowpack should run in. The main impact of this is the value of `import.meta.env.MODE` at runtime, although there are some other key differences between modes:\n\n- `\"test\"`: `testOptions.files` are not excluded, and will be scanned & built as normal source files. Useful when running tests on top of Snowpack.\n\n## root\n\n**Type**: `string`\n**Default**: `/`\n\nSpecify the root of a project using Snowpack. (Previously: `config.cwd`)\n\n## workspaceRoot\n\n**Type**: `string`\n\nSpecify the root of your workspace or monorepo, if you are using one. When configured, Snowpack will treat any sibling packages in your workspace like source files, and pass them through your unbundled Snowpack build pipeline during development. This allows for fast refresh, HMR support, file change watching, and other dev improvements when working in monorepos.\n\nWhen you build your site for production, symlinked packages will be treated like any other package, bundled and tree-shaken into single files for faster loading.\n\n## install\n\nDeprecated! Moved to `packageOptions.knownEntrypoints`\n\n## extends\n\n**Type**: `string`\n\nInherit from a separate \"base\" config.\n\nCan be a relative file path, an npm package, or a file within an npm package. Your configuration will be merged on top of the extended base config.\n\n## exclude\n\n**Type**: `string[]`\n**Default**: `['**/node_modules/**/*']`\n\nExclude any files from the Snowpack pipeline.\n\nSupports glob pattern matching.\n\n## mount\n\n```\nmount: {\n [path: string]: string | {url: string, resolve: boolean, static: boolean, dot: boolean}\n}\n```\n\nMount local directories to custom URLs in your built application.\n\n- `mount.url` | `string` | _required_ : The URL to mount to, matching the string in the simple form above.\n- `mount.static` | `boolean` | _optional_ | **Default**: `false` : If true, don't build files in this directory. Copy and serve them directly from disk to the browser.\n- `mount.resolve` | `boolean` | _optional_ | **Default**: `true`: If false, don't resolve JS & CSS imports in your JS, CSS, and HTML files. Instead send every import to the browser, as written.\n- `mount.dot` | `boolean` | _optional_ | **Default**: `false`: If true, include dotfiles (ex: `.htaccess`) in the final build.\n\nExample:\n\n```js\n// snowpack.config.mjs\n// Example: Basic \"mount\" usage\nexport default {\n mount: {\n src: '/dist',\n public: '/',\n },\n};\n```\n\nYou can further customize this the build behavior for any mounted directory by using the expanded object notation:\n\n \n\n```js\n// snowpack.config.mjs\n// Example: expanded object notation \"mount\" usage\nexport default {\n mount: {\n // Same behavior as the \"src\" example above:\n src: {url: '/dist'},\n // Mount \"public\" to the root URL path (\"/*\") and serve files with zero transformations:\n public: {url: '/', static: true, resolve: false},\n },\n};\n```\n\n## env\n\n**Type**: `Record`\n\nDeclare any environment variables that should be exposed on `import.meta.env` at runtime. See [Environment Variables](/reference/environment-variables) for more information.\n\n```js\n// snowpack.config.mjs\nexport default {\n env: {\n API_URL: 'api.google.com',\n },\n};\n```\n\n## alias\n\n**Type**: `object` (package: package or path)\n\nConfigure import aliases for directories and packages.\n\nNote: In an older version of Snowpack, all mounted directories were also available as aliases by **Default**. As of Snowpack 2.7, this is no longer the case and no aliases are defined by **Default**.\n\n```js\n// snowpack.config.mjs\n// Example: alias types\nexport default {\n alias: {\n // Type 1: Package Import Alias\n lodash: 'lodash-es',\n react: 'preact/compat',\n // Type 2: Local Directory Import Alias (relative to cwd)\n components: './src/components',\n '@app': './src',\n },\n};\n```\n\n## plugins\n\n**Type**: `array` containing pluginName `string` or an array [`pluginName`, {`pluginOptions`}\n\nEnable Snowpack plugins and their options.\n\nAlso see our [Plugin guide](/guides/plugins)\n\n```js\n// snowpack.config.mjs\n// Example: enable plugins both simple and expanded\nexport default {\n plugins: [\n // Simple format: no options needed\n 'plugin-1',\n // Expanded format: allows you to pass options to the plugin\n ['plugin-2', {'plugin-option': false}],\n ];\n}\n```\n\n## devOptions\n\n**Type**: `object` (option name: value)\n\nConfigure the Snowpack dev server.\n\n### devOptions.secure\n\n**Type**: `boolean` or `object`\n**Default**: `false`\n\nToggles whether Snowpack dev server should use HTTPS with HTTP2 enabled. See the [SSL Certificates](/guides/https-ssl-certificates) Guide for more information.\n\nIf the value is `true`, Snowpack will look for a `snowpack.crt` and `snowpack.key` file in your `root` directory. If the value is an `object`, you may pass your custom `cert` and `key` files directly to it.\n\n```js\n// snowpack.config.mjs\nimport fs from 'fs';\n\nconst cert = await fs.promises.readFile('/path/to/server.crt');\nconst key = await fs.promises.readFile('/path/to/server.key');\n\nexport default {\n devOptions: {\n secure: {cert, key},\n },\n};\n```\n\n### devOptions.hostname\n\n**Type**: `string`\n**Default**: `localhost`\n\nThe hostname that the dev server is running on. Snowpack uses this information to configure the HMR websocket and properly open\nyour browser on startup (see: [`devOptions.open`](#devoptions.open)).\n\n### devOptions.port\n\n**Type**: `number`\n**Default**: `8080`\n\nThe port the dev server runs on.\n\n### devOptions.openUrl\n\n**Type**: `string`\n\nOptional path to append to dev server url. May also include querystring parameters, example: `test/foo.html?bar=123`.\n\n### devOptions.open\n\n**Type**: `string`\n**Default**: `\"**Default**\"`\n\nConfigures how the dev server opens in the browser when it starts.\n\nAny installed browser, e.g., \"chrome\", \"firefox\", \"brave\", or the path to a browser. Set \"none\" to disable.\n\n### devOptions.output\n\n**Type**: `\"stream\" | \"dashboard\"`\n**Default**: `\"dashboard\"`\n\nSet the output mode of the `dev` console:\n\n- `\"dashboard\"` delivers an organized layout of console output and the logs of any connected tools. This is recommended for most users and results in the best logging experience.\n- `\"stream\"` is useful when Snowpack is run in parallel with other commands, where clearing the shell would clear important output of other commands running in the same shell.\n\n### devOptions.hmr\n\n**Type**: `boolean`\n**Default**: `true`\n\nToggles HMR on the Snowpack dev server.\n\n### devOptions.hmrDelay\n\n**Type**: `number` (milliseconds)\n**Default**: `0`\n\nMilliseconds to delay HMR-triggered browser update.\n\n### devOptions.hmrPort\n\n**Type**: `number`\n**Default**: [`devOptions.port`](#devoptions.port)\n\nThe port where Snowpack's HMR Websocket runs.\n\n### devOptions.hmrErrorOverlay\n\n**Type**: `boolean`\n**Default**: `true`\n\nToggles a browser overlay that displays JavaScript runtime errors when running HMR.\n\n### devOptions.out\n\n**Type**: `string`\n**Default**: `\"build\"`\n\n_NOTE:_ Deprecated, see `buildOptions.out`.\n\n### devOptions.tailwindConfig\n\n**Type**: `string`\n\nIf using Tailwind, specify the path to your config file. e.g.: `tailwindConfig: './tailwind.config.js'`\n\n## installOptions\n\n**Type**: `object`\n\n_NOTE:_ Deprecated, see `packageOptions`.\n\n## packageOptions\n\n**Type**: `object`\n\nConfigure how npm packages are installed and used.\n\n### packageOptions.external\n\n**Type**: `string[]`\n**Example**: `\"external\": [\"fs\"]`\n\nMark some imports as external. Snowpack will ignore these imports and leave them as-is in your final build.\n\nThis is an advanced feature: Bare imports are not supported in any major browser, so an ignored import will usually fail when sent directly to the browser. This will most likely fail unless you have a specific use-case that requires it.\n\n### packageOptions.source\n\n**Type**: `\"local\" | \"remote\"`\n**Default**: `\"local\"`\n**Example**: `\"source\": \"local\"`\n\nYour JavaScript npm packages can be consumed in two different ways: **local** and **remote**. Each mode supports a different set of package options. You can choose between these two different modes by setting the `packageOptions.source` property.\n\n### packageOptions.source=local\n\nLoad your dependencies from your local `node_modules/` directory. Install and manage your dependencies using `npm` (or any other npm-ready package manager) and a project `package.json` file.\n\nThis is traditional Snowpack behavior matching Snowpack v2. This mode is recommended for anyone already using npm to manage their frontend dependencies.\n\n#### packageOptions.knownEntrypoints\n\n**Type**: `string[]`\n\nKnown dependencies to install with Snowpack. Used for installing packages any dependencies that cannot be detected by our automatic import scanner (ex: package CSS files).\n\n#### packageOptions.polyfillNode\n\n**Type**: `boolean`\n**Default**: `false`\n\nThis will automatically polyfill any Node.js dependencies as much as possible for the browser\n\nConverts packages that depend on Node.js built-in modules (`\"fs\"`, `\"path\"`, `\"url\"`, etc.). You can see the full list of supported polyfills at the [rollup-plugin-node-polyfills documentation](https://github.com/ionic-team/rollup-plugin-node-polyfills)\n\nIf you'd like to customize this polyfill behavior, you can provide your own Rollup plugin for the installer:\n\n```js\n// snowpack.config.mjs\n// Example: If `--polyfill-node` doesn't support your use-case, you can provide your own custom Node.js polyfill behavior\nimport rollupPluginNodePolyfills from 'rollup-plugin-node-polyfills';\n\nexport default {\n packageOptions: {\n polyfillNode: false,\n rollup: {\n plugins: [rollupPluginNodePolyfills({crypto: true, ...})],\n },\n },\n};\n```\n\nWhen `source=\"remote\"`, Node.js polyfills are always provided. Configuring this option is only supported in `source=\"local\"` mode.\n\n#### packageOptions.env\n\n**Type**: `{[ENV_NAME: string]: (string true)}`\n\nSets a `process.env.` environment variable inside the installed dependencies.\n\nIf set to true (ex: `{NODE_ENV: true}` or `--env NODE_ENV`) this will inherit from your current shell environment variable. Otherwise, set to a string (ex: `{NODE_ENV: 'production'}` or `--env NODE_ENV=production`) to set the exact value manually.\n\nThis option is only supported in `source=\"local\"` mode. `source=\"remote\"` does not support this feature yet.\n\n#### packageOptions.packageLookupFields\n\n**Type**: `string[]`\n**Example**: `\"packageLookupFields\": [\"svelte\"]`\n\nSet custom lookup fields for dependency `package.json` file entrypoints, in addition to the defaults like \"module\", \"main\", etc.\n\nThis option is only supported in `source=\"local\"` mode. `source=\"remote\"` does not support this feature yet.\n\n#### packageOptions.packageExportLookupFields\n\n**Type**: `string[]`\n**Example**: `\"packageExportLookupFields\": [\"svelte\"]`\n\nSet custom lookup fields for dependency `package.json` [\"exports\" mappings.](https://nodejs.org/api/packages.html#packages_package_entry_points)\n\nThis option is only supported in `source=\"local\"` mode. `source=\"remote\"` does not support this feature yet.\n\n#### packageOptions.rollup\n\n**Type**: `Object`\n\nAllows customization of Snowpack's internal Rollup configuration.\n\nSnowpack uses Rollup internally to install your packages. This `rollup` config option gives you deeper control over the internal Rollup configuration that we use.\n\n- packageOptions.rollup.plugins | `RollupPlugin[]` - Provide an array of custom Rollup plugins that will run on every installed package. Useful for dealing with non-standard file types in your npm packages.\n- packageOptions.rollup.dedupe | `string[]` - If needed, deduplicate multiple versions/copies of a packages to a single one. This helps prevent issues with some packages when multiple versions are installed from your node_modules tree. See [rollup-plugin-node-resolve](https://github.com/rollup/plugins/tree/master/packages/node-resolve#usage) for more documentation.\n- packageOptions.rollup.context | `string` - Specify top-level `this` value. Useful to silence install errors caused by legacy common.js packages that reference a top-level this variable, which does not exist in a pure ESM environment. Note that the `'THIS_IS_UNDEFINED'` warning (\"'this' keyword is equivalent to 'undefined' ... and has been rewritten\") is silenced by default, unless `--verbose` is used.\n\nThis option is only supported in `source=\"local\"` mode. `source=\"remote\"` does not support custom Rollup install options.\n\n### packageOptions.source=remote\n\nEnable streaming package imports. Load dependencies from our remote CDN. Manage your dependencies using `snowpack` and a project `snowpack.deps.json` file.\n\n[Learn more about Streaming Remote Imports](/guides/streaming-imports).\n\n#### packageOptions.origin\n\n**Type**: `string`\n**Default**: `https://pkg.snowpack.dev`\n\nThe remote origin to import packages from. When you import a new package, Snowpack will fetch those resources from this URL.\n\nCurrently, the origin must implement a specific response format that Snowpack can parse for ESM. In future versions of Snowpack we plan to add support for custom CDNs and import origins.\n\n#### packageOptions.cache\n\n**Type**: `string`\n**Default**: `.snowpack`\n\nThe location of your project cache folder, relative to the project root. Snowpack will save cached data to this folder. For example, if `packageOptions.types` is set to true, Snowpack will save TypeScript types to a `types` directory within this folder.\n\n#### packageOptions.types\n\n**Type**: `boolean`\n**Default**: `false`\n\nIf true, Snowpack will download TypeScript types for every package.\n\n## buildOptions\n\n**Type**: `object` (option name: value)\n\nConfigure your final build.\n\n### buildOptions.out\n\n**Type**: `string`\n**Default**: `\"build\"`\n\nThe local directory that we output your final build to.\n\n### buildOptions.baseUrl\n\n**Type**: `string`\n**Default**: `/`\n\nIn your HTML, replace all instances of `%PUBLIC_URL%` with this\n\nInspired by the same [Create React App](https://create-react-app.dev/docs/using-the-public-folder/) concept. This is useful if your app will be deployed to a subdirectory.\n\n### buildOptions.clean\n\n**Type**: `boolean`\n**Default**: `true`\n\nSet to `false` to prevent Snowpack from deleting the build output folder (`buildOptions.out`) between builds.\n\n### buildOptions.cacheDirPath\n\n**Type**: `string` \n**Default**: `./node_modules/.cache/snowpack`\n\nSpecify the cache directory in which bundled Node modules will be cached.\n\n### buildOptions.webModulesUrl\n\n_NOTE:_ Deprecated, see `buildOptions.metaUrlPath`.\n\n### buildOptions.metaDir\n\n_NOTE:_ Deprecated, see `buildOptions.metaUrlPath`.\n\n### buildOptions.metaUrlPath\n\n**Type**: `string`\n**Default**: `_snowpack`\n\nRename the default directory for Snowpack metadata. In every build, Snowpack creates meta files for loading things like [HMR](/concepts/hot-module-replacement), [Environment Variables](/reference/environment-variables), and your built npm packages.\n\nWhen you build your project, this will be a path on disk relative to the `buildOptions.out` directory.\n\n### buildOptions.sourcemap\n\n**Type**: `boolean`\n**Default**: `false`\n\nGenerates source maps.\n\n**_Experimental:_** Still in progress, you may encounter some issues when using source maps until this support is finalized.\n\n### buildOptions.watch\n\n**Type**: `boolean`\n**Default**: `false`\n\nRun Snowpack's build pipeline through a file watcher. This option works best for local development when you have a custom frontend server (ex: Rails, PHP, etc.) and the Snowpack dev server cannot be used.\n\n### buildOptions.htmlFragments\n\n**Type**: `boolean`\n**Default**: `false`\n\nToggles whether HTML fragments are transformed like full HTML pages.\n\nHTML fragments are HTML files not starting with ``.\n\n### buildOptions.jsxFactory\n\n**Type**: `string`\n**Default**: `React.createElement` (or `h` if Preact import is detected)\n\nSet the name of the function used to create JSX elements.\n\n### buildOptions.jsxFragment\n\n**Type**: `string`\n**Default**: `React.Fragment` (or `Fragment` if Preact import is detected)\n\nSet the name of the function used to create JSX fragments.\n\n### buildOptions.jsxInject\n\n**Type**: `string`\n**Default**: `undefined`\n\nIf set, this string can be used to automatically inject JSX imports for every JSX/TSX file.\nReact users might use `import React from 'react'` whereas Preact users might use `import { h, Fragment } from 'preact'`.\n\n## testOptions\n\nConfigure your tests.\n\n### testOptions.files\n\n**Type**: `string[]`\n**Default**: `[\"__tests__/**/*\", \"**/*.@(spec|test).*\"]`\n\nSpecifies your test files. If `NODE_ENV` is set to \"test\", Snowpack includes these files in your site build and scan them for installable dependencies. Otherwise, Snowpack excludes these files.\n\n## experiments\n\n**Type**: `object` (option name: value)\n\nThis section is currently empty! In the future, this section may be used for experimental and not yet finalized.\n" }, { "path": "docs/reference/environment-variables.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Environment Variables\ndescription: Using environment variables with Snowpack\n---\n\nFor your safety, Snowpack supports only environment variables which begin with `SNOWPACK_PUBLIC_*`. We do this because everything in your web application is sent to the browser, and we don't want you to accidentally share sensitive keys/env variables with your public web application. Prefixing your frontend web env variables with `SNOWPACK_PUBLIC_` is a good reminder that they will be shared with the world.\n\n## Setting environment variables\n\nYou can set environment variables with snowpack in three different ways:\n\n### Option 1: CLI\n\nSet environment variables when you run the snowpack CLI:\n\n```bash\nSNOWPACK_PUBLIC_API_URL=api.google.com snowpack dev\n```\n\n### Option 2: Config file\n\n**New in v3.1.0** Pass environment variables as an object to the `env` property. Note that these environment variables do not need to use the `SNOWPACK_PUBLIC_` prefix and anything set here will be available on `import.meta.env` (see below).\n\n```js\n// snowpack.config.mjs\nexport default {\n env: {\n API_URL: 'api.google.com',\n },\n};\n```\n\n**In prior versions**, we recommended setting environment variables by adding to `process.env.*` at the top of your `snowpack.config.mjs` file. This ended up being pretty confusing, so using the `env` property is now the recommended approach.\n\n```js\n// snowpack.config.mjs\nprocess.env.SNOWPACK_PUBLIC_API_URL = 'api.google.com';\n// ...rest of config\n```\n\n### Option 3: Plugin\n\nUse a plugin such as [plugin-dotenv](https://www.npmjs.com/package/@snowpack/plugin-dotenv) to load environment variables from a `.env` file.\n\n## Reading environment variables\n\nYou can read environment variables directly in your web application via `import.meta.env`. If you've ever used `process.env` in Create React App or any Webpack application, this behaves exactly the same.\n\n```js\n// `import.meta.env` - Read process.env variables in your web app\nfetch(`${import.meta.env.SNOWPACK_PUBLIC_API_URL}/users`).then(...)\n\n// Supports destructuring as well:\nconst {SNOWPACK_PUBLIC_API_URL} = import.meta.env;\nfetch(`${SNOWPACK_PUBLIC_API_URL}/users`).then(...)\n\n// Instead of `import.meta.env.NODE_ENV` use `import.meta.env.MODE`\nif (import.meta.env.MODE === 'development') {\n // ...\n```\n\n`import.meta.env.MODE` and `import.meta.env.NODE_ENV` are also both set to the current `process.env.NODE_ENV` value, so that you can change app behavior based on dev vs. build. The env value is set to `development` during `snowpack dev`, and `production` during `snowpack build`. Use this in your application instead of `process.env.NODE_ENV`.\n\nYou can also use environment variables in HTML files. All occurrences of `%SNOWPACK_PUBLIC_*%`, `%PUBLIC_URL%`, and `%MODE%` will be replaced at build time.\n\n**Remember:** that these env variables are statically injected into your application for everyone at **build time**, and not runtime.\n" }, { "path": "docs/reference/hot-module-replacement.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Hot Module Replacement (HMR) API\ndescription: Snowpack implements HMR via the esm-hmr spec, an attempted standard for ESM-based Hot Module Replacement (HMR).\n---\n\nSnowpack implements HMR via the [esm-hmr](https://github.com/pikapkg/esm-hmr) spec, an attempted standard for ESM-based Hot Module Replacement (HMR).\n\n```js\n// HMR Code Snippet Example\nif (import.meta.hot) {\n import.meta.hot.accept(({module}) => {\n // Accept the module, apply it into your application.\n });\n}\n```\n\nFull API Reference: [snowpack/esm-hmr on GitHub](https://github.com/snowpackjs/esm-hmr)\n\n[Learn more](/concepts/hot-module-replacement) about HMR, Fast Refresh, and how it's meant to work in Snowpack.\n" }, { "path": "docs/reference/javascript-interface.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: JavaScript API\ndescription: Snowpack's JavaScript API is for anyone who wants to integrate with some custom build pipeline or server-side rendering engine.\n---\n\nMost users will interact with Snowpack via the [command-line](/reference/cli-command-line-interface) interface (CLI). However, Snowpack also ships a JavaScript API for anyone to build on top of.\n\nThis page contains reference information on Snowpack's public API and all related data types. A full set of all data types defined within the project (public and private) can be found in [the package's `types.d.ts` file](https://unpkg.com/browse/snowpack@3.0.10/lib/types.d.ts).\n\n### createConfiguration()\n\n`createConfiguration(config?: SnowpackUserConfig) => SnowpackConfig`\n\n```js\nimport {createConfiguration} from 'snowpack';\nconst config = createConfiguration({...});\n```\n\nAlmost everything that you do with Snowpack requires a configuration object. Snowpack is designed to work with zero config, and the `config` argument that this function takes can be full, empty, or only contain a couple of properties. The rest of the configuration object will be filled out with Snowpack's usual set of defaults, outlined in our [snowpack.config.mjs documentation.](/reference/configuration).\n\nThe easiest way to think about the difference is that `SnowpackUserConfig` is the externally-documented configuration format, and `SnowpackConfig` is our internal representation with all optional/undefined values populated with the actual defaults.\n\n### loadConfiguration()\n\n`loadConfiguration(overrides?: SnowpackUserConfig, configPath?: string | undefined) => Promise`\n\n```js\nimport {loadConfiguration} from 'snowpack';\nconst config = await loadConfiguration({...}, '/path/to/snowpack.config.mjs');\n```\n\nSimilar to `createConfiguration`, but this function will actually check the file system to load a configuration file from disk.\n\nAll paths within that configuration file are relative to the file itself.\n\n### startServer()\n\n`function startServer({config: SnowpackUserConfig}) => Promise`\n\n```js\nimport {startServer} from 'snowpack';\nconst config = createConfiguration({...});\nconst server = await startServer({config}); // returns: SnowpackDevServer\n```\n\nStart a new Snowpack dev server instance. This is the equivalent of running `snowpack dev` on the command line.\n\nOnce started, you can load files from your dev server and Snowpack will build them as requested. This is an important feature to understand: Snowpack's dev server does zero file building on startup, and instead builds files only once they are requested via the server's `loadUrl` method.\n\n### SnowpackDevServer\n\n#### SnowpackDevServer.port\n\nThe port that the server is listening on.\n\n#### SnowpackDevServer.loadUrl()\n\n`loadUrl(reqUrl: string, opt?: {isSSR?: boolean; allowStale?: boolean; encoding?: string}): Promise>;`\n\n```ts\nconst server = await startServer({config});\nconst {contents} = server.loadUrl('/dist/index.js', {...});\n```\n\nLoad a file and return the result. On the first request of a URL, this will kick off a build that will then be cached for all future requests during the life of the server.\n\nYou can pass `allowStale: true` to enable Snowpack's cold cache for cached results from past sessions. However, Snowpack provides no guarentee on the freshness of the cold-cache data.\n\n#### SnowpackDevServer.getUrlForFile()\n\n`getUrlForFile(fileLoc: string) => string | null;`\n\n```ts\nconst server = await startServer({config});\nconst fileUrl = server.getUrlForFile('/path/to/index.jsx');\nconst {contents} = server.loadUrl(fileUrl, {...});\n```\n\nA helper function to find the final hosted URL for any source file. Useful when combined with `loadUrl`, since you may only know a file's location on disk without knowing it's final hosted URL.\n\n#### SnowpackDevServer.getUrlForPackage()\n\n`getUrlForPackage(packageSpec: string) => Promise`\n\n```ts\nconst server = await startServer({config});\nconst pkgUrl = await server.getUrlForPackage('preact');\n```\n\nA helper function to find the final hosted URL of any dependency.\n\n#### SnowpackDevServer.sendResponseError()\n\n`sendResponseError(req: http.IncomingMessage, res: http.ServerResponse, status: number) => void;`\n\nA helper function to send an error response in a server response handler. Useful when integrating Snowpack with Express, Koa, or any other Node.js server.\n\n#### SnowpackDevServer.onFileChange()\n\n`onFileChange({filePath: string}) => void;`\n\nListen for watched file change events. Useful for situations where you might want to watch the file system for changes yourself, and can save overhead/performance by hooking into our already-running watcher.\n\n#### SnowpackDevServer.shutdown()\n\n`shutdown() => Promise;`\n\n```ts\nconst server = await startServer({config});\nawait server.shutdown();\n```\n\nShut down the Snowpack dev server. Cleanup any long-running commands, file watchers, etc.\n\n#### SnowpackDevServer.getServerRuntime()\n\n`getServerRuntime({invalidateOnChange?: boolean}) => ServerRuntime;`\n\n```ts\nconst server = await startServer({config});\nconst runtime = server.getServerRuntime();\nconst {helloWorld} = (await runtime.importModule('/dist/index.js')).exports;\nhelloWorld();\n```\n\nReturns an ESM Server Runtime that lets Node.js import modules directly out of Snowpack's build cache. Useful for SSR, test running frontend code, and the overall unification of your build pipeline.\n\nFor more information, check out our guide on [Server-Side Rendering](/guides/server-side-render) using the `getServerRuntime()` API.\n\n#### ServerRuntime\n\n```ts\ninterface ServerRuntime {\n /** Import a Snowpack-build JavaScript file into Node.js. */\n importModule(url: string) => Promise;\n /** Invalidate a module in the internal runtime cache. */\n invalidateModule(url: string) => void;\n}\n```\n\n#### ServerRuntimeModule\n\n```ts\ninterface ServerRuntimeModule {\n /** The imported module. */\n exports: any;\n /** References to all internal CSS imports. Useful for CSS extraction. */\n css: string[];\n}\n```\n\n### build()\n\n`build({config: SnowpackUserConfig}) => Promise`\n\n```js\nimport {build} from 'snowpack';\nconst config = createConfiguration({...});\nconst {result} = await build({config}); // returns: SnowpackBuildResult\n```\n\n#### SnowpackBuildResult.result\n\nAn in-memory manifest of all build inputs & output files.\n\n#### SnowpackBuildResult.shutdown\n\nIn `--watch` mode, the `build()` function will resolve but the build itself will continue. Use this function to shut down the build watcher.\n\nIn normal build mode (non-watch mode) this function will throw with a warning.\n\n#### SnowpackBuildResult.onFileChange\n\nIn `--watch` mode, the `build()` function will resolve but the build itself will continue. Use this function to respond to file change events without having to spin up your own file watcher.\n\nIn normal build mode (non-watch mode) this function will throw with a warning.\n\n### getUrlForFile()\n\n`getUrlForFile(fileLoc: string, config: SnowpackConfig) => string | null`\n\n```js\nimport {getUrlForFile} from 'snowpack';\nconst fileUrl = getUrlForFile('/path/to/file.js', config);\n```\n\nA helper function to find the final hosted URL for any source file. Useful when combined with `loadUrl`, since you may only know a file's location on disk without knowing it's final hosted URL.\n\nSimilar to `SnowpackDevServer.getUrlForFile()`, but requires a second `config` argument to inform the result.\n\n### clearCache()\n\n`clearCache() => Promise`\n\n```js\nimport {clearCache} from 'snowpack';\nawait clearCache();\n```\n\nEquivalent of using the `--reload` flag with the `snowpack` CLI. Clears all cached data in Snowpack. Useful for troubleshooting, or clearing the cache after making some change that Snowpack couldn't detect.\n\n### logger\n\n```js\nimport {logger} from 'snowpack';\n```\n\nYou can control Snowpack's internal logger directly by importing it. Note that this is an advanced feature not needed for most users. Instead, use the `verbose` config option to enable debug logging and control log message verbosity.\n" }, { "path": "docs/reference/plugins.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Plugin API\ndescription: The Snowpack Plugin API and how to use it.\n---\n\nLooking to get started writing your own plugin? Check out our [Plugin Guide](/guides/plugins) for an overview of how plugins work and a walk-through to help you create your own.\n\nLooking for a good summary? Check out our [\"SnowpackPlugin\" TypeScript definition](https://github.com/withastro/snowpack/blob/main/snowpack/src/types.ts#L130) for a fully documented and up-to-date overview of the Plugin API and all supported options.\n\n### Overview\n\n```js\n// my-first-snowpack-plugin.js\nmodule.exports = function (snowpackConfig, pluginOptions) {\n return {\n name: 'my-first-snowpack-plugin',\n config() {\n console.log('Success!');\n },\n };\n};\n\n// To use this plugin, add it to your snowpack.config.mjs:\n//\n// export default {\n// plugins: [\n// [\"./my-first-snowpack-plugin.js\", {/* pluginOptions */ }],\n// ],\n// };\n```\n\nA **Snowpack Plugin** is an object interface that lets you customize Snowpack's behavior. Snowpack provides different hooks for your plugin to connect to. For example, you can add a plugin to handle Svelte files, optimize CSS, convert SVGs to React components, run TypeScript during development, and much more.\n\nSnowpack's plugin interface is inspired by [Rollup](https://rollupjs.org/). If you've ever written a Rollup plugin before, then hopefully these concepts and terms feel familiar.\n\n### Lifecycle Hooks\n\n#### config()\n\n```js\nconfig(snowpackConfig) {\n // modify or read from the Snowpack configuration object\n}\n```\n\nUse this hook to read or make changes to the completed Snowpack configuration object. This is currently the recommended way to access the Snowpack configuration, since the one passed to the top-level plugin function is not yet finalized and may be incomplete.\n\n#### load()\n\nLoad a file from disk and build it for your application. This is most useful for taking a file type that can't run in the browser (TypeScript, Sass, Vue, Svelte) and returning JS and/or CSS. It can even be used to load JS/CSS files directly from disk with a build step like Babel or PostCSS.\n\n#### transform()\n\nTransform a file's contents. Useful for making changes to all types of build output (JS, CSS, etc.) regardless of how they were originally loaded from disk.\n\n#### run()\n\nRun a CLI command, and connect it's output into the Snowpack console. Useful for connecting tools like TypeScript.\n\n#### optimize()\n\nSnowpack’s bundler plugin API is still experimental and may change in a future release. See our official bundler plugins for an example of using the current interface:\n\n- Example: [@snowpack/plugin-webpack](https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack)\n- Example: [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle)\n\n#### onChange()\n\nGet notified any time a watched file changes. This can be useful when paired with the `markChanged()` plugin method, to mark multiple files changed at once.\n\nSee [@snowpack/plugin-sass](https://github.com/withastro/snowpack/tree/main/plugins/plugin-sass/plugin.js) for an example of how to use this method.\n\n### Plugin Properties\n\n#### knownEntrypoints\n\n```\n// Example: Svelte plugin needs to make sure this dependency can be loaded.\nknownEntrypoints: [\"svelte/internal\"]\n```\n\nA list of any npm dependencies that are added as a part of `load()` or `transform()` that Snowpack will need to know about. Snowpack analyzes most dependency imports automatically when it scans the source code of a project, but some imports are added as a part of a `load()` or `transform()` step, which means that Snowpack would never see them. If your plugin does this, add them here.\n\n#### resolve\n\n```\n// Example: Sass plugin compiles Sass files to CSS.\nresolve: {input: [\".sass\"], output: [\".css\"]}\n\n// Example: Svelte plugin compiles Svelte files to JS & CSS.\nresolve: {input: [\".svelte\"], output: [\".js\", \".css\"]}\n```\n\nIf your plugin defines a `load()` method, Snowpack will need to know what files your plugin is responsible to load and what its output will look like. **`resolve` is needed only if you also define a `load()` method.**\n\n- `input`: An array of file extensions that this plugin will load.\n- `output`: The set of all file extensions that this plugin's `load()` method will output.\n- [Full TypeScript definition](https://github.com/withastro/snowpack/tree/main/snowpack/src/types/snowpack.ts).\n\n### Plugin Methods\n\n#### this.markChanged()\n\n```js\n// Called inside any plugin hooks\nthis.markChanged('/some/file/path.scss');\n```\n\nManually mark a file as changed, regardless of whether the file changed on disk or not. This can be useful when paired with the `markChanged()` plugin hook, to mark multiple files changed at once.\n\n- See [@snowpack/plugin-sass](https://github.com/withastro/snowpack/tree/main/plugins/plugin-sass/plugin.js) for an example of how to use this method.\n- [Full TypeScript definition](https://github.com/withastro/snowpack/blob/main/snowpack/src/types.ts).\n" }, { "path": "docs/reference/supported-files.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Supported Files\ndescription: Snowpack ships with built-in support for many file types including json, js, ts, jsx, css, css modules, and images.\n---\n\nSnowpack ships with built-in support for the following file types, no configuration required:\n\n- JavaScript (`.js`, `.mjs`)\n- TypeScript (`.ts`, `.tsx`)\n- JSON (`.json`)\n- JSX (`.jsx`, `.tsx`)\n- CSS (`.css`)\n- CSS Modules (`.module.css`)\n- Images & Assets (`.svg`, `.jpg`, `.png`, etc.)\n- WASM (`.wasm`)\n\nTo customize build behavior and support new languages [check out our tooling guide](/guides/connecting-tools)\n\n### JavaScript & ESM\n\nSnowpack was designed to support JavaScript's native ES Module (ESM) syntax. ESM lets you define explicit imports & exports that browsers and build tools can better understand and optimize for. If you're familiar with the `import` and `export` keywords in JavaScript, then you already know ESM!\n\n```js\n// ESM Example - src/user.js\nexport function getUser() {\n /* ... */\n}\n\n// src/index.js\nimport {getUser} from './user.js';\n```\n\nAll modern browsers support ESM, so Snowpack is able to ship this code directly to the browser during development. This is what makes Snowpack's **unbundled development** workflow possible.\n\nSnowpack also lets you import non-JavaScript files directly in your application. Snowpack handles all this for you automatically so there's nothing to configure, using the following logic:\n\n### TypeScript\n\nSnowpack includes built-in support to build TypeScript files (`*.ts`) to JavaScript.\n\nNote that this built-in support is build only. By default, Snowpack does not type-check your TypeScript code. To integrate type checking into your development/build workflow, add the [@snowpack/plugin-typescript](https://www.npmjs.com/package/@snowpack/plugin-typescript) plugin.\n\n### JSX\n\nSnowpack includes built-in support to build JSX files (`*.jsx` & `*.tsx`) to JavaScript.\n\nIf you are using Preact, Snowpack will detect this and switch to use the Preact-style JSX `h()` function. This is all done automatically for you. If you need to customize this behavior, consider adding the [@snowpack/plugin-babel](https://www.npmjs.com/package/@snowpack/plugin-babel) plugin for full compiler customization via Babel.\n\n**Note: Snowpack's default build does not support JSX in `.js`/`.ts` files.** If you can't use the `.jsx`/`.tsx` file extension, you can use [@snowpack/plugin-babel](https://www.npmjs.com/package/@snowpack/plugin-babel) to build your JavaScript instead.\n\n### JSON\n\n```js\n// Load the JSON object via the default export\nimport json from './data.json';\n```\n\nSnowpack supports importing JSON files directly into your application. Imported files return the full JSON object in the default import.\n\n### CSS\n\n```js\n// Load and inject 'style.css' onto the page\nimport './style.css';\n```\n\nSnowpack supports importing CSS files directly into your application. Imported styles expose no exports, but importing one will automatically add those styles to the page. This works for all CSS files by default, and can support compile-to-CSS languages like Sass & Less via plugins.\n\nIf you prefer not to write CSS, Snowpack also supports all popular CSS-in-JS libraries (ex: styled-components) for styling.\n\n### CSS Modules\n\n```js\n// 1. Converts './style.module.css' classnames to unique, scoped values.\n// 2. Returns an object mapping the original classnames to their final, scoped value.\nimport styles from './style.module.css';\n\n// This example uses JSX, but you can use CSS Modules with any framework.\nreturn
Your Error Message
;\n```\n\nSnowpack supports CSS Modules using the `[name].module.css` naming convention. Like any CSS file, importing one will automatically apply that CSS to the page. However, CSS Modules export a special default `styles` object that maps your original classnames to unique identifiers.\n\nCSS Modules help you enforce component scoping & isolation on the frontend with unique-generated class names for your stylesheets.\n\n### Other Assets\n\n```jsx\nimport imgReference from './image.png'; // img === '/src/image.png'\nimport svgReference from './image.svg'; // svg === '/src/image.svg'\nimport txtReference from './words.txt'; // txt === '/src/words.txt'\n\n// This example uses JSX, but you can use import references with any framework.\n;\n```\n\nAll other assets not explicitly mentioned above can be imported via ESM `import` and will return a URL reference to the final built asset. This can be useful for referencing non-JS assets by URL, like creating an image element with a `src` attribute pointing to that image.\n\n### WASM\n\n```js\n// Loads and intializes the requested WASM file\nconst wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));\n```\n\nSnowpack supports loading WASM files directly into your application using the browser's [`WebAssembly`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly) API. Read our [WASM guide](/guides/wasm) to learn more.\n\n### Import NPM Packages\n\n```js\n// Returns the React & React-DOM npm packages\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n```\n\nSnowpack lets you import npm packages directly in the browser. Even if a package was published using a legacy format, Snowpack will up-convert the package to ESM before serving it to the browser.\n\nWhen you start up your dev server or run a new build, you may see a message that Snowpack is \"installing dependencies\". This means that Snowpack is converting your dependencies to run in the browser. This needs to run only once, or until you next change your dependency tree by adding or removing dependencies.\n" }, { "path": "docs/tutorials/getting-started.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: 'Starting a New Project'\ndescription: This guide shows you how to set up Snowpack from scratch in a Node.js project. Along the way learn key concepts of Snowpack and unbundled development.\n---\n\nWelcome to Snowpack! This guide shows you how to set up Snowpack from scratch in a Node.js project. Along the way learn key concepts of Snowpack and unbundled development\n\nIn this guide you'll learn\n\n- What makes Snowpack so fast? (hint: unbundled development!)\n- What are JavaScript ES Modules (ESM)?\n- Creating your first project\n- Starting Snowpack's development server\n- Building your first project\n- Customizing Snowpack with plugins\n\n> 💡 Tip: This guide walks you through creating the [Snowpack minimal app template](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/) from scratch. Spin up a copy of the final [using the create-snowpack-app command line tool](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/).\n\nPrerequisites: Snowpack is a command line tool installed from npm. This guide assumes a basic understanding of JavaScript, npm, and how to run commands in the terminal.\n\nSnowpack also requires a modern browser during development. Any semi-recent release of Firefox, Chrome, Safari, or Edge for example.\n\n## Install Snowpack\n\nTo get started, create an empty directory for your new Snowpack project. Create the new directory using your favorite GUI or by running the command line as shown here:\n\n```bash\nmkdir my-first-snowpack\ncd my-first-snowpack\n```\n\nSnowpack is a package installed from npm. Create a `package.json` file in your project directory to manage your dependencies. Run this command in your project to create a simple, empty `package.json`:\n\n```bash\nnpm init\n```\n\n> 💡 Tip: In a hurry? Run `npm init --yes` to skip the prompts and generate a package.json with npm's default, recommended fields.\n\nNow install Snowpack to your `dev dependencies` with this command:\n\n```\nnpm install --save-dev snowpack\n```\n\n> 💡 Tip: Snowpack can install globally via `npm install -g snowpack`. But, we recommend installing locally in every project via `--save-dev`/`--dev`. Run the Snowpack command-line tool locally via package.json \"scripts\", npm's `npx snowpack`, or via `yarn snowpack`.\n\n## Snowpack's development server\n\nAdding a basic HTML file allows us to run Snowpack's development server, an instant development environment for unbundled development. The development server builds a file only when it's requested by the browser. That means that Snowpack can start up instantly (usually in **<50 ms**) and scale to infinitely large projects without slowing down. In contrast, it's common to see 30+ second development startup times when building large apps with a traditional bundler.\n\nCreate an `index.html` in your project with the following contents:\n\n```html\n\n\n \n \n \n \n Starter Snowpack App\n \n \n

Welcome to Snowpack!

\n \n\n```\n\nAdd the Snowpack development server to `package.json` under as the `start` script:\n\n```diff\n \"scripts\": {\n+ \"start\": \"snowpack dev\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n\n```\n\nRun the following on the command line to start the Snowpack development server\n\n```\nnpm run start\n```\n\nIf all went well, Snowpack automatically opens your site in a new browser!\n\n
\"Side
\n\nCongratulations! You now have a Snowpack project up and running! Try changing the index.html and saving while the server is running, the site should refresh and show changes automatically.\n\n## Using JavaScript\n\nLearn more about how Snowpack processes JavaScript by adding a simple \"hello world\" script. JavaScript's native ES Module (ESM) syntax is the magic behind Snowpack's unbundled development. There's a good chance that you're already familiar with ESM, and you just don't know it! ESM lets you define explicit imports & exports that browsers and build tools can better understand and optimize for. If you're familiar with the `import` and `export` keywords in JavaScript, then you already know ESM!\n\nCreate a new JavaScript file called `hello-world.js` that exports a single `helloWorld` function:\n\n```js\n// my-first-snowpack/hello-world.js\nexport function helloWorld() {\n console.log('Hello World!');\n}\n```\n\nThen create an `index.js` that imports your new module using ESM syntax:\n\n```js\n// my-first-snowpack/index.js\nimport {helloWorld} from './hello-world.js';\n\nhelloWorld();\n```\n\nSnowpack scans for files referenced in `index.html`, so add your `index.js` to `index.html` at the bottom of the `` tag:\n\n```diff\n \n

Welcome to Snowpack!

\n+ \n \n```\n\nCheck your console on your Snowpack site. You should see \"Hello World!\" Try making a change to the module. Snowpack rebuilds that module without rebuilding the rest of your code. Snowpack builds **every file individually and caches it indefinitely.** Your development environment never builds a file more than once and your browser never downloads a file twice (until it changes). This is the real power of unbundled development, and the secret behind what makes Snowpack so fast.\n\n
\"Gif
\n\n## Using npm Packages\n\nSnowpack builds any npm package into ESM web modules. npm packages are mainly published using a module syntax (Common.js, or CJS) that can't run on the web without some build processing. Even if you write your application using browser-native ESM `import` and `export` statements that would all run directly in the browser, trying to import any one npm package forces you back into bundled development.\n\n**Snowpack takes a different approach:** instead of bundling your entire application for this one requirement, Snowpack processes your dependencies separately. Here's how it works:\n\n```\nnode_modules/react/**/* -> http://localhost:3000/web_modules/react.js\nnode_modules/react-dom/**/* -> http://localhost:3000/web_modules/react-dom.js\n```\n\n1. Snowpack scans your website/application for all used npm packages.\n2. Snowpack reads these installed dependencies from your `node_modules` directory.\n3. Snowpack bundles all your dependencies separately into single JavaScript files. For example: `react` and `react-dom` convert to `react.js` and `react-dom.js`, respectively.\n4. Each resulting file runs directly in the browser, and imported via ESM `import` statements.\n5. Because your dependencies rarely change, Snowpack rarely needs to rebuild them.\n\nAfter Snowpack builds your dependencies, import any package and run it directly in the browser with zero extra bundling or tooling. This ability to import npm packages natively in the browser (without a bundler) is the foundation that all unbundled development and the rest of Snowpack builds on top of.\n\nSnowpack lets you import npm packages directly in the browser. Even if a package is using a legacy format, Snowpack up-converts the package to ESM before serving it to the browser.\n\n> 💡 Tip: when you start up your development server or run a new build, you may see a message that Snowpack is \"installing dependencies.\" This means that Snowpack is converting your dependencies to run in the browser.\n\nInstall the canvas-confetti package from npm and use it with the following command:\n\n```bash\nnpm install --save canvas-confetti\n```\n\nNow head to `index.js` and add this code:\n\n```diff\nhelloWorld();\n\n+import confetti from 'canvas-confetti';\n+confetti.create(document.getElementById('canvas'), {\n+ resize: true,\n+ useWorker: true,\n+ })({ particleCount: 200, spread: 200 });\n```\n\n> 💡 Tip: did you know, with Snowpack you can also add this code directly to your HTML if you prefer!\n\nYou should now see a nifty confetti effect on your site.\n\n
\"Gif
\n\n> 💡 Tip: not all npm modules may work well in the browser. Modules dependent on Node.js built-in modules need a polyfill. You can enable this polyfill by setting Snowpack’s [`packageOptions.polyfillNode` configuration option](/reference/configuration#packageoptions.polyfillnode) to `true`.\n\n## Adding CSS\n\nSnowpack natively supports many file types. CSS and CSS Modules for example. Add a simple CSS file to see how it works.\n\nAdd the following css as a new `index.css` file:\n\n```css\nbody {\n font-family: sans-serif;\n}\n```\n\nInclude it in your project by adding it to index.html in the ``\n\n```diff\n \n+ \n Starter Snowpack App\n```\n\n
\"image
\n\n## Build for production/deployment\n\nOK you've now built a very simple website and you want to launch it. It's time to use `snowpack build`.\n\nBy default, `snowpack build` builds your site using the same unbundled approach as the `dev` command. Building is integrated with your development setup which guarantees a near-exact copy of the same code that you saw during development.\n\nAdd the `snowpack build` command to package.json so it's easier to run on the command line:\n\n```diff\n \"scripts\": {\n \"start\": \"snowpack dev\",\n+ \"build\": \"snowpack build\",\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n\n },\n\n```\n\nNow you can run this in your terminal:\n\n```bash\nnpm run build\n```\n\nYou should see a new directory called `build` that contains a copy of your Snowpack project ready for deployment.\n\n
\"GIF
\n\n## Next Steps\n\nYou've just learned the major concepts of unbundled developments and built a tiny Snowpack project. But that's just the beginning with Snowpack.\n\nWhat's next? Our docs site has several great resources\n\n- [Bundling for production guide](/guides/optimize-and-bundle): how to connect a bundler like Webpack to optimize code for production deployments\n- [Plugins](/plugins): a list of plugins that allow you to integrate your favorite tools with Snowpack\n- [Templates/Examples](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/cli): pre-built projects you can build on or just explore using many popular frameworks and tools\n- [Guides](/guides): Step by step deep dives on building with and for Snowpack. Includes frameworks like React and Svelte.\n\nIf you have any questions, comments, or corrections, we'd love to hear from you in the Snowpack [discussion](https://github.com/withastro/snowpack/discussions) forum or our [Snowpack Discord community](https://discord.gg/rS8SnRk).\n" }, { "path": "docs/tutorials/quick-start.md", "content": "---\nlayout: ../../layouts/content.astro\ntitle: Quick Start\ndescription: A very basic guide for developers who want to run Snowpack as quickly as possible.\n---\n\n### Install Snowpack\n\n```bash\n# npm:\nnpm install --save-dev snowpack\n# yarn:\nyarn add --dev snowpack\n# pnpm:\npnpm add --save-dev snowpack\n```\n\n### Run the Snowpack CLI\n\n```bash\nnpx snowpack [command]\nyarn run snowpack [command]\npnpm run snowpack [command]\n```\n\nThroughout our documentation, we'll use `snowpack [command]` to document the CLI. To run your locally installed version of Snowpack, add the `npx`/`yarn run`/`pnpm run` prefix of the package manager that you used to install Snowpack.\n\nFor long-term development, the best way to use Snowpack is with a package.json script. This reduces your own need to remember exact Snowpack commands/configuration, and lets you share some common scripts with the rest of your team (if applicable).\n\n```js\n// Recommended: package.json scripts\n// npm run start (or: \"yarn run ...\", \"pnpm run ...\")\n\"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\"\n}\n```\n\n### Serve your project locally\n\n```\nsnowpack dev\n```\n\nThis starts the local dev server for development. By default this serves your current working directory to the browser, and will look for an `index.html` file to start. You can customize which directories you want to serve via the [\"mount\"](/reference/configuration) configuration.\n\n### Build your project\n\n```\nsnowpack build\n```\n\nThis builds your project into a static `build/` directory that you can deploy anywhere. You can customize your build via [configuration](/reference/configuration).\n\n### See all commands & options\n\n```\nsnowpack --help\n```\n\nThe `--help` flag will display helpful output.\n" }, { "path": "docs/tutorials/react.md", "content": "---\nlayout: ../../layouts/content-with-cover.astro\ntitle: 'Getting Started with React'\ndescription: 'Get started with this in-depth tutorial on how to build React applications and websites with Snowpack and developer tools like React Fast Refresh'\ndate: 2020-12-01\ntags: communityGuide\ncover: '/img/ReactGuide.jpg'\nimg: '/img/ReactGuide.jpg'\n---\n\nSnowpack is a great fit for [React](https://reactjs.org/) projects of any size. It's easy to get started and can scale to projects containing thousands of components and pages without any impact on development speed. Unlike traditional React application tooling, Snowpack saves you from getting bogged down with complex bundler setups and configuration files.\n\nIn this guide, you'll go from an empty directory to a fully configured Snowpack project with support for React and several other useful developer tools. In the process, you'll learn:\n\n- How to set up your Snowpack development environment\n- Adding your first React component\n- Working with CSS, images and other web assets\n- Enabling [Fast Refresh](https://reactnative.dev/docs/fast-refresh) mode for React\n- Connecting your favorite tools\n\nPrerequisites: Snowpack is a command line tool installed from npm. This guide assumes a basic understanding of Node.js, npm, and how to run commands in the terminal. Knowledge of React is not required, Snowpack is a great way to learn React!\n\n> 💡 Tip: if you want to jump to the end to see a full featured React setup, the [Create Snowpack App React template](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react) comes with everything you'll learn in this guide plus other useful tools.\n\n## Getting started\n\nThe easiest way to start a new Snowpack project is with [Create Snowpack App](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/cli), a tool to set up Snowpack in a new directory. `@snowpack/project-template-minimal` is a Create Snowpack App template for a simple, bare-bones Snowpack project setup that the rest of this guide builds on.\n\nTo get started, open your terminal and head to a directory where you want to put your new project. Now run the following command in your terminal to create a new directory called `react-snowpack` with the minimal template automatically installed.\n\n```bash\nnpx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal\n```\n\nYou can now head to the new directory and start Snowpack with the following two commands:\n\n```bash\ncd react-snowpack\nnpm run start\n```\n\nYou should see your new website up and running!\n\n> 💡 Tip: the `README.md` in your new project contains useful information about what each file does.\n\n
\"screenshot
\n\nNow that you have a basic project up and running, to install React, run the following command in your project directory:\n\n```bash\nnpm install react react-dom --save\n```\n\n> 💡 Tip: add the `--use-yarn` or `--use-pnpm` flag to use something other than npm\n\n## Create your first React component\n\nReact relies on a special templating language called JSX. If you're familiar with React then you already know JSX: it's React's templating language that allows you to write something like `` or `
` directly in your JavaScript code.\n\nSnowpack has built in support for JSX in files using the `.jsx` extension. That means that there's no plugins or configuration needed to write your first React component. Rename `index.js` file to `index.jsx` so that Snowpack knows to handle JSX in the file:\n\n```bash\nmv index.js index.jsx\n```\n\n> 💡 Tip: you do not need to update your `index.html` script tag reference to point to `index.jsx`. Browsers don't speak JSX (or TypeScript, for that matter), so any compile-to-JS file formats compile to `.js` in the final browser build. This is good to keep in mind when you're referencing built files in HTML `\n \n```\n\n
\"screenshot
\n\nYou've just created your first React component in Snowpack!\n\n## Customize your project layout\n\nSince you'll be adding a bunch of new files, you probably don't want them crowding up your top-level root directly. Snowpack is flexible enough to support whatever project layout that you prefer. In this guide, you'll learn how to use a popular project pattern from the React community.\n\n```\n📁 src : your React components and their assets (CSS, images)\n ↳ index.jsx\n📁 public : global assets like images, fonts, icons, and global CSS\n ↳ index.css\n ↳ index.html\n```\n\nUse your favorite visual editor to rearrange and rename, or run these commands in the terminal:\n\n```bash\nmkdir src\nmkdir public\nmv index.jsx src/index.jsx\nmv index.html public/index.html\nmv index.css public/index.css\n```\n\nThis means if you are running Snowpack right now, the site is now broken as the files are all in different places. Lets add a \"mount\" configuration to update your site to your new project layout.\n\nThe `mount` configuration changes where Snowpack looks for and builds files. Every Snowpack project comes with a `snowpack.config.mjs` file for any configuration that you might need. Right now, you should see a configuration file with empty options. Add this to the empty `mount` object:\n\n```diff\n export default {\n mount: {\n- /* ... */\n+ // directory name: 'build directory'\n+ public: '/',\n+ src: '/dist',\n },\n };\n```\n\n\"The\n\n`mount` is part of the [Snowpack Configuration API](/reference/configuration). It allows you to customize the file structure of your project. The key is the name of the directory and the value is where you'd like them in the final build. With this new configuration, Snowpack builds files in `public` like `public/index.css` directory into `index.css`. It builds files in `src` like `src/index.js` into `/dist/index.js`, so you'll need to change that path in your `index.html`:\n\n```diff\n \n

Welcome to Snowpack!

\n
\n- \n+ \n \n```\n\nYou'll need to restart Snowpack for configuration file changes. When you start up again, if it worked, it should look the same.\n\nCreate a new file at `src/App.jsx` and paste the following code into this new file to create an `App` component:\n\n```jsx\nimport React, {useState, useEffect} from 'react';\n\nfunction App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Update the count (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n

\n Page has been open for {count} seconds.\n

\n
\n
\n );\n}\n\nexport default App;\n```\n\nNow include it in `index.jsx`\n\n```diff\n import React from 'react';\n import ReactDOM from 'react-dom';\n- ReactDOM.render(
\"HELLO WORLD\"
, document.getElementById('root'));\n+ import App from './App.jsx';\n+ ReactDOM.render(\n+ \n+ \n+ ,\n+ document.getElementById('root'),\n+ );\n```\n\n> 💡 Tip: [Strict Mode](https://reactjs.org/docs/strict-mode.html) is a tool for highlighting potential problems in React code.\n\nYou shouldn't need to restart Snowpack to see this, it should look like this:\n\n
\"screenshot
\n\n## Styling your project\n\nWhen you add assets like images or CSS, Snowpack includes them in your final build. If you already know React, this process should look pretty familiar.\n\n> 💡 Tip: as you're doing this, you should not need to reload the page or restart Snowpack. Snowpack automatically updates the project in the browser as you edit code.\n\nAdd this file [`logo.svg`](https://github.com/withastro/snowpack/blob/main/create-snowpack-app/app-template-react/src/logo.svg) to your `src` directory. Now you can import it into your `App.jsx` and use it in an `img` tag to display it.\n\n```diff\n import React, { useState, useEffect } from 'react';\n+ import logo from './logo.svg';\n\n function App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n+ \"logo\"\n

\n```\n\n

\"the
\n\nThe project already has index.css for global styles. For CSS that's only for a specific component, a common design pattern is to add it in a CSS file with the same base name as the component. The style file for `App.jsx` would be `App.css` with this pattern.\n\n> 💡 Tip: Snowpack has built-in support for [CSS Modules](/reference/supported-files) and if you'd like to use Sass there is an official [Sass Plugin](/guides/sass/).\n\nCreate `src/App.css` and add this CSS:\n\n```css\n.App {\n text-align: center;\n}\n\n.App p {\n margin: 0.4rem;\n}\n\n.App-logo {\n height: 40vmin;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n```\n\nTo use this CSS, head to `App.jsx` and import it\n\n```diff\n import logo from './logo.svg';\n+ import './App.css';\n```\n\n
\"The
\n\n## Making Snowpack Even Faster with Fast Refresh\n\n[React Fast Refresh](https://reactnative.dev/docs/fast-refresh)? What's that? It's a Snowpack enhancement that lets you push individual file changes to update the browser without refreshing the page or clearing component state.\n\nReact projects are often interactive and include state. For example, this project you're building has a state that is the amount of time on the page. When developing with state it's useful not to lose it while you edit code. React Fast Refresh shows you updates without refreshing the entire page. Showing you how to add this is also a good intro to Snowpack plugins. Snowpack starts with a minimal setup with the perspective that you can add what you need through the plugin system.\n\nStart by enabling [Hot Module Replacement](/concepts/hot-module-replacement) in your project. HMR is the system that lets Snowpack push updates to the browser without a full page refresh, a requirement for Fast Refresh. You can enable HMR for React by adding a small snippet of code to your `src/index.jsx` file.\n\n```diff\n ReactDOM.render(\n \n \n ,\n document.getElementById('root'),\n );\n+ // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n+ // Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\n+ if (import.meta.hot) {\n+ import.meta.hot.accept();\n+ }\n```\n\nNow when you change `App.jsx` the page updates to show your changes without a full refresh.\n\n
\"GIF
\n\nHMR can save you time on its own, but you may notice in the example above that the counter on the page still resets to 0. This can slow down your development, especially when you're trying to debug a specific component state problem. Lets enable Fast Refresh to preserve component state across updates.\n\nTo enable Fast Refresh, you'll need to install the `@snowpack/plugin-react-refresh` package. This package is a Snowpack plugin, which you can use to enhance or customize Snowpack with all sorts of new behaviors. To start, install the package in your project:\n\n```bash\nnpm install @snowpack/plugin-react-refresh --save-dev\n```\n\nOnce installed, you'll need to add the plugin to your Snowpack configuration file so that Snowpack knows to use it:\n\n```diff\n module.exports = {\n mount: {\n public: '/',\n src: '/dist',\n },\n- plugins: []\n+ plugins: ['@snowpack/plugin-react-refresh'],\n };\n```\n\nRestart Snowpack to apply the new plugin, and then try changing the `App.jsx` component again. If Fast Refresh is working properly, the counter keeps its value across changes, without resetting to zero.\n\n
\"GIF
\n\n## Going further\n\nGreat job! You're now ready to build the React project of your dreams with Snowpack. Want to tweet your accomplishment to the world? Click the button below:\n\nTweet\n\nAt this point you have the basics and have a great starter for any React project. But if you compare with the official [Snowpack React template](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react) you'll notice it has some other developer tools you might find useful:\n\n- [Prettier](https://prettier.io/) — a popular code formatter\n- [Tests](/guides/testing) — Snowpack supports any popular JavaScript testing framework\n- [`@snowpack/plugin-dotenv`](https://github.com/withastro/snowpack/tree/main/plugins/plugin-dotenv) — Use `dotenv` in your Snowpack. This is useful for environment specific variables\n\nIf you'd like to use Typescript with Snowpack and React, check out the [Snowpack React Typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-react-typescript) starter.\n\nIf you have any questions, comments, or corrections, we'd love to hear from you in the Snowpack [discussion](https://github.com/withastro/snowpack/discussions) forum or our [Snowpack Discord community](https://discord.gg/rS8SnRk).\n" }, { "path": "docs/tutorials/svelte.md", "content": "---\nlayout: ../../layouts/content-with-cover.astro\ntitle: 'Getting Started with Svelte'\ndescription: 'Get started with this in-depth tutorial on how to build Svelte applications and websites with Snowpack'\ndate: 2020-12-01\nsidebarTitle: Svelte\ntags: communityGuide\ncover: '/img/SvelteGuide.jpg'\nimg: '/img/SvelteGuide.jpg'\n---\n\nSnowpack is a great fit for [Svelte](https://svelte.dev/) projects of any size. It's easy to get started and can scale to projects containing thousands of components and pages without any impact on development speed. Unlike traditional Svelte application tooling, Snowpack saves you from getting bogged down with complex bundler setups and configuration files.\n\n> Snowpack is … astonishingly fast, and has a beautiful development experience (hot module reloading, error overlays and so on), and we've been working closely with the Snowpack team on features like SSR[Server-side rendering]. The hot module reloading is particularly revelatory. - [Rich Harris, creator of Svelte](https://svelte.dev/blog/whats-the-deal-with-sveltekit)\n\nThis guide is a step by step from an empty directory to a fully configured Snowpack project, in the process teaching:\n\n- How to set up your Snowpack development environment\n- Adding your first Svelte component\n- Importing images and other web assets\n- Enabling Hot Module Replacement (HMR)\n- Connecting your favorite tools\n\nPrerequisites: Snowpack is a command-line tool installed from npm. This guide assumes a basic understanding of Node.js, npm, and how to run commands in the terminal. Knowledge of Svelte is not required: Snowpack is an excellent way to learn Svelte!\n\n> 💡 Tip: a [Svelte/Snowpack](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte) working example is available in our Create Snowpack App templates.\n\n## Getting started\n\nThe easiest way to start a new Snowpack project is with [Create Snowpack App](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/cli), a tool for creating a new project based on our example templates. `@snowpack/app-template-minimal` is a Create Snowpack App template for a simple, bare-bones Snowpack project setup that the rest of this guide builds on.\n\nRun the following command in your terminal to create a new directory called `svelte-snowpack` with the minimal template installed:\n\n```bash\nnpx create-snowpack-app svelte-snowpack --template @snowpack/app-template-minimal\n```\n\nHead to the new `svelte-snowpack` directory and start Snowpack with the following two commands:\n\n```bash\ncd svelte-snowpack\nnpm run start\n```\n\nYou should see your new website up and running!\n\n
\"screenshot
\n\nNow that you have a basic project up and running! The next step is to install Svelte. Run the following command in your project directory:\n\n```bash\nnpm install svelte --save\n```\n\n> 💡 Tip: add the `--use-yarn` or `--use-pnpm` flag to use something other than npm\n\n```bash\nnpm install @snowpack/plugin-svelte --save-dev\n```\n\nSnowpack [plugins](/plugins) are a way to extend Snowpack's capabilities without having to do custom configuration yourself. Install the `@snowpack/plugin-svelte` plugin so that Snowpack knows how built `.svelte` files into JavaScript and CSS files that run in the browser:\n\nOnce installed, you'll need to add the plugin to your Snowpack configuration file (`snowpack.config.mjs`) so that Snowpack knows to use it:\n\n```diff\n // snowpack.config.mjs\n export default {\n mount: {\n /* ... */\n },\n plugins: [\n- /* ... */\n+ '@snowpack/plugin-svelte',\n ],\n };\n```\n\nRestart your Snowpack dev server to run it with the new configuration. Exit the process (ctrl + c in most Windows/Linux/macOS) and start it again with `npm run start`.\n\n> 💡 Tip: Restart the Snowpack development server when you make configuration changes (changes to the `snowpack.config.mjs`).\n\nSnowpack will recognize the new dependency (Svelte, or \"svelte/internal\") and print the following output as installs your dependencies for the frontend:\n\n```bash\n[snowpack] installing dependencies...\n[snowpack] ✔ install complete! [0.45s]\n[snowpack]\n ⦿ web_modules/ size gzip brotli\n ├─ svelte-hmr/runtime/hot-api-esm.js 22.17 KB 7.42 KB 6.3 KB\n ├─ svelte-hmr/runtime/proxy-adapter-dom.js 5.17 KB 1.65 KB 1.38 KB\n └─ svelte/internal.js 52.78 KB 13.24 KB 11.45 KB\n```\n\n## Create your first Svelte component\n\nYou now have your Snowpack environment set up to build `.svelte` files for the browser. Now it's time to create your first Svelte component file!\n\nCreate a file named `App.svelte` in your project directory with the following code:\n\n```html\n\n\n\n
\n
\n \n Learn Svelte\n \n
\n
\n```\n\nNow you can use the new `App.svelte` file in your `index.js`:\n\n```diff\n// index.js\n\n/* Add JavaScript code here! */\n-console.log('Hello World! You did it! Welcome to Snowpack :D');\n+import App from \"./App.svelte\";\n\n+let app = new App({\n+ target: document.body,\n+});\n\n+export default app;\n```\n\nThe page should now say \"Learn Svelte\". Congratulations! you now have your first Svelte component!\n\n
\"code
\n\n## Customize your project layout\n\nSnowpack is flexible enough to support whatever project layout that you prefer. In this guide, you'll learn how to use a popular project pattern from the Svelte community.\n\n```\n📁 src : your Svelte components and their assets (CSS, images)\n ↳ index.js\n ↳ App.svelte\n📁 public : global assets like images, fonts, icons, and global CSS\n ↳ index.css\n ↳ index.html\n```\n\nUse your favorite visual editor to rearrange and rename, or run these commands in the terminal:\n\n```bash\nmkdir src\nmkdir public\nmv index.js src/index.js\nmv App.svelte src/App.svelte\nmv index.html public/index.html\nmv index.css public/index.css\n```\n\nThis means if you are running Snowpack right now, the site is now broken as the files are all in different places. Lets add a \"mount\" configuration to update your site to your new project layout.\n\nThe `mount` configuration changes where Snowpack scan for and builds files. Head back to the `snowpack.config.mjs` file you edited when you added `@snowpack/plugin-svelte`. Add this to the empty `mount` object:\n\n```diff\n // snowpack.config.mjs\n export default {\n mount: {\n- /* ... */\n+ // directory name: 'build directory'\n+ public: '/',\n+ src: '/dist',\n },\n };\n```\n\n\"Graphic\n\n`mount` is part of the [Snowpack Configuration API](/reference/configuration). It allows you to customize the file structure of your project. The key is the name of the directory and the value is where you'd like them in the final build. With this new configuration, Snowpack builds files in the `public` directory - like `public/index.css` - into `index.css`. Likewise, it builds files in `src` like `src/index.js` into `/dist/index.js`, so change that path in your `index.html`:\n\n```diff\n\n\n \n

Welcome to Snowpack!

\n- \n+ \n \n```\n\nYou'll need to restart Snowpack (stop the process in terminal and then run `npm start` again) for configuration file changes. It should look exactly as it did before, but now using your brand new project folder layout\n\n## Adding an animated Svelte Logo\n\nIn Svelte you can add CSS directly to your component. This step demonstrates this capability by adding an animated logo.\n\n[Download `logo.svg`](https://github.com/withastro/snowpack/blob/main/create-snowpack-app/app-template-svelte/public/logo.svg) to your `public` directory. Now you can add it to your `App.svelte`\n\n```diff\n\n\n
\n+ \"logo\"\n \n Learn Svelte\n \n```\n\n
\"Side
\n\nWith Svelte, CSS can go directly in your `.svelte` component. Add this code to the top of `App.svelte` between the `\n```\n\n
\"code
\n\n## Adding a counter to your Svelte component\n\nSnowpack is one of the only Svelte dev environments to support Fast Refresh by default. With Fast Refresh, as you make changes to `.svelte` files, Snowpack pushes live updates to the browser without losing your place or resetting component state. To see this for yourself, go ahead and add a simple timer to your App.svelte component.\n\nSvelte components include component specific scripts in a `\n```\n\nThen lower down in your component's body, add this code that displays the results of the timer.\n\n```diff\n\n\n
\n
\n \"logo\"\n+

Page has been open for {count} seconds.

\n \n Learn Svelte\n \n
\n
\n```\n\nChange some code on the page (like the \"Learn Svelte\" button). You'll see the timer does not reset.\n\n
\"Showing
\n\nWhat about other, non-Svelte files like `src/index.js`? To re-render your Svelte application when other files change, add this code snippet to the bottom:\n\n```diff\n\n\nexport default app;\n\n+// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n+// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\n+if (import.meta.hot) {\n+ import.meta.hot.accept();\n+ import.meta.hot.dispose(() => {\n+ app.$destroy();\n+ });\n+}\n```\n\n## Going further\n\nGreat job! You're now ready to build the Svelte project of your dreams with Snowpack. Want to tweet your accomplishment to the world? Click the button below:\n\nTweet\n\nAt this point you have the basics and have a great starter for any Svelte project. The official [Snowpack Svelte](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte) example has a few other tools you might find useful:\n\n- [Prettier](https://prettier.io/) — a popular code formatter\n- [Tests](/guides/testing) — Snowpack supports any popular JavaScript testing framework\n- [`@snowpack/plugin-dotenv`](https://github.com/withastro/snowpack/tree/main/plugins/plugin-dotenv) — Use `dotenv` in your Snowpack. This is useful for environment specific variables\n\nWe also recommend the official [Svelte](https://svelte.dev/tutorial/basics) tutorial, which teaches more about how Svelte works and how to build Svelte components.\n\nIf you'd like to use Typescript with Snowpack and Svelte, check out the [Snowpack Svelte Typescript](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-svelte-typescript) template.\n\nIf you have any questions, comments, or corrections, we'd love to hear from you in the Snowpack [discussion](https://github.com/withastro/snowpack/discussions) forum or our [Snowpack Discord community](https://discord.gg/rS8SnRk).\n" }, { "path": "docs/tutorials/vue.md", "content": "---\nlayout: ../../layouts/content-with-cover.astro\ntitle: 'Getting Started with Vue'\ndescription: 'Get started with this in-depth tutorial on how to build Vue applications and websites with Snowpack'\ndate: 2020-12-01\nsidebarTitle: Vue\ntags: communityGuide\n---\n\nSnowpack is a great fit for [Vue](https://vuejs.org) projects of any size. It's easy to get started and can scale to projects containing thousands of components and pages without any impact on development speed. Unlike traditional Vue application tooling, Snowpack saves you from getting bogged down with complex bundler setups and configuration files.\n\nThis guide is a step by step from an empty directory to a fully configured Snowpack project, in the process teaching:\n\n- How to set up your Snowpack development environment\n- Adding your first Vue component\n- Importing images and other web assets\n- Enabling Hot Module Replacement (HMR)\n- Connecting your favorite tools\n\nPrerequisites: Snowpack is a command-line tool installed from npm. This guide assumes a basic understanding of Node.js, npm, and how to run commands in the terminal. Knowledge of Vue is not required; Snowpack is an excellent way to learn Vue!\n\n> 💡 Tip: a [Vue/Snowpack](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue) working example is available in our Create Snowpack App templates.\n\n## Getting started\n\nThe easiest way to start a new Snowpack project is with [Create Snowpack App](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/cli), a tool for creating a new project based on our example templates. `@snowpack/app-template-minimal` is a Create Snowpack App template for a simple, bare-bones Snowpack project setup that the rest of this guide builds on.\n\nRun the following command in your terminal to create a new directory called `vue-snowpack` with the minimal template installed:\n\n```bash\nnpx create-snowpack-app vue-snowpack --template @snowpack/app-template-minimal\n```\n\nHead to the new `vue-snowpack` directory and start Snowpack with the following two commands:\n\n```bash\ncd vue-snowpack\nnpm run start\n```\n\nYou should see your new website up and running!\n\n
\"screenshot
\n\nNow that you have a basic project up and running, the next step is to install Vue. Run the following command in your project directory:\n\n```bash\nnpm install vue@3.0.11 --save\n```\n\n> 💡 Tip: add the `--use-yarn` or `--use-pnpm` flag to use something other than npm\n\n```bash\nnpm install @snowpack/plugin-vue --save-dev\n```\n\nSnowpack [plugins](/plugins) are a way to extend Snowpack's capabilities without having to do custom configuration yourself. Install the `@snowpack/plugin-vue` plugin so that Snowpack knows how built `.vue` files into JavaScript and CSS files that run in the browser:\n\nOnce installed, you'll need to add the plugin to your Snowpack configuration file (`snowpack.config.mjs`) so that Snowpack knows to use it:\n\n```diff\n // snowpack.config.mjs\n export default {\n mount: {\n /* ... */\n },\n plugins: [\n+ '@snowpack/plugin-vue',\n ],\n };\n```\n\nRestart your Snowpack dev server to run it with the new configuration. Exit the process (ctrl + c in most Windows/Linux/macOS) and start it again with `npm run start`.\n\n> 💡 Tip: Restart the Snowpack development server when you make configuration changes (changes to the `snowpack.config.mjs`).\n\nSnowpack will recognize the new dependency (Vue, or \"vue/internal\") and print the following output as installs your dependencies for the frontend:\n\n```bash\n[snowpack] installing dependencies...\n[snowpack] ✔ install complete! [0.45s]\n[snowpack]\n + vue@3.0.11\n └── @vue/runtime-dom@3.0.11\n └── @vue/runtime-core@3.0.11\n └── @vue/reactivity@3.0.11\n └── @vue/shared@3.0.11\n```\n\n## Create your first Vue component\n\nYou now have your Snowpack environment set up to build `.vue` files for the browser. Now it's time to create your first Vue component file!\n\nCreate a file named `App.vue` in your project directory with the following code:\n\n```html\n\n\n```\n\nAdd an ID of `#root` to the `body` tag in your `index.html`\n\n```diff\n// index.html\n- \n+ \n

Welcome to Snowpack!

\n \n \n```\n\nNow you can use the new `App.vue` file in your `index.js`:\n\n```diff\n// index.js\n- console.log('Hello World! You did it! Welcome to Snowpack :D');\n+ import { createApp } from 'vue';\n+ import App from './App.vue';\n+ createApp(App).mount('#root');\n```\n\nThe page should now say \"Welcome to my Vue app!\". Congratulations! You now have your first Vue component!\n\n## Customize your project layout\n\nSnowpack is flexible enough to support whatever project layout that you prefer. In this guide, you'll learn how to use a popular project pattern from the Vue community.\n\n```\n├── src/ <- your Vue components and their assets (CSS, images)\n│ ├── index.js\n│ └── App.vue\n└── public/ <- global assets like images, fonts, icons, and global CSS\n ├── index.css\n └── index.html\n```\n\nUse your favorite visual editor to rearrange and rename, or run these commands in the terminal:\n\n```bash\nmkdir src\nmkdir public\nmv index.js src/index.js\nmv App.vue src/App.vue\nmv index.html public/index.html\nmv index.css public/index.css\n```\n\nThis means if you are running Snowpack right now, the site is now broken as the files are all in different places. Lets add a \"mount\" configuration to update your site to your new project layout.\n\nThe `mount` configuration changes where Snowpack scan for and builds files. Head back to the `snowpack.config.mjs` file you edited when you added `@snowpack/plugin-vue`. Add this to the empty `mount` object:\n\n```diff\n // snowpack.config.mjs\n export default {\n mount: {\n- /* ... */\n+ public: '/',\n+ src: '/dist',\n },\n };\n```\n\n\"Graphic\n\n`mount` is part of the [Snowpack Configuration API](/reference/configuration). It allows you to customize the file structure of your project. The key is the name of the directory and the value is where you'd like them in the final build. With this new configuration, Snowpack builds files in the `public` directory (e.g. `public/index.css -> [build]/index.css`). Likewise, it builds files in `src` (e.g. `src/index.js -> [build]/dist/index.js`, so change that path in your `index.html`:\n\n```diff\n\n\n \n

Welcome to Snowpack!

\n- \n+ \n \n```\n\nYou'll need to restart Snowpack (stop the process in terminal and then run `npm start` again) for configuration file changes. It should look exactly as it did before, but now using your brand new project folder layout\n\n## Adding an animated Vue Logo\n\nIn Vue you can add CSS directly to your component. This step demonstrates this capability by adding an animated logo.\n\n[Download `logo.svg`](https://github.com/withastro/snowpack/blob/main/create-snowpack-app/app-template-vue/public/logo.svg) to your `public` directory. Now you can add it to your `App.vue`\n\n```diff\n\n\n
\n+ \"logo\"\n \n Learn Vue\n \n```\n\nWith Vue, CSS can go directly in your `.vue` component. Add this code to the top of `App.vue` between the `\n```\n\n## Adding a counter to your Vue component\n\nSnowpack is one of the only Vue dev environments to support Fast Refresh by default. With Fast Refresh, as you make changes to `.vue` files, Snowpack pushes live updates to the browser without losing your place or resetting component state. To see this for yourself, go ahead and add a simple timer to your `App.vue` component.\n\nVue components include component specific scripts in a `\n```\n\nThen lower down in your component's body, add this code that displays the results of the timer.\n\n```diff\n \n\n
\n
\n \"logo\"\n+

Page has been open for {count} seconds.

\n \n Learn Vue\n \n
\n
\n```\n\nChange some code on the page (like the \"Learn Vue\" button). You'll see the timer does not reset.\n\nWhat about other, non-Vue files like `src/index.js`? To re-render your Vue application when other files change, add this code snippet to the bottom:\n\n```diff\n// src/index.js\n\n export default app;\n\n+ // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n+ // Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\n+ if (import.meta.hot) {\n+ import.meta.hot.accept();\n+ import.meta.hot.dispose(() => {\n+ app.$destroy();\n+ });\n+ }\n```\n\n## Going further\n\nGreat job! You're now ready to build the Vue project of your dreams with Snowpack. Want to tweet your accomplishment to the world? Click the button below:\n\nTweet\n\nAt this point you have the basics and have a great starter for any Vue project. The official [Snowpack Vue](https://github.com/withastro/snowpack/tree/main/create-snowpack-app/app-template-vue) example has a few other tools you might find useful:\n\n- [Prettier](https://prettier.io/) — a popular code formatter\n- [Tests](/guides/testing) — Snowpack supports any popular JavaScript testing framework\n- [`@snowpack/plugin-dotenv`](https://github.com/withastro/snowpack/tree/main/plugins/plugin-dotenv) — Use `dotenv` in your Snowpack. This is useful for environment specific variables\n\nIf you have any questions, comments, or corrections, we'd love to hear from you in the Snowpack [discussion](https://github.com/withastro/snowpack/discussions) forum or our [Snowpack Discord community](https://discord.gg/rS8SnRk).\n" }, { "path": "esinstall/.gitignore", "content": "node_modules\nlib\n" }, { "path": "esinstall/CHANGELOG.md", "content": "# esinstall\n\n## 1.1.7\n\n### Patch Changes\n\n- 9b1472f6: Lock slash package version more aggressively\n\n## 1.1.6\n\n### Patch Changes\n\n- fb7eaaa4: Allow `external` CommonJS modules to be imported properly in Node (#3473) \n- 1dac52b3: [ci] yarn format \n- afc6232f: Allow .astro files to be installed as JavaScript (#3406) \n\n## 1.1.5\n\n### Patch Changes\n\n- c659b7c3: [ci] yarn format \n- b375b8a3: Fix `external` behavior for local package source and SSR. (#3399) \n- 068b7d75: Set `preventAssignment` option of rollup-plugin-replace to true (#3222) \n- d9956f73: add explicit \"mode\" config (#3135)\n\n## 1.1.4\n\n### Patch Changes\n\n- 9eb50368: update deps (#2928)\n- d542762a: Add execa dependency for esinstall (#3075) \n\n## 1.1.3\n\n### Patch Changes\n\n- 332d69ed: Adding property expr to solve #2945 (#3063) \n\n## 1.1.2\n\n### Patch Changes\n\n- 56c5a231: fix typo in changelog\n- 836338b5: add react-transition-group to bad cjs scanner list\n- 22dd802e: no longer need tslib workaround\n- 74c4661e: add \"events\" to bad cjs scanning packages list\n- 40f02cf4: reorder changelog entries\n- fc6c1417: Improve CSS error message (#2973) \n\n## 1.1.1\n\n### Patch Changes\n\n- e50cb745: fix better handling for unscannable cjs packages\n- 1232e252: add back cjs-cjs compat from an earlier pr (#2934)\n\n## 1.1.0\n\n### Minor Changes\n\n- bea1c56c: Simplify. cleanup, enhance snowpack internals (#2707)\n\n### Patch Changes\n\n- a800bf3d: finalize picomatch support (#2912)\n- b2738967: improve cjs<>esm conversion of named exports (#2859)\n- c3ecc7da: [ci] yarn format \n- 92057561: Fix: warn on missing export (#2826) \n- 6f514a0d: [ci] yarn format \n- 8280627d: fix issue with types package (#2768)\n- bb1ca50a: url not needed in esinstall\n- 19cdf5ca: ignore data imports from build or scan\n- 435692d0: make stats optional, speed up perf (#2708)\n- b82c472e: [ci] yarn format\n- 81d9ff88: fix unnecessary filtering of absolute aliases (#2424) \n- c0501f72: [ci] yarn format \n- d3b6f769: Support packages that use export maps but have no main (#2659) \n- 520112b6: Update the changelog \n\n## 1.0.5\n\n### Patch Changes\n\n- ec3c29fd: Pin rollup version to fix tree shaking bugs (#2572) \n- 4ffc1c10: add support for internal export map imports (#2507)\n\n## 1.0.4\n\n### Patch Changes\n\n- 150cdf30: Fix explodeExportMap expanding dirs (#2493) \n- 977621dc: properly scan named imports from events polyfill package\n\n## 1.0.3\n\n### Patch Changes\n\n- 6b105339: add esinstall missing import hint (#2299)\n- 15a27ac9: support additional main fields in sub-dependencies (#2298) \n\n## 1.0.2\n\n### Patch Changes\n\n- 15d77ea3: cleanup\n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/esinstall)._\n" }, { "path": "esinstall/LICENSE", "content": "MIT License\n\nCopyright (c) 2019 Fred K. Schott\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "esinstall/README.md", "content": "# esinstall\n\n- Convert a set of imports from your `node_modules/` directory into a fresh, new 100% [ESM](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) install directory.\n- JavaScript packages are converted to ESM regardless of how they were originally authored.\n- Import your new ESM dependencies in any ESM-only environment (websites, Deno, Node.js v14).\n\n```\nnpm install esinstall\n```\n\n```js\nimport {install} from 'esinstall';\n\nawait install(['preact', 'preact/hooks'], {\n /*options*/\n});\n// Result: Creates `preact.js` and `preact/hooks.js` inside a `web_modules/` directory in your current directory.\n```\n\n⚡️ Powering [Snowpack](https://www.snowpack.dev) and the next generation of JavaScript tooling.\n\n## Status\n\nThe core install logic of this library is considered well-tested and production-ready (1+ years of active use & development!). The JS interface is new, however, and may contain smaller bugs. We'll be working to stabilize the API over the next month, with a `1.0.0` release planned for October.\n\n## Background\n\nBefore [Snowpack](https://www.snowpack.dev/) was a frontend build tool, it was a CJS->ESM package converter. `snowpack install` would read your package.json \"dependencies\" and re-install every frontend package from your \"node_modules/\" directory to a new \"web_modules/\" directory. \"web_modules/\" was guarenteed to be 100% ESM regardless of how each package was originally written. This dramatically simplified the minimum tooling required to build a website by removing a whole class of problem for the frontend basically summarized as \"oh no this package was written for Node.js, it will never run in the browser, what do we do???\"\n\nSnowpack is now a fully-featured frontend build tool, but it's still built entirely on that original foundation. That foundation is now **esinstall**, a general-purpose JavaScript interface for creating ESM single-file versions of locally installed npm packages.\n\nOur hope is that now others can build on top of this too. And while today we're focused on the web use-case, [we're seeing a growing need for a CJS->ESM story for Node.js](https://changelog.com/jsparty/137) as well.\n\n## How it Works\n\nTo simplify things a ton, here's what **esinstall** does internally when you run `install()`:\n\n1. Resolves the given package specifiers to exact file paths in your \"node_modules/\" directory.\n2. Runs Rollup with those file paths as entrypoints, essentially \"bundling\" your dependency tree into as few JS files as possible.\n3. Writes the result to a new, fully ESM output directory.\n\nIf you check out the code, you'll see it's not as easy as it sounds. But at a high level, that's what **esinstall** is all about.\n\n## Features\n\n```js\nimport {install, printStats} from 'esinstall';\n\n// Feature: Handle CJS packages with ease, converting everything to ESM!\nawait install(['react', 'react-dom', 'react-redux', 'react-router']);\n\n// Feature: Handle CSS!\nawait install(['bootstrap/dist/css/bootstrap.min.css']);\n\n// Feature: Handle Non-standard packages!\nawait install(['some-svelte-component'], {rollup: {plugins: [require('rollup-plugin-svelte')()]}});\n\n// Feature: Print detailed install stats to the console, including installed file sizes.\nconst {success, stats} = install([...]);\nif (success) {\n printStats(stats);\n}\n\n// Feature: Tree-shaking! Get a smaller final build by providing more detailed install targets.\nawait install(\n [{specifier: 'preact/hooks', all: false, default: false, namespace: false, named: ['useState', 'useEffect']}],\n {treeshake: true}\n);\n```\n\n## API\n\nStill TODO: Adding more detailed descriptions about each `InstallOptions` option.\n\n```ts\nimport {Plugin as RollupPlugin} from 'rollup';\nimport {\n DependencyStatsOutput,\n EnvVarReplacements,\n ImportMap,\n InstallTarget,\n LoggerLevel,\n} from './types';\n\ninterface InstallOptions {\n cwd: string;\n alias: Record;\n lockfile?: ImportMap;\n logger: AbstractLogger;\n verbose?: boolean;\n dest: string;\n env: EnvVarReplacements;\n treeshake?: boolean;\n polyfillNode: boolean;\n sourceMap?: boolean | 'inline';\n externalPackage: string[];\n externalPackageEsm: string[];\n packageLookupFields: string[];\n packageExportLookupFields: string[];\n namedExports: string[];\n rollup: {\n context?: string;\n plugins?: RollupPlugin[];\n dedupe?: string[];\n };\n}\ndeclare type InstallResult =\n | {\n success: false;\n importMap: null;\n stats: null;\n }\n | {\n success: true;\n importMap: ImportMap;\n stats: DependencyStatsOutput;\n };\n\nexport declare function printStats(dependencyStats: DependencyStatsOutput): string;\nexport declare function install(\n _installTargets: (InstallTarget | string)[],\n _options?: Partial,\n): Promise;\n```\n\n## Special Thanks\n\nA huge thanks to all the contributors of Snowpack (and now **esinstall**) over the years. This wouldn't have been possible without you!\n\nAlso, it can't be stressed enough: this tool would never have existed without Rollup. If you can, consider donating to their team: https://opencollective.com/rollup\n" }, { "path": "esinstall/index.esm.mjs", "content": "import Pkg from './lib/index.js';\n\nexport const printStats = Pkg.printStats;\nexport const install = Pkg.install;\n" }, { "path": "esinstall/package.json", "content": "{\n \"name\": \"esinstall\",\n \"version\": \"1.1.7\",\n \"description\": \"Convert packages to ESM.\",\n \"license\": \"MIT\",\n \"keywords\": [\n \"install\",\n \"web\",\n \"dependencies\",\n \"npm\",\n \"esm\",\n \"common.js\",\n \"rollup\",\n \"esbuild\",\n \"cjs\"\n ],\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/esinstall#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"esinstall\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"build\": \"tsc --noUnusedLocals false --noUnusedParameters false\",\n \"build:watch\": \"tsc --watch --noUnusedLocals false --noUnusedParameters false\",\n \"lint\": \"tsc --noEmit && package-check\"\n },\n \"types\": \"lib/index.d.ts\",\n \"main\": \"lib/index.js\",\n \"exports\": {\n \"import\": \"./index.esm.mjs\",\n \"require\": \"./lib/index.js\"\n },\n \"files\": [\n \"lib\",\n \"index.esm.mjs\"\n ],\n \"dependencies\": {\n \"@rollup/plugin-commonjs\": \"^16.0.0\",\n \"@rollup/plugin-inject\": \"^4.0.2\",\n \"@rollup/plugin-json\": \"^4.0.0\",\n \"@rollup/plugin-node-resolve\": \"^10.0.0\",\n \"@rollup/plugin-replace\": \"^2.4.2\",\n \"builtin-modules\": \"^3.2.0\",\n \"cjs-module-lexer\": \"^1.2.1\",\n \"es-module-lexer\": \"^0.6.0\",\n \"execa\": \"^5.1.1\",\n \"is-valid-identifier\": \"^2.0.2\",\n \"kleur\": \"^4.1.1\",\n \"mkdirp\": \"^1.0.3\",\n \"picomatch\": \"^2.3.0\",\n \"resolve\": \"^1.20.0\",\n \"rimraf\": \"^3.0.0\",\n \"rollup\": \"~2.37.1\",\n \"rollup-plugin-polyfill-node\": \"^0.7.0\",\n \"slash\": \"~3.0.0\",\n \"validate-npm-package-name\": \"^3.0.0\",\n \"vm2\": \"^3.9.2\"\n }\n}\n" }, { "path": "esinstall/src/entrypoints.ts", "content": "import {readdirSync, existsSync, realpathSync, statSync} from 'fs';\nimport path from 'path';\nimport builtinModules from 'builtin-modules';\nimport validatePackageName from 'validate-npm-package-name';\nimport {ExportField, ExportMapEntry, PackageManifestWithExports, PackageManifest} from './types';\nimport {parsePackageImportSpecifier, resolveDependencyManifest} from './util';\nimport resolve from 'resolve';\nimport picomatch from 'picomatch';\n\nexport const MAIN_FIELDS = [\n 'browser:module',\n 'module',\n 'browser',\n 'main:esnext',\n 'jsnext:main',\n 'main',\n];\n\n// Rarely, a package will ship a broken \"browser\" package.json entrypoint.\n// Ignore the \"browser\" entrypoint in those packages.\nconst BROKEN_BROWSER_ENTRYPOINT = ['@sheerun/mutationobserver-shim'];\nconst FILE_EXTENSION_REGEX = /\\..+$/;\n\nfunction getMissingEntrypointHint(\n packageEntrypoint: string,\n normalizedMap: Record,\n): string | undefined {\n const noExtensionEntrypoint = './' + packageEntrypoint.replace(FILE_EXTENSION_REGEX, '');\n if (Reflect.get(normalizedMap, noExtensionEntrypoint)) {\n return `Did you mean \"${noExtensionEntrypoint}\"?`;\n }\n const jsExtensionEntrypoint = './' + packageEntrypoint.replace(FILE_EXTENSION_REGEX, '.js');\n if (Reflect.get(normalizedMap, jsExtensionEntrypoint)) {\n return `Did you mean \"${jsExtensionEntrypoint}\"?`;\n }\n const cjsExtensionEntrypoint = './' + packageEntrypoint.replace(FILE_EXTENSION_REGEX, '.cjs');\n if (Reflect.get(normalizedMap, cjsExtensionEntrypoint)) {\n return `Did you mean \"${cjsExtensionEntrypoint}\"?`;\n }\n const mjsExtensionEntrypoint = './' + packageEntrypoint.replace(FILE_EXTENSION_REGEX, '.cjs');\n if (Reflect.get(normalizedMap, mjsExtensionEntrypoint)) {\n return `Did you mean \"${mjsExtensionEntrypoint}\"?`;\n }\n const directoryEntrypoint = './' + packageEntrypoint + '/index.js';\n if (Reflect.get(normalizedMap, directoryEntrypoint)) {\n return `Did you mean \"${directoryEntrypoint}\"?`;\n }\n}\n\ntype FindManifestEntryOptions = {\n packageLookupFields?: string[];\n packageName?: string;\n};\n\n/**\n *\n */\nexport function findManifestEntry(\n manifest: PackageManifest,\n entry?: string,\n {packageLookupFields = [], packageName}: FindManifestEntryOptions = {},\n): string | undefined {\n let foundEntrypoint: string | undefined;\n\n if (manifest.exports) {\n foundEntrypoint =\n typeof manifest.exports === 'string'\n ? manifest.exports\n : findExportMapEntry(manifest.exports['.'] || manifest.exports);\n\n if (typeof foundEntrypoint === 'string') {\n return foundEntrypoint;\n }\n }\n\n foundEntrypoint = [...packageLookupFields, ...MAIN_FIELDS].map((e) => manifest[e]).find(Boolean);\n\n if (foundEntrypoint && typeof foundEntrypoint === 'string') {\n return foundEntrypoint;\n }\n\n if (!(packageName && BROKEN_BROWSER_ENTRYPOINT.includes(packageName))) {\n // Some packages define \"browser\" as an object. We'll do our best to find the\n // right entrypoint in an entrypoint object, or fail otherwise.\n // See: https://github.com/defunctzombie/package-browser-field-spec\n let browserField = manifest.browser;\n\n if (typeof browserField === 'string') {\n return browserField;\n } else if (typeof browserField === 'object') {\n let browserEntrypoint =\n (entry && browserField[entry]) ||\n browserField['./index.js'] ||\n browserField['./index'] ||\n browserField['index.js'] ||\n browserField['index'] ||\n browserField['./'] ||\n browserField['.'];\n\n if (typeof browserEntrypoint === 'string') {\n return browserEntrypoint;\n }\n }\n }\n\n // If browser object is set but no relevant entrypoint is found, fall back to \"main\".\n return manifest.main;\n}\n\n/**\n * Given an ExportMapEntry find the entry point, resolving recursively.\n */\nexport function findExportMapEntry(\n exportMapEntry?: ExportMapEntry,\n conditions?: string[],\n): string | undefined {\n // If this is a string or undefined we can skip checking for conditions\n if (typeof exportMapEntry === 'string' || typeof exportMapEntry === 'undefined') {\n return exportMapEntry;\n }\n\n let entry = exportMapEntry;\n if (conditions) {\n for (let condition of conditions) {\n if (entry[condition]) {\n entry = entry[condition];\n }\n }\n }\n\n return (\n findExportMapEntry(entry?.browser) ||\n findExportMapEntry(entry?.import) ||\n findExportMapEntry(entry?.default) ||\n findExportMapEntry(entry?.require) ||\n undefined\n );\n}\n\ntype ResolveEntrypointOptions = {\n cwd: string;\n packageLookupFields: string[];\n};\n\n/**\n * Resolve a \"webDependencies\" input value to the correct absolute file location.\n * Supports both npm package names, and file paths relative to the node_modules directory.\n * Follows logic similar to Node's resolution logic, but using a package.json's ESM \"module\"\n * field instead of the CJS \"main\" field.\n */\nexport function resolveEntrypoint(\n dep: string,\n {cwd, packageLookupFields}: ResolveEntrypointOptions,\n): string {\n // We first need to check for an export map in the package.json. If one exists, resolve to it.\n const [packageName, packageEntrypoint] = parsePackageImportSpecifier(dep);\n const [packageManifestLoc, packageManifest] = resolveDependencyManifest(packageName, cwd);\n\n if (packageManifestLoc && packageManifest && typeof packageManifest.exports !== 'undefined') {\n const exportField = (packageManifest as PackageManifestWithExports).exports;\n\n // If this is a non-main entry point\n if (packageEntrypoint) {\n const normalizedMap = explodeExportMap(exportField, {\n cwd: path.dirname(packageManifestLoc),\n });\n const mapValue = normalizedMap && Reflect.get(normalizedMap, './' + packageEntrypoint);\n if (typeof mapValue !== 'string') {\n let helpfulHint =\n normalizedMap && getMissingEntrypointHint(packageEntrypoint, normalizedMap);\n throw new Error(\n `Package \"${packageName}\" exists but package.json \"exports\" does not include entry for \"./${packageEntrypoint}\".` +\n (helpfulHint ? `\\n${helpfulHint}` : ''),\n );\n }\n return path.join(packageManifestLoc, '..', mapValue);\n } else {\n const exportMapEntry = exportField['.'] || exportField;\n const mapValue = findExportMapEntry(exportMapEntry);\n\n if (mapValue) {\n return path.join(packageManifestLoc, '..', mapValue);\n }\n }\n }\n\n // if, no export map and dep points directly to a file within a package, return that reference.\n if (builtinModules.indexOf(dep) === -1 && !validatePackageName(dep).validForNewPackages) {\n return realpathSync.native(\n resolve.sync(dep, {basedir: cwd, extensions: ['.js', '.mjs', '.ts', '.jsx', '.tsx']}),\n );\n }\n\n // Otherwise, resolve directly to the dep specifier. Note that this supports both\n // \"package-name\" & \"package-name/some/path\" where \"package-name/some/path/package.json\"\n // exists at that lower path, that must be used to resolve. In that case, export\n // maps should not be supported.\n const [depManifestLoc, depManifest] = resolveDependencyManifest(dep, cwd);\n\n if (!depManifest) {\n try {\n const maybeLoc = realpathSync.native(resolve.sync(dep, {basedir: cwd}));\n return maybeLoc;\n } catch {\n // Oh well, was worth a try\n }\n }\n\n if (!depManifestLoc || !depManifest) {\n if (path.extname(dep) === '.css') {\n const parts = dep.split('/');\n let npmName = parts.shift();\n if (npmName && npmName.startsWith('@')) npmName += '/' + parts.shift();\n throw new Error(\n `Module \"${dep}\" not found.\n If you‘re trying to import a CSS file from your project, try \"./${dep}\".\n If you‘re trying to import an NPM package, try running \\`npm install ${npmName}\\` and re-running Snowpack.`,\n );\n }\n throw new Error(\n `Package \"${dep}\" not found. Have you installed it? ${depManifestLoc ? depManifestLoc : ''}`,\n );\n }\n\n let foundEntrypoint = findManifestEntry(depManifest, dep, {\n packageName,\n packageLookupFields,\n });\n\n // Sometimes packages don't give an entrypoint, assuming you'll fall back to \"index.js\".\n if (!foundEntrypoint) {\n for (let possibleEntrypoint of ['index.js', 'index.json']) {\n try {\n return realpathSync.native(\n resolve.sync(path.join(depManifestLoc || '', '..', possibleEntrypoint)),\n );\n } catch {}\n }\n\n // Couldn't find any entrypoints so throwing\n throw new Error(\n `Unable to find any entrypoint for \"${dep}\". It could be a typo, or this package might not have a main entrypoint.`,\n );\n }\n if (typeof foundEntrypoint !== 'string') {\n throw new Error(`\"${dep}\" has unexpected entrypoint: ${JSON.stringify(foundEntrypoint)}.`);\n }\n\n const finalPath = path.join(depManifestLoc || '', '..', foundEntrypoint);\n try {\n return realpathSync.native(resolve.sync(finalPath));\n } catch {\n throw new Error(`We resolved \"${dep}\" to ${finalPath}, but the file does not exist on disk.`);\n }\n}\n\nconst picoMatchGlobalOptions = Object.freeze({\n capture: true,\n noglobstar: true,\n});\n\nfunction* forEachExportEntry(\n exportField: ExportField,\n): Generator<[string, ExportMapEntry], any, undefined> {\n const simpleExportMap = findExportMapEntry(exportField);\n\n // Handle case where export map is a string, or if there‘s only one file in the entire export map\n if (simpleExportMap) {\n yield ['.', simpleExportMap];\n\n return undefined;\n }\n\n for (const [key, val] of Object.entries(exportField)) {\n // skip invalid entries\n if (!key.startsWith('.')) {\n continue;\n }\n\n yield [key, val];\n }\n}\n\nfunction* forEachWildcardEntry(\n key: string,\n value: string,\n cwd: string,\n): Generator<[string, string], any, undefined> {\n // Creates a regex from a pattern like ./src/extras/*\n let expr = picomatch.makeRe(value, picoMatchGlobalOptions);\n\n // The directory, ie ./src/extras\n let valueDirectoryName = path.dirname(value);\n let valueDirectoryFullPath = path.join(cwd, valueDirectoryName);\n\n if (existsSync(valueDirectoryFullPath)) {\n let filesInDirectory = readdirSync(valueDirectoryFullPath).filter(\n (filepath) => statSync(path.join(valueDirectoryFullPath, filepath)).isFile(), // ignore directories\n );\n\n for (let filename of filesInDirectory) {\n // Create a relative path for this file to match against the regex\n // ex, ./src/extras/one.js\n let relativeFilePath = path.join(valueDirectoryName, filename);\n let match = expr.exec(relativeFilePath);\n\n if (match && match[1]) {\n let [matchingPath, matchGroup] = match;\n let normalizedKey = key.replace('*', matchGroup);\n\n // Normalized to posix paths, like ./src/extras/one.js\n let normalizedFilePath =\n '.' + path.posix.sep + matchingPath.split(path.sep).join(path.posix.sep);\n\n // Yield out a non-wildcard match, for ex.\n // ['./src/extras/one', './src/extras/one.js']\n\n yield [normalizedKey, normalizedFilePath];\n }\n }\n }\n}\n\nfunction* forEachExportEntryExploded(\n exportField: ExportField,\n cwd: string,\n): Generator<[string, unknown], any, undefined> {\n for (const [key, val] of forEachExportEntry(exportField)) {\n // Deprecated but we still want to support this.\n // https://nodejs.org/api/packages.html#packages_subpath_folder_mappings\n if (key.endsWith('/')) {\n const keyValue = findExportMapEntry(val);\n\n if (typeof keyValue !== 'string') {\n continue;\n }\n\n // There isn't a clear use-case for this, so we are assuming it's not needed for now.\n if (key === './') {\n continue;\n }\n\n yield* forEachWildcardEntry(key + '*', keyValue + '*', cwd);\n\n continue;\n }\n\n // Wildcards https://nodejs.org/api/packages.html#packages_subpath_patterns\n if (key.includes('*')) {\n const keyValue = findExportMapEntry(val);\n\n if (typeof keyValue !== 'string') {\n continue;\n }\n yield* forEachWildcardEntry(key, keyValue, cwd);\n\n continue;\n }\n\n yield [key, val];\n }\n}\n\n/**\n * Given an export map and all of the crazy variations, condense down to a key/value map of string keys to string values.\n */\nexport function explodeExportMap(\n exportField: ExportField | undefined,\n {cwd}: {cwd: string},\n): Record | undefined {\n if (!exportField) {\n return;\n }\n const cleanExportMap: Record = {};\n\n for (const [key, val] of forEachExportEntryExploded(exportField, cwd)) {\n // If entry is an array, assume that we can always support the first value\n const firstVal = Array.isArray(val) ? val[0] : val;\n // Support these entries, in this order.\n const cleanValue = findExportMapEntry(firstVal);\n if (typeof cleanValue !== 'string') {\n continue;\n }\n cleanExportMap[key] = cleanValue;\n }\n\n if (Object.keys(cleanExportMap).length === 0) {\n return;\n }\n\n return cleanExportMap;\n}\n" }, { "path": "esinstall/src/index.ts", "content": "import rollupPluginCommonjs, {RollupCommonJSOptions} from '@rollup/plugin-commonjs';\nimport rollupPluginJson from '@rollup/plugin-json';\nimport rollupPluginNodeResolve from '@rollup/plugin-node-resolve';\nimport {init as initESModuleLexer} from 'es-module-lexer';\nimport fs from 'fs';\nimport * as colors from 'kleur/colors';\nimport mkdirp from 'mkdirp';\nimport path from 'path';\nimport rimraf from 'rimraf';\nimport {InputOptions, OutputOptions, Plugin as RollupPlugin, rollup, RollupError} from 'rollup';\nimport rollupPluginNodePolyfills from 'rollup-plugin-polyfill-node';\nimport rollupPluginReplace from '@rollup/plugin-replace';\nimport {rollupPluginAlias} from './rollup-plugins/rollup-plugin-alias';\nimport {rollupPluginCatchFetch} from './rollup-plugins/rollup-plugin-catch-fetch';\nimport {rollupPluginCatchUnresolved} from './rollup-plugins/rollup-plugin-catch-unresolved';\nimport {rollupPluginCss} from './rollup-plugins/rollup-plugin-css';\nimport {rollupPluginNodeProcessPolyfill} from './rollup-plugins/rollup-plugin-node-process-polyfill';\nimport {rollupPluginDependencyStats} from './rollup-plugins/rollup-plugin-stats';\nimport {rollupPluginStripSourceMapping} from './rollup-plugins/rollup-plugin-strip-source-mapping';\nimport {rollupPluginWrapInstallTargets} from './rollup-plugins/rollup-plugin-wrap-install-targets';\nimport {\n AbstractLogger,\n DependencyStatsOutput,\n EnvVarReplacements,\n ImportMap,\n InstallTarget,\n} from './types';\nimport {\n createInstallTarget,\n findMatchingAliasEntry,\n getWebDependencyName,\n getWebDependencyType,\n isJavaScript,\n MISSING_PLUGIN_SUGGESTIONS,\n sanitizePackageName,\n writeLockfile,\n} from './util';\nimport {resolveEntrypoint, MAIN_FIELDS} from './entrypoints';\n\nexport * from './types';\nexport {\n findExportMapEntry,\n findManifestEntry,\n resolveEntrypoint,\n explodeExportMap,\n} from './entrypoints';\nexport {resolveDependencyManifest} from './util';\nexport {printStats} from './stats';\n\ntype DependencyLoc = {\n type: 'BUNDLE' | 'ASSET' | 'DTS';\n loc: string;\n};\n\nfunction isImportOfPackage(importUrl: string, packageName: string) {\n return packageName === importUrl || importUrl.startsWith(packageName + '/');\n}\n\n/**\n * Resolve a \"webDependencies\" input value to the correct absolute file location.\n * Supports both npm package names, and file paths relative to the node_modules directory.\n * Follows logic similar to Node's resolution logic, but using a package.json's ESM \"module\"\n * field instead of the CJS \"main\" field.\n */\nfunction resolveWebDependency(\n dep: string,\n resolveOptions: {cwd: string; packageLookupFields: string[]},\n): DependencyLoc {\n const loc = resolveEntrypoint(dep, resolveOptions);\n return {\n loc,\n type: getWebDependencyType(loc),\n };\n}\n\nfunction generateEnvObject(userEnv: EnvVarReplacements): Object {\n return {\n NODE_ENV: userEnv.NODE_ENV || process.env.NODE_ENV || 'production',\n ...Object.keys(userEnv).reduce((acc, key) => {\n const value = userEnv[key];\n acc[key] = value === true ? process.env[key] : value;\n return acc;\n }, {}),\n };\n}\n\nfunction generateReplacements(env: Object): {[key: string]: string} {\n return Object.keys(env).reduce(\n (acc, key) => {\n acc[`process.env.${key}`] = JSON.stringify(env[key]);\n return acc;\n },\n {\n // Other find & replacements:\n },\n );\n}\n\ninterface InstallOptions {\n cwd: string;\n stats: boolean;\n alias: Record;\n importMap?: ImportMap;\n logger: AbstractLogger;\n verbose?: boolean;\n dest: string;\n env: EnvVarReplacements;\n treeshake?: boolean;\n polyfillNode: boolean;\n sourcemap?: boolean | 'inline';\n external: string[];\n externalEsm: boolean | string[] | ((imp: string) => boolean);\n packageLookupFields: string[];\n packageExportLookupFields: string[];\n // @deprecated No longer needed, all packages now have the highest fidelity named export support possible\n namedExports: string[];\n rollup: {\n context?: string;\n plugins?: RollupPlugin[]; // for simplicity, only Rollup plugins are supported for now\n dedupe?: string[];\n };\n}\n\ntype PublicInstallOptions = Partial;\nexport {PublicInstallOptions as InstallOptions};\nexport type InstallResult = {importMap: ImportMap; stats: DependencyStatsOutput | null};\n\nconst FAILED_INSTALL_MESSAGE = (message?: string) =>\n !message ? 'Install failed.' : `Install failed ${message}.`;\n\nfunction setOptionDefaults(_options: PublicInstallOptions): InstallOptions {\n if ((_options as any).lockfile) {\n throw new Error('[esinstall@1.0.0] option `lockfile` was renamed to `importMap`.');\n }\n if ((_options as any).sourceMap) {\n throw new Error('[esinstall@1.0.0] option `sourceMap` was renamed to `sourcemap`.');\n }\n if ((_options as any).externalPackage) {\n throw new Error('[esinstall@1.0.0] option `externalPackage` was renamed to `external`.');\n }\n if ((_options as any).externalPackageEsm) {\n throw new Error('[esinstall@1.0.0] option `externalPackageEsm` was renamed to `externalEsm`.');\n }\n const options = {\n cwd: process.cwd(),\n alias: {},\n logger: {\n debug: () => {}, // silence debug messages by default\n log: console.log,\n warn: console.warn,\n error: console.error,\n },\n // TODO: Make this default to false in a v2.0 release\n stats: true,\n dest: 'web_modules',\n external: [] as string[],\n externalEsm: [] as string[],\n polyfillNode: false,\n packageLookupFields: [],\n packageExportLookupFields: [],\n env: {},\n namedExports: [],\n rollup: {\n plugins: [],\n dedupe: [],\n },\n ..._options,\n };\n options.dest = path.resolve(options.cwd, options.dest);\n return options;\n}\n\nexport async function install(\n _installTargets: (InstallTarget | string)[],\n _options: PublicInstallOptions = {},\n): Promise {\n const {\n cwd,\n alias: installAlias,\n importMap: _importMap,\n logger,\n dest: destLoc,\n external,\n externalEsm,\n sourcemap,\n env: userEnv,\n stats,\n rollup: userDefinedRollup,\n treeshake: isTreeshake,\n polyfillNode,\n packageLookupFields,\n packageExportLookupFields,\n } = setOptionDefaults(_options);\n const env = generateEnvObject(userEnv);\n\n const installTargets: InstallTarget[] = _installTargets.map((t) =>\n typeof t === 'string' ? createInstallTarget(t) : t,\n );\n\n // TODO: warn if import from \"firebase\", since that includes so many Node-specific files\n\n const allInstallSpecifiers = new Set(\n installTargets\n .filter(\n (dep) => !external.some((packageName) => isImportOfPackage(dep.specifier, packageName)),\n )\n .map((dep) => dep.specifier)\n .map((specifier) => {\n const aliasEntry = findMatchingAliasEntry(installAlias, specifier);\n return aliasEntry && aliasEntry.type === 'package' ? aliasEntry.to : specifier;\n })\n .map((specifier) => specifier.replace(/(\\/|\\\\)+$/, '')) // remove trailing slash from end of specifier (easier for Node to resolve)\n .sort((a, b) => a.localeCompare(b, undefined, {numeric: true})),\n );\n const installEntrypoints: {[targetName: string]: string} = {};\n const assetEntrypoints: {[targetName: string]: string} = {};\n const importMap: ImportMap = {imports: {}};\n let dependencyStats: DependencyStatsOutput | null = null;\n const skipFailures = false;\n\n for (const installSpecifier of allInstallSpecifiers) {\n let targetName = getWebDependencyName(installSpecifier);\n let proxiedName = sanitizePackageName(targetName); // sometimes we need to sanitize webModule names, as in the case of tippy.js -> tippyjs\n if (_importMap) {\n if (_importMap.imports[installSpecifier]) {\n installEntrypoints[targetName] = _importMap.imports[installSpecifier];\n if (!path.extname(installSpecifier) || isJavaScript(installSpecifier)) {\n importMap.imports[installSpecifier] = `./${proxiedName}.js`;\n } else {\n importMap.imports[installSpecifier] = `./${proxiedName}`;\n }\n continue;\n }\n const findFolderImportEntry = Object.entries(_importMap.imports).find(([entry]) => {\n return entry.endsWith('/') && installSpecifier.startsWith(entry);\n });\n if (findFolderImportEntry) {\n installEntrypoints[targetName] =\n findFolderImportEntry[1] + targetName.substr(findFolderImportEntry[0].length);\n if (!path.extname(installSpecifier) || isJavaScript(installSpecifier)) {\n importMap.imports[installSpecifier] = `./${proxiedName}.js`;\n } else {\n importMap.imports[installSpecifier] = `./${proxiedName}`;\n }\n continue;\n }\n }\n\n try {\n const resolvedResult = resolveWebDependency(installSpecifier, {\n cwd,\n packageLookupFields,\n });\n if (resolvedResult.type === 'BUNDLE') {\n installEntrypoints[targetName] = resolvedResult.loc;\n importMap.imports[installSpecifier] = `./${proxiedName}.js`;\n Object.entries(installAlias)\n .filter(([, value]) => value === installSpecifier)\n .forEach(([key]) => {\n importMap.imports[key] = `./${targetName}.js`;\n });\n } else if (resolvedResult.type === 'ASSET') {\n // add extension if missing\n const isMissingExt = path.extname(resolvedResult.loc) && !path.extname(proxiedName);\n if (isMissingExt) {\n const ext = path.basename(resolvedResult.loc).replace(/[^.]+/, '');\n targetName += ext;\n proxiedName += ext;\n }\n assetEntrypoints[targetName] = resolvedResult.loc;\n importMap.imports[installSpecifier] = `./${proxiedName}`;\n } else if (resolvedResult.type === 'DTS') {\n // This is fine! Skip type-only packages\n logger.debug(`[${installSpecifier}] target points to a TS-only package.`);\n }\n } catch (err) {\n if (skipFailures) {\n continue;\n }\n throw err;\n }\n }\n if (Object.keys(installEntrypoints).length === 0 && Object.keys(assetEntrypoints).length === 0) {\n throw new Error(`No ESM dependencies found!\n${colors.dim(\n ` At least one dependency must have an ESM \"module\" entrypoint. You can find modern, web-ready packages at ${colors.underline(\n 'https://www.skypack.dev',\n )}`,\n)}`);\n }\n\n await initESModuleLexer;\n let isFatalWarningFound = false;\n const inputOptions: InputOptions = {\n input: installEntrypoints,\n context: userDefinedRollup.context,\n external: (id) => external.some((packageName) => isImportOfPackage(id, packageName)),\n treeshake: {moduleSideEffects: true},\n plugins: [\n rollupPluginAlias({\n entries: [\n // Apply all aliases\n ...Object.entries(installAlias).map(([key, val]) => ({\n find: key,\n replacement: val,\n exact: false,\n })),\n // Make sure that internal imports also honor any resolved installEntrypoints\n ...Object.entries(installEntrypoints).map(([key, val]) => ({\n find: key,\n replacement: val,\n exact: true,\n })),\n ],\n }),\n rollupPluginCatchFetch(),\n rollupPluginNodeResolve({\n mainFields: [...packageLookupFields, ...MAIN_FIELDS],\n extensions: ['.mjs', '.cjs', '.js', '.json'], // Default: [ '.mjs', '.js', '.json', '.node' ]\n // whether to prefer built-in modules (e.g. `fs`, `path`) or local ones with the same names\n preferBuiltins: true, // Default: true\n dedupe: userDefinedRollup.dedupe || [],\n // @ts-ignore: Added in v11+ of this plugin\n exportConditions: packageExportLookupFields,\n }),\n rollupPluginJson({\n preferConst: true,\n indent: ' ',\n compact: false,\n namedExports: true,\n }),\n rollupPluginCss(),\n rollupPluginReplace({\n preventAssignment: true,\n values: generateReplacements(env),\n }),\n rollupPluginCommonjs({\n extensions: ['.js', '.cjs'],\n esmExternals: Array.isArray(externalEsm)\n ? (id) => externalEsm.some((packageName) => isImportOfPackage(id, packageName))\n : externalEsm,\n requireReturnsDefault: 'auto',\n } as RollupCommonJSOptions),\n rollupPluginWrapInstallTargets(!!isTreeshake, installTargets, logger),\n stats && rollupPluginDependencyStats((info) => (dependencyStats = info)),\n rollupPluginNodeProcessPolyfill(env),\n polyfillNode && rollupPluginNodePolyfills(),\n ...(userDefinedRollup.plugins || []), // load user-defined plugins last\n rollupPluginCatchUnresolved(),\n rollupPluginStripSourceMapping(),\n ].filter(Boolean) as Plugin[],\n onwarn(warning) {\n // Log \"unresolved\" import warnings as an error, causing Snowpack to fail at the end.\n if (\n warning.code === 'PLUGIN_WARNING' &&\n warning.plugin === 'snowpack:rollup-plugin-catch-unresolved'\n ) {\n isFatalWarningFound = true;\n // Display posix-style on all environments, mainly to help with CI :)\n if (warning.id) {\n logger.error(`${warning.id}\\n ${warning.message}`);\n } else {\n logger.error(\n `${warning.message}. See https://www.snowpack.dev/reference/common-error-details`,\n );\n }\n return;\n }\n const {loc, message} = warning;\n const logMessage = loc ? `${loc.file}:${loc.line}:${loc.column} ${message}` : message;\n // These warnings are usually harmless in packages, so don't show them by default.\n if (\n warning.code === 'CIRCULAR_DEPENDENCY' ||\n warning.code === 'NAMESPACE_CONFLICT' ||\n warning.code === 'THIS_IS_UNDEFINED' ||\n warning.code === 'EMPTY_BUNDLE' ||\n warning.code === 'UNUSED_EXTERNAL_IMPORT'\n ) {\n logger.debug(logMessage);\n } else {\n logger.warn(logMessage);\n }\n },\n };\n const outputOptions: OutputOptions = {\n dir: destLoc,\n format: 'esm',\n sourcemap,\n exports: 'named',\n entryFileNames: (chunk) => {\n const targetName = getWebDependencyName(chunk.name);\n const proxiedName = sanitizePackageName(targetName);\n return `${proxiedName}.js`;\n },\n chunkFileNames: 'common/[name]-[hash].js',\n };\n\n rimraf.sync(destLoc);\n if (Object.keys(installEntrypoints).length > 0) {\n try {\n logger.debug(process.cwd());\n logger.debug(`running installer with options: ${JSON.stringify(inputOptions)}`);\n const packageBundle = await rollup(inputOptions);\n logger.debug(`installing npm packages: ${Object.keys(installEntrypoints).join(', ')}`);\n if (isFatalWarningFound) {\n // We don't know exactly which package failed because it happened in rollup\n // but users need all the information we *do know* in order to debug\n const packageName =\n Object.keys(installEntrypoints).length === 1\n ? `for ${Object.keys(installEntrypoints)[0]}`\n : `for one of ${Object.keys(installEntrypoints).join(', ')}`;\n throw new Error(FAILED_INSTALL_MESSAGE(packageName));\n }\n logger.debug(`writing install results to disk`);\n await packageBundle.write(outputOptions);\n } catch (_err) {\n logger.debug(`FAILURE: ${_err}`);\n const err: RollupError = _err;\n\n if (err.code === 'MISSING_EXPORT') {\n let [exportSpecifier, tail] = err.message.split(' is not exported by ');\n exportSpecifier = exportSpecifier.slice(1, -1);\n const specifier = tail.split('imported by ')[1];\n let modName;\n for (const [key, value] of Object.entries(installEntrypoints)) {\n if (value === specifier) {\n modName = key;\n break;\n }\n }\n throw new Error(\n `Module \"${modName}\" has no exported member \"${exportSpecifier}\". Did you mean to use \"import ${exportSpecifier} from '${modName}'\" instead?`,\n );\n }\n\n const errFilePath = err.loc?.file || err.id;\n if (!errFilePath) {\n throw err;\n }\n // NOTE: Rollup will fail instantly on most errors. Therefore, we can\n // only report one error at a time. `err.watchFiles` also exists, but\n // for now `err.loc.file` and `err.id` have all the info that we need.\n const failedExtension = path.extname(errFilePath);\n const suggestion = MISSING_PLUGIN_SUGGESTIONS[failedExtension] || err.message;\n // Display posix-style on all environments, mainly to help with CI :)\n const fileName = path.relative(cwd, errFilePath).replace(/\\\\/g, '/');\n logger.error(`Failed to load ${colors.bold(fileName)}\\n ${suggestion}`);\n throw new Error(FAILED_INSTALL_MESSAGE());\n }\n }\n\n mkdirp.sync(destLoc);\n await writeLockfile(path.join(destLoc, 'import-map.json'), importMap);\n for (const [assetName, assetLoc] of Object.entries(assetEntrypoints)) {\n const assetDest = `${destLoc}/${sanitizePackageName(assetName)}`;\n mkdirp.sync(path.dirname(assetDest));\n fs.copyFileSync(assetLoc, assetDest);\n }\n\n return {\n importMap,\n stats: dependencyStats,\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/generateProcessPolyfill.ts", "content": "/*\n(The MIT License)\n\nCopyright (c) 2013 Roman Shtylman \n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n'Software'), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\nIN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY\nCLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,\nTORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE\nSOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n*/\n\n/*\nTHIS IS A MODIFIED VERSION OF https://github.com/calvinmetcalf/node-process-es6\nORIGIANL ADDED IN COMMIT 6304406e065f356aeaa623a878d02be419b316d8 (good to know for diffing) \n*/\n\nexport function generateProcessPolyfill(env) {\n return `/* SNOWPACK PROCESS POLYFILL (based on https://github.com/calvinmetcalf/node-process-es6) */\nfunction defaultSetTimout() {\n throw new Error('setTimeout has not been defined');\n}\nfunction defaultClearTimeout () {\n throw new Error('clearTimeout has not been defined');\n}\nvar cachedSetTimeout = defaultSetTimout;\nvar cachedClearTimeout = defaultClearTimeout;\nvar globalContext;\nif (typeof window !== 'undefined') {\n globalContext = window;\n} else if (typeof self !== 'undefined') {\n globalContext = self;\n} else {\n globalContext = {};\n}\nif (typeof globalContext.setTimeout === 'function') {\n cachedSetTimeout = setTimeout;\n}\nif (typeof globalContext.clearTimeout === 'function') {\n cachedClearTimeout = clearTimeout;\n}\n\nfunction runTimeout(fun) {\n if (cachedSetTimeout === setTimeout) {\n //normal enviroments in sane situations\n return setTimeout(fun, 0);\n }\n // if setTimeout wasn't available but was latter defined\n if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {\n cachedSetTimeout = setTimeout;\n return setTimeout(fun, 0);\n }\n try {\n // when when somebody has screwed with setTimeout but no I.E. maddness\n return cachedSetTimeout(fun, 0);\n } catch(e){\n try {\n // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n return cachedSetTimeout.call(null, fun, 0);\n } catch(e){\n // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error\n return cachedSetTimeout.call(this, fun, 0);\n }\n }\n\n\n}\nfunction runClearTimeout(marker) {\n if (cachedClearTimeout === clearTimeout) {\n //normal enviroments in sane situations\n return clearTimeout(marker);\n }\n // if clearTimeout wasn't available but was latter defined\n if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {\n cachedClearTimeout = clearTimeout;\n return clearTimeout(marker);\n }\n try {\n // when when somebody has screwed with setTimeout but no I.E. maddness\n return cachedClearTimeout(marker);\n } catch (e){\n try {\n // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n return cachedClearTimeout.call(null, marker);\n } catch (e){\n // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.\n // Some versions of I.E. have different rules for clearTimeout vs setTimeout\n return cachedClearTimeout.call(this, marker);\n }\n }\n\n\n\n}\nvar queue = [];\nvar draining = false;\nvar currentQueue;\nvar queueIndex = -1;\n\nfunction cleanUpNextTick() {\n if (!draining || !currentQueue) {\n return;\n }\n draining = false;\n if (currentQueue.length) {\n queue = currentQueue.concat(queue);\n } else {\n queueIndex = -1;\n }\n if (queue.length) {\n drainQueue();\n }\n}\n\nfunction drainQueue() {\n if (draining) {\n return;\n }\n var timeout = runTimeout(cleanUpNextTick);\n draining = true;\n\n var len = queue.length;\n while(len) {\n currentQueue = queue;\n queue = [];\n while (++queueIndex < len) {\n if (currentQueue) {\n currentQueue[queueIndex].run();\n }\n }\n queueIndex = -1;\n len = queue.length;\n }\n currentQueue = null;\n draining = false;\n runClearTimeout(timeout);\n}\nfunction nextTick(fun) {\n var args = new Array(arguments.length - 1);\n if (arguments.length > 1) {\n for (var i = 1; i < arguments.length; i++) {\n args[i - 1] = arguments[i];\n }\n }\n queue.push(new Item(fun, args));\n if (queue.length === 1 && !draining) {\n runTimeout(drainQueue);\n }\n}\n// v8 likes predictible objects\nfunction Item(fun, array) {\n this.fun = fun;\n this.array = array;\n}\nItem.prototype.run = function () {\n this.fun.apply(null, this.array);\n};\nvar title = 'browser';\nvar platform = 'browser';\nvar browser = true;\nvar env = {};\nvar argv = [];\nvar version = ''; // empty string to avoid regexp issues\nvar versions = {};\nvar release = {};\nvar config = {};\n\nfunction noop() {}\n\nvar on = noop;\nvar addListener = noop;\nvar once = noop;\nvar off = noop;\nvar removeListener = noop;\nvar removeAllListeners = noop;\nvar emit = noop;\n\nfunction binding(name) {\n throw new Error('process.binding is not supported');\n}\n\nfunction cwd () { return '/' }\nfunction chdir (dir) {\n throw new Error('process.chdir is not supported');\n}function umask() { return 0; }\n\n// from https://github.com/kumavis/browser-process-hrtime/blob/master/index.js\nvar performance = globalContext.performance || {};\nvar performanceNow =\n performance.now ||\n performance.mozNow ||\n performance.msNow ||\n performance.oNow ||\n performance.webkitNow ||\n function(){ return (new Date()).getTime() };\n\n// generate timestamp or delta\n// see http://nodejs.org/api/process.html#process_process_hrtime\nfunction hrtime(previousTimestamp){\n var clocktime = performanceNow.call(performance)*1e-3;\n var seconds = Math.floor(clocktime);\n var nanoseconds = Math.floor((clocktime%1)*1e9);\n if (previousTimestamp) {\n seconds = seconds - previousTimestamp[0];\n nanoseconds = nanoseconds - previousTimestamp[1];\n if (nanoseconds<0) {\n seconds--;\n nanoseconds += 1e9;\n }\n }\n return [seconds,nanoseconds]\n}\n\nvar startTime = new Date();\nfunction uptime() {\n var currentTime = new Date();\n var dif = currentTime - startTime;\n return dif / 1000;\n}\n\nexport default {\n nextTick: nextTick,\n title: title,\n browser: browser,\n env: ${JSON.stringify(env)},\n argv: argv,\n version: version,\n versions: versions,\n on: on,\n addListener: addListener,\n once: once,\n off: off,\n removeListener: removeListener,\n removeAllListeners: removeAllListeners,\n emit: emit,\n binding: binding,\n cwd: cwd,\n chdir: chdir,\n umask: umask,\n hrtime: hrtime,\n platform: platform,\n release: release,\n config: config,\n uptime: uptime\n};\n\nexport { addListener, argv, binding, browser, chdir, config, cwd, emit, env, hrtime, nextTick, off, on, once, platform, release, removeAllListeners, removeListener, title, umask, uptime, version, versions };\n`;\n}\n\nexport default generateProcessPolyfill;\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-alias.ts", "content": "/**\nThis plugin was forked from the https://github.com/rollup/plugins/tree/master/packages/alias package:\n\nThe MIT License (MIT)\n\nCopyright (c) 2019 RollupJS Plugin Contributors (https://github.com/rollup/plugins/graphs/contributors)\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n\n*/\n\nimport {platform} from 'os';\nimport slash from 'slash';\nimport type {PartialResolvedId, Plugin} from 'rollup';\n\nconst VOLUME = /^([A-Z]:)/i;\nconst IS_WINDOWS = platform() === 'win32';\nconst noop = () => null;\n\nfunction matches(alias: Alias, importee: string) {\n if (alias.find instanceof RegExp) {\n return alias.find.test(importee);\n }\n if (importee.length < alias.find.length) {\n return false;\n }\n if (importee === alias.find) {\n return true;\n }\n if (alias.exact) {\n return false;\n }\n const importeeStartsWithKey = importee.indexOf(alias.find) === 0;\n const importeeHasSlashAfterKey = importee.substring(alias.find.length)[0] === '/';\n return importeeStartsWithKey && importeeHasSlashAfterKey;\n}\n\nfunction normalizeId(id: string): string;\nfunction normalizeId(id: string | undefined): string | undefined;\nfunction normalizeId(id: string | undefined) {\n if (typeof id === 'string' && (IS_WINDOWS || VOLUME.test(id))) {\n return slash(id.replace(VOLUME, ''));\n }\n return id;\n}\n\ninterface Alias {\n find: string | RegExp;\n replacement: string;\n exact: boolean;\n}\n\nfunction getEntries({entries}): readonly Alias[] {\n if (!entries) {\n return [];\n }\n return entries;\n}\n\nexport function rollupPluginAlias(options: {entries: Alias[]}): Plugin {\n const entries = getEntries(options);\n\n if (entries.length === 0) {\n return {\n name: 'alias',\n resolveId: noop,\n };\n }\n\n return {\n name: 'alias',\n resolveId(importee, importer) {\n const importeeId = normalizeId(importee);\n const importerId = normalizeId(importer);\n\n // First match is supposed to be the correct one\n const matchedEntry = entries.find((entry) => matches(entry, importeeId));\n if (!matchedEntry || !importerId) {\n return null;\n }\n\n const updatedId = normalizeId(\n importeeId.replace(matchedEntry.find, matchedEntry.replacement),\n );\n\n return this.resolve(updatedId, importer, {skipSelf: true}).then((resolved) => {\n let finalResult: PartialResolvedId | null = resolved;\n if (!finalResult) {\n finalResult = {id: updatedId};\n }\n return finalResult;\n });\n },\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-catch-fetch.ts", "content": "import path from 'path';\nimport {Plugin} from 'rollup';\n\nconst FETCH_POLYFILL = `\n// native patch for: node-fetch, whatwg-fetch\n// ref: https://github.com/tc39/proposal-global\nvar getGlobal = function () {\n if (typeof self !== 'undefined') { return self; }\n if (typeof window !== 'undefined') { return window; }\n if (typeof global !== 'undefined') { return global; }\n throw new Error('unable to locate global object');\n}\nvar global = getGlobal();\nexport default global.fetch.bind(global);\nexport const Headers = global.Headers;\nexport const Request = global.Request;\nexport const Response = global.Response;\n`;\n\n/**\n * rollup-plugin-catch-fetch\n *\n * How it works: NPM packages will sometimes contain Node.js-specific polyfills\n * for the native browser Fetch API. Since this makes no sense in an ESM web\n * project, we can replace these expensive polyfills with native references to\n * the fetch API.\n *\n * This still allows you to polyfill fetch in older browsers, if you desire.\n */\nfunction isNodeFetch(id: string): boolean {\n return (\n id === 'node-fetch' ||\n id === 'whatwg-fetch' ||\n id.includes(path.join('node_modules', 'node-fetch')) || // note: sometimes Snowpack has found the entry file already\n id.includes(path.join('node_modules', 'whatwg-fetch'))\n );\n}\n\nexport function rollupPluginCatchFetch(): Plugin {\n return {\n name: 'snowpack:fetch-handler',\n resolveId(id) {\n return isNodeFetch(id) ? id : null;\n },\n load(id) {\n return isNodeFetch(id) ? FETCH_POLYFILL : null;\n },\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-catch-unresolved.ts", "content": "import builtinModules from 'builtin-modules';\nimport {Plugin} from 'rollup';\n\n/**\n * rollup-plugin-catch-unresolved\n *\n * Catch any unresolved imports to give proper warnings (Rollup default is to ignore).\n */\nexport function rollupPluginCatchUnresolved(): Plugin {\n return {\n name: 'snowpack:rollup-plugin-catch-unresolved',\n resolveId(id, importer) {\n // Ignore remote http/https imports\n if (id.startsWith('http://') || id.startsWith('https://')) {\n return false;\n }\n if (builtinModules.indexOf(id) !== -1) {\n this.warn({\n id: importer,\n message: `Module \"${id}\" (Node.js built-in) is not available in the browser. Run Snowpack with --polyfill-node to fix.`,\n });\n } else if (id.startsWith('./') || id.startsWith('../')) {\n this.warn({\n id: importer,\n message: `Import \"${id}\" could not be resolved from file.`,\n });\n } else {\n this.warn({\n id: importer,\n message: `Module \"${id}\" could not be resolved by Snowpack (Is it installed?).`,\n });\n }\n return false;\n },\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-css.ts", "content": "import {Plugin} from 'rollup';\n\nfunction getInjectorCode(name: string, code: string) {\n return `\n/** SNOWPACK INJECT STYLE: ${name} */\nfunction __snowpack__injectStyle(css) {\n const headEl = document.head || document.getElementsByTagName('head')[0];\n const styleEl = document.createElement('style');\n styleEl.type = 'text/css';\n if (styleEl.styleSheet) {\n styleEl.styleSheet.cssText = css;\n } else {\n styleEl.appendChild(document.createTextNode(css));\n }\n headEl.appendChild(styleEl);\n}\n__snowpack__injectStyle(${JSON.stringify(code)});\\n`;\n}\n\n/**\n * rollup-plugin-css\n *\n * Support installing any imported CSS into your dependencies. This isn't strictly valid\n * ESM code, but it is popular in the npm ecosystem & web development ecosystems. It also\n * solves a problem that is difficult to solve otherwise (referencing CSS from JS) so for\n * those reasons we have added default support for importing CSS into Snowpack v2.\n */\nexport function rollupPluginCss() {\n return {\n name: 'snowpack:rollup-plugin-css',\n async transform(code: string, id: string) {\n if (!id.endsWith('.css')) {\n return null;\n }\n const humanReadableName = id.replace(/.*node_modules[\\/\\\\]/, '').replace(/[\\/\\\\]/g, '/');\n return getInjectorCode(humanReadableName, code);\n },\n } as Plugin;\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-node-process-polyfill.ts", "content": "import inject from '@rollup/plugin-inject';\nimport {Plugin} from 'rollup';\nimport generateProcessPolyfill from './generateProcessPolyfill';\n\nconst PROCESS_MODULE_NAME = 'process';\nexport function rollupPluginNodeProcessPolyfill(env = {}): Plugin {\n const injectPlugin = inject({\n process: PROCESS_MODULE_NAME,\n include: /\\.(cjs|js|jsx|mjs|ts|tsx)$/, // only target JavaScript files\n });\n\n return {\n ...injectPlugin,\n name: 'snowpack:rollup-plugin-node-process-polyfill',\n resolveId(source) {\n if (source === PROCESS_MODULE_NAME) {\n return PROCESS_MODULE_NAME;\n }\n\n return null;\n },\n load(id) {\n if (id === PROCESS_MODULE_NAME) {\n return {code: generateProcessPolyfill(env), moduleSideEffects: false};\n }\n\n return null;\n },\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-stats.ts", "content": "import fs from 'fs';\nimport path from 'path';\nimport {OutputBundle, Plugin} from 'rollup';\nimport zlib from 'zlib';\nimport {DependencyType, DependencyStatsOutput} from '../types';\n\nexport function rollupPluginDependencyStats(\n cb: (dependencyInfo: DependencyStatsOutput) => void,\n): Plugin {\n let outputDir: string;\n let existingFileCache: {[fileName: string]: number} = {};\n let statsSummary: DependencyStatsOutput = {\n direct: {},\n common: {},\n };\n\n function buildExistingFileCache(bundle: OutputBundle) {\n for (let fileName of Object.keys(bundle)) {\n const filePath = path.join(outputDir, fileName);\n if (fs.existsSync(filePath)) {\n const {size} = fs.statSync(filePath);\n existingFileCache[fileName] = size;\n }\n }\n }\n\n function compareDependencies(\n files: {fileName: string; contents: Buffer}[],\n type: DependencyType,\n ) {\n for (let {fileName, contents} of files) {\n const size = contents.byteLength;\n statsSummary[type][fileName] = {\n size: size,\n gzip: zlib.gzipSync(contents).byteLength,\n brotli: zlib.brotliCompressSync ? zlib.brotliCompressSync(contents).byteLength : 0,\n };\n if (existingFileCache[fileName]) {\n const delta = (size - existingFileCache[fileName]) / 1000;\n statsSummary[type][fileName].delta = delta;\n }\n }\n }\n\n return {\n name: 'snowpack:rollup-plugin-stats',\n generateBundle(options, bundle) {\n outputDir = options.dir!;\n buildExistingFileCache(bundle);\n },\n writeBundle(_, bundle) {\n const directDependencies: {fileName: string; contents: Buffer}[] = [];\n const commonDependencies: {fileName: string; contents: Buffer}[] = [];\n for (const [fileName, assetOrChunk] of Object.entries(bundle)) {\n const raw = assetOrChunk.type === 'asset' ? assetOrChunk.source : assetOrChunk.code;\n const contents = Buffer.isBuffer(raw)\n ? raw\n : typeof raw === 'string'\n ? Buffer.from(raw, 'utf8')\n : Buffer.from(raw);\n if (fileName.startsWith('common')) {\n commonDependencies.push({fileName, contents});\n } else {\n directDependencies.push({fileName, contents});\n }\n }\n compareDependencies(directDependencies, 'direct');\n compareDependencies(commonDependencies, 'common');\n cb(statsSummary);\n },\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-strip-source-mapping.ts", "content": "import {Plugin} from 'rollup';\n\n/**\n * rollup-plugin-strip-source-mapping\n *\n * Remove any lingering source map comments\n */\nexport function rollupPluginStripSourceMapping(): Plugin {\n return {\n name: 'snowpack:rollup-plugin-strip-source-mapping',\n transform: (code) => ({\n code: code\n // [a-zA-Z0-9-_\\*?\\.\\/\\&=+%]: valid URL characters (for sourcemaps)\n .replace(/\\/\\/#\\s*sourceMappingURL=[a-zA-Z0-9-_\\*\\?\\.\\/\\&=+%\\s]+$/gm, ''),\n map: null,\n }),\n };\n}\n" }, { "path": "esinstall/src/rollup-plugins/rollup-plugin-wrap-install-targets.ts", "content": "import fs from 'fs';\nimport path from 'path';\nimport {Plugin} from 'rollup';\nimport execa from 'execa';\nimport {VM as VM2} from 'vm2';\nimport {AbstractLogger, InstallTarget} from '../types';\nimport {getWebDependencyName, isJavaScript, isRemoteUrl, isTruthy} from '../util';\nimport isValidIdentifier from 'is-valid-identifier';\nimport resolve from 'resolve';\n\n// Use CJS intentionally here! ESM interface is async but CJS is sync, and this file is sync\nconst {parse} = require('cjs-module-lexer');\n\nfunction isValidNamedExport(name: string): boolean {\n return name !== 'default' && name !== '__esModule' && isValidIdentifier(name);\n}\n\n// Add popular CJS/UMD packages here that use \"synthetic\" named imports in their documentation.\n// Our scanner can statically scan most packages without an opt-in here, but these packages\n// are built oddly, in a way that we can't statically analyze.\nconst TRUSTED_CJS_PACKAGES = ['chai/index.js', 'events/events.js', 'uuid/index.js'];\n\n// These packages are written in such a way that the official CJS scanner succeeds at scanning\n// the file but fails to pick up some exports. Add popular packages here to save everyone a bit\n// of headache.\n// We use the exact file here to match the official package, but not any ESM aliase packages\n// that the user may have installed instead (ex: react-esm).\nconst UNSCANNABLE_CJS_PACKAGES = [\n 'chai/index.js',\n 'events/events.js',\n 'property-expr/index.js',\n // Note: resolved in v4.x release\n 'react-transition-group/index.js',\n];\n\n/**\n * rollup-plugin-wrap-install-targets\n *\n * How it works:\n * 1. An array of \"install targets\" are passed in, describing all known imports + metadata.\n * 2. If isTreeshake: Known imports are marked for tree-shaking by appending 'snowpack-wrap:' to the input value.\n * 3. If autoDetectPackageExports match: Also mark for wrapping, and use automatic export detection.\n * 4. On load, we return a false virtual file for all \"snowpack-wrap:\" inputs.\n * a. That virtual file contains only `export ... from 'ACTUAL_FILE_PATH';` exports\n * b. Rollup uses those exports to drive its tree-shaking algorithm.\n * c. Rollup uses those exports to inform its \"namedExports\" for Common.js entrypoints.\n */\nexport function rollupPluginWrapInstallTargets(\n isTreeshake: boolean,\n installTargets: InstallTarget[],\n logger: AbstractLogger,\n): Plugin {\n const installTargetSummaries: {[loc: string]: InstallTarget} = {};\n const cjsScannedNamedExports = new Map();\n\n /**\n * Attempt #1: Static analysis: Lower Fidelity, but faster.\n * Do our best job to statically scan a file for named exports. This uses \"cjs-module-lexer\", the\n * same CJS export scanner that Node.js uses internally. Very fast, but only works on some modules,\n * depending on how they were build/written/compiled.\n */\n function cjsAutoDetectExportsStatic(filename: string, visited = new Set()): string[] | undefined {\n const isMainEntrypoint = visited.size === 0;\n // Prevent infinite loops via circular dependencies.\n if (visited.has(filename)) {\n return [];\n } else {\n visited.add(filename);\n }\n const fileContents = fs.readFileSync(filename, 'utf8');\n try {\n // Attempt 1 - CJS: Run cjs-module-lexer to statically analyze exports.\n let {exports, reexports} = parse(fileContents);\n // If re-exports were detected (`exports.foo = require(...)`) then resolve them here.\n let resolvedReexports: string[] = [];\n if (reexports.length > 0) {\n resolvedReexports = ([] as string[]).concat.apply(\n [],\n reexports\n .map((e) =>\n cjsAutoDetectExportsStatic(\n resolve.sync(e, {basedir: path.dirname(filename)}),\n visited,\n ),\n )\n .filter(isTruthy),\n );\n }\n // If nothing was detected, return undefined.\n // Otherwise, resolve and flatten all exports into a single array, remove invalid exports.\n const resolvedExports = Array.from(new Set([...exports, ...resolvedReexports])).filter(\n isValidNamedExport,\n );\n return isMainEntrypoint && resolvedExports.length === 0 ? undefined : resolvedExports;\n } catch (err) {\n // Safe to ignore, this is usually due to the file not being CJS.\n logger.debug(`cjsAutoDetectExportsStatic ${filename}: ${err.message}`);\n }\n }\n\n /**\n * Attempt #2a - Runtime analysis: More powerful, but slower. (trusted code)\n * This function spins off a Node.js process to analyze the most accurate set of named imports that this\n * module supports. If this fails, there's not much else possible that we could do.\n *\n * We consider this \"trusted\" because it will actually run the package code in Node.js on your machine.\n * Since this is code that you are intentionally bundling into your application, we consider this fine\n * for most users and equivilent to the current security story of Node.js/npm. But, if you are operating\n * a service that runs esinstall on arbitrary code, you should set `process.env.ESINSTALL_UNTRUSTED_ENVIRONMENT`\n * so that this is skipped.\n */\n function cjsAutoDetectExportsRuntimeTrusted(normalizedFileName: string): string[] | undefined {\n // Skip if set to not trust package code (besides a few popular, always-trusted packages).\n if (\n process.env.ESINSTALL_UNTRUSTED_ENVIRONMENT &&\n !TRUSTED_CJS_PACKAGES.includes(normalizedFileName)\n ) {\n return undefined;\n }\n try {\n const {stdout} = execa.sync(\n `node`,\n ['-p', `JSON.stringify(Object.keys(require('${normalizedFileName}')))`],\n {\n cwd: __dirname,\n extendEnv: false,\n },\n );\n const exportsResult = JSON.parse(stdout).filter(isValidNamedExport);\n logger.debug(`cjsAutoDetectExportsRuntime success ${normalizedFileName}: ${exportsResult}`);\n return exportsResult;\n } catch (err) {\n logger.debug(`cjsAutoDetectExportsRuntime error ${normalizedFileName}: ${err.message}`);\n }\n }\n\n /**\n * Attempt #2b - Sandboxed runtime analysis: More powerful, but slower.\n * This will only work on UMD and very simple CJS files (require not supported).\n * Uses VM2 to run safely sandbox untrusted code (no access no Node.js primitives, just JS).\n * If nothing was detected, return undefined.\n */\n function cjsAutoDetectExportsRuntimeUntrusted(filename: string): string[] | undefined {\n try {\n const fileContents = fs.readFileSync(filename, 'utf8');\n const vm = new VM2({wasm: false, fixAsync: false});\n const exportsResult = Object.keys(\n vm.run('const exports={}; const module={exports}; ' + fileContents + ';; module.exports;'),\n );\n logger.debug(`cjsAutoDetectExportsRuntimeUntrusted success ${filename}: ${exportsResult}`);\n return exports.filter((identifier) => isValidIdentifier(identifier));\n } catch (err) {\n logger.debug(`cjsAutoDetectExportsRuntimeUntrusted error ${filename}: ${err.message}`);\n }\n }\n return {\n name: 'snowpack:wrap-install-targets',\n // Mark some inputs for tree-shaking.\n buildStart(inputOptions) {\n const input = inputOptions.input as {[entryAlias: string]: string};\n for (const [key, val] of Object.entries(input)) {\n if (isRemoteUrl(val)) {\n continue;\n }\n if (!isJavaScript(val)) {\n continue;\n }\n const allInstallTargets = installTargets.filter(\n (imp) => getWebDependencyName(imp.specifier) === key,\n );\n const installTargetSummary = allInstallTargets.reduce((summary, imp) => {\n summary.all = summary.all || imp.all;\n summary.default = summary.default || imp.default || imp.all;\n summary.namespace = summary.namespace || imp.namespace || imp.all;\n summary.named = [...(summary.named || []), ...imp.named];\n return summary;\n }, {} as any);\n installTargetSummaries[val] = installTargetSummary;\n const normalizedFileLoc = val.split(path.win32.sep).join(path.posix.sep);\n const knownBadPackage = UNSCANNABLE_CJS_PACKAGES.some((p) =>\n normalizedFileLoc.includes(`node_modules/${p}${p.endsWith('.js') ? '' : '/'}`),\n );\n const cjsExports =\n // If we can trust the static analyzer, run that first.\n (!knownBadPackage && cjsAutoDetectExportsStatic(val)) ||\n // Otherwise, run our more powerful, runtime analysis.\n // Attempted trusted first (won't run in untrusted environments).\n cjsAutoDetectExportsRuntimeTrusted(normalizedFileLoc) ||\n cjsAutoDetectExportsRuntimeUntrusted(normalizedFileLoc);\n if (cjsExports && cjsExports.length > 0) {\n cjsScannedNamedExports.set(normalizedFileLoc, cjsExports);\n input[key] = `snowpack-wrap:${val}`;\n }\n if (isTreeshake && !installTargetSummary.all) {\n input[key] = `snowpack-wrap:${val}`;\n }\n }\n },\n resolveId(source) {\n if (source.startsWith('snowpack-wrap:')) {\n return source;\n }\n return null;\n },\n load(id) {\n if (!id.startsWith('snowpack-wrap:')) {\n return null;\n }\n const fileLoc = id.substring('snowpack-wrap:'.length);\n // Reduce all install targets into a single \"summarized\" install target.\n const installTargetSummary = installTargetSummaries[fileLoc];\n let uniqueNamedExports = Array.from(new Set(installTargetSummary.named));\n const normalizedFileLoc = fileLoc.split(path.win32.sep).join(path.posix.sep);\n const scannedNamedExports = cjsScannedNamedExports.get(normalizedFileLoc);\n if (scannedNamedExports && (!isTreeshake || installTargetSummary.namespace)) {\n uniqueNamedExports = scannedNamedExports || [];\n installTargetSummary.default = true;\n }\n const result = `\n ${installTargetSummary.namespace ? `export * from '${normalizedFileLoc}';` : ''}\n ${\n installTargetSummary.default\n ? `import __pika_web_default_export_for_treeshaking__ from '${normalizedFileLoc}'; export default __pika_web_default_export_for_treeshaking__;`\n : ''\n }\n ${`export {${uniqueNamedExports.join(',')}} from '${normalizedFileLoc}';`}\n `;\n return result;\n },\n };\n}\n" }, { "path": "esinstall/src/stats.ts", "content": "import * as colors from 'kleur/colors';\nimport {DependencyStats, DependencyStatsOutput} from './types';\n\n/** The minimum width, in characters, of each size column */\nconst SIZE_COLUMN_WIDTH = 11;\n\n/** Generic Object.entries() alphabetical sort by keys. */\nfunction entriesSort([filenameA]: [string, any], [filenameB]: [string, any]) {\n return filenameA.localeCompare(filenameB);\n}\n\n/** Pretty-prints number of bytes as \"XXX KB\" */\nfunction formatSize(size) {\n let kb = Math.round((size / 1000) * 100) / 100;\n if (kb >= 1000) {\n kb = Math.floor(kb);\n }\n let color;\n if (kb < 15) {\n color = 'green';\n } else if (kb < 30) {\n color = 'yellow';\n } else {\n color = 'red';\n }\n return colors[color](`${kb} KB`.padEnd(SIZE_COLUMN_WIDTH));\n}\n\nfunction formatDelta(delta) {\n const kb = Math.round(delta * 100) / 100;\n const color = delta > 0 ? 'red' : 'green';\n return colors[color](`Δ ${delta > 0 ? '+' : ''}${kb} KB`);\n}\n\nfunction formatFileInfo(\n filename: string,\n stats: DependencyStats,\n padEnd: number,\n isLastFile: boolean,\n): string {\n const lineGlyph = colors.dim(isLastFile ? '└─' : '├─');\n const lineName = filename.padEnd(padEnd);\n const fileStat = formatSize(stats.size);\n const gzipStat = formatSize(stats.gzip);\n const brotliStat = formatSize(stats.brotli);\n const lineStat = fileStat + gzipStat + brotliStat;\n let lineDelta = '';\n if (stats.delta) {\n lineDelta = colors.dim('[') + formatDelta(stats.delta) + colors.dim(']');\n }\n // Trim trailing whitespace (can mess with formatting), but keep indentation.\n return ` ` + `${lineGlyph} ${lineName} ${lineStat} ${lineDelta}`.trim();\n}\n\nfunction formatFiles(files: [string, DependencyStats][], padEnd: number) {\n const strippedFiles = files.map(([filename, stats]) => [\n filename.replace(/^common\\//, ''),\n stats,\n ]) as [string, DependencyStats][];\n return strippedFiles\n .map(([filename, stats], index) =>\n formatFileInfo(filename, stats, padEnd, index >= files.length - 1),\n )\n .join('\\n');\n}\n\nexport function printStats(dependencyStats: DependencyStatsOutput): string {\n let output = '';\n const {direct, common} = dependencyStats;\n const allDirect = Object.entries(direct).sort(entriesSort);\n const allCommon = Object.entries(common).sort(entriesSort);\n const maxFileNameLength =\n [...allCommon, ...allDirect].reduce(\n (max, [filename]) => Math.max(filename.length, max),\n 'web_modules/'.length,\n ) + 1;\n output +=\n ` ⦿ ${colors.bold('web_modules/'.padEnd(maxFileNameLength + 4))}` +\n colors.bold(colors.underline('size'.padEnd(SIZE_COLUMN_WIDTH - 2))) +\n ' ' +\n colors.bold(colors.underline('gzip'.padEnd(SIZE_COLUMN_WIDTH - 2))) +\n ' ' +\n colors.bold(colors.underline('brotli'.padEnd(SIZE_COLUMN_WIDTH - 2))) +\n `\\n`;\n output += `${formatFiles(allDirect, maxFileNameLength)}\\n`;\n if (Object.values(common).length > 0) {\n output += ` ⦿ ${colors.bold('web_modules/common/ (Shared)')}\\n`;\n output += `${formatFiles(allCommon, maxFileNameLength)}`;\n }\n return `\\n${output}\\n`;\n}\n" }, { "path": "esinstall/src/types.ts", "content": "export type DeepPartial = {\n [P in keyof T]?: T[P] extends Array\n ? Array>\n : T[P] extends ReadonlyArray\n ? ReadonlyArray>\n : DeepPartial;\n};\n\nexport type EnvVarReplacements = Record;\n\nexport interface ImportMap {\n imports: {[packageName: string]: string};\n}\n\nexport interface AbstractLogger {\n debug: (...args: any[]) => void;\n log: (...args: any[]) => void;\n warn: (...args: any[]) => void;\n error: (...args: any[]) => void;\n}\n\n/**\n * An install target represents information about a dependency to install.\n * The specifier is the key pointing to the dependency, either as a package\n * name or as an actual file path within node_modules. All other properties\n * are metadata about what is actually being imported.\n */\nexport type InstallTarget = {\n specifier: string;\n all: boolean;\n default: boolean;\n namespace: boolean;\n named: string[];\n};\n\nexport type DependencyStats = {\n size: number;\n gzip: number;\n brotli?: number;\n delta?: number;\n};\n\nexport type DependencyType = 'direct' | 'common';\n\nexport type DependencyStatsMap = {\n [filePath: string]: DependencyStats;\n};\n\nexport type DependencyStatsOutput = Record;\n\nexport type LoggerLevel = 'debug' | 'info' | 'warn' | 'error' | 'silent'; // same as Pino\nexport type LoggerEvent = 'debug' | 'info' | 'warn' | 'error';\nexport interface LoggerOptions {\n /** (optional) change name at beginning of line */\n name?: string;\n}\n\n// TODO this is incomplete and could be an array.\nexport type ExportMapEntry =\n | string\n | {\n browser?: ExportMapEntry;\n import?: ExportMapEntry;\n default?: ExportMapEntry;\n require?: ExportMapEntry;\n };\n\nexport type ExportMap = Record;\nexport type ExportField = string | ExportMap;\n\n//\n/**\n * https://github.com/defunctzombie/package-browser-field-spec\n * \"browser\": \"main.js\",\n * \"browser\": { \"./\": \"main.js\" }\n * \"browser\": { \"./foo\": false } // don't include in bundle\n */\nexport type BrowserField = string | Record;\n\n// This is the package.json, with fields we care about\nexport type PackageManifest = {\n name: string;\n version: string;\n main?: string; // This is optional, actually\n module?: string;\n exports?: ExportField;\n browser?: BrowserField;\n types?: string;\n typings?: string;\n};\n\nexport type PackageManifestWithExports = PackageManifest & {\n exports: ExportMap;\n};\n" }, { "path": "esinstall/src/util.ts", "content": "import {promises as fs, realpathSync} from 'fs';\nimport path from 'path';\nimport validatePackageName from 'validate-npm-package-name';\nimport {InstallTarget, ImportMap, PackageManifest} from './types';\nimport resolve from 'resolve';\n\n// We need to use eval here to prevent Rollup from detecting this use of `require()`\nexport const NATIVE_REQUIRE = eval('require');\n\nexport async function writeLockfile(loc: string, importMap: ImportMap): Promise {\n const sortedImportMap: ImportMap = {imports: {}};\n for (const key of Object.keys(importMap.imports).sort()) {\n sortedImportMap.imports[key] = importMap.imports[key];\n }\n return fs.writeFile(loc, JSON.stringify(sortedImportMap, undefined, 2), {encoding: 'utf8'});\n}\n\nexport function isRemoteUrl(val: string): boolean {\n return /\\w+\\:\\/\\//.test(val) || val.startsWith('//');\n}\n\nexport function isTruthy(item: T | false | null | undefined): item is T {\n return Boolean(item);\n}\n\n/** Get the package name + an entrypoint within that package (if given). */\nexport function parsePackageImportSpecifier(imp: string): [string, string | null] {\n const impParts = imp.split('/');\n if (imp.startsWith('@')) {\n const [scope, name, ...rest] = impParts;\n return [`${scope}/${name}`, rest.join('/') || null];\n }\n const [name, ...rest] = impParts;\n return [name, rest.join('/') || null];\n}\n\n/**\n * Given a package name, look for that package's package.json manifest.\n * Return both the manifest location (if believed to exist) and the\n * manifest itself (if found).\n *\n * NOTE: You used to be able to require() a package.json file directly,\n * but now with export map support in Node v13 that's no longer possible.\n */\nexport function resolveDependencyManifest(\n dep: string,\n cwd: string,\n): [string | null, PackageManifest | null] {\n try {\n // resolve doesn't care about export map rules, so should find a package.json\n // if one does exist.\n const pkgPth = resolve.sync(`${dep}/package.json`, {\n basedir: cwd,\n });\n\n const depManifest = realpathSync.native(pkgPth);\n return [depManifest, NATIVE_REQUIRE(depManifest)];\n } catch {\n // This shouldn't ever happen if the package does exist.\n return [null, null];\n }\n}\n\n/**\n * If Rollup erred parsing a particular file, show suggestions based on its\n * file extension (note: lowercase is fine).\n */\nexport const MISSING_PLUGIN_SUGGESTIONS: {[ext: string]: string} = {\n '.svelte':\n 'Try installing rollup-plugin-svelte and adding it to Snowpack (https://www.snowpack.dev/tutorials/svelte)',\n '.vue':\n 'Try installing rollup-plugin-vue and adding it to Snowpack (https://www.snowpack.dev/guides/vue)',\n};\n\n/**\n * For the given import specifier, return an alias entry if one is matched.\n */\nexport function findMatchingAliasEntry(\n alias: Record,\n spec: string,\n): {from: string; to: string; type: 'package' | 'path'} | undefined {\n // Only match bare module specifiers. relative and absolute imports should not match\n if (\n spec === '.' ||\n spec === '..' ||\n spec.startsWith('./') ||\n spec.startsWith('../') ||\n spec.startsWith('/') ||\n spec.startsWith('http://') ||\n spec.startsWith('https://')\n ) {\n return undefined;\n }\n\n for (const [from, to] of Object.entries(alias)) {\n let foundType: 'package' | 'path' = isPackageAliasEntry(to) ? 'package' : 'path';\n const isExactMatch = spec === removeTrailingSlash(from);\n const isDeepMatch = spec.startsWith(addTrailingSlash(from));\n if (isExactMatch || isDeepMatch) {\n return {\n from,\n to,\n type: foundType,\n };\n }\n }\n}\n\n/**\n * For the given import specifier, return an alias entry if one is matched.\n */\nexport function isPackageAliasEntry(val: string): boolean {\n return !path.isAbsolute(val);\n}\n\n/** Get full extensions of files */\nexport function getExt(fileName: string) {\n return {\n /** base extension (e.g. `.js`) */\n baseExt: path.extname(fileName).toLocaleLowerCase(),\n /** full extension, if applicable (e.g. `.proxy.js`) */\n expandedExt: path.basename(fileName).replace(/[^.]+/, '').toLocaleLowerCase(),\n };\n}\n\n/**\n * Sanitizes npm packages that end in .js (e.g `tippy.js` -> `tippyjs`).\n * This is necessary because Snowpack can’t create both a file and directory\n * that end in .js.\n */\nexport function sanitizePackageName(filepath: string): string {\n const dirs = filepath.split('/');\n const file = dirs.pop() as string;\n return [...dirs.map((path) => path.replace(/\\.js$/i, 'js')), file].join('/');\n}\n\n/**\n * Formats the snowpack dependency name from a \"webDependencies\" input value:\n * 2. Remove any \".js\"/\".mjs\" extension (will be added automatically by Rollup)\n */\nexport function getWebDependencyName(dep: string): string {\n return validatePackageName(dep).validForNewPackages\n ? dep.replace(/\\.js$/i, 'js') // if this is a top-level package ending in .js, replace with js (e.g. tippy.js -> tippyjs)\n : dep.replace(/\\.m?js$/i, ''); // otherwise simply strip the extension (Rollup will resolve it)\n}\n\n/** Add / to beginning of string (but don’t double-up) */\nexport function addLeadingSlash(path: string) {\n return path.replace(/^\\/?/, '/');\n}\n\n/** Add / to the end of string (but don’t double-up) */\nexport function addTrailingSlash(path: string) {\n return path.replace(/\\/?$/, '/');\n}\n\n/** Remove \\ and / from beginning of string */\nexport function removeLeadingSlash(path: string) {\n return path.replace(/^[/\\\\]+/, '');\n}\n\n/** Remove \\ and / from end of string */\nexport function removeTrailingSlash(path: string) {\n return path.replace(/[/\\\\]+$/, '');\n}\n\nexport function createInstallTarget(specifier: string, all = true): InstallTarget {\n return {\n specifier,\n all,\n default: false,\n namespace: false,\n named: [],\n };\n}\n\nexport function isJavaScript(pathname: string): boolean {\n const ext = path.extname(pathname).toLowerCase();\n return ext === '.js' || ext === '.mjs' || ext === '.cjs';\n}\n\n/**\n * Detect the web dependency \"type\" as either JS or ASSET:\n * - BUNDLE: Install and bundle this file with Rollup engine.\n * - ASSET: Copy this file directly.\n */\nconst bundleTypeExtensions = new Set(['.svelte', '.vue', '.astro']);\n\nexport function getWebDependencyType(pathname: string): 'ASSET' | 'BUNDLE' | 'DTS' {\n const ext = path.extname(pathname).toLowerCase();\n // JavaScript should always be bundled.\n if (isJavaScript(pathname)) {\n return 'BUNDLE';\n }\n // Svelte & Vue (& Astro) should always be bundled because we want to show the missing plugin\n // error if a Svelte or Vue or Astro file is the install target. Without this, the .svelte/.vue\n // file would be treated like an asset and sent to the web as-is.\n if (bundleTypeExtensions.has(ext)) {\n return 'BUNDLE';\n }\n\n // TypeScript typings\n if (pathname.endsWith('.d.ts')) {\n return 'DTS';\n }\n\n // All other files should be treated as assets (copied over directly).\n return 'ASSET';\n}\n" }, { "path": "esinstall/tsconfig.json", "content": "{\n \"include\": [\"src\"],\n \"compilerOptions\": {\n \"outDir\": \"lib\",\n \"module\": \"commonjs\",\n \"target\": \"es2018\",\n \"moduleResolution\": \"node\",\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"strict\": true,\n \"sourceMap\": true,\n \"noImplicitAny\": false,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"skipLibCheck\": true\n }\n}\n" }, { "path": "examples/.gitignore", "content": "yarn.lock\n" }, { "path": "examples/https-ssl-certificates/README.md", "content": "---\nlayout: ../../main.njk\ntitle: SSL Certificates\n---\n\n```\nnpm start -- --secure\n```\n\nSnowpack provides an easy way to use a local HTTPS server during development through the use of the `--secure` flag.\n\nWhen enabled, Snowpack will create an HTTPS server with HTTP2 support enabled using either:\n\n - (default) the `snowpack.key` and `snowpack.crt` file in the root directory of your site\n - (if provided) the TLS certificate and private key files at the paths specified in `devOptions.secure.cert` and `devOptions.secure.key` in the Snowpack configuration.\n\n## Generating SSL Certificates\n\nYou can automatically generate credentials for your project via either:\n\n- [devcert (no install required)](https://github.com/davewasmer/devcert-cli): `npx devcert-cli generate localhost`\n- [mkcert (install required)](https://github.com/FiloSottile/mkcert): `mkcert -install && mkcert -key-file snowpack.key -cert-file snowpack.crt localhost`\n\nIn most situations you should add personally generated certificate files (`snowpack.key` and `snowpack.crt`) to your `.gitignore` file.\n" }, { "path": "examples/https-ssl-certificates/index.html", "content": "\n\n \n \n \n Snowpack Example: HTTPS Local Devleopment\n \n\n \n \n Example: SSL Certificates\n

This site is using...

\n \n \n" }, { "path": "examples/https-ssl-certificates/package.json", "content": "{\n \"dependencies\": {\n \"snowpack\": \"^3.0.0\"\n }\n}\n" }, { "path": "examples/https-ssl-certificates/snowpack.config.js", "content": "// Snowpack Configuration File\n// See all supported options: https://www.snowpack.dev/reference/configuration\n\n/** @type {import(\"snowpack\").SnowpackUserConfig } */\nmodule.exports = {\n mount: {\n /* ... */\n },\n plugins: [\n /* ... */\n ],\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "examples/react-global-imports/README.md", "content": "---\nlayout: ../../main.njk\ntitle: React + babel-plugin-import-global\n---\n\n_Based on [app-template-react](../../create-snowpack-app/app-template-react)_\n\nExample of using Snowpack in conjuction with [babel-plugin-import-global][babel-plugin-import-global]. This is useful when you need to need to inject an import statement at the top of every file, such as React:\n\n```jsx\n// \"import React from 'react'\" no longer needed!\nfunction MyComponent() {\n // …\n}\n\nexport default MyComponent;\n```\n\nTo recreate this setup, follow 2 steps:\n\n1. Create a [babel.config.js](./babel.config.js) file in the root of the project. Copy the settings shown.\n2. Install [@snowpack/plugin-babel][snowpack-babel] and add it to [snowpack.config.mjs](./snowpack.config.js)\n\n### ⚠️ Caveat\n\nWhen you use [@snowpack/plugin-babel][snowpack-babel], you miss out on the faster builds that come from Snowpack‘s default JS builder, [esbuild][esbuild] (we don‘t run both together to avoid conflict). However, if you skip Babel, you will have to manually place `import` statements yourself at the top of every file.\n\nWe‘d recommend being explicit and manually managing every `import` statement yourself. You can simplify your setup, speed up your builds, and you might see benefits from being explicit. In order to do this, simply use our [React starter template][app-template-react]. No setup required.\n\nBut if you‘ve weighed the tradeoffs and decide that a slower build is worth it to get global import functionality, then start from the example here.\n\n[app-template-react]: https://github.com/withastro/snowpack/create-snowpack-app/app-template-react\n[babel-plugin-import-global]: https://www.npmjs.com/package/babel-plugin-import-global\n[esbuild]: https://esbuild.github.io/\n[snowpack-babel]: https://github.com/withastro/snowpack/plugins/plugin-babel\n" }, { "path": "examples/react-global-imports/babel.config.js", "content": "module.exports = {\n presets: ['@babel/preset-react'],\n plugins: [\n [\n 'import-globals',\n {\n React: 'react',\n Component: {moduleName: 'react', exportName: 'Component'},\n PropTypes: {moduleName: 'react', exportName: 'PropTypes'},\n ReactDOM: 'react-dom',\n },\n ],\n ],\n};\n" }, { "path": "examples/react-global-imports/package.json", "content": "{\n \"name\": \"@snowpack/example-react-global-imports\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\"\n },\n \"dependencies\": {\n \"react\": \"^17.0.0\",\n \"react-dom\": \"^17.0.0\"\n },\n \"devDependencies\": {\n \"@babel/preset-react\": \"^7.12.7\",\n \"@snowpack/plugin-babel\": \"^2.1.4\",\n \"@snowpack/plugin-dotenv\": \"^2.0.4\",\n \"@snowpack/plugin-react-refresh\": \"^2.3.7\",\n \"babel-plugin-import-globals\": \"^2.0.0\",\n \"snowpack\": \"^3.0.0\"\n }\n}\n" }, { "path": "examples/react-global-imports/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "examples/react-global-imports/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "examples/react-global-imports/snowpack.config.js", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nmodule.exports = {\n mount: {\n public: '/',\n src: '/dist',\n },\n plugins: ['@snowpack/plugin-babel', '@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],\n packageOptions: {\n knownEntrypoints: ['react', 'react-dom'],\n }\n};\n" }, { "path": "examples/react-global-imports/src/App.css", "content": ".App {\n text-align: center;\n}\n.App code {\n background: #FFF3;\n padding: 4px 8px;\n border-radius: 4px;\n}\n.App p {\n margin: 0.4rem;\n}\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n" }, { "path": "examples/react-global-imports/src/App.jsx", "content": "import {useState, useEffect} from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.jsx and save to reload.\n

\n

\n Page has been open for {count} seconds.\n

\n

\n \n Learn React\n \n

\n
\n
\n );\n}\n\nexport default App;\n" }, { "path": "examples/react-global-imports/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n" }, { "path": "examples/react-global-imports/src/index.jsx", "content": "import App from './App.jsx';\nimport './index.css';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root'),\n);\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n}\n" }, { "path": "examples/react-loadable-components/README.md", "content": "---\nlayout: ../../main.njk\ntitle: React + Loadable Components\n---\n\n_Based on [app-template-react](../../create-snowpack-app/app-template-react)_\n\nYou can lazy load React components in Snowpack when needed with React‘s builtin `React.lazy` ([docs][react-lazy]):\n\n```jsx\nimport React, {useState, useEffect, Suspense} from 'react';\n\nconst Async = React.lazy(() => import('./Async'));\n\nfunction Component() {\n return (\n
\n Loading...
}>\n \n \n
\n );\n}\n```\n\nThis works out-of-the-box in Snowpack, with no configuration needed!\n\n### Learn more\n\n- [`React.lazy` documentation on reactjs.org][react-lazy]\n\n[react-lazy]: https://reactjs.org/docs/code-splitting.html#reactlazy\n" }, { "path": "examples/react-loadable-components/package.json", "content": "{\n \"name\": \"@snowpack/example-react-loadable-components\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\"\n },\n \"dependencies\": {\n \"react\": \"^17.0.0\",\n \"react-dom\": \"^17.0.0\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-dotenv\": \"^2.0.4\",\n \"@snowpack/plugin-react-refresh\": \"^2.3.7\",\n \"snowpack\": \"^3.0.0\"\n }\n}\n" }, { "path": "examples/react-loadable-components/public/index.html", "content": "\n\n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n\n" }, { "path": "examples/react-loadable-components/public/robots.txt", "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n" }, { "path": "examples/react-loadable-components/snowpack.config.js", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nmodule.exports = {\n mount: {\n public: '/',\n src: '/dist',\n },\n plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'],\n};\n" }, { "path": "examples/react-loadable-components/src/App.css", "content": ".App {\n text-align: center;\n}\n.App code {\n background: #FFF3;\n padding: 4px 8px;\n border-radius: 4px;\n}\n.App p {\n margin: 0.4rem;\n}\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .App-logo {\n animation: App-logo-spin infinite 20s linear;\n }\n}\n\n.App-header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}\n\n.App-link {\n color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n" }, { "path": "examples/react-loadable-components/src/App.jsx", "content": "import React, {useState, useEffect, Suspense} from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nconst Async = React.lazy(() => import('./Async'));\n\nfunction App() {\n // Create the count state.\n const [count, setCount] = useState(0);\n // Create the counter (+1 every second).\n useEffect(() => {\n const timer = setTimeout(() => setCount(count + 1), 1000);\n return () => clearTimeout(timer);\n }, [count, setCount]);\n // Return the App component.\n return (\n
\n
\n \"logo\"\n

\n Edit src/App.jsx and save to reload.\n

\n

\n Page has been open for {count} seconds.\n

\n

\n \n Learn React\n \n

\n Loading...
}>\n \n \n \n
\n );\n}\n\nexport default App;\n" }, { "path": "examples/react-loadable-components/src/Async.jsx", "content": "import React from 'react';\n\nfunction Async() {\n return
I‘m an Async Component!
;\n}\n\nexport default Async;\n" }, { "path": "examples/react-loadable-components/src/index.css", "content": "body {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n monospace;\n}\n" }, { "path": "examples/react-loadable-components/src/index.jsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App.jsx';\nimport './index.css';\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root'),\n);\n\n// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.\n// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement\nif (import.meta.hot) {\n import.meta.hot.accept();\n}\n" }, { "path": "examples/tailwind/README.md", "content": "---\nlayout: ../../main.njk\ntitle: Tailwind\n---\n\n### Learn more\n\n- [Tailwind docs on Snowpack][tailwind]\n\n[tailwind]: https://www.snowpack.dev/guides/tailwind-css/\n" }, { "path": "examples/tailwind/package.json", "content": "{\n \"name\": \"@snowpack/example-react-loadable-components\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"build\": \"snowpack build\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-postcss\": \"^1.3.0\",\n \"postcss\": \"^8.3.5\",\n \"snowpack\": \"^3.4.0\",\n \"tailwindcss\": \"^2.1.2\"\n }\n}\n" }, { "path": "examples/tailwind/postcss.config.js", "content": "module.exports = {\n plugins: {\n tailwindcss: {},\n // other plugins can go here, such as autoprefixer\n },\n};\n" }, { "path": "examples/tailwind/public/global.css", "content": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n" }, { "path": "examples/tailwind/public/index.html", "content": "\n\n \n \n Tailwind Example\n \n \n \n
\n \n
\n
\n

\n “Tailwind CSS is the only framework that I've seen scale on large teams. It’s easy to\n customize, adapts to any design, and the build size is tiny.”\n

\n
\n
\n
Sarah Dayan
\n
Staff Engineer, Algolia
\n
\n
\n
\n \n\n" }, { "path": "examples/tailwind/snowpack.config.mjs", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nexport default {\n mount: {\n public: '/',\n src: '/_dist',\n },\n devOptions: {\n tailwindConfig: './tailwind.config.js',\n },\n plugins: ['@snowpack/plugin-postcss'],\n};\n" }, { "path": "examples/tailwind/tailwind.config.js", "content": "module.exports = {\n mode: 'jit',\n purge: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],\n // specify other options here\n};\n" }, { "path": "jest.config.js", "content": "module.exports = {\n modulePathIgnorePatterns: [\n '/create-snowpack-app/app-template-', // don’t run tests intended as user examples\n '/examples', // don’t run any tests in examples\n '/test/create-snowpack-app/test-install', // don’t run tests inside our mock create-snowpack-app install\n '/www', // docs has its own tests\n ],\n globalSetup: '/jest.setup.js',\n testEnvironment: 'node',\n};\n" }, { "path": "jest.setup.js", "content": "module.exports = async () => {\n // enable NO_COLOR mode for Jest\n process.env.NO_COLOR = true; \n // Clear the temp directory\n const path = require('path');\n const rimraf = require('rimraf');\n const fs = require('fs');\n rimraf.sync(path.join(__dirname, 'test', '__temp__'));\n fs.mkdirSync(path.join(__dirname, 'test', '__temp__'));\n};" }, { "path": "lerna.json", "content": "{\n \"version\": \"independent\",\n \"packages\": [\"snowpack\", \"skypack\", \"esinstall\", \"create-snowpack-app/*\", \"plugins/*\"],\n \"npmClient\": \"yarn\",\n \"useWorkspaces\": true\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"root\",\n \"private\": true,\n \"scripts\": {\n \"bootstrap\": \"lerna bootstrap\",\n \"build\": \"lerna run build --scope=esinstall --scope=snowpack --scope=skypack\",\n \"build:watch\": \"lerna run build:watch --parallel --scope=esinstall --scope=snowpack --scope=skypack\",\n \"build:docs\": \"cd www && yarn build\",\n \"publish\": \"npm run build && lerna publish --no-private\",\n \"lint\": \"lerna run lint --parallel --scope=esinstall --scope=snowpack --scope=skypack\",\n \"format\": \"prettier --write '{snowpack,skypack,esinstall}/src/**/*.{ts,js,json}' '{scripts,test,plugins,create-snowpack-app}/**/*.{ts,js,json}' '{.dependabot,.github,www,docs}/**/*.{md,yml,js}'\",\n \"test\": \"jest --testPathIgnorePatterns=/test-dev/ --test-timeout=30000\",\n \"test:dev\": \"jest /test-dev/ --test-timeout=30000\",\n \"test:docs\": \"cd www && yarn && yarn test --passWithNoTests\"\n },\n \"workspaces\": [\n \"esinstall\",\n \"esm-runtime\",\n \"snowpack\",\n \"skypack\",\n \"create-snowpack-app/*\",\n \"plugins/*\",\n \"test/build/*\",\n \"test/esinstall/*\"\n ],\n \"devDependencies\": {\n \"@changesets/cli\": \"^2.16.0\",\n \"@rollup/plugin-alias\": \"^3.0.1\",\n \"@skypack/package-check\": \"^0.2.0\",\n \"@types/babel__traverse\": \"^7.0.7\",\n \"@types/cacache\": \"^12.0.1\",\n \"@types/compressible\": \"^2.0.0\",\n \"@types/css-modules-loader-core\": \"^1.1.0\",\n \"@types/detect-port\": \"^1.3.0\",\n \"@types/es-module-lexer\": \"^0.3.0\",\n \"@types/etag\": \"^1.8.0\",\n \"@types/http-proxy\": \"^1.17.4\",\n \"@types/mime-types\": \"^2.1.0\",\n \"@types/mkdirp\": \"^1.0.0\",\n \"@types/node\": \"^14.14.14\",\n \"@types/rimraf\": \"^3.0.0\",\n \"@types/signal-exit\": \"^3.0.0\",\n \"@types/validate-npm-package-name\": \"^3.0.0\",\n \"@types/ws\": \"^7.2.4\",\n \"cheerio\": \"^1.0.0-rc.10\",\n \"cross-env\": \"^7.0.2\",\n \"cssnano\": \"^5.0.6\",\n \"dedent\": \"^0.7.0\",\n \"execa\": \"^5.1.1\",\n \"httpie\": \"^1.1.2\",\n \"jest\": \"^27.0.5\",\n \"jest-specific-snapshot\": \"^4.0.0\",\n \"lerna\": \"^3.22.1\",\n \"prettier\": \"^2.3.1\",\n \"strip-ansi\": \"^6.0.0\",\n \"typescript\": \"^4.3.4\"\n },\n \"prettier\": {\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"bracketSpacing\": false,\n \"printWidth\": 100\n }\n}\n" }, { "path": "plugins/plugin-babel/CHANGELOG.md", "content": "# @snowpack/plugin-babel\n\n## 2.1.7\n\n### Patch Changes\n\n- b34b011a: update babel plugin to support process.env packages\n- ecd6ce07: Fix undefined accessor errors using @snowpack/plugin-babel with snowpack 3.1.x (#3000) \n- 48ced185: Update plugin-babel readme (#2574) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-babel)._\n" }, { "path": "plugins/plugin-babel/README.md", "content": "# @snowpack/plugin-babel\n\nUse Babel to build your files from source. Automatically inherits from your local project `.babelrc` or `babel.config.json` files.\n\n```\nnpm install --save-dev @snowpack/plugin-babel\n```\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-babel',\n {\n input: ['.js', '.mjs', '.jsx', '.ts', '.tsx'], // (optional) specify files for Babel to transform\n transformOptions: {\n // babel transform options\n },\n },\n ],\n ],\n};\n```\n\n#### Plugin Options\n\n| Name | Type | Description |\n| :----------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `input` | `string[]` | (optional) By default, Babel scans & transfoms these extensions: `['.js', '.mjs', '.jsx', '.ts', '.tsx']`. Modify this array if you’d like to change this. |\n| `transformOptions` | `object` | (optional) See [https://babeljs.io/docs/en/options](https://babeljs.io/docs/en/options) |\n" }, { "path": "plugins/plugin-babel/package.json", "content": "{\n \"name\": \"@snowpack/plugin-babel\",\n \"version\": \"2.1.7\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-babel#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-babel\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.14.0\",\n \"workerpool\": \"^6.0.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "plugins/plugin-babel/plugin.js", "content": "const workerpool = require('workerpool');\nlet worker, pool;\n\nmodule.exports = function plugin(snowpackConfig, options = {}) {\n // options validation\n if (options) {\n if (typeof options !== 'object') throw new Error(`options isn’t an object. Please see README.`);\n if (options.input && !Array.isArray(options.input))\n throw new Error(\n `options.input must be an array (e.g. ['.js', '.mjs', '.jsx', '.ts', '.tsx'])`,\n );\n if (options.input && !options.input.length)\n throw new Error(`options.input must specify at least one filetype`);\n }\n\n return {\n name: '@snowpack/plugin-babel',\n resolve: {\n input: options.input || ['.js', '.mjs', '.jsx', '.ts', '.tsx'],\n output: ['.js'], // always export JS\n },\n async load({filePath, isPackage}) {\n if (!filePath) {\n return;\n }\n pool = pool || workerpool.pool(require.resolve('./worker.js'));\n worker = worker || (await pool.proxy());\n let encodedResult = await worker.transformFileAsync(filePath, {\n caller: {\n name: '@snowpack/plugin-babel',\n supportsStaticESM: true,\n supportsDynamicImport: true,\n supportsTopLevelAwait: true,\n supportsExportNamespaceFrom: true,\n },\n cwd: snowpackConfig.root || process.cwd(),\n ast: false,\n compact: false,\n sourceMaps: snowpackConfig.buildOptions.sourcemap || snowpackConfig.buildOptions.sourceMaps,\n ...(options.transformOptions || {}),\n });\n let {code, map} = JSON.parse(encodedResult);\n\n if (code) {\n // Some Babel plugins assume process.env exists, but Snowpack\n // uses import.meta.env instead. Handle this here since it\n // seems to be pretty common.\n // See: https://www.pika.dev/npm/snowpack/discuss/496\n if (!isPackage) {\n code = code.replace(/process\\.env/g, 'import.meta.env');\n }\n }\n return {\n '.js': {\n code,\n map,\n },\n };\n },\n cleanup() {\n pool && pool.terminate();\n },\n };\n};\n" }, { "path": "plugins/plugin-babel/test/plugin-babel.test.js", "content": "const plugin = require('../plugin.js');\n\njest.mock('@babel/core');\nconst babel = require('@babel/core');\nbabel.transformFileAsync = jest.fn(() => Promise.resolve({code: 'code', map: 'map'}));\n\n/** jest mock above in worker will not work */\njest.mock('workerpool');\nconst workerpool = require('workerpool');\nworkerpool.pool = jest.fn((path) => ({\n proxy: jest.fn(() =>\n Promise.resolve({\n transformFileAsync: (...args) => babel.transformFileAsync(...args).then(JSON.stringify),\n }),\n ),\n}));\n\nbeforeEach(() => {\n babel.transformFileAsync.mockClear();\n});\n\ndescribe('plugin-babel', () => {\n test('no options', async () => {\n const p = plugin(\n {\n buildOptions: {},\n },\n {},\n );\n expect(p).toMatchInlineSnapshot(`\n Object {\n \"cleanup\": [Function],\n \"load\": [Function],\n \"name\": \"@snowpack/plugin-babel\",\n \"resolve\": Object {\n \"input\": Array [\n \".js\",\n \".mjs\",\n \".jsx\",\n \".ts\",\n \".tsx\",\n ],\n \"output\": Array [\n \".js\",\n ],\n },\n }\n `);\n const result = await p.load({\n filePath: 'test.js',\n });\n const [filePath, options] = babel.transformFileAsync.mock.calls[0];\n expect(filePath).toMatchInlineSnapshot(`\"test.js\"`);\n expect(options).toMatchObject({\n cwd: process.cwd(),\n ast: false,\n compact: false,\n sourceMaps: undefined,\n });\n expect(result).toMatchInlineSnapshot(`\n Object {\n \".js\": Object {\n \"code\": \"code\",\n \"map\": \"map\",\n },\n }\n `);\n });\n\n describe('input option', () => {\n test('input option must be an array has at least 1 value', () => {\n expect(() =>\n plugin(\n {\n buildOptions: {},\n },\n {\n input: '.js',\n },\n ),\n ).toThrowErrorMatchingInlineSnapshot(\n `\"options.input must be an array (e.g. ['.js', '.mjs', '.jsx', '.ts', '.tsx'])\"`,\n );\n expect(() =>\n plugin(\n {\n buildOptions: {},\n },\n {\n input: [],\n },\n ),\n ).toThrowErrorMatchingInlineSnapshot(`\"options.input must specify at least one filetype\"`);\n });\n test('input option will overwrite the default resolve config', () => {\n expect(\n plugin(\n {\n buildOptions: {},\n },\n {\n input: ['.js'],\n },\n ).resolve,\n ).toMatchInlineSnapshot(`\n Object {\n \"input\": Array [\n \".js\",\n ],\n \"output\": Array [\n \".js\",\n ],\n }\n `);\n });\n });\n test('has transformOptions', async () => {\n const transformOptions = {\n ast: true,\n plugins: ['jsx'],\n };\n const p = plugin(\n {buildOptions: {}},\n {\n transformOptions,\n },\n );\n await p.load({\n filePath: 'test.js',\n });\n const [filePath, options] = babel.transformFileAsync.mock.calls[0];\n expect(options).toMatchObject({\n cwd: process.cwd(),\n ast: false,\n compact: false,\n sourceMaps: undefined,\n ...transformOptions,\n });\n });\n test('sourceMaps option will be overwritten', async () => {\n const transformOptions = {\n sourceMaps: 'inline',\n };\n const p = plugin(\n {\n buildOptions: {\n sourceMaps: false,\n },\n },\n {\n transformOptions,\n },\n );\n await p.load({\n filePath: 'test.js',\n });\n const [filePath, options] = babel.transformFileAsync.mock.calls[0];\n expect(options).toMatchObject({\n cwd: process.cwd(),\n ast: false,\n compact: false,\n ...transformOptions,\n });\n });\n test('process.env will be converted for source files', async () => {\n // Modify transformFileAsync mock to include a dummy `process.env`\n babel.transformFileAsync = jest.fn(() =>\n Promise.resolve({code: 'code [process.env.test]', map: 'map'}),\n );\n const p = plugin({\n buildOptions: {},\n });\n const result = await p.load({\n filePath: 'test.js',\n isPackage: false, // testing a source file\n });\n // Expect process.env to be converted to import.meta.env\n expect(result).toMatchInlineSnapshot(`\n Object {\n \".js\": Object {\n \"code\": \"code [import.meta.env.test]\",\n \"map\": \"map\",\n },\n }\n `);\n });\n test('process.env will not be touched for package files', async () => {\n // Modify transformFileAsync mock to include a dummy `process.env`\n babel.transformFileAsync = jest.fn(() =>\n Promise.resolve({code: 'code [process.env.test]', map: 'map'}),\n );\n const p = plugin({\n buildOptions: {},\n });\n const result = await p.load({\n filePath: 'test.js',\n isPackage: true, // testing a package file\n });\n // Expect output to include import.meta.env default snippet\n expect(result).toMatchInlineSnapshot(`\n Object {\n \".js\": Object {\n \"code\": \"code [process.env.test]\",\n \"map\": \"map\",\n },\n }\n `);\n });\n});\n" }, { "path": "plugins/plugin-babel/worker.js", "content": "const workerpool = require('workerpool');\nconst babel = require('@babel/core');\n\nasync function transformFileAsync(path, options) {\n const {code, map} = await babel.transformFileAsync(path, options);\n return JSON.stringify({code, map});\n}\n\n// create a worker and register public functions\nworkerpool.worker({\n transformFileAsync,\n});\n" }, { "path": "plugins/plugin-build-script/README.md", "content": "# @snowpack/plugin-build-script\n\nA Snowpack plugin to build files in your application using any CLI tool. This plugin passes matching files as input to a custom CLI command and returns the output response as the build result. This is useful for connecting a custom CLI or when no Snowpack plugin exists for a favorite build tool.\n\nNote: All Snowpack < v2.6 `build:*` scripts now use this plugin behind the scenes.\n\nUsage:\n\n```bash\nnpm install @snowpack/plugin-build-script\n```\n\nThen add the plugin to your Snowpack config:\n\n```js\n// snowpack.config.mjs\n\nexport default {\n plugins: [\n [\n '@snowpack/plugin-build-script',\n {\n input: ['.tsx'], // files to watch\n output: ['.tsx'], // files to export\n cmd: 'babel --filename $FILE', // cmd to run\n },\n ],\n ],\n};\n```\n\n## Plugin Options\n\n| Name | Type | Description |\n| :------- | :--------: | :-------------------------------------------------------------------------- |\n| `input` | `string[]` | Array of extensions to watch for. |\n| `output` | `string[]` | Array of extensions this plugin will output. |\n| `cmd` | `string` | Command to run on every file matching `input`. Accepts the `$FILE` env var. |\n" }, { "path": "plugins/plugin-build-script/package.json", "content": "{\n \"version\": \"2.1.0\",\n \"name\": \"@snowpack/plugin-build-script\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-build-script#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-build-script\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"execa\": \"^5.1.1\",\n \"npm-run-path\": \"^4.0.1\"\n }\n}\n" }, { "path": "plugins/plugin-build-script/plugin.js", "content": "const execa = require('execa');\nconst npmRunPath = require('npm-run-path');\nconst {promises: fs} = require('fs');\n\nfunction buildScriptPlugin(snowpackConfig, {input, output, cmd}) {\n if (output.length !== 1) {\n throw new Error('Requires one output.');\n }\n return {\n name: `build:${cmd.split(' ')[0]}`,\n resolve: {\n input: input,\n output: output,\n },\n async load({filePath}) {\n const cmdWithFile = cmd.replace('$FILE', filePath);\n const contents = await fs.readFile(filePath, 'utf-8');\n const {stdout, stderr, exitCode} = await execa.command(cmdWithFile, {\n env: npmRunPath.env(),\n extendEnv: true,\n shell: true,\n windowsHide: false,\n input: contents,\n cwd: snowpackConfig.root || process.cwd(),\n });\n // If the command failed, fail the plugin as well.\n if (exitCode !== 0) {\n throw new Error(stderr || stdout);\n }\n // If the plugin outputs to stderr, show it to the user.\n if (stderr) {\n console.warn(stderr);\n }\n return {[output[0]]: stdout};\n },\n };\n}\n\nmodule.exports = buildScriptPlugin;\n" }, { "path": "plugins/plugin-build-script/test/plugin.test.js", "content": "const fs = require('fs').promises;\nconst execa = require('execa');\n\nconst plugin = require('../plugin');\n\ndescribe('@snowpack/plugin-build-script', () => {\n beforeEach(() => {\n const execaResult = {\n stdout: 'stdout',\n stderr: '',\n exitCode: 0,\n // Execa is weird, and returns a promise that also has other properties. Fake that here.\n catch: () => {\n return execaResult;\n },\n };\n execa.command = jest.fn().mockName('execa.command').mockReturnValue(execaResult);\n fs.readFile = jest.fn().mockResolvedValue('content');\n });\n test(`README example`, async () => {\n const {load} = plugin(\n {},\n {\n input: ['.tsx'], // files to watch\n output: ['.tsx'], // files to export\n cmd: 'babel --filename $FILE', // cmd to run\n },\n );\n\n const result = await load({\n filePath: 'path/to/file.tsx',\n });\n\n expect(execa.command.mock.calls.length).toEqual(1);\n expect(execa.command.mock.calls[0][0]).toEqual('babel --filename path/to/file.tsx');\n expect(result).toStrictEqual({'.tsx': 'stdout'});\n });\n});\n" }, { "path": "plugins/plugin-dotenv/CHANGELOG.md", "content": "# @snowpack/plugin-dotenv\n\n## 2.2.0\n\n### Minor Changes\n\n- cf1bd442: Added an option to disable dotenv-expand functionality\n\n## 2.1.0\n\n### Minor Changes\n\n- 38031e7e: Add options to plugin-dotenv (#2917) \n\n### Patch Changes\n\n- ad8de420: [ci] yarn format \n- ae4c04bd: Updated link; reference page had moved (#2646) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-dotenv)._\n" }, { "path": "plugins/plugin-dotenv/README.md", "content": "# @snowpack/plugin-dotenv\n\nUse [dotenv](https://github.com/motdotla/dotenv) to load environment variables from your project `.env` files. See Snowpack's [Environment Variables](https://www.snowpack.dev/reference/environment-variables) documentation to learn more.\n\n```\nnpm install --save-dev @snowpack/plugin-dotenv\n```\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: ['@snowpack/plugin-dotenv'],\n};\n```\n\n```\n# .env\nSNOWPACK_PUBLIC_ENABLE_FEATURE=true\n```\n\n**NOTE:** Snowpack requires the `SNOWPACK_PUBLIC_` prefix to recognize environment variables. This is to prevent accidental exposure of keys and secrets.\n\n#### What is Supported?\n\n- [dotenv-expand](https://github.com/motdotla/dotenv-expand)\n- `.env.NODE_ENV.local`\n- `.env.local`\n- `.env.NODE_ENV`\n- `.env`\n\n#### Plugin Options\n\n| Name | Type | Description |\n| :------- | :-------- | :------------------------------------------------------------------------------------------------- |\n| `dir` | `string` | (optional) Where to find `.env` files. Default is your current working directory (`process.cwd()`) |\n| `expand` | `boolean` | (optional) Enable `dotenv-expand` support. Default is `true` |\n" }, { "path": "plugins/plugin-dotenv/package.json", "content": "{\n \"name\": \"@snowpack/plugin-dotenv\",\n \"version\": \"2.2.0\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-dotenv#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-dotenv\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"dotenv\": \"^8.2.0\",\n \"dotenv-expand\": \"^5.1.0\"\n }\n}\n" }, { "path": "plugins/plugin-dotenv/plugin.js", "content": "const fs = require('fs');\nconst path = require('path');\n\nmodule.exports = function plugin(snowpackConfig, options) {\n const NODE_ENV = process.env.NODE_ENV;\n\n // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use\n const dotenvFiles = [\n NODE_ENV && `.env.${NODE_ENV}.local`,\n // Don't include `.env.local` for `test` environment\n // since normally you expect tests to produce the same\n // results for everyone\n NODE_ENV !== 'test' && `.env.local`,\n NODE_ENV && `.env.${NODE_ENV}`,\n '.env',\n ].filter(Boolean);\n\n const dir = options && options.dir ? options.dir.toString() : '.';\n const expand = options && options.expand !== undefined ? options.expand : true;\n // Load environment variables from .env* files. Suppress warnings using silent\n // if this file is missing. dotenv will never modify any environment variables\n // that have already been set. Variable expansion is supported in .env files.\n // https://github.com/motdotla/dotenv\n // https://github.com/motdotla/dotenv-expand\n dotenvFiles.forEach((dotenvFile) => {\n dotenvFile = path.resolve(process.cwd(), dir, dotenvFile);\n\n if (fs.existsSync(dotenvFile)) {\n const dotenv = require('dotenv').config({\n path: dotenvFile,\n });\n\n if (expand) require('dotenv-expand')(dotenv);\n }\n });\n\n return {\n name: '@snowpack/plugin-dotenv',\n };\n};\n" }, { "path": "plugins/plugin-dotenv/test/__snapshots__/plugin.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`NODE_ENV= development 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"DEVELOPMENT\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"DEVELOPMENT_LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`NODE_ENV= production 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"PRODUCTION\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"PRODUCTION_LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`NODE_ENV= test 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"ENV\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"TEST\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"ENV\",\n \"__DOTENV_TEST\": \"TEST\",\n \"__DOTENV_TEST_LOCAL\": \"TEST_LOCAL\",\n}\n`;\n\nexports[`NODE_ENV= undefined 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with dir NODE_ENV= development 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"DEVELOPMENT\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"DEVELOPMENT_LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with dir NODE_ENV= production 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"PRODUCTION\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"PRODUCTION_LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with dir NODE_ENV= test 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"ENV\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_LOCAL\": \"TEST\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"ENV\",\n \"__DOTENV_TEST\": \"TEST\",\n \"__DOTENV_TEST_LOCAL\": \"TEST_LOCAL\",\n}\n`;\n\nexports[`with dir NODE_ENV= undefined 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with expand explicitly off development 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"DEVELOPMENT\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"DEVELOPMENT_LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"\\${__DOTENV_PRESET}\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with expand explicitly off production 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"\\${__DOTENV_PRESET}\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"PRODUCTION\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"PRODUCTION_LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with expand explicitly off test 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"ENV\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"\\${__DOTENV_PRESET}\",\n \"__DOTENV_LOCAL\": \"TEST\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"ENV\",\n \"__DOTENV_TEST\": \"TEST\",\n \"__DOTENV_TEST_LOCAL\": \"TEST_LOCAL\",\n}\n`;\n\nexports[`with expand explicitly off undefined 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"\\${__DOTENV_PRESET}\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with expand explicitly on development 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"DEVELOPMENT\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"DEVELOPMENT_LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with expand explicitly on production 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"PRODUCTION\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"PRODUCTION_LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n\nexports[`with expand explicitly on test 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"ENV\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"TEST\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"ENV\",\n \"__DOTENV_TEST\": \"TEST\",\n \"__DOTENV_TEST_LOCAL\": \"TEST_LOCAL\",\n}\n`;\n\nexports[`with expand explicitly on undefined 1`] = `\nObject {\n \"__DOTENV_DEVELOPMENT\": \"ENV\",\n \"__DOTENV_DEVELOPMENT_LOCAL\": \"LOCAL\",\n \"__DOTENV_ENV\": \"ENV\",\n \"__DOTENV_EXPAND\": \"PRESET\",\n \"__DOTENV_LOCAL\": \"LOCAL\",\n \"__DOTENV_PRESET\": \"PRESET\",\n \"__DOTENV_PRODUCTION\": \"ENV\",\n \"__DOTENV_PRODUCTION_LOCAL\": \"LOCAL\",\n \"__DOTENV_TEST\": \"ENV\",\n \"__DOTENV_TEST_LOCAL\": \"LOCAL\",\n}\n`;\n" }, { "path": "plugins/plugin-dotenv/test/execPlugin.js", "content": "const dotenvPlugin = require('../plugin');\nconst params = JSON.parse(process.argv[2]);\n\ndotenvPlugin(null, params);\n\nconst testEnvs = Object.keys(process.env)\n .filter((key) => key.startsWith('__DOTENV_'))\n .reduce((ret, curr) => {\n ret[curr] = process.env[curr];\n return ret;\n }, {});\n\nconsole.log(JSON.stringify(testEnvs));\n" }, { "path": "plugins/plugin-dotenv/test/plugin.test.js", "content": "const path = require('path');\nconst execa = require('execa');\n\nconst execPluginFilePath = require.resolve('./execPlugin');\nconst testWorkDirectory = path.join(__dirname, 'env');\n\nfunction execPlugin(nodeEnv, params = null) {\n const {stdout} = execa.sync('node', [execPluginFilePath, JSON.stringify(params)], {\n cwd: testWorkDirectory,\n env: {NODE_ENV: nodeEnv},\n });\n return JSON.parse(stdout);\n}\n\nbeforeEach(() => {\n // test that pre-exiting environment variables are not overwritten\n process.env.__DOTENV_PRESET = 'PRESET';\n});\n\nconst NODE_ENV_LIST = [undefined, 'development', 'test', 'production'];\ndescribe('NODE_ENV=', () => {\n NODE_ENV_LIST.forEach((nodeEnv) => {\n test(`${nodeEnv}`, () => {\n expect(execPlugin(nodeEnv)).toMatchSnapshot();\n });\n });\n});\n\ndescribe('with dir NODE_ENV=', () => {\n NODE_ENV_LIST.forEach((nodeEnv) => {\n test(`${nodeEnv}`, () => {\n expect(execPlugin(nodeEnv, {dir: 'subdir'})).toMatchSnapshot();\n });\n });\n});\n\ndescribe('with expand explicitly off', () => {\n NODE_ENV_LIST.forEach((nodeEnv) => {\n test(`${nodeEnv}`, () => {\n expect(execPlugin(nodeEnv, {expand: false})).toMatchSnapshot();\n });\n });\n});\n\ndescribe('with expand explicitly on', () => {\n NODE_ENV_LIST.forEach((nodeEnv) => {\n test(`${nodeEnv}`, () => {\n expect(execPlugin(nodeEnv, {expand: true})).toMatchSnapshot();\n });\n });\n});\n" }, { "path": "plugins/plugin-optimize/CHANGELOG.md", "content": "# @snowpack/plugin-optimize\n\n## 0.2.13\n\n### Patch Changes\n\n- 63f0d8d7: add mkdirp to plugin-optimize\n- a65023e2: [ci] yarn format\n\n## 0.2.12\n\n### Patch Changes\n\n- 3eca3476: [ci] yarn format\n- 916b18a0: mark plugin-optimize as no longer private\n\n## 0.2.11\n\n### Patch Changes\n\n- 03bba7e6: update post\n- ee9e90e7: skip plugin optimize tests\n- d45e91ca: Fix deprecated option causing tests to fail (#2258) \n- c0735b36: fix: deprecated config in @snowpack/plugin-optimize (#2251) \n- 9515ef50: make optimize plugin private\n- 1c2a2094: update lockfile\n- e2c2d5f4: final cleanup, tests passing\n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-optimize)._\n" }, { "path": "plugins/plugin-optimize/README.md", "content": "# @snowpack/plugin-optimize\n\nOptimize your unbundled Snowpack app:\n\n- ✅ Minify HTML\n- ✅ Minify CSS\n- ✅ Minify JS\n- ✅ Transpile JS\n- ✅ [Preload JS Modules][https://developers.google.com/web/updates/2017/12/modulepreload]\n\n### Usage\n\nFrom a terminal, run the following:\n\n```\nnpm install --save-dev @snowpack/plugin-optimize\n```\n\nThen add this plugin to your Snowpack config:\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-optimize',\n {\n /* see options below */\n },\n ],\n ],\n};\n```\n\n### Plugin Options\n\n| Name | Type | Description |\n| :------------------- | :---------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `minifyJS` | `boolean` | Enable JS minification (default: `true`) |\n| `minifyCSS` | `boolean` | Enable CSS minification (default: `true`) |\n| `minifyHTML` | `boolean` | Enable HTML minification (default: `true`) |\n| `preloadModules` | `boolean` | Experimental: Add deep, optimized [``](https://developers.google.com/web/updates/2017/12/modulepreload) tags into your HTML. (default: `false`) |\n| `preloadCSS` | `boolean` | Experimental: Eliminate `.css.proxy.js` files and combine imported CSS into one file for better network performance (default: `false`) |\n| `preloadCSSFileName` | `string` | If preloading CSS, change the name of the generated CSS file. Used only in conjunction with `preloadCSS: true` (default: `/imported-styles.css`) |\n| `target` | `string,string[]` | The language target(s) to transpile to. This can be a single string (ex: \"es2018\") or an array of strings (ex: [\"chrome58\",\"firefox57\"]). If undefined, no transpilation will be done. See [esbuild documentation](https://github.com/evanw/esbuild) for more. |\n" }, { "path": "plugins/plugin-optimize/lib/css.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {parse} = require('es-module-lexer');\nconst csso = require('csso');\n\n/** Early-exit function that determines, given a set of JS files, if CSS is being imported */\nfunction hasCSSImport(files) {\n for (const file of files) {\n const code = fs.readFileSync(file, 'utf-8');\n const [imports] = parse(code);\n for (const {s, e} of imports.filter(({d}) => d === -1)) {\n const spec = code.substring(s, e);\n if (spec.endsWith('.css.proxy.js')) return true; // exit as soon as we find one\n }\n }\n return false;\n}\nexports.hasCSSImport = hasCSSImport;\n\n/**\n * Scans JS for CSS imports, and embeds only what’s needed\n *\n * import 'global.css' -> (removed; loaded in HTML)\n * import url from 'global.css' -> const url = 'global.css'\n * import {foo, bar} from 'local.module.css' -> const {foo, bar} = 'local.module.css'\n */\nfunction transformCSSProxy(file, originalCode) {\n const filePath = path.dirname(file);\n let code = originalCode;\n\n const getProxyImports = (code) =>\n parse(code)[0]\n .filter(({d}) => d === -1) // discard dynamic imports (> -1) and import.meta (-2)\n .filter(({s, e}) => code.substring(s, e).endsWith('.css.proxy.js')); // only accept .css.proxy.js files\n\n // iterate through proxy imports\n let proxyImports = getProxyImports(code);\n while (proxyImports.length) {\n const {s, e, ss, se} = proxyImports[0]; // only transform one at a time, because every transformation requires re-parsing (unless you created an ellaborate mechanism to keep track of character counts but IMO parsing is simpler/cheaper)\n\n const originalImport = code.substring(s, e);\n const importedFile = originalImport.replace(/\\.proxy\\.js$/, '');\n const importNamed = code\n .substring(ss, se)\n .replace(code.substring(s - 1, e + 1), '') // remove import\n .replace(/^import\\s+/, '') // remove keyword\n .replace(/\\s*from.*$/, '') // remove other keyword\n .replace(/\\*\\s+as\\s+/, '') // sanitize star imports\n .trim();\n\n // transform JS\n if (!importNamed) {\n // option 1: no transforms needed\n code = code.replace(new RegExp(`${code.substring(ss, se)};?\\n?`), '');\n } else {\n if (importedFile.endsWith('.module.css')) {\n // option 2: transform css modules\n const proxyCode = fs.readFileSync(path.resolve(filePath, originalImport), 'utf-8');\n const matches = proxyCode.match(/^let json\\s*=\\s*(\\{[^\\}]+\\})/m);\n if (matches) {\n code = code.replace(\n new RegExp(`${code.substring(ss, se).replace(/\\*/g, '\\\\*')};?`),\n `const ${importNamed.replace(/\\*\\s+as\\s+/, '')} = ${matches[1]};`,\n );\n }\n } else {\n // option 3: transfrom normal css\n code = code.replace(\n new RegExp(`${code.substring(ss, se)};?`),\n `const ${importNamed} = '${importedFile}';`,\n );\n }\n }\n\n proxyImports = getProxyImports(code); // re-parse code, continuing until all are transformed\n }\n\n return code;\n}\nexports.transformCSSProxy = transformCSSProxy;\n\n/** Build CSS File */\nfunction buildImportCSS(manifest, minifyCSS) {\n // gather list of imported CSS files\n const allCSSFiles = new Set();\n for (const f in manifest) {\n manifest[f].js.forEach((js) => {\n if (!js.endsWith('.css.proxy.js')) return;\n const isCSSModule = js.endsWith('.module.css.proxy.js');\n allCSSFiles.add(isCSSModule ? js : js.replace(/\\.proxy\\.js$/, ''));\n });\n }\n\n // read + concat\n let code = '';\n allCSSFiles.forEach((file) => {\n const contents = fs.readFileSync(file, 'utf-8');\n\n if (file.endsWith('.module.css.proxy.js')) {\n // css modules\n const matches = contents.match(/^export let code = *(.*)$/m);\n if (matches && matches[1])\n code +=\n '\\n' +\n matches[1]\n .trim()\n .replace(/^('|\")/, '')\n .replace(/('|\");?$/, '');\n } else {\n // normal css\n code += '\\n' + contents;\n fs.unlinkSync(file); // after we‘ve scanned a CSS file, remove it (so it‘s not double-loaded)\n }\n });\n\n // sanitize JSON values\n const css = code.replace(/\\\\n/g, '\\n').replace(/\\\\\"/g, '\"');\n\n // minify\n return minifyCSS ? csso.minify(css).css : css;\n}\nexports.buildImportCSS = buildImportCSS;\n" }, { "path": "plugins/plugin-optimize/lib/html.js", "content": "/**\n * Logic for optimizing .html files (note: this will )\n */\nconst fs = require('fs');\nconst path = require('path');\nconst hypertag = require('hypertag');\nconst {injectHTML} = require('node-inject-html');\nconst {projectURL, isRemoteModule} = require('../util');\nconst {scanJS} = require('./js');\n\n/** Scan HTML for static imports */\nasync function scanHTML(htmlFiles, buildDirectory) {\n const importList = {};\n await Promise.all(\n htmlFiles.map(async (htmlFile) => {\n // TODO: add debug in plugins?\n // log(`scanning ${projectURL(file, buildDirectory)} for imports`, 'debug');\n\n const allCSSImports = new Set(); // all CSS imports for this HTML file\n const allJSImports = new Set(); // all JS imports for this HTML file\n const entry = new Set(); // keep track of HTML entry files\n\n const code = await fs.promises.readFile(htmlFile, 'utf-8');\n\n // \n hypertag(code, 'link').forEach((link) => {\n if (!link.href) return;\n if (isRemoteModule(link.href)) {\n allCSSImports.add(link.href);\n } else {\n const resolvedCSS =\n link.href[0] === '/'\n ? path.join(buildDirectory, link.href)\n : path.join(path.dirname(htmlFile), link.href);\n allCSSImports.add(resolvedCSS);\n }\n });\n\n // `).join('') +\n '\\n',\n });\n}\nexports.preloadJS = preloadJS;\n" }, { "path": "plugins/plugin-optimize/lib/js.js", "content": "/**\n * Functions for dealing with parsing/transforming JS\n */\nconst fs = require('fs');\nconst path = require('path');\nconst {parse} = require('es-module-lexer');\nconst colors = require('kleur/colors');\nconst {log, projectURL, isRemoteModule} = require('../util');\n\n/** Recursively scan JS for static imports */\nfunction scanJS({file, rootDir, scannedFiles, importList}) {\n try {\n // 1. scan file for static imports\n scannedFiles.add(file); // keep track of scanned files so we never redo work\n importList.add(file); // make sure import is marked\n if (isRemoteModule(file)) {\n // don’t scan remote modules\n return importList;\n }\n\n let code = fs.readFileSync(file, 'utf-8');\n const [imports] = parse(code);\n imports\n .filter(({d}) => d === -1) // this is where we discard dynamic imports (> -1) and import.meta (-2)\n .forEach(({s, e}) => {\n const specifier = code.substring(s, e);\n if (isRemoteModule(specifier)) {\n importList.add(specifier);\n scannedFiles.add(specifier); // don’t scan remote modules\n } else {\n importList.add(\n specifier.startsWith('/')\n ? path.join(rootDir, file)\n : path.resolve(path.dirname(file), specifier),\n );\n }\n });\n\n // 2. recursively scan imports not yet scanned\n [...importList]\n .filter((fileLoc) => !scannedFiles.has(fileLoc)) // prevent infinite loop\n .forEach((fileLoc) => {\n scanJS({file: fileLoc, rootDir, scannedFiles, importList}).forEach((newImport) => {\n importList.add(newImport);\n });\n });\n\n return importList;\n } catch (err) {\n log(colors.yellow(` could not locate \"${projectURL(file, rootDir)}\"`), 'warn');\n return importList;\n }\n}\nexports.scanJS = scanJS;\n" }, { "path": "plugins/plugin-optimize/package.json", "content": "{\n \"name\": \"@snowpack/plugin-optimize\",\n \"version\": \"0.2.13\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-optimize#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-optimize\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"csso\": \"^4.1.0\",\n \"es-module-lexer\": \"^0.3.25\",\n \"esbuild\": \"^0.9.3\",\n \"glob\": \"^7.1.6\",\n \"html-minifier\": \"^4.0.0\",\n \"hypertag\": \"^0.0.3\",\n \"mkdirp\": \"^1.0.4\",\n \"kleur\": \"^4.1.3\",\n \"node-inject-html\": \"^0.0.5\",\n \"object.fromentries\": \"^2.0.2\",\n \"p-queue\": \"^6.6.1\"\n }\n}\n" }, { "path": "plugins/plugin-optimize/plugin.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst glob = require('glob');\nconst {minify: minifyHtml} = require('html-minifier');\nconst csso = require('csso');\nconst esbuild = require('esbuild');\nconst {init} = require('es-module-lexer');\nconst mkdirp = require('mkdirp');\nconst PQueue = require('p-queue').default;\nconst {injectHTML} = require('node-inject-html');\nconst {buildImportCSS, transformCSSProxy} = require('./lib/css');\nconst {scanHTML, preloadJS} = require('./lib/html');\nconst {formatManifest, log} = require('./util');\n\n/**\n * Default optimizer for Snawpack, unless another one is given\n */\nexports.default = function plugin(config, userDefinedOptions) {\n const options = {\n minifyJS: true,\n minifyHTML: true,\n minifyCSS: true,\n preloadCSS: false,\n preloadCSSFileName: '/imported-styles.css',\n preloadModules: false,\n ...(userDefinedOptions || {}),\n };\n\n const CONCURRENT_WORKERS = require('os').cpus().length;\n\n async function optimizeFile({file, preloadCSS, target, rootDir}) {\n const baseExt = path.extname(file).toLowerCase();\n\n // TODO: add debug in plugins?\n // log(`optimizing ${projectURL(file, rootDir)}…`, 'debug');\n\n // optimize based on extension. if it’s not here, leave as-is\n switch (baseExt) {\n case '.css': {\n const shouldOptimize = options.minifyCSS;\n if (!shouldOptimize) return;\n\n // minify\n let code = fs.readFileSync(file, 'utf-8');\n code = csso.minify(code).css;\n fs.writeFileSync(file, code, 'utf-8');\n break;\n }\n case '.js':\n case '.mjs': {\n const shouldOptimize = options.preloadCSS || options.minifyJS;\n if (!shouldOptimize) return;\n\n let code = fs.readFileSync(file, 'utf-8');\n\n // embed CSS\n if (preloadCSS) {\n code = transformCSSProxy(file, code);\n }\n\n // minify if enabled\n if (options.minifyJS) {\n const minified = await esbuild.transform(code, {\n minify: true,\n charset: 'utf8',\n target,\n });\n code = minified.code;\n fs.writeFileSync(file, code);\n }\n\n fs.writeFileSync(file, code);\n break;\n }\n case '.html': {\n const shouldOptimize = options.preloadCSS || options.preloadModules || options.minifyHTML;\n if (!shouldOptimize) return;\n\n let code = fs.readFileSync(file, 'utf-8');\n\n // preload CSS\n if (preloadCSS) {\n code = injectHTML(code, {\n headEnd: `\\n`,\n });\n }\n\n // preload JS\n if (options.preloadModules) {\n code = preloadJS({code, file, preloadCSS, rootDir});\n }\n\n // minify\n if (options.minifyHTML) {\n code = minifyHtml(code, {\n collapseWhitespace: true,\n keepClosingSlash: true,\n removeComments: true,\n });\n }\n\n fs.writeFileSync(file, code, 'utf-8');\n break;\n }\n }\n }\n\n return {\n name: '@snowpack/plugin-optimize',\n async optimize({buildDirectory}) {\n // 0. setup\n await init;\n let generatedFiles = {};\n\n // 1. index files\n const allFiles = glob\n .sync('**/*', {\n cwd: buildDirectory,\n ignore: [`${config.buildOptions.metaUrlPath}/*`],\n nodir: true,\n })\n .map((file) => path.join(buildDirectory, file)); // resolve to root dir\n\n // 2. scan imports\n const manifest = await scanHTML(\n allFiles.filter((f) => path.extname(f) === '.html'),\n buildDirectory,\n );\n let preloadCSS = false; // only bother preloading CSS if option is enabled AND there are .css.proxy.js files\n if (options.preloadCSS) {\n for (f in manifest) {\n if (\n manifest[f].js &&\n manifest[f].js.findIndex((js) => js.endsWith('.css.proxy.js')) !== -1\n ) {\n preloadCSS = true;\n break;\n }\n }\n }\n\n // 3. optimize all files in parallel\n const parallelWorkQueue = new PQueue({concurrency: CONCURRENT_WORKERS});\n allFiles\n .filter(\n (file) => (preloadCSS ? !file.endsWith('.css.proxy.js') : true), // if preloading CSS, don’t optimize .css.proxy.js files\n )\n .forEach((file) => {\n parallelWorkQueue.add(() =>\n optimizeFile({\n file,\n preloadCSS,\n rootDir: buildDirectory,\n target: options.target,\n }).catch((err) => {\n log(`Error: ${file} ${err.toString()}`, 'error');\n }),\n );\n });\n await parallelWorkQueue.onIdle();\n\n // 5. build CSS file\n if (preloadCSS) {\n const combinedCSS = buildImportCSS(manifest, options.minifyCSS);\n const outputCSS = path.join(buildDirectory, options.preloadCSSFileName);\n await mkdirp(path.dirname(outputCSS));\n fs.writeFileSync(outputCSS, combinedCSS, 'utf-8');\n generatedFiles.preloadedCSS = outputCSS;\n }\n\n // 6. write manifest\n fs.writeFileSync(\n path.join(buildDirectory, config.buildOptions.metaUrlPath, 'optimize-manifest.json'),\n JSON.stringify(\n formatManifest({manifest, buildDirectory, generatedFiles, preloadCSS}),\n undefined,\n 2, // prettify\n ),\n 'utf-8',\n );\n },\n };\n};\n" }, { "path": "plugins/plugin-optimize/test/plugin.test.js", "content": "const path = require('path');\nconst fs = require('fs');\n\nconst plugin = require('../plugin').default;\nconst {getSnowpackPluginOutputSnapshotSerializer} = require('./serializer');\n\ndescribe.skip('@snowpack/plugin-optimize', () => {\n beforeEach(() => {\n expect.addSnapshotSerializer(getSnowpackPluginOutputSnapshotSerializer(__dirname));\n\n const originalWriteFileSync = fs.writeFileSync;\n fs.writeFileSync = jest\n .fn()\n .mockName('fs.writeFileSync')\n .mockImplementation((path, ...args) => {\n if (path.startsWith(__dirname)) return;\n\n // write files outside of the current folder\n originalWriteFileSync(path, ...args);\n });\n\n console.log = jest.fn().mockName('console.log');\n });\n\n it('minimal - no options', async () => {\n const pluginInstance = plugin({\n buildOptions: {metaUrlPath: '_snowpack'},\n });\n\n await pluginInstance.optimize({\n buildDirectory: path.resolve(__dirname, 'stubs/minimal/'),\n });\n\n expect(fs.writeFileSync).toMatchSnapshot('fs.writeFileSync');\n expect(console.log).toMatchSnapshot('console.log');\n });\n\n it('minimal - no minification', async () => {\n const pluginInstance = plugin(\n {\n buildOptions: {metaUrlPath: '_snowpack'},\n },\n {\n minifyJS: false,\n minifyCSS: false,\n minifyHTML: false,\n },\n );\n\n await pluginInstance.optimize({\n buildDirectory: path.resolve(__dirname, 'stubs/minimal/'),\n });\n\n expect(fs.writeFileSync).toMatchSnapshot('fs.writeFileSync');\n expect(console.log).toMatchSnapshot('console.log');\n });\n\n it('no HTML minification, with preloadModules', async () => {\n const pluginInstance = plugin(\n {\n buildOptions: {metaUrlPath: '_snowpack'},\n },\n {\n minifyHTML: false,\n preloadModules: true,\n },\n );\n\n await pluginInstance.optimize({\n buildDirectory: path.resolve(__dirname, 'stubs/minimal/'),\n });\n\n expect(fs.writeFileSync).toMatchSnapshot('fs.writeFileSync');\n expect(console.log).toMatchSnapshot('console.log');\n });\n\n it('minimal - target', async () => {\n const pluginInstance = plugin(\n {\n buildOptions: {metaUrlPath: '_snowpack'},\n },\n {\n target: ['es2018'],\n },\n );\n\n await pluginInstance.optimize({\n buildDirectory: path.resolve(__dirname, 'stubs/minimal'),\n });\n\n expect(fs.writeFileSync).toMatchSnapshot('fs.writeFileSync');\n expect(console.log).toMatchSnapshot('console.log');\n });\n});\n" }, { "path": "plugins/plugin-optimize/test/serializer.js", "content": "module.exports = {\n getSnowpackPluginOutputSnapshotSerializer,\n};\n\nconst {format} = require('util');\n\nconst strpAnsi = require('strip-ansi');\n\n/**\n * Serializer of written files as well as console.log output.\n *\n * Both file contents and log output is normalized to account for differences\n * in UNIX and Windows systems.\n *\n * @param string basePath all files written outside this path will be ignored (usually set to __dirname)\n */\nfunction getSnowpackPluginOutputSnapshotSerializer(basePath) {\n return {\n serialize(value) {\n if (value.getMockName() === 'console.log') {\n return value.mock.calls\n .map(toSingleArgument)\n .map(toNoralizedByteSize)\n .map(removeColors)\n .join('\\n');\n }\n\n const calls = value.mock.calls\n .filter(isLocal)\n .map(toPathAndStringContent.bind(null, basePath));\n return calls\n .sort((a, b) => {\n return a[0] < b[0] ? -1 : 1;\n })\n .map(([path, content]) => {\n return `FILE: ${path}\\n${content}`;\n })\n .join(\n '\\n\\n--------------------------------------------------------------------------------\\n\\n',\n );\n },\n\n test(value) {\n return value && value.mock;\n },\n };\n}\n\nfunction toPathAndStringContent(basePath, [path, content]) {\n const shortPath = path.replace(basePath, '').substr(1);\n // unix-ify folder separators for Windows\n const normalizedPath = shortPath.replace(/\\\\/g, '/');\n // unix-ify new lines\n const normalizedContent = content.toString().replace(/(\\\\r\\\\n)/g, '\\\\n');\n return [normalizedPath, normalizedContent];\n}\n\nfunction toSingleArgument([output, ...args]) {\n return format(output, ...args);\n}\nfunction toNoralizedByteSize(output) {\n return output.replace(/(\\s{2,})\\d+ bytes/g, '$1XXX bytes');\n}\n\nfunction removeColors(output) {\n return strpAnsi(output);\n}\n\nfunction isLocal(call) {\n return call[0].startsWith(__dirname);\n}\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/do-not-preload-1.js", "content": "console.error('Error: this file in a comment shouldn’t be preloaded');\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/do-not-preload-2.js", "content": "console.error('Error: this entry file shouldn’t be preloaded, either (it’s already in the entry)');\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/do-not-preload-3.js", "content": "console.error('Error: this lazy-loaded file should not be preloaded (then it’s not lazy-loaded)');\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/esm_example.js", "content": "export default function esm_example() {\n console.log('example');\n return 1;\n}\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/index.html", "content": "\n\n \n \n Minimal test\n \n \n \n \n \n \n \n\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/index.js", "content": "import esm_example from './esm_example.js';\nimport supportTarget from './target-es2018.js';\nimport('./do-not-preload-3.js');\n\n(() => {\n function n(o) {\n console.log(o);\n }\n n('test', supportTarget());\n})();\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/package.json", "content": "{\n \"name\": \"plugin-webpack-test-minimal\",\n \"main\": \"src/index.js\"\n}\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/style.css", "content": "body {\n border: 1px solid #ffffff;\n margin: 1px 1px 1px 1px;\n}\n" }, { "path": "plugins/plugin-optimize/test/stubs/minimal/target-es2018.js", "content": "export default function testTarget() {\n // es2020 - Optional Chaining & Nullish coalescing Operator\n const foo = {\n bar: 'bar',\n };\n const bar = null;\n console.log(foo?.bar, bar ?? 100);\n return true;\n}\n" }, { "path": "plugins/plugin-optimize/util.js", "content": "/**\n * Copy/paste from Snowpack utils, at least until there’s some common import\n */\nconst path = require('path');\nconst colors = require('kleur/colors');\nconst fromEntries = require('object.fromentries');\n\n// Node 10 shim\nif (!Object.fromEntries) fromEntries.shim();\n\n/** log somethin */\nfunction log(msg, level = 'log') {\n console[level](`${colors.dim('[@snowpack/plugin-optimize]')} ${msg}`);\n}\nexports.log = log;\n\n/** determine if remote package or not */\nfunction isRemoteModule(specifier) {\n return (\n specifier.startsWith('//') ||\n specifier.startsWith('http://') ||\n specifier.startsWith('https://')\n );\n}\nexports.isRemoteModule = isRemoteModule;\n\n/** URL relative */\nfunction projectURL(url, buildDirectory) {\n return path.relative(buildDirectory, url).replace(/\\\\/g, '/').replace(/^\\/?/, '/');\n}\nexports.projectURL = projectURL;\n\n/** Remove \\ and / from beginning of string */\nfunction removeLeadingSlash(path) {\n return path.replace(/^[/\\\\]+/, '');\n}\nexports.removeLeadingSlash = removeLeadingSlash;\n\n/** Build Import */\nfunction formatManifest({manifest, buildDirectory, generatedFiles, preloadCSS}) {\n const format = (url) => (isRemoteModule(url) ? url : projectURL(url, buildDirectory));\n\n const sorted = Object.entries(manifest).map(([k, v]) => {\n const entry = v.entry.map(format);\n const css = v.css.map(format);\n const js = v.js\n .filter((f) => (preloadCSS && !f.endsWith('.css.proxy.js')) || true) // if preloading CSS, omit .css.proxy.js files\n .map(format);\n entry.sort((a, b) => a.localeCompare(b));\n css.sort((a, b) => a.localeCompare(b));\n js.sort((a, b) => a.localeCompare(b));\n return [format(k), {entry, css, js}];\n });\n sorted.sort((a, b) => a[0].localeCompare(b[0]));\n\n return {\n imports: Object.fromEntries(sorted),\n generated: Object.fromEntries(Object.entries(generatedFiles).map(([k, v]) => [k, format(v)])),\n };\n}\nexports.formatManifest = formatManifest;\n" }, { "path": "plugins/plugin-postcss/CHANGELOG.md", "content": "# @snowpack/plugin-postcss\n\n## 1.4.3\n\n### Patch Changes\n\n- 8cdad981: [ci] yarn format \n- f9fc09a8: Provide the 'from' filename when processing postcss (#3493) \n\n## 1.4.2\n\n### Patch Changes\n\n- a6b3b71f: Allow srcPath fallback for older versions of Snowpack (#3484) \n- 33cd5648: Pass real filepath to transform plugins (#3483) \n- b87534b2: Remove postcss-cli from plugin-postcss docs (#3412) \n\n## 1.4.1\n\n### Patch Changes\n\n- bc56243c: [PostCSS] Support `glob` property in `dir-dependency` messages (#3404) \n\n## 1.4.0\n\n### Minor Changes\n\n- 4f9da737: Feat: Allow dynamic config in @snowpack/plugin-postcss (#3344) \n\n### Patch Changes\n\n- 1823b35f: Chore: update docs to refer to snowpack.config.mjs (#3341) \n\n## 1.3.0\n\n### Minor Changes\n\n- b5bd57f8: Add support for PostCSS dependency messages (#3309) \n\n## 1.2.2\n\n### Patch Changes\n\n- 56c5a231: fix typo in changelog\n- 40f02cf4: reorder changelog entries\n\n## 1.2.1\n\n### Patch Changes\n\n- 8ac85f6d: postcss: add filepath to id\n\n## 1.2.0 [2021-03-16]\n\n- 21461ce5: Update @snowpack/plugin-postcss API (#2854) \n- 68a66d4e: plugin-postcss: Use API and threadpool instead of CLI. (#2165) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-postcss)._\n" }, { "path": "plugins/plugin-postcss/README.md", "content": "# @snowpack/plugin-postcss\n\nRuns [PostCSS](https://github.com/postcss/postcss) on all `.css` files, including ones generated from Sass, Vue, and Svelte.\n\n### Usage\n\nInstall @snowpack/plugin-postcss, PostCSS, and your PostCSS plugins (not shown):\n\n```\nnpm install --save-dev @snowpack/plugin-postcss postcss\n```\n\nThen add this plugin to your Snowpack config:\n\n```diff\n// snowpack.config.mjs\nexport default {\n+ plugins: ['@snowpack/plugin-postcss'],\n};\n```\n\nLastly, add a `postcss.config.js` file. By default, @snowpack/plugin-postcss looks for this in the root directory of your project, but you can customize this with the `config` option.\n\n```js\nmodule.exports = {\n plugins: [\n // Replace below with your plugins\n require('cssnano'),\n require('postcss-preset-env')\n ],\n};\n```\n\n### Plugin Options\n\n| Name | Type | Description |\n| :------- | :----------------: | :-------------------------------------------------------------------------------- |\n| `input` | `string[]` | File extensions to transform (default: `['.css']`) |\n| `config` | `string \\| object` | (optional) Pass in a PostCSS config object or path to your PostCSS config on disk |\n" }, { "path": "plugins/plugin-postcss/package.json", "content": "{\n \"name\": \"@snowpack/plugin-postcss\",\n \"version\": \"1.4.3\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-postcss#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-postcss\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"minimatch\": \"^3.0.4\",\n \"normalize-path\": \"^3.0.0\",\n \"postcss-load-config\": \"^3.0.1\",\n \"workerpool\": \"^6.1.2\"\n },\n \"devDependencies\": {\n \"postcss\": \"^8.3.5\"\n },\n \"peerDependencies\": {\n \"postcss\": \"*\"\n }\n}\n" }, { "path": "plugins/plugin-postcss/plugin.js", "content": "'use strict';\n\nconst path = require('path');\nconst workerpool = require('workerpool');\nconst minimatch = require('minimatch');\nconst normalizePath = require('normalize-path');\n\nmodule.exports = function postcssPlugin(snowpackConfig, options) {\n // options validation\n if (options) {\n if (typeof options !== 'object' || Array.isArray(options))\n throw new Error('options isn’t an object. Please see README.');\n if (\n (options.config && typeof options !== 'string' && typeof options !== 'object') ||\n Array.isArray(options)\n )\n throw new Error('options.config must be a config object or a path to a PostCSS config file.');\n }\n\n let worker, pool;\n\n const dependencies = new Map();\n\n return {\n name: '@snowpack/postcss-transform',\n async transform({id, srcPath, fileExt, contents}) {\n let {input = ['.css'], config} = options;\n\n if (!input.includes(fileExt) || !contents) return;\n\n if (config && typeof config === 'string') {\n config = path.resolve(config);\n }\n\n pool = pool || workerpool.pool(require.resolve('./worker.js'));\n worker = worker || (await pool.proxy());\n\n const encodedResult = await worker.transformAsync(contents, {\n config,\n filepath: srcPath || id, // note: srcPath will be undefined in snowpack@3.6.1 and older\n cwd: snowpackConfig.root || process.cwd(),\n map:\n snowpackConfig.buildOptions && snowpackConfig.buildOptions.sourceMaps\n ? {\n prev: false,\n annotation: false,\n inline: false,\n }\n : false,\n });\n const {css, map, messages} = JSON.parse(encodedResult);\n\n const patterns = new Set();\n for (const message of messages) {\n if (message.type === 'dependency') {\n patterns.add(normalizePath(message.file));\n } else if (message.type === 'dir-dependency') {\n patterns.add(normalizePath(`${message.dir}/${message.glob || '**/*'}`));\n }\n }\n dependencies.set(id, patterns);\n\n return {\n code: css, // old API (keep)\n contents: css, // new API\n map,\n };\n },\n onChange({filePath}) {\n const normalizedFilePath = normalizePath(filePath);\n eachId: for (const [id, patterns] of dependencies) {\n for (const pattern of patterns) {\n if (minimatch(normalizedFilePath, pattern)) {\n this.markChanged(id);\n continue eachId;\n }\n }\n }\n },\n cleanup() {\n pool && pool.terminate();\n },\n };\n};\n" }, { "path": "plugins/plugin-postcss/test/fixtures/from/from.css", "content": "@from(.foo) {\n\n}" }, { "path": "plugins/plugin-postcss/test/fixtures/from/postcss.config.js", "content": "function pluginFrom() {\n return {\n postcssPlugin: 'plugin-from',\n AtRule(node, {result, Declaration}) {\n node.replaceWith(new Declaration({prop: 'content', value: `\"${result.opts.from}\"`}));\n },\n };\n}\n\npluginFrom.postcss = true;\n\nmodule.exports = {\n plugins: [pluginFrom],\n};\n" }, { "path": "plugins/plugin-postcss/test/fixtures/from/style.css", "content": "body {\n background: #fff;\n}\n\n#root {\n width: 480px;\n margin: auto;\n padding: 16px;\n box-sizing: border-box;\n}\n\n.content {\n color: blue;\n}\n\n\n" }, { "path": "plugins/plugin-postcss/test/fixtures/postcss.config.js", "content": "module.exports = {\n plugins: [\n require('cssnano')({\n preset: 'default',\n }),\n ],\n};\n" }, { "path": "plugins/plugin-postcss/test/fixtures/style.css", "content": "body {\n background: #fff;\n}\n\n#root {\n box-sizing: border-box;\n margin: auto;\n padding: 16px;\n width: 480px;\n}\n\n.content {\n color: blue;\n}\n" }, { "path": "plugins/plugin-postcss/test/plugin.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst plugin = require('../plugin.js');\n\nconst cssPath = path.join(__dirname, 'fixtures', 'style.css');\nconst minCssPath = path.join(__dirname, 'fixtures', 'style.min.css');\nconst cssContent = fs.readFileSync(cssPath, 'utf8');\nconst minCssContent = fs.readFileSync(minCssPath, 'utf8');\n\ndescribe('@snowpack/plugin-postcss', () => {\n test('loads postcss config with no options', async () => {\n const pluginInstance = plugin({root: path.join(__dirname, 'fixtures')}, {});\n const transformCSSResults = await pluginInstance.transform({\n id: cssPath,\n fileExt: path.extname(cssPath),\n contents: cssContent,\n });\n expect(transformCSSResults.code).toBe(minCssContent); // TODO: remove this?\n expect(transformCSSResults.contents).toBe(minCssContent);\n expect(transformCSSResults.map).toBe(undefined);\n await pluginInstance.cleanup();\n });\n\n test('accepts a path to a config file', async () => {\n const pluginInstance = plugin(\n {},\n {config: path.join(__dirname, 'fixtures', 'postcss.config.js')},\n );\n const transformCSSResults = await pluginInstance.transform({\n id: cssPath,\n fileExt: path.extname(cssPath),\n contents: cssContent,\n });\n expect(transformCSSResults.code).toBe(minCssContent); // TODO: remove this?\n expect(transformCSSResults.contents).toBe(minCssContent);\n expect(transformCSSResults.map).toBe(undefined);\n await pluginInstance.cleanup();\n });\n\n test('produces source maps with sourceMaps: true', async () => {\n const pluginInstance = plugin(\n {root: path.join(__dirname, 'fixtures'), buildOptions: {sourceMaps: true}},\n {},\n );\n const transformCSSResults = await pluginInstance.transform({\n id: cssPath,\n fileExt: path.extname(cssPath),\n contents: cssContent,\n });\n expect(transformCSSResults.code).toBe(minCssContent); // TODO: remove this?\n expect(transformCSSResults.contents).toBe(minCssContent);\n expect(transformCSSResults.map).toEqual(\n // a raw source map object\n expect.objectContaining({\n version: expect.any(Number),\n mappings: expect.any(String),\n }),\n );\n await pluginInstance.cleanup();\n });\n\n test('bails with empty input array', async () => {\n const pluginInstance = plugin({root: path.join(__dirname, 'fixtures')}, {input: []});\n const transformCSSResults = await pluginInstance.transform({\n id: cssPath,\n fileExt: path.extname(cssPath),\n contents: cssContent,\n });\n expect(transformCSSResults).toBeFalsy();\n await pluginInstance.cleanup();\n });\n\n test('allows dynamic config', async () => {\n // important: make sure to NOT set {root:} here so it doesn’t automatically pick up fixtures/postcss.config.js\n const pluginInstance = plugin({}, {config: {plugins: {cssnano: {}}}});\n const transformCSSResults = await pluginInstance.transform({\n id: cssPath,\n fileExt: path.extname(cssPath),\n contents: cssContent,\n });\n expect(transformCSSResults.code).toBe(minCssContent); // TODO: remove this?\n expect(transformCSSResults.contents).toBe(minCssContent);\n expect(transformCSSResults.map).toBe(undefined);\n await pluginInstance.cleanup();\n });\n\n test('the correct \"from\" is provided', async () => {\n const pluginInstance = plugin(\n {root: path.join(__dirname, 'fixtures', 'from')},\n {\n config: path.join(__dirname, 'fixtures', 'from', 'postcss.config.js'),\n },\n );\n\n const cssPath = path.join(__dirname, 'fixtures', 'from', 'style.css');\n const cssContent = fs.readFileSync(cssPath, 'utf8');\n let transformCSSResults = await pluginInstance.transform({\n id: cssPath,\n fileExt: path.extname(cssPath),\n contents: cssContent,\n });\n\n const fromCssPath = path.join(__dirname, 'fixtures', 'from', 'from.css');\n const fromCssContent = fs.readFileSync(fromCssPath, 'utf8');\n transformCSSResults = await pluginInstance.transform({\n id: fromCssPath,\n fileExt: path.extname(fromCssPath),\n contents: fromCssContent,\n });\n expect(transformCSSResults.code).toEqual(expect.stringContaining('from.css'));\n\n await pluginInstance.cleanup();\n });\n});\n" }, { "path": "plugins/plugin-postcss/worker.js", "content": "'use strict';\n\nconst workerpool = require('workerpool');\nconst postcss = require('postcss');\nconst postcssrc = require('postcss-load-config');\nconst loadPlugins = require('postcss-load-config/src/plugins.js');\nconst loadOptions = require('postcss-load-config/src/options.js');\n\nconst processMap = new Map();\n\nasync function transformAsync(css, {filepath, config, cwd, map}) {\n let process = null;\n const key = config + '-' + cwd;\n\n // Initialize processor. `config`, `cwd` won't change until Snowpack is restarted\n if (!processMap.has(key)) {\n let plugins = [];\n let options = {};\n if (typeof config === 'object') {\n plugins = loadPlugins(config);\n options = loadOptions(config);\n } else {\n const rc = await postcssrc({}, config || cwd);\n plugins = rc.plugins;\n options = rc.options;\n }\n const processor = postcss(plugins);\n process = (css, filepath, map) => processor.process(css, {...options, from: filepath, map});\n processMap.set(key, process);\n }\n process = processMap.get(key);\n\n const result = await process(css, filepath, map);\n return JSON.stringify({css: result.css, map: result.map, messages: result.messages});\n}\n\n// create a worker and register public functions\nworkerpool.worker({\n transformAsync,\n});\n" }, { "path": "plugins/plugin-react-refresh/CHANGELOG.md", "content": "# @snowpack/plugin-react-refresh\n\n## 2.5.0\n\n### Minor Changes\n\n- 1b33af55: plugin-react-refresh: add custom babel config option (#2943) \n\n## 2.4.2\n\n### Patch Changes\n\n- 857d73cb: [ci] yarn format\n- ceb516d0: [plugin-react-refresh] Solve the problem with MobX observer() HOC (#3058) \n- 56c5a231: fix typo in changelog\n- a82cb6b1: Revert \"[plugin-react-refresh] Solve the problem with MobX observer() HOC (#3015)\"\n- b07d815b: [ci] yarn format\n- 6e4bb7fe: [plugin-react-refresh] Solve the problem with MobX observer() HOC (#3015) \n\n## 2.4.1\n\n### Patch Changes\n\n- bea1c56c: Simplify. cleanup, enhance snowpack internals (#2707)\n- ca16821f: Parse multiline tags (#2406) \n- 353da2cb: [ci] yarn format\n- f6b30dea: Disable react-refresh during ssr. (#2376) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-react-refresh)._\n" }, { "path": "plugins/plugin-react-refresh/README.md", "content": "# @snowpack/plugin-react-refresh\n\nTransforms JavaScript files containing React components automatically to enable React Fast Refresh via Snowpack's HMR API.\n\n```\nnpm install --save-dev @snowpack/plugin-react-refresh\n```\n\n## Setup\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n '@snowpack/plugin-react-refresh',\n {\n /* options: see below */\n },\n ],\n};\n```\n\n## Plugin Options\n\n| Name | Type | Description |\n| :------ | :-------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `babel` | `boolean` or `object` | By default, this plugin uses Babel to add Fast-Refresh code to eligible JS files. If you want to configure & run this yourself, set `\"babel\": false\"`. Alternatively, you can pass a custom Babel configuration object to enhance or override the defaults. Most users won't need this. |\n\n## How it Works\n\nThis plugin will automatically inject HMR event handlers into any file containing a React component.\n\nIn most applications, you'll still want some top-level `import.meta.hot` handling code in your application for any non-React file updates. In our Create Snowpack App templates, this would be the HMR handling snippet found in `src/index.js`.\n" }, { "path": "plugins/plugin-react-refresh/package.json", "content": "{\n \"name\": \"@snowpack/plugin-react-refresh\",\n \"version\": \"2.5.0\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-react-refresh#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-react-refresh\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.14.0\",\n \"@babel/plugin-syntax-class-properties\": \"^7.10.0\",\n \"react-refresh\": \"^0.9.0\"\n },\n \"peerDependencies\": {\n \"react\": \">=16.9.0\",\n \"react-dom\": \">=16.9.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "plugins/plugin-react-refresh/plugin.js", "content": "/**\n * @snowpack/plugin-react-refresh (Fast Refresh)\n * Based on details provided by:\n * - https://github.com/facebook/react/issues/16604#issuecomment-528663101\n * - https://github.com/vitejs/vite-plugin-react (see LICENSE)\n */\n\nconst fs = require('fs');\n\nconst reactRefreshLoc = require.resolve('react-refresh/cjs/react-refresh-runtime.development.js');\nconst reactRefreshCode = fs\n .readFileSync(reactRefreshLoc, {encoding: 'utf-8'})\n .replace(`process.env.NODE_ENV`, JSON.stringify('development'));\n\nfunction transformHtml(contents) {\n return contents.replace(/()/s, function (match, p1) {\n return `${p1}\n`;\n });\n}\n\nconst babel = require('@babel/core');\nconst IS_FAST_REFRESH_ENABLED = /\\$RefreshReg\\$\\(/;\nasync function transformJs(contents, id, cwd, babelConfig) {\n let fastRefreshEnhancedCode;\n\n if (babelConfig === false) {\n fastRefreshEnhancedCode = contents;\n } else if (IS_FAST_REFRESH_ENABLED.test(contents)) {\n // Warn in case someone has a bad setup, and to help older users upgrade.\n console.warn(\n `[@snowpack/plugin-react-refresh] ${id}\\n\"react-refresh/babel\" plugin no longer needed in your babel config, safe to remove.`,\n );\n fastRefreshEnhancedCode = contents;\n } else {\n const {plugins = [], ...restConfig} = babelConfig instanceof Object ? babelConfig : {};\n const {code} = await babel.transformAsync(contents, {\n cwd,\n filename: id,\n ast: false,\n compact: false,\n sourceMaps: false,\n configFile: false,\n babelrc: false,\n plugins: [\n [require('react-refresh/babel'), {skipEnvCheck: true}],\n require('@babel/plugin-syntax-class-properties'),\n ...plugins,\n ],\n ...restConfig,\n });\n fastRefreshEnhancedCode = code;\n }\n\n // If fast refresh markup wasn't added, just return the original content.\n if (!fastRefreshEnhancedCode || !IS_FAST_REFRESH_ENABLED.test(fastRefreshEnhancedCode)) {\n return contents;\n }\n\n return `\n/** React Refresh: Setup **/\nif (import.meta.hot) {\n if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {\n console.warn('@snowpack/plugin-react-refresh: HTML setup script not run. React Fast Refresh only works when Snowpack serves your HTML routes. You may want to remove this plugin.');\n } else {\n var prevRefreshReg = window.$RefreshReg$;\n var prevRefreshSig = window.$RefreshSig$;\n window.$RefreshReg$ = (type, id) => {\n window.$RefreshRuntime$.register(type, ${JSON.stringify(id)} + \" \" + id);\n }\n window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;\n }\n}\n\n${fastRefreshEnhancedCode}\n\n/** React Refresh: Connect **/\nif (import.meta.hot) {\n window.$RefreshReg$ = prevRefreshReg\n window.$RefreshSig$ = prevRefreshSig\n import.meta.hot.accept(() => {\n window.$RefreshRuntime$.performReactRefresh()\n });\n}`;\n}\n\nmodule.exports = function reactRefreshTransform(snowpackConfig, {babel}) {\n return {\n name: '@snowpack/plugin-react-refresh',\n transform({contents, fileExt, id, isDev, isHmrEnabled, isSSR}) {\n // Use long-form \"=== false\" to handle older Snowpack versions\n if (isHmrEnabled === false) {\n return;\n }\n if (!isDev) {\n return;\n }\n\n // While server-side rendering, the fast-refresh code is not needed.\n if (fileExt === '.js' && !isSSR) {\n return transformJs(contents, id, snowpackConfig.root || process.cwd(), babel);\n }\n if (fileExt === '.html') {\n return transformHtml(contents);\n }\n },\n };\n};\n" }, { "path": "plugins/plugin-react-refresh/test/__snapshots__/plugin.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`@snowpack/plugin-react-refresh don't transform when disabled: html 1`] = `undefined`;\n\nexports[`@snowpack/plugin-react-refresh don't transform when disabled: js 1`] = `undefined`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html when babel is disabled: html 1`] = `\n\"\n\n \n \n \n \n \n \n \n\n
\n \n \n \n\"\n`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html when babel is disabled: js 1`] = `\n\"import React from 'react';\nfunction App() {\n return /* @__PURE__ */ React.createElement('div', null, 'React App');\n}\nexport default App;\n\"\n`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html when hmr is disabled: html 1`] = `undefined`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html when hmr is disabled: js 1`] = `undefined`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html when running in SSR: html 1`] = `\n\"\n\n \n \n \n \n \n \n \n\n
\n \n \n \n\"\n`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html when running in SSR: js 1`] = `undefined`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html: html 1`] = `\n\"\n\n \n \n \n \n \n \n \n\n
\n \n \n \n\"\n`;\n\nexports[`@snowpack/plugin-react-refresh transform js and html: js 1`] = `\n\"\n/** React Refresh: Setup **/\nif (import.meta.hot) {\n if (!window.$RefreshReg$ || !window.$RefreshSig$ || !window.$RefreshRuntime$) {\n console.warn('@snowpack/plugin-react-refresh: HTML setup script not run. React Fast Refresh only works when Snowpack serves your HTML routes. You may want to remove this plugin.');\n } else {\n var prevRefreshReg = window.$RefreshReg$;\n var prevRefreshSig = window.$RefreshSig$;\n window.$RefreshReg$ = (type, id) => {\n window.$RefreshRuntime$.register(type, \\\\\"stub.js\\\\\" + \\\\\" \\\\\" + id);\n }\n window.$RefreshSig$ = window.$RefreshRuntime$.createSignatureFunctionForTransform;\n }\n}\n\nimport React from 'react';\n\nfunction App() {\n return /* @__PURE__ */React.createElement('div', null, 'React App');\n}\n\n_c = App;\nexport default App;\n\nvar _c;\n\n$RefreshReg$(_c, \\\\\"App\\\\\");\n\n/** React Refresh: Connect **/\nif (import.meta.hot) {\n window.$RefreshReg$ = prevRefreshReg\n window.$RefreshSig$ = prevRefreshSig\n import.meta.hot.accept(() => {\n window.$RefreshRuntime$.performReactRefresh()\n });\n}\"\n`;\n" }, { "path": "plugins/plugin-react-refresh/test/plugin.test.js", "content": "mockBabel();\nconst path = require('path');\nconst fs = require('fs');\nconst pluginReactRefresh = require('../plugin');\n\nconst htmlFilePath = path.resolve(__dirname, './stubs/stub.html');\nconst htmlFileContent = fs.readFileSync(htmlFilePath, {\n encoding: 'utf-8',\n});\nconst htmlTransformOptions = {\n contents: htmlFileContent,\n fileExt: '.html',\n id: 'stub.html',\n isDev: true,\n isHmrEnabled: true,\n isSSR: false,\n};\nconst jsFilePath = path.resolve(__dirname, './stubs/stub.js');\nconst jsFileContent = fs.readFileSync(jsFilePath, {\n encoding: 'utf-8',\n});\nconst jsTransformOptions = {\n contents: jsFileContent,\n fileExt: '.js',\n id: 'stub.js',\n isDev: true,\n isHmrEnabled: true,\n isSSR: false,\n};\n\nfunction mockBabel() {\n jest.mock('@babel/core');\n const babel = require('@babel/core');\n babel.transformAsync = jest\n .fn()\n .mockName('babel.transformAsync')\n .mockImplementation(async (contents, options, ...args) => {\n options.plugins = (options.plugins || []).map((plugin) => {\n if (Array.isArray(plugin)) {\n if (plugin[1]) {\n plugin[1].skipEnvCheck = true;\n }\n return plugin;\n }\n // Fix: React Refresh Babel transform should only be enabled in development environment.\n // Instead, the environment is: \"test\".\n // If you want to override this check, pass {skipEnvCheck: true} as plugin options.\n return [plugin, {skipEnvCheck: true}];\n });\n\n // Stop `jest.requireActual('@babel/core').transformAsync()` from requiring mocked babel function\n jest.unmock('@babel/core');\n const ret = await jest\n .requireActual('@babel/core')\n .transformAsync(contents, options, ...args);\n mockBabel();\n\n return ret;\n });\n}\n\nasync function testPluginInstance(pluginInstance, overrides = {}) {\n const pluginTransform = pluginInstance.transform;\n expect(await pluginTransform({...htmlTransformOptions, ...overrides})).toMatchSnapshot('html');\n expect(await pluginTransform({...jsTransformOptions, ...overrides})).toMatchSnapshot('js');\n}\n\nafterEach(() => {\n jest.restoreAllMocks();\n});\n\ndescribe('@snowpack/plugin-react-refresh', () => {\n test('transform js and html', async () => {\n const pluginInstance = pluginReactRefresh({}, {babel: true});\n await testPluginInstance(pluginInstance);\n });\n test(\"don't transform when disabled\", async () => {\n const pluginInstance = pluginReactRefresh({}, {babel: true});\n await testPluginInstance(pluginInstance, {isDev: false});\n });\n test('transform js and html when hmr is disabled', async () => {\n const pluginInstance = pluginReactRefresh({}, {babel: true});\n await testPluginInstance(pluginInstance, {isHmrEnabled: false});\n });\n\n test('transform js and html when running in SSR', async () => {\n const pluginInstance = pluginReactRefresh({}, {babel: true});\n await testPluginInstance(pluginInstance, {isSSR: true});\n });\n\n test('transform js and html when babel is disabled', async () => {\n const pluginInstance = pluginReactRefresh(\n {\n devOptions: {\n hmr: true,\n },\n },\n {babel: false},\n );\n await testPluginInstance(pluginInstance);\n });\n\n test('include custom babel config', async () => {\n const babel = require('@babel/core');\n const mockTransformAsync = jest.fn(() => Promise.resolve({code: ''}));\n jest.spyOn(babel, 'transformAsync').mockImplementation(mockTransformAsync);\n\n const babelConfig = {\n compact: true,\n plugins: ['@babel/plugin-syntax-top-level-await'],\n };\n const pluginInstance = pluginReactRefresh({}, {babel: babelConfig});\n await pluginInstance.transform({...jsTransformOptions});\n\n expect(mockTransformAsync).toHaveBeenCalledTimes(1);\n expect(mockTransformAsync.mock.calls[0][1]).toHaveProperty('compact', true);\n expect(mockTransformAsync.mock.calls[0][1].plugins).toContain(\n '@babel/plugin-syntax-top-level-await',\n );\n });\n});\n" }, { "path": "plugins/plugin-react-refresh/test/stubs/stub.html", "content": "\n\n \n \n \n \n \n \n \n
\n \n \n \n" }, { "path": "plugins/plugin-react-refresh/test/stubs/stub.js", "content": "import React from 'react';\nfunction App() {\n return /* @__PURE__ */ React.createElement('div', null, 'React App');\n}\nexport default App;\n" }, { "path": "plugins/plugin-run-script/README.md", "content": "# @snowpack/plugin-run-script\n\nRun any CLI command as a part of Snowpack’s dev server and production build. Useful for languages not supported by [Snowpack plugins](https://www.snowpack.dev/plugins). This replaces the old `run:*` scripts in your Snowpack config.\n\nUsage:\n\n```bash\nnpm i @snowpack/plugin-run-script\n```\n\nThen add the plugin to your Snowpack config:\n\n```js\n// snowpack.config.mjs\n\nexport default {\n plugins: [\n [\n '@snowpack/plugin-run-script',\n {\n cmd: 'sass src/css:public/css --no-source-map', // production build command\n watch: 'sass --watch src/css:public/css --no-source-map', // (optional) dev server command\n },\n ],\n ],\n};\n```\n\nSupply any CLI command in `cmd`. Note that this is the same as running the command yourself in your project root folder (i.e. you can reference any global packages as well as npm script).\n\n## Plugin Options\n\n| Name | Type | Description |\n| :------- | :------------------------ | :-------------------------------------------------------------------------- |\n| `cmd` | `string` | The CLI command to run. Note that this will run **before** Snowpack builds. |\n| `name` | `string` | (optional) Set name of console output, default is program name. |\n| `watch` | `string` | (optional) A watch command to run during the dev server. |\n| `output` | `\"stream\" or \"dashboard\"` | (optional) Set how the output should be recorded during dev. |\n" }, { "path": "plugins/plugin-run-script/package.json", "content": "{\n \"version\": \"2.3.0\",\n \"name\": \"@snowpack/plugin-run-script\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-run-script#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-run-script\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"execa\": \"^5.1.1\",\n \"npm-run-path\": \"^4.0.1\"\n }\n}\n" }, { "path": "plugins/plugin-run-script/plugin.js", "content": "const execa = require('execa');\nconst npmRunPath = require('npm-run-path');\n\nconst CLEAR_SEQUENCES = ['\\x1Bc', '\\x1B[2J\\x1B[0;0f'];\n\nfunction runScriptPlugin(snowpackConfig, {name, cmd, watch, output}) {\n const [cmdProgram] = cmd.split(' ');\n const watchCmd = watch && watch.replace('$1', cmd);\n\n return {\n name: name || cmdProgram,\n async run({isDev, log}) {\n const workerPromise = execa.command(isDev ? watchCmd || cmd : cmd, {\n env: npmRunPath.env(),\n extendEnv: true,\n shell: true,\n windowsHide: false,\n cwd: snowpackConfig.root || process.cwd(),\n });\n const {stdout, stderr} = workerPromise;\n function dataListener(chunk) {\n let stdOutput = chunk.toString();\n if (output === 'stream') {\n log('CONSOLE_INFO', {msg: stdOutput});\n return;\n }\n if (CLEAR_SEQUENCES.some((s) => stdOutput.includes(s))) {\n log('WORKER_RESET', {});\n for (let s of CLEAR_SEQUENCES) {\n stdOutput = stdOutput.replace(s, '');\n }\n }\n if (cmdProgram === 'tsc') {\n const errorMatch = stdOutput.match(/Found (\\d+) error/);\n if (errorMatch) {\n if (errorMatch[1] === '0') {\n stdOutput = stdOutput.trim();\n }\n }\n }\n log('WORKER_MSG', {level: 'log', msg: stdOutput});\n }\n stdout && stdout.on('data', dataListener);\n stderr && stderr.on('data', dataListener);\n return workerPromise;\n },\n };\n}\n\nmodule.exports = runScriptPlugin;\n" }, { "path": "plugins/plugin-run-script/test/plugin.test.js", "content": "const plugin = require('../plugin.js');\nconst {EventEmitter} = require('events');\n\njest.mock('execa');\nconst execa = require('execa');\n\ndescribe('plugin-run-script', () => {\n const DEFAULT_OPTIONS = {\n cmd: 'CMD',\n watch: '$1 --additional-test-watch-options',\n };\n let execaResult, execaFn;\n\n beforeEach(() => {\n execa.command.mockClear();\n execaResult = {\n stderr: new EventEmitter(),\n stdout: new EventEmitter(),\n // Execa is weird, and returns a promise that also has other properties. Fake that here.\n catch: () => {\n return execaResult;\n },\n };\n execaFn = jest.fn().mockName('execa.command').mockReturnValue(execaResult);\n execa.command = execaFn;\n });\n\n test('returns the execa command promise', async () => {\n const p = plugin({}, DEFAULT_OPTIONS);\n const result = await p.run({isDev: false, log: jest.fn});\n expect(result).toEqual(execaResult);\n });\n test('calls the given \"cmd\" command when isDev=false', async () => {\n const p = plugin({}, {cmd: 'CMD'});\n await p.run({isDev: false, log: jest.fn});\n expect(execaFn.mock.calls[0][0]).toMatch('CMD');\n });\n test('calls the given \"watch\" command when isDev=true', async () => {\n const p = plugin({}, {cmd: 'CMD', watch: '$1 --additional-test-watch-options'});\n await p.run({isDev: true, log: jest.fn});\n expect(execaFn.mock.calls[0][0]).toMatch('CMD --additional-test-watch-options');\n });\n test('handles command output in \"stream\" mode', async () => {\n const logFn = jest.fn();\n const p = plugin({}, {...DEFAULT_OPTIONS, output: 'stream'});\n await p.run({isDev: false, log: logFn});\n execaResult.stdout.emit('data', Buffer.from('STDOUT_TEST_MESSAGE'));\n execaResult.stderr.emit('data', Buffer.from('STDERR_TEST_MESSAGE'));\n expect(logFn.mock.calls).toEqual([\n ['CONSOLE_INFO', {msg: 'STDOUT_TEST_MESSAGE'}],\n ['CONSOLE_INFO', {msg: 'STDERR_TEST_MESSAGE'}],\n ]);\n });\n test('handles command output in \"dashboard\" mode', async () => {\n const logFn = jest.fn();\n const p = plugin({}, {...DEFAULT_OPTIONS, output: 'dashboard'});\n await p.run({isDev: false, log: logFn});\n execaResult.stdout.emit('data', Buffer.from('STDOUT_TEST_MESSAGE'));\n execaResult.stderr.emit('data', Buffer.from('STDERR_TEST_MESSAGE'));\n expect(logFn.mock.calls).toEqual([\n ['WORKER_MSG', {level: 'log', msg: 'STDOUT_TEST_MESSAGE'}],\n ['WORKER_MSG', {level: 'log', msg: 'STDERR_TEST_MESSAGE'}],\n ]);\n });\n test('handles clear character output in \"dashboard\" mode', async () => {\n const logFn = jest.fn();\n const p = plugin({}, {...DEFAULT_OPTIONS, output: 'dashboard'});\n await p.run({isDev: false, log: logFn});\n execaResult.stderr.emit('data', Buffer.from('\\u001bcTEST_CLEAR_MESSAGE'));\n execaResult.stderr.emit('data', Buffer.from('\\x1BcTEST_CLEAR_MESSAGE'));\n expect(logFn.mock.calls).toEqual([\n ['WORKER_RESET', {}],\n ['WORKER_MSG', {level: 'log', msg: 'TEST_CLEAR_MESSAGE'}],\n ['WORKER_RESET', {}],\n ['WORKER_MSG', {level: 'log', msg: 'TEST_CLEAR_MESSAGE'}],\n ]);\n });\n test('modify plugin name when specify name', async () => {\n const p = plugin({}, {...DEFAULT_OPTIONS, output: 'dashboard', name: 'test'});\n expect(p.name).toBe('test');\n });\n});\n" }, { "path": "plugins/plugin-sass/CHANGELOG.md", "content": "# @snowpack/plugin-sass\n\n## 1.4.0\n\n### Minor Changes\n\n- c71a3888: Improve @snowpack/plugin-sass resolution (#2964) \n\n## 1.3.1\n\n### Patch Changes\n\n- 85377715: fix wrong argument to parseCompilerOption(array[]) (#2547) \n- edef1986: Fix Sass partial changes not triggering recompiles in Dev (#2792) \n- b0c6b5a0: [ci] yarn format \n- 549c3ca5: Properly find npm install sass when running outside of snowpack project (#2812) \n- 397f06e6: SASS plugin, fix default argument Array check (#2670) \n- 123f2c96: add loadPath support via compilerOptions instead of includePaths\n- cbfe71d2: [ci] yarn format\n- 6c56f4bd: add includePaths option to plugin-sass (#2443) \n- 3b4b1a06: add warning if compilerOptions is used\n- f94f5a55: [ci] yarn format\n- b702f698: more testing cleanup\n- 7b38b486: get tests passing\n- 71bb73b5: [ci] yarn format\n- 48d8b9c7: skip failing windows sass test\n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-sass)._\n" }, { "path": "plugins/plugin-sass/README.md", "content": "# @snowpack/plugin-sass\n\nThis plugin adds [Sass](https://sass-lang.com/) support to any Snowpack project. With this plugin, you can import any `*.scss` or `*.sass` Sass file from JavaScript and have it compile to CSS.\n\nThis plugin also adds support for `.module.scss` Sass Modules. [Learn more.](https://www.snowpack.dev/reference/supported-files)\n\n#### A Note on Sass Implementations\n\nSass is interesting in that multiple compilers are available: [sass](https://www.npmjs.com/package/sass) (written in Dart) & [node-sass](https://www.npmjs.com/package/node-sass) (written in JavaScript). Both packages run on Node.js and both are popular on npm. However, [node-sass is now considered deprecated](https://github.com/sass/node-sass/issues/2952).\n\n**This plugin was designed to work with the `sass` package.** `sass` is automatically installed with this plugin as a direct dependency, so no extra effort is required on your part.\n\n## Usage\n\n```bash\nnpm i @snowpack/plugin-sass\n```\n\nThen add the plugin to your Snowpack config:\n\n```js\n// snowpack.config.mjs\n\nexport default {\n plugins: [\n [\n '@snowpack/plugin-sass',\n {\n /* see options below */\n },\n ],\n ],\n};\n```\n\n## Plugin Options\n\n| Name | Type | Description |\n| :------------------ | :-------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `native` | `boolean` | If `true`, the plugin will ignore the npm version of sass installed locally for the native Sass CLI [installed separately](https://sass-lang.com/install). This involves extra setup, but the result can be [up to 9× faster.](https://stackoverflow.com/a/56422541) (default: `false`). |\n| `compilerOptions.*` | `object` | Pass [Sass options][sass-options] directly to the Sass compiler (see `compilerOptions`). |\n\n### `compilerOptions`\n\nThese options are camelCased equivalents of the [Sass CLI Options][sass-options]. The options listed here are safe for use. The other flags not listed here may cause issues or conflicts with Snowpack and/or other plugins; use at your discretion.\n\n| Name | Type | Description |\n| :--------------- | :----------------------------: | :------------------------------------------------------------------------------------------------------ |\n| `loadPath` | `string, string[]` | Add directories to Sass's load path, to support looking up and loading partials (etc.) by name. |\n| `style` | `'expanded'` \\| `'compressed'` | The output style. Specify `'compressed'` to enable Sass’ built-in minification (default: `'expanded'`). |\n| `sourceMap` | `boolean` | Enable / disable source maps (default: `true`). |\n| `sourceMapUrls` | `'relative'` \\| `'absolute'` | How to link from source maps to source files (default: `'relative'`). |\n| `embedSources` | `boolean` | Embed source file contents in source maps (default: `false`). |\n| `embedSourceMap` | `boolean` | Embed source map contents in CSS (default: `false`). |\n| `charset` | `boolean` | Emit a `@charset` or BOM for CSS with non-ASCII characters. (default: `true`). |\n| `update` | `boolean` | Compile only out-of-date stylesheets (default: `false`). |\n\n[sass-options]: https://sass-lang.com/documentation/cli/dart-sass#options\n" }, { "path": "plugins/plugin-sass/package.json", "content": "{\n \"version\": \"1.4.0\",\n \"name\": \"@snowpack/plugin-sass\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-sass#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-sass\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"execa\": \"^5.1.1\",\n \"find-up\": \"^5.0.0\",\n \"npm-run-path\": \"^4.0.1\",\n \"sass\": \"^1.3.0\"\n }\n}\n" }, { "path": "plugins/plugin-sass/plugin.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst execa = require('execa');\nconst npmRunPath = require('npm-run-path');\nconst findUp = require('find-up');\n\nconst IMPORT_REGEX = /\\@(use|import|forward)\\s*['\"](.*?)['\"]/g;\nconst PARTIAL_REGEX = /([\\/\\\\])_(.+)(?![\\/\\\\])/;\n\nfunction stripFileExtension(filename) {\n return filename.split('.').slice(0, -1).join('.');\n}\n\nfunction findChildPartials(pathName, fileName, fileExt) {\n const dirPath = path.parse(pathName).dir;\n\n // Prepend a \"_\" to signify a partial.\n if (!fileName.startsWith('_')) {\n fileName = '_' + fileName;\n }\n\n // Add on the file extension if it is not already used.\n if (!fileName.endsWith('.scss') || !fileName.endsWith('.sass')) {\n fileName += fileExt;\n }\n\n const filePath = path.resolve(dirPath, fileName);\n\n let contents = '';\n try {\n contents = fs.readFileSync(filePath, 'utf8');\n } catch (err) {}\n\n return contents;\n}\n\nfunction scanSassImports(fileContents, filePath, fileExt, partials = new Set()) {\n // TODO: Replace with matchAll once Node v10 is out of TLS.\n // const allMatches = [...result.matchAll(new RegExp(HTML_JS_REGEX))];\n const allMatches = [];\n let match;\n const regex = new RegExp(IMPORT_REGEX);\n while ((match = regex.exec(fileContents))) {\n allMatches.push(match);\n }\n // return all imports, resolved to true files on disk.\n allMatches\n .map((match) => match[2])\n .filter((s) => s.trim())\n // Avoid node packages and core sass libraries.\n .filter((s) => !s.includes('node_modules') && !s.includes('sass:'))\n .forEach((fileName) => {\n let pathName = path.resolve(path.dirname(filePath), fileName);\n\n if (partials.has(pathName)) {\n return;\n }\n\n // Add this partial to the main list being passed to avoid duplicates.\n partials.add(pathName);\n\n // If it is a directory then look for an _index file.\n try {\n if (fs.lstatSync(pathName).isDirectory()) {\n fileName = 'index';\n pathName += '/' + fileName;\n }\n } catch (err) {}\n\n // Recursively find any child partials that have not already been added.\n const partialsContent = findChildPartials(pathName, fileName, fileExt);\n if (partialsContent) {\n const childPartials = scanSassImports(partialsContent, pathName, fileExt, partials);\n partials.add(...childPartials);\n }\n });\n\n return partials;\n}\n\nmodule.exports = function sassPlugin(snowpackConfig, {native, compilerOptions = {}} = {}) {\n const {root} = snowpackConfig || {};\n\n /** A map of partially resolved imports to the files that imported them. */\n const importedByMap = new Map();\n\n function addImportsToMap(filePath, sassImport) {\n const importedBy = importedByMap.get(sassImport);\n if (importedBy) {\n importedBy.add(filePath);\n } else {\n importedByMap.set(sassImport, new Set([filePath]));\n }\n }\n\n return {\n name: '@snowpack/plugin-sass',\n resolve: {\n input: ['.scss', '.sass'],\n output: ['.css'],\n },\n /**\n * If any files imported the given file path, mark them as changed.\n * @private\n */\n _markImportersAsChanged(filePath) {\n if (importedByMap.has(filePath)) {\n const importedBy = importedByMap.get(filePath);\n importedByMap.delete(filePath);\n for (const importerFilePath of importedBy) {\n this.markChanged(importerFilePath);\n }\n }\n },\n /**\n * When a file changes, also mark it's importers as changed.\n * Note that Sass has very lax matching of imports -> files.\n * Follow these rules to find a match: https://sass-lang.com/documentation/at-rules/use\n */\n onChange({filePath}) {\n const filePathNoExt = stripFileExtension(filePath);\n // check exact: \"_index.scss\" (/a/b/c/foo/_index.scss)\n this._markImportersAsChanged(filePath);\n // check no ext: \"_index\" (/a/b/c/foo/_index)\n this._markImportersAsChanged(filePathNoExt);\n // check no underscore: \"index.scss\" (/a/b/c/foo/index.scss)\n this._markImportersAsChanged(filePath.replace(PARTIAL_REGEX, '$1$2'));\n // check no ext, no underscore: \"index\" (/a/b/c/foo/index)\n this._markImportersAsChanged(filePathNoExt.replace(PARTIAL_REGEX, '$1$2'));\n // check folder import: \"foo\" (/a/b/c/foo)\n if (filePathNoExt.endsWith('_index')) {\n const folderPathNoIndex = filePathNoExt.substring(0, filePathNoExt.length - 7);\n this._markImportersAsChanged(folderPathNoIndex);\n }\n },\n /** Load the Sass file and compile it to CSS. */\n async load({filePath, isDev}) {\n const fileExt = path.extname(filePath);\n const contents = fs.readFileSync(filePath, 'utf8');\n\n // Sass partials should never be loaded directly, return nothing to ignore.\n if (path.basename(filePath).startsWith('_')) {\n return;\n }\n\n // During development, we need to track changes to Sass dependencies.\n if (isDev) {\n const sassImports = scanSassImports(contents, filePath, fileExt);\n [...sassImports].forEach((imp) => addImportsToMap(filePath, imp));\n }\n\n const args = ['--stdin'];\n\n // If file is `.sass`, use YAML-style. Otherwise, use default.\n if (fileExt === '.sass') {\n args.push('--indented');\n }\n\n // keep track of load paths later\n const loadPaths = new Set([path.dirname(filePath)]);\n const DEFAULT_LOAD_PATHS = new Set([root, process.cwd()]);\n const nodeModulesPath = await findUp('node_modules', {\n type: 'directory',\n cwd: root || __dirname,\n });\n if (nodeModulesPath) DEFAULT_LOAD_PATHS.add(nodeModulesPath);\n\n // Pass in user-defined options\n function parseCompilerOption([flag, value]) {\n let flagName = flag.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`); // convert camelCase to kebab-case\n switch (typeof value) {\n case 'boolean': {\n args.push(`--${value === false ? 'no-' : ''}${flagName}`);\n break;\n }\n case 'string':\n case 'number': {\n if (flagName === 'loadPath') {\n loadPaths.add(value); // don’t add these until default load paths are collected\n } else {\n args.push(`--${flagName}=${value}`);\n }\n break;\n }\n default: {\n if (Array.isArray(value)) {\n for (const val of value) {\n parseCompilerOption([flag, val]);\n }\n break;\n }\n throw new Error(\n `compilerOptions[${flag}] value not supported. Must be string, number, or boolean.`,\n );\n }\n }\n }\n Object.entries(compilerOptions).forEach(parseCompilerOption);\n\n // --load-path\n for (const dir of loadPaths) {\n args.push(`--load-path=${dir}`); // load user-specified loadPaths first\n }\n for (const dir of DEFAULT_LOAD_PATHS) {\n if (!loadPaths.has(dir)) {\n args.push(`--load-path=${dir}`); // then add default loadPaths (only if different)\n }\n }\n\n // Build the file.\n const execaOptions = {\n input: contents,\n // Adds the PATH param to the command so it can find local sass\n env: native ? undefined : npmRunPath.env(),\n extendEnv: native ? true : false,\n };\n\n // If not using native them specify the project root so execa finds the right sass binary.\n if (!native && root) {\n // Prefer the node_modules/.bin\n execaOptions.preferLocal = true;\n\n // Specifies the local directory (which contains a .bin with sass)\n execaOptions.localDir = root;\n }\n\n const {stdout, stderr} = await execa('sass', args, execaOptions);\n // Handle the output.\n if (stderr) throw new Error(stderr);\n if (stdout) return stdout;\n },\n };\n};\n" }, { "path": "plugins/plugin-sass/test/__snapshots__/plugin.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`plugin-sass returns the compiled Sass result: App.sass 1`] = `\n\".child {\n text-align: left;\n}\n\nbody {\n font-family: Helvetica, sans-serif;\n}\n\n.App {\n text-align: center;\n background: #333;\n}\"\n`;\n\nexports[`plugin-sass returns the compiled Sass result: App.scss 1`] = `\n\"body {\n font-family: Helvetica, sans-serif;\n}\n\n.App {\n text-align: center;\n background: #333;\n}\"\n`;\n" }, { "path": "plugins/plugin-sass/test/fixtures/bad/bad.scss", "content": "awegagwagawingawignTHISISBADCODE" }, { "path": "plugins/plugin-sass/test/fixtures/sass/App.sass", "content": "@use 'base'\n@use 'folder'\n\nbody\n font-family: folder.$font-stack\n\n.App\n text-align: center\n background: base.$primary-color\n" }, { "path": "plugins/plugin-sass/test/fixtures/sass/_base.sass", "content": "// _base.scss\n$primary-color: #333\n" }, { "path": "plugins/plugin-sass/test/fixtures/sass/folder/_child-partial.sass", "content": ".child\n text-align: left\n" }, { "path": "plugins/plugin-sass/test/fixtures/sass/folder/_index.sass", "content": "// folder/_index.sass\n@use 'child-partial'\n\n$font-stack: Helvetica, sans-serif\n" }, { "path": "plugins/plugin-sass/test/fixtures/scss/App.scss", "content": "@use 'base';\n@use 'folder';\n\n\nbody {\n font-family: folder.$font-stack;\n}\n\n.App {\n text-align: center;\n background: base.$primary-color;\n}" }, { "path": "plugins/plugin-sass/test/fixtures/scss/_base.scss", "content": "// _base.scss\n$primary-color: #333;\n" }, { "path": "plugins/plugin-sass/test/fixtures/scss/folder/_index.scss", "content": "// folder/_index.scss\n$font-stack: Helvetica, sans-serif;\n" }, { "path": "plugins/plugin-sass/test/plugin-mocked.test.js", "content": "/**\n * This test requires mocks which could disrupt other tests\n */\nconst path = require('path');\nconst mockExeca = jest.fn().mockImplementation(() => Promise.resolve({stdout: '', stderr: ''}));\njest.mock('execa', () => (cmd, args) => mockExeca(cmd, args));\nconst plugin = require('../plugin');\n\nconst MOCK_CONFIG = null;\nconst MOCK_LOAD = {filePath: path.join(__dirname, 'fixtures', 'scss', 'App.scss'), isDev: false};\n\nconst tests = [\n {name: 'no options', given: {}, expect: []},\n {\n name: 'string option',\n given: {compilerOptions: {style: 'compressed'}},\n expect: [`--style=compressed`],\n },\n {\n name: 'boolean option',\n given: {compilerOptions: {sourceMaps: false}},\n expect: [`--no-source-maps`],\n },\n {\n name: 'combination',\n given: {compilerOptions: {style: 'compressed', sourceMaps: true}},\n expect: [`--style=compressed`, `--source-maps`],\n },\n];\n\ndescribe('plugin-sass', () => {\n afterEach(() => {\n mockExeca.mockClear(); // clear calls between each test\n });\n\n tests.forEach((t) => {\n it(t.name, async () => {\n const {load} = plugin(MOCK_CONFIG, t.given);\n await load(MOCK_LOAD);\n // Note: this test assumes execa is only used once in the entire plugin.\n // If execa needs to be used for another purpose, you can filter calls by 'sass' 1st param here\n t.expect.forEach((arg) => {\n expect(mockExeca.mock.calls[0][1]).toContain(arg);\n });\n });\n });\n});\n" }, { "path": "plugins/plugin-sass/test/plugin.test.js", "content": "const plugin = require('../plugin.js');\nconst path = require('path');\n\nconst pathToSassApp = path.join(__dirname, 'fixtures/sass/App.sass');\nconst pathToSassBase = path.join(__dirname, 'fixtures/sass/_base.sass');\nconst pathToSassIndex = path.join(__dirname, 'fixtures/sass/folder/_index.sass');\nconst pathToSassChild = path.join(__dirname, 'fixtures/sass/folder/_child-partial.sass');\nconst pathToScssApp = path.join(__dirname, 'fixtures/scss/App.scss');\nconst pathToBadCode = path.join(__dirname, 'fixtures/bad/bad.scss');\n\ndescribe('plugin-sass', () => {\n test('returns the compiled Sass result', async () => {\n const p = plugin(null, {});\n const sassResult = await p.load({filePath: pathToSassApp, isDev: false});\n expect(sassResult).toMatchSnapshot('App.sass');\n const scssResult = await p.load({filePath: pathToScssApp, isDev: true});\n expect(scssResult).toMatchSnapshot('App.scss');\n });\n\n test('returns undefined when a sass partial is loaded directly', async () => {\n const p = plugin(null, {});\n const devResult = await p.load({filePath: pathToSassBase, isDev: false});\n expect(devResult).toEqual(undefined);\n const prodResult = await p.load({filePath: pathToSassBase, isDev: true});\n expect(prodResult).toEqual(undefined);\n });\n\n test('throws an error when stderr output is returned', async () => {\n const p = plugin(null, {});\n await expect(p.load({filePath: pathToBadCode, isDev: false})).rejects.toThrow(\n 'Command failed with exit code',\n );\n });\n\n test('marks a dependant as changed when an imported changes and isDev=true', async () => {\n const p = plugin(null, {});\n p.markChanged = jest.fn();\n await p.load({filePath: pathToSassApp, isDev: true});\n expect(p.markChanged.mock.calls).toEqual([]);\n p.onChange({filePath: pathToSassApp});\n expect(p.markChanged.mock.calls).toEqual([]);\n p.onChange({filePath: pathToSassBase});\n expect(p.markChanged.mock.calls).toEqual([[pathToSassApp]]);\n p.markChanged.mockClear();\n p.onChange({filePath: pathToSassIndex});\n expect(p.markChanged.mock.calls).toEqual([[pathToSassApp]]);\n p.markChanged.mockClear();\n p.onChange({filePath: pathToSassChild});\n expect(p.markChanged.mock.calls).toEqual([[pathToSassApp]]);\n });\n\n test('does not track dependant changes when isDev=false', async () => {\n const p = plugin(null, {});\n p.markChanged = jest.fn();\n await p.load({filePath: pathToSassApp, isDev: false});\n p.onChange({filePath: pathToSassApp});\n p.onChange({filePath: pathToSassBase});\n expect(p.markChanged.mock.calls).toEqual([]);\n });\n\n test('uses native sass CLI when native option = true', async () => {\n const p = plugin(null, {native: true});\n process.env.PATH = '';\n await expect(p.load({filePath: pathToSassApp, isDev: false})).rejects.toThrow(\n /(EPIPE|ENOENT|'sass' is not recognized as an internal or external command)/,\n );\n });\n});\n" }, { "path": "plugins/plugin-svelte/CHANGELOG.md", "content": "# @snowpack/plugin-svelte\n\n## 3.7.0\n\n### Minor Changes\n\n- d9956f73: add explicit \"mode\" config (#3135)\n- 4403595e: Sourcemaps (#3271) \n\n### Patch Changes\n\n- c9d2835c: chore: Update Node versions in GitHub CI (#3238) \n\n## 3.6.1\n\n### Patch Changes\n\n- 56c5a231: fix typo in changelog\n- 40f02cf4: reorder changelog entries\n- 0694c5d3: [plugin-svelte] upgrade svelte-hmr to 0.13.2, fix remote source support (#2909) \n\n## 3.6.0\n\n### Minor Changes\n\n- c27d7f48: feat(plugin-svelte): track preprocess dependencies \n\n### Patch Changes\n\n- 5bf28731: fix bad svelte test\n- 4332623d: [ci] yarn format\n- 9ec250c4: fix merge conflicts\n- bea1c56c: Simplify. cleanup, enhance snowpack internals (#2707)\n- 49b29f97: [ci] yarn format\n\n## 3.5.2\n\n### Patch Changes\n\n- b5b0590f: [ci] yarn format\n\n* ## 3.5.1\n\n### Patch Changes\n\n- 628e58a4: svelte plugin: make configurable hmrOptions\n- a8471965: [ci] yarn format\n- 9b465b6f: add backwards compat for the svelte plugin\n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-svelte)._\n" }, { "path": "plugins/plugin-svelte/README.md", "content": "# @snowpack/plugin-svelte\n\nUse the [Svelte compiler](https://svelte.dev/docs#Compile_time) to build your `.svelte` files from source. Supports TypeScript and Sass out-of-the-box via [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).\n\n```\nnpm install --save-dev @snowpack/plugin-svelte\n```\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-svelte',\n {\n /* see optional “Plugin Options” below */\n },\n ],\n ],\n};\n```\n\n## Plugin Options\n\nBy default, this plugin will look for a `svelte.config.js` file in your project directory to load `preprocess` and `compilerOptions` configuration from. However, you can also customize Svelte directly via the plugin options below.\n\n| Name | Type | Description |\n| :---------------- | :--------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `configFilePath` | `string` | Relative path to a Svelte config file. Defaults to load `svelte.config.js` from the current project root directory. |\n| `input` | `string[]` | Array of file extensions to process. Uses `svelte.config.js` `extensions` if available. Defaults to `['.svelte']`. |\n| `preprocess` | [svelte.preprocess options](https://svelte.dev/docs#svelte_preprocess) | Configure the Svelte pre-processor. If this option is given, the config file `preprocess` option will be ignored. If any `preprocess` option is set to `false`, preprocessing will be skipped entirely regardless of file content. If no `preprocess` option is given, this plugin defaults to use [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess). |\n| `compilerOptions` | [svelte.compile options](https://svelte.dev/docs#svelte_compile) | Configure the Svelte compiler.If this option is given, the config file `preprocess` option will be ignored. |\n| `hmrOptions` | [svelte-hmr options](https://github.com/rixo/svelte-hmr#options) | Configure HMR & \"fast refresh\" behavior for Svelte. |\n" }, { "path": "plugins/plugin-svelte/package.json", "content": "{\n \"name\": \"@snowpack/plugin-svelte\",\n \"version\": \"3.7.0\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-svelte#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-svelte\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"peerDependencies\": {\n \"svelte\": \"^3.21.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\",\n \"dependencies\": {\n \"rollup-plugin-svelte\": \"^7.0.0\",\n \"svelte-hmr\": \"^0.13.2\",\n \"svelte-preprocess\": \"^4.7.2\"\n }\n}\n" }, { "path": "plugins/plugin-svelte/plugin.js", "content": "const svelte = require('svelte/compiler');\nconst svelteRollupPlugin = require('rollup-plugin-svelte');\nconst fs = require('fs');\nconst path = require('path');\nconst {createMakeHot} = require('svelte-hmr');\n\nconst inlineSourcemap = (code, map) =>\n code +\n '\\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +\n new Buffer(map.toString()).toString('base64');\n\nmodule.exports = function plugin(snowpackConfig, pluginOptions = {}) {\n const isDev = snowpackConfig.mode !== 'production';\n const useSourceMaps =\n snowpackConfig.buildOptions.sourcemap || snowpackConfig.buildOptions.sourceMaps;\n // Old Snowpack versions wouldn't build dependencies. Starting in v3.1, Snowpack's build pipeline\n // is run on all files, including npm package files. The rollup plugin is no longer needed.\n const importedByMap = new Map();\n const needsRollupPlugin = typeof snowpackConfig.buildOptions.resolveProxyImports === 'undefined';\n\n // Support importing Svelte files when you install dependencies.\n const packageOptions = snowpackConfig.packageOptions || snowpackConfig.installOptions;\n if (packageOptions.source === 'local') {\n if (needsRollupPlugin) {\n packageOptions.rollup = packageOptions.rollup || {};\n packageOptions.rollup.plugins = packageOptions.rollup.plugins || [];\n packageOptions.rollup.plugins.push(\n svelteRollupPlugin({\n include: /\\.svelte$/,\n compilerOptions: {dev: isDev},\n // Snowpack wraps JS-imported CSS in a JS wrapper, so use\n // Svelte's own first-class `emitCss: false` here.\n // TODO: Remove once Snowpack adds first-class CSS import support in deps.\n emitCss: false,\n }),\n );\n }\n // Support importing sharable Svelte components.\n packageOptions.packageLookupFields.push('svelte');\n }\n\n if (\n pluginOptions.generate !== undefined ||\n pluginOptions.dev !== undefined ||\n pluginOptions.hydratable !== undefined ||\n pluginOptions.css !== undefined ||\n pluginOptions.preserveComments !== undefined ||\n pluginOptions.preserveWhitespace !== undefined ||\n pluginOptions.sveltePath !== undefined\n ) {\n throw new Error(\n `[plugin-svelte] Svelte.compile options moved to new config value: {compilerOptions: {...}}`,\n );\n }\n\n if (pluginOptions.compileOptions !== undefined) {\n throw new Error(\n `[plugin-svelte] Could not recognize \"compileOptions\". Did you mean \"compilerOptions\"?`,\n );\n }\n if (pluginOptions.input && !Array.isArray(pluginOptions.input)) {\n throw new Error(`[plugin-svelte] Option \"input\" must be an array (e.g. ['.svelte', '.svx'])`);\n }\n if (pluginOptions.input && pluginOptions.input.length === 0) {\n throw new Error(`[plugin-svelte] Option \"input\" must specify at least one filetype`);\n }\n let configFilePath = path.resolve(\n snowpackConfig.root || process.cwd(),\n pluginOptions.configFilePath || 'svelte.config.js',\n );\n let compilerOptions = pluginOptions.compilerOptions;\n let preprocessOptions = pluginOptions.preprocess;\n let resolveInputOption = pluginOptions.input;\n const hmrOptions = pluginOptions.hmrOptions;\n\n if (fs.existsSync(configFilePath)) {\n const configFileConfig = require(configFilePath);\n preprocessOptions =\n preprocessOptions !== undefined ? preprocessOptions : configFileConfig.preprocess;\n compilerOptions =\n compilerOptions !== undefined ? compilerOptions : configFileConfig.compilerOptions;\n resolveInputOption =\n resolveInputOption !== undefined ? resolveInputOption : configFileConfig.extensions;\n } else {\n //user svelte.config.js is optional and should not error if not configured\n if (pluginOptions.configFilePath) {\n throw new Error(`[plugin-svelte] failed to find Svelte config file: \"${configFilePath}\"`);\n }\n }\n\n if (preprocessOptions === undefined) {\n preprocessOptions = require('svelte-preprocess')();\n }\n\n function addImportsToMap(filePath, imp) {\n const importedBy = importedByMap.get(imp);\n if (importedBy) {\n importedBy.add(filePath);\n } else {\n importedByMap.set(imp, new Set([filePath]));\n }\n }\n\n let makeHot = (...args) => {\n makeHot = createMakeHot({\n walk: svelte.walk,\n absoluteImports: false,\n versionNonAbsoluteImports: packageOptions.source === 'remote',\n });\n return makeHot(...args);\n };\n\n return {\n name: '@snowpack/plugin-svelte',\n resolve: {\n input: resolveInputOption || ['.svelte'],\n output: ['.js', '.css'],\n },\n knownEntrypoints: [\n 'svelte/internal',\n 'svelte-hmr/runtime/hot-api-esm.js',\n 'svelte-hmr/runtime/proxy-adapter-dom.js',\n ],\n\n /**\n * If any files imported the given file path, mark them as changed.\n * @private\n */\n _markImportersAsChanged(filePath) {\n if (importedByMap.has(filePath)) {\n const importedBy = importedByMap.get(filePath);\n importedByMap.delete(filePath);\n for (const importerFilePath of importedBy) {\n this.markChanged(importerFilePath);\n }\n }\n },\n\n /**\n * When a file changes, also mark it's importers as changed.\n * svelte.preprocess returns a list of preprocess deps - https://svelte.dev/docs#svelte_preprocess\n */\n onChange({filePath}) {\n this._markImportersAsChanged(filePath);\n },\n\n async load({filePath, isHmrEnabled, isSSR, isPackage}) {\n let dependencies = [];\n let codeToCompile = await fs.promises.readFile(filePath, 'utf-8');\n // PRE-PROCESS\n if (preprocessOptions !== false) {\n ({code: codeToCompile, dependencies} = await svelte.preprocess(\n codeToCompile,\n preprocessOptions,\n {\n filename: filePath,\n },\n ));\n }\n\n // in dev mode, track preprocess dependencies\n if (isDev && dependencies && dependencies.length) {\n dependencies.forEach((imp) => addImportsToMap(filePath, imp));\n }\n\n const finalCompileOptions = {\n generate: isSSR ? 'ssr' : 'dom',\n css: isPackage ? true : false,\n ...compilerOptions, // Note(drew) should take precedence over generate above\n dev: isHmrEnabled || isDev,\n outputFilename: filePath,\n filename: filePath,\n };\n\n const compiled = svelte.compile(codeToCompile, finalCompileOptions);\n const {js, css} = compiled;\n\n if (useSourceMaps) {\n js.code = inlineSourcemap(js.code, js.map);\n }\n\n const output = {\n '.js': {\n code: js.code,\n map: useSourceMaps ? js.map : undefined,\n },\n };\n\n if (isHmrEnabled && !isSSR) {\n output['.js'].code = makeHot({\n id: filePath,\n compiledCode: js.code,\n hotOptions: {\n preserveLocalState: true,\n injectCss: true,\n ...hmrOptions,\n absoluteImports: false,\n noOverlay: true,\n },\n compiled,\n originalCode: codeToCompile,\n compileOptions: finalCompileOptions,\n });\n }\n\n if (!finalCompileOptions.css && css && css.code) {\n output['.css'] = {\n code: css.code,\n map: useSourceMaps ? css.map : undefined,\n };\n }\n return output;\n },\n };\n};\n" }, { "path": "plugins/plugin-svelte/test/Button.svelte", "content": "\n\n\n" }, { "path": "plugins/plugin-svelte/test/custom-config.js", "content": "module.exports = {\n preprocess: {\n __test: 'custom-config.js::preprocess',\n },\n compilerOptions: {\n __test: 'custom-config.js',\n },\n};\n" }, { "path": "plugins/plugin-svelte/test/plugin.test.js", "content": "const path = require('path');\n\nconst mockCompiler = jest.fn().mockImplementation((code) => ({js: {code}}));\nconst mockPreprocessor = jest.fn().mockImplementation((code) => code);\nconst mockPreprocessorWithDeps = jest.fn().mockImplementation((code) => ({\n code,\n dependencies: ['path/to/file.stylus', 'path/to/file2.stylus'],\n}));\n\nlet DEFAULT_CONFIG;\nconst mockComponent = path.join(__dirname, 'Button.svelte');\n\nbeforeEach(() => {\n DEFAULT_CONFIG = {\n buildOptions: {sourceMaps: false},\n packageOptions: {\n source: 'local',\n rollup: {plugins: []},\n packageLookupFields: [],\n },\n };\n});\n\nafterEach(() => {\n mockCompiler.mockClear();\n mockPreprocessor.mockClear();\n mockPreprocessorWithDeps.mockClear();\n});\n\ndescribe('@snowpack/plugin-svelte (mocked)', () => {\n jest.mock('svelte/compiler', () => ({compile: mockCompiler, preprocess: mockPreprocessor})); // important: mock before import\n const plugin = require('../plugin');\n\n // TODO: safe to remove?\n afterEach(() => {\n mockCompiler.mockClear();\n mockPreprocessor.mockClear();\n });\n\n afterAll(() => jest.resetModules());\n\n it('logs error if config options set but finds no file', async () => {\n expect(() => {\n plugin(DEFAULT_CONFIG, {\n configFilePath: './plugins/plugin-svelte/this-file-does-not-exist.js',\n });\n }).toThrow(/failed to find Svelte config file/);\n });\n\n it('logs error if compileOptions is used instead of compilerOptions', async () => {\n expect(() => {\n plugin(DEFAULT_CONFIG, {\n compileOptions: {__test: 'ignore'},\n });\n }).toThrow(\n `[plugin-svelte] Could not recognize \"compileOptions\". Did you mean \"compilerOptions\"?`,\n );\n });\n\n it('logs error if old style config format is used', async () => {\n const badOptionCheck = /Svelte\\.compile options moved to new config value/;\n expect(() =>\n plugin(DEFAULT_CONFIG, {\n css: false,\n }),\n ).toThrow(badOptionCheck);\n expect(() =>\n plugin(DEFAULT_CONFIG, {\n generate: 'dom',\n }),\n ).toThrow(badOptionCheck);\n });\n\n it('logs error if resolve input is invalid', async () => {\n expect(() => {\n plugin(DEFAULT_CONFIG, {\n input: '.svelte',\n });\n }).toThrow(`[plugin-svelte] Option \"input\" must be an array (e.g. ['.svelte', '.svx'])`);\n expect(() => {\n plugin(DEFAULT_CONFIG, {\n input: [],\n });\n }).toThrow(`[plugin-svelte] Option \"input\" must specify at least one filetype`);\n });\n\n it('passes compilerOptions to compiler', async () => {\n const compilerOptions = {\n __test: 'compilerOptions',\n };\n const sveltePlugin = plugin(DEFAULT_CONFIG, {compilerOptions});\n await sveltePlugin.load({filePath: mockComponent});\n expect(mockCompiler.mock.calls[0][1]).toEqual({\n __test: 'compilerOptions',\n css: false,\n dev: true,\n filename: mockComponent,\n generate: 'dom',\n outputFilename: mockComponent,\n });\n });\n\n it('passes preprocess options to compiler', async () => {\n const preprocess = {__test: 'preprocess'};\n const sveltePlugin = plugin(DEFAULT_CONFIG, {preprocess});\n await sveltePlugin.load({filePath: mockComponent});\n expect(mockPreprocessor.mock.calls[0][1]).toEqual(preprocess);\n });\n\n // For our users we load from the current working directory, but in jest that doesn't make sense\n it.skip('load config from a default svelte config file', async () => {\n const sveltePlugin = plugin(DEFAULT_CONFIG, {});\n await sveltePlugin.load({filePath: mockComponent});\n expect(mockCompiler.mock.calls[0][1]).toEqual({__test: 'svelte.config.js'});\n expect(mockPreprocessor.mock.calls[0][1]).toEqual({__test: 'svelte.config.js::preprocess'});\n });\n\n it('load config from a custom svelte config file', async () => {\n const sveltePlugin = plugin(DEFAULT_CONFIG, {\n configFilePath: './plugins/plugin-svelte/test/custom-config.js',\n });\n await sveltePlugin.load({filePath: mockComponent});\n expect(mockCompiler.mock.calls[0][1]).toEqual({\n __test: 'custom-config.js',\n css: false,\n dev: true,\n filename: mockComponent,\n generate: 'dom',\n outputFilename: mockComponent,\n });\n expect(mockPreprocessor.mock.calls[0][1]).toEqual({__test: 'custom-config.js::preprocess'});\n });\n\n it('resolves custom file extensions', async () => {\n expect(\n plugin(DEFAULT_CONFIG, {\n input: ['.svelte', '.svx'],\n }).resolve.input,\n ).toMatchInlineSnapshot(`\n Array [\n \".svelte\",\n \".svx\",\n ]\n `);\n expect(\n plugin(DEFAULT_CONFIG, {\n input: ['.svx'],\n }).resolve.input,\n ).toMatchInlineSnapshot(`\n Array [\n \".svx\",\n ]\n `);\n });\n it('supports importing svelte components', async () => {\n const config = {...DEFAULT_CONFIG};\n plugin(config, {});\n expect(config.packageOptions.packageLookupFields).toEqual(['svelte']);\n config.packageOptions.packageLookupFields = ['module'];\n plugin(config, {});\n expect(config.packageOptions.packageLookupFields).toEqual(['module', 'svelte']);\n });\n});\n\ndescribe('@snowpack/plugin-svelte (preprocessor deps)', () => {\n let plugin;\n\n beforeAll(() => {\n jest.mock('svelte/compiler', () => ({\n compile: mockCompiler,\n preprocess: mockPreprocessorWithDeps,\n })); // important: mock before import\n plugin = require('../plugin');\n });\n\n afterAll(() => jest.resetModules());\n\n it('marks a file as changed when a preprocess dependency changes', async () => {\n const preprocess = {__test: 'preprocess'};\n const p = plugin(DEFAULT_CONFIG, {preprocess});\n p.markChanged = jest.fn();\n await p.load({filePath: mockComponent});\n p.onChange({filePath: 'path/to/file.stylus'});\n p.onChange({filePath: 'path/to/file2.stylus'});\n\n expect(p.markChanged).toHaveBeenCalledTimes(2);\n expect(p.markChanged.mock.calls[0][0]).toBe(mockComponent);\n expect(p.markChanged.mock.calls[1][0]).toBe(mockComponent);\n });\n});\n" }, { "path": "plugins/plugin-svelte/test/svelte.config.js", "content": "module.exports = {\n preprocess: {\n __test: 'svelte.config.js::preprocess',\n },\n compilerOptions: {\n __test: 'svelte.config.js',\n },\n};\n" }, { "path": "plugins/plugin-typescript/CHANGELOG.md", "content": "# @snowpack/plugin-typescript\n\n## 1.2.1\n\n### Patch Changes\n\n- f8f32551: [ci] yarn format\n- 6b105339: add esinstall missing import hint (#2299)\n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-typescript)._\n" }, { "path": "plugins/plugin-typescript/README.md", "content": "# @snowpack/plugin-typescript\n\nThis plugin adds TypeScript type checking to any Snowpack project.\n\nWhen developing or building your site with Snowpack, this plugin will run TypeScript's `tsc` CLI in your project and pipe the output through Snowpack. Works with all version of TypeScript, as long as TypeScript is installed separately in your project.\n\n## Usage\n\n```bash\nnpm i @snowpack/plugin-typescript typescript\n```\n\nThen add the plugin to your Snowpack config:\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: ['@snowpack/plugin-typescript'],\n};\n```\n\n## Plugin Options\n\n| Name | Type | Description |\n| :----- | :------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `tsc` | `string` | Optional custom tsc command. For example, you can use TypeScript compiler by specifying: `tsc: \"tsc\"`. |\n| `args` | `string` | Optional arguments to pass to the `tsc` CLI. For example, you can configure a custom project directory (with a custom `tsconfig.json` file) using `args: \"--project ./your/custom/path\"`. |\n\n## A Note on Yarn v2 (PnP)\n\nTypeScript does not yet support PnP natively. The workaround is to replace the loading of the TypeScript plugin in `snowpack.config.mjs` with a call to [pnpify](https://yarnpkg.com/advanced/pnpify).\n\n```js\n// See https://github.com/microsoft/TypeScript/issues/28289\n// More info: https://medium.com/swlh/getting-started-with-yarn-2-and-typescript-43321a3acdee\nplugins: [['@snowpack/plugin-typescript', {tsc: 'yarn pnpify tsc'}]];\n```\n" }, { "path": "plugins/plugin-typescript/package.json", "content": "{\n \"version\": \"1.2.1\",\n \"name\": \"@snowpack/plugin-typescript\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-typescript#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-typescript\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"peerDependencies\": {\n \"typescript\": \"*\"\n },\n \"dependencies\": {\n \"execa\": \"^5.1.1\",\n \"npm-run-path\": \"^4.0.1\"\n }\n}\n" }, { "path": "plugins/plugin-typescript/plugin.js", "content": "const execa = require('execa');\nconst npmRunPath = require('npm-run-path');\n\nfunction typescriptPlugin(snowpackConfig, {tsc, args} = {}) {\n return {\n name: '@snowpack/plugin-typescript',\n async run({isDev, log}) {\n const workerPromise = execa.command(\n `${tsc ? tsc : 'tsc'} ${args ? args : ''} --noEmit ${isDev ? '--watch' : ''}`,\n {\n env: npmRunPath.env(),\n extendEnv: true,\n windowsHide: false,\n cwd: snowpackConfig.root || process.cwd(),\n },\n );\n const {stdout, stderr} = workerPromise;\n function dataListener(chunk) {\n let stdOutput = chunk.toString();\n // In --watch mode, handle the \"clear\" character\n if (stdOutput.includes('\\u001bc') || stdOutput.includes('\\x1Bc')) {\n log('WORKER_RESET', {});\n stdOutput = stdOutput.replace(/\\x1Bc/, '').replace(/\\u001bc/, '');\n }\n log('WORKER_MSG', {msg: stdOutput});\n }\n stdout && stdout.on('data', dataListener);\n stderr && stderr.on('data', dataListener);\n return workerPromise.catch((err) => {\n if (/ENOENT/.test(err.message)) {\n log('WORKER_MSG', {\n msg: 'WARN: \"tsc\" run failed. Is typescript installed in your project?',\n });\n }\n throw err;\n });\n },\n };\n}\n\nmodule.exports = typescriptPlugin;\n" }, { "path": "plugins/plugin-typescript/test/plugin.test.js", "content": "const plugin = require('../plugin.js');\nconst {EventEmitter} = require('events');\n\njest.mock('execa');\nconst execa = require('execa');\n\ndescribe('plugin-typescript', () => {\n let execaResult, execaFn;\n\n beforeEach(() => {\n execa.command.mockClear();\n execaResult = {\n stderr: new EventEmitter(),\n stdout: new EventEmitter(),\n // Execa is weird, and returns a promise that also has other properties. Fake that here.\n catch: () => {\n return execaResult;\n },\n };\n execaFn = jest.fn().mockName('execa.command').mockReturnValue(execaResult);\n execa.command = execaFn;\n });\n\n test('returns the execa command promise', async () => {\n const p = plugin({});\n const result = await p.run({isDev: false, log: jest.fn});\n expect(result).toEqual(execaResult);\n });\n test('calls \"tsc\" correctly when isDev=false', async () => {\n const p = plugin({});\n await p.run({isDev: false, log: jest.fn});\n expect(execaFn.mock.calls[0][0]).toContain('--noEmit');\n expect(execaFn.mock.calls[0][0]).not.toContain('--watch');\n });\n test('calls \"tsc --watch\" when isDev=true', async () => {\n const p = plugin({});\n await p.run({isDev: true, log: jest.fn});\n expect(execaFn.mock.calls[0][0]).toContain('--noEmit');\n expect(execaFn.mock.calls[0][0]).toContain('--watch');\n });\n test('calls \"tsc\" correctly with args', async () => {\n const p = plugin({}, {args: '--foo bar'});\n await p.run({isDev: false, log: jest.fn});\n expect(execaFn.mock.calls[0][0]).toContain('--foo bar');\n });\n test('calls custom tsc command correctly with args', async () => {\n const p = plugin({}, {tsc: 'echo', args: 'Echo message'});\n await p.run({isDev: false, log: jest.fn});\n expect(execaFn.mock.calls[0][0]).toContain('Echo message');\n });\n test('handles tsc output', async () => {\n const logFn = jest.fn();\n const p = plugin({});\n await p.run({isDev: false, log: logFn});\n execaResult.stdout.emit('data', Buffer.from('STDOUT_TEST_MESSAGE'));\n execaResult.stderr.emit('data', Buffer.from('STDERR_TEST_MESSAGE'));\n expect(logFn.mock.calls).toEqual([\n ['WORKER_MSG', {msg: 'STDOUT_TEST_MESSAGE'}],\n ['WORKER_MSG', {msg: 'STDERR_TEST_MESSAGE'}],\n ]);\n });\n test('handles tsc clear character messages', async () => {\n const logFn = jest.fn();\n const p = plugin({});\n await p.run({isDev: false, log: logFn});\n execaResult.stderr.emit('data', Buffer.from('\\u001bcTEST_CLEAR_MESSAGE'));\n execaResult.stderr.emit('data', Buffer.from('\\x1BcTEST_CLEAR_MESSAGE'));\n expect(logFn.mock.calls).toEqual([\n ['WORKER_RESET', {}],\n ['WORKER_MSG', {msg: 'TEST_CLEAR_MESSAGE'}],\n ['WORKER_RESET', {}],\n ['WORKER_MSG', {msg: 'TEST_CLEAR_MESSAGE'}],\n ]);\n });\n});\n" }, { "path": "plugins/plugin-vue/CHANGELOG.md", "content": "# @snowpack/plugin-vue\n\n## 2.6.2\n\n### Patch Changes\n\n- 7cf0e10d: [#3427] Add scopeId to exported components (#3481) \n\n## 2.6.1\n\n### Patch Changes\n\n- 52a09b7d: Set the `preventAssignment` option in the vue plugin (#3422) \n\n## 2.6.0\n\n### Minor Changes\n\n- 12410984: Enable proper tree-shaking of Vue's ESM bundler (#3382) \n\n### Patch Changes\n\n- 1823b35f: Chore: update docs to refer to snowpack.config.mjs (#3341) \n\n## 2.5.0\n\n### Minor Changes\n\n- 4403595e: Sourcemaps (#3271) \n\n## 2.4.0\n\n### Minor Changes\n\n- 5d6ee1f3: Enable CSS Module support in Vue SSR (#3072) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-vue)._\n" }, { "path": "plugins/plugin-vue/README.md", "content": "# @snowpack/plugin-vue\n\nUse the [Vue 3 compiler](https://www.npmjs.com/package/@vue/compiler-sfc) to build your `.vue` SFC files from source.\n\n```\nnpm install --save-dev @snowpack/plugin-vue\n```\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n '@snowpack/plugin-vue',\n {\n /* see optional “Plugin Options” below */\n },\n ],\n};\n```\n\n## Plugin Options\n\nYou may customize Vue's bundler behavior using the following plugin options.\n\n| Name | Type | Description |\n| :------------- | :-------: | :--------------------------------------------------------------------------------------------------- |\n| `optionsApi` | `boolean` | Enable/disable [Options API](https://v3.vuejs.org/api/options-api.html) support. Defaults to `true`. |\n| `prodDevtools` | `boolean` | Enable/disable devtools support in production. Defaults to `false`. |\n" }, { "path": "plugins/plugin-vue/package.json", "content": "{\n \"name\": \"@snowpack/plugin-vue\",\n \"version\": \"2.6.2\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-vue#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-vue\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@rollup/plugin-replace\": \"^2.4.2\",\n \"@vue/compiler-sfc\": \"^3.0.10\",\n \"hash-sum\": \"^2.0.0\"\n },\n \"devDependencies\": {\n \"vue\": \"*\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "plugins/plugin-vue/plugin-tsx-jsx.js", "content": "const fs = require('fs');\nconst scriptCompilers = require('./src/script-compilers');\n\nmodule.exports = function plugin(snowpackConfig, pluginOptions) {\n return {\n name: '@snowpack/plugin-vue-tsx-jsx',\n resolve: {\n input: ['.tsx', '.jsx'],\n output: ['.js'],\n },\n async load({filePath, fileExt}) {\n const content = fs.readFileSync(filePath, 'utf-8');\n const lang = fileExt.slice(fileExt.lastIndexOf('.') + 1);\n const result = scriptCompilers.esbuildCompile(content, lang);\n return result;\n },\n };\n};\n" }, { "path": "plugins/plugin-vue/plugin.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst hashsum = require('hash-sum');\nconst compiler = require('@vue/compiler-sfc');\nconst scriptCompilers = require('./src/script-compilers');\nconst replace = require('@rollup/plugin-replace');\n\nconst inlineSourcemap = (code, map) =>\n code +\n '\\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +\n new Buffer(map.toString()).toString('base64');\n\n/** Friendly error display */\nfunction displayError({contents, filePath, error}) {\n const pad = (number, pad) => `${Array.from(new Array(pad + 1)).join(' ')}${number}`;\n\n let output = [`${error.toString()}`, `[${filePath}]`];\n if (error.loc) {\n output[1] += ` Line ${error.loc.start.line}, Column ${error.loc.start.column}`;\n const lineNo = (number) =>\n ' ' +\n pad(number, (error.loc.end.line + 1).toString().length - number.toString().length) +\n ' | ';\n output.push('');\n const allLines = ['', ...contents.split('\\n')];\n let currentLine = error.loc.start.line;\n output.push(lineNo(currentLine - 1) + allLines[currentLine - 1]);\n while (currentLine <= error.loc.end.line) {\n output.push(lineNo(currentLine) + allLines[currentLine]);\n currentLine++;\n }\n output.push(\n Array.from(new Array(error.loc.start.column + lineNo(currentLine - 1).length)).join(' ') +\n '^',\n );\n output.push(lineNo(currentLine) + allLines[currentLine]);\n }\n return output.join('\\n');\n}\n\nmodule.exports = function plugin(snowpackConfig, pluginOptions = {}) {\n // Enable proper tree-shaking for Vue's ESM bundler\n // See http://link.vuejs.org/feature-flags\n const packageOptions = snowpackConfig.packageOptions || snowpackConfig.installOptions;\n if (packageOptions && packageOptions.source === 'local') {\n packageOptions.rollup = packageOptions.rollup || {};\n packageOptions.rollup.plugins = packageOptions.rollup.plugins || [];\n const {optionsApi = true, prodDevtools = false} = pluginOptions;\n packageOptions.rollup.plugins.push(\n replace({\n preventAssignment: false,\n values: {\n __VUE_OPTIONS_API__: JSON.stringify(optionsApi),\n __VUE_PROD_DEVTOOLS__: JSON.stringify(prodDevtools),\n },\n }),\n );\n }\n return {\n name: '@snowpack/plugin-vue',\n resolve: {\n input: ['.vue'],\n output: ['.js', '.css'],\n },\n async load({filePath, isSSR}) {\n const {sourcemap, sourceMaps} = snowpackConfig.buildOptions;\n\n const id = hashsum(filePath);\n const contents = fs.readFileSync(filePath, 'utf-8');\n const {descriptor, errors} = compiler.parse(contents, {filename: filePath});\n\n // display errors\n if (errors && errors.length > 0) {\n throw new Error(displayError({error: errors[0], contents, filePath}));\n }\n\n const output = {\n '.js': {code: '', map: ''},\n '.css': {code: '', map: ''},\n };\n\n if (descriptor.script) {\n const scriptLang = descriptor.script.lang;\n let scriptContent = descriptor.script.content;\n if (['jsx', 'ts', 'tsx'].includes(scriptLang)) {\n scriptContent = scriptCompilers.esbuildCompile(scriptContent, scriptLang);\n }\n if (['js', 'ts'].includes(scriptLang) || !scriptLang) {\n scriptContent = scriptContent.replace(`export default`, 'const defaultExport =');\n }\n output['.js'].code += scriptContent;\n } else {\n output['.js'].code += `const defaultExport = {};\\n`;\n }\n\n let hasCssModules = false;\n const cssModules = {};\n\n await Promise.all(\n descriptor.styles.map(async (stylePart) => {\n // note: compileStyleAsync is required for SSR + CSS Modules\n const css = await compiler.compileStyleAsync({\n filename: path.relative(snowpackConfig.root || process.cwd(), filePath),\n source: stylePart.content,\n id: `data-v-${id}`,\n scoped: stylePart.scoped != null,\n modules: stylePart.module != null,\n ssr: isSSR,\n preprocessLang: stylePart.lang,\n // preprocessCustomRequire: (id: string) => require(resolve(root, id))\n // TODO load postcss config if present\n });\n\n // gather CSS Module names\n if (stylePart.module) {\n hasCssModules = true;\n for (const [k, v] of Object.entries(css.modules)) {\n if (cssModules[k]) console.warn(`CSS Module name reused: ${k}`);\n cssModules[k] = v;\n }\n }\n\n if (css.errors && css.errors.length > 0) {\n console.error(JSON.stringify(css.errors));\n }\n output['.css'].code += css.code;\n if ((sourcemap || sourceMaps) && css.map) output['.css'].map += JSON.stringify(css.map);\n }),\n );\n\n if (descriptor.template) {\n const scoped = descriptor.styles.some((s) => s.scoped);\n\n const js = compiler.compileTemplate({\n id,\n filename: path.relative(snowpackConfig.root || process.cwd(), filePath),\n source: descriptor.template.content,\n ssr: isSSR,\n ssrCssVars: [],\n preprocessLang: descriptor.template.lang,\n compilerOptions: {\n scopeId: scoped ? `data-v-${id}` : null,\n },\n });\n if (js.errors && js.errors.length > 0) {\n console.error(JSON.stringify(js.errors));\n }\n\n const renderFn = isSSR ? `ssrRender` : `render`;\n\n if (output['.js'].code) output['.js'].code += '\\n';\n output['.js'].code += `${js.code.replace(/;?$/, ';')}`; // add trailing semicolon if missing (helps with some SSR cases)\n output['.js'].code += `\\n\\ndefaultExport.${renderFn} = ${renderFn};`;\n\n if (scoped) {\n output['.js'].code += `\\n\\ndefaultExport.__scopeId = \"data-v-${id}\";`;\n }\n\n // inject CSS Module styles, if needed\n if (hasCssModules) {\n // Note: this injection code is inspired by the official vue-loader for webpack and plays nicely with Vue.\n // But adjustments were needed to work with Snowpack.\n // See https://github.com/vuejs/vue-loader/blob/master/lib/codegen/styleInjection.js#L51\n const styleInjectionCode = ` const cssModules = ${JSON.stringify(cssModules)};\n Object.defineProperty(_ctx, '$style', {\n configurable: true,\n get: function() {\n return cssModules;\n }\n })\\n`;\n output['.js'].code = output['.js'].code.replace(\n new RegExp(`(function ${renderFn}\\\\([^\\n]+)`),\n `$1\\n${styleInjectionCode}`,\n );\n }\n output['.js'].code += `\\n\\nexport default defaultExport;`;\n\n if ((sourcemap || sourceMaps) && js.map) {\n output['.js'].code = inlineSourcemap(output['.js'].code, JSON.stringify(js.map));\n output['.js'].map += JSON.stringify(js.map);\n }\n }\n\n // clean up\n if (!output['.js'].code) delete output['.js'];\n if (!output['.css'].code) delete output['.css'];\n\n return output;\n },\n };\n};\n" }, { "path": "plugins/plugin-vue/src/script-compilers.js", "content": "/*\n\nThis license applies to parts of this file originating from the\nhttps://github.com/vitejs/vite repository:\n\nMIT License\n\nCopyright (c) 2019-present, Yuxi (Evan) You\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n*/\n\nconst esbuild = require('esbuild');\n\nconst codeSnippetH = `import { Fragment } from 'vue';`;\n\n// https://github.com/vitejs/vite/blob/master/src/client/vueJsxCompat.ts\nconst codeSnippetVueJsxCompat = `import {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}`;\n\n/**\n * @param {string} content\n * @param {'jsx' | 'ts' | 'tsx'} lang\n */\nconst esbuildCompile = (content, lang) => {\n let result = '';\n if (['jsx', 'tsx'].includes(lang)) {\n result += `${codeSnippetH}\\n`;\n result += `${codeSnippetVueJsxCompat}\\n`;\n }\n const {code} = esbuild.transformSync(content, {\n loader: lang,\n jsxFactory: 'jsx',\n jsxFragment: 'Fragment',\n });\n result += `\\n${code.trim()}\\n`;\n return result.trim();\n};\n\nmodule.exports = {\n esbuildCompile,\n};\n" }, { "path": "plugins/plugin-vue/test/__snapshots__/plugin-tsx-jsx.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`plugin with jsx 1`] = `\n\"import { Fragment } from 'vue';\nimport {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}\n\nimport {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"JsxContent\\\\\",\n setup() {\n return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\\\\"h1\\\\\", null, \\\\\"JsxContent\\\\\"));\n }\n});\"\n`;\n\nexports[`plugin with tsx 1`] = `\n\"import { Fragment } from 'vue';\nimport {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}\n\nimport {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"TsxContent\\\\\",\n setup() {\n const name = \\\\\"TsxContent\\\\\";\n return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\\\\"h1\\\\\", null, \\\\\"TsxContent\\\\\"));\n }\n});\"\n`;\n" }, { "path": "plugins/plugin-vue/test/__snapshots__/plugin-vue-ts-tsx-jsx.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`plugin vue with jsx 1`] = `\nObject {\n \".js\": Object {\n \"code\": \"import { Fragment } from 'vue';\nimport {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}\n\nimport {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"VueContentJsx\\\\\",\n setup() {\n return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\\\\"h1\\\\\", null, \\\\\"VueContentJsx\\\\\"));\n }\n});\",\n \"map\": \"\",\n },\n}\n`;\n\nexports[`plugin vue with ts 1`] = `\nObject {\n \".js\": Object {\n \"code\": \"import {defineComponent} from \\\\\"vue\\\\\";\nconst defaultExport = defineComponent({\n name: \\\\\"VueContentTs\\\\\",\n setup() {\n const name = \\\\\"VueContentTs\\\\\";\n }\n});\nimport { openBlock as _openBlock, createBlock as _createBlock } from \\\\\"vue\\\\\"\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\\\\\"h1\\\\\", null, \\\\\"Vue Content Ts\\\\\"))\n};\n\ndefaultExport.render = render;\n\nexport default defaultExport;\",\n \"map\": \"\",\n },\n}\n`;\n\nexports[`plugin vue with tsx 1`] = `\nObject {\n \".js\": Object {\n \"code\": \"import { Fragment } from 'vue';\nimport {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}\n\nimport {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"VueContentTsx\\\\\",\n setup() {\n const name = \\\\\"VueContentTsx\\\\\";\n return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\\\\"h1\\\\\", null, \\\\\"VueContentTsx\\\\\"));\n }\n});\",\n \"map\": \"\",\n },\n}\n`;\n" }, { "path": "plugins/plugin-vue/test/__snapshots__/plugin.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`plugin base 1`] = `\nObject {\n \".css\": Object {\n \"code\": \"\n.App {\n text-align: center;\n}\n.App-header {\n background-color: #f9f6f6;\n color: #32485f;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n}\n.App-link {\n color: #00c185;\n}\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n margin-bottom: 1rem;\n animation: App-logo-spin infinite 1.6s ease-in-out alternate;\n}\n@keyframes App-logo-spin {\nfrom {\n transform: scale(1);\n}\nto {\n transform: scale(1.06);\n}\n}\n\",\n \"map\": \"\",\n },\n \".js\": Object {\n \"code\": \"\nconst defaultExport = {\n data() {\n return {\n message: \\\\\"Learn Vue\\\\\"\n };\n }\n};\n\nimport { createVNode as _createVNode, createTextVNode as _createTextVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from \\\\\"vue\\\\\"\n\nconst _hoisted_1 = { class: \\\\\"App\\\\\" }\nconst _hoisted_2 = { class: \\\\\"App-header\\\\\" }\nconst _hoisted_3 = /*#__PURE__*/_createVNode(\\\\\"img\\\\\", {\n src: \\\\\"/logo.svg\\\\\",\n class: \\\\\"App-logo\\\\\",\n alt: \\\\\"logo\\\\\"\n}, null, -1 /* HOISTED */)\nconst _hoisted_4 = /*#__PURE__*/_createVNode(\\\\\"p\\\\\", null, [\n /*#__PURE__*/_createTextVNode(\\\\\" Edit \\\\\"),\n /*#__PURE__*/_createVNode(\\\\\"code\\\\\", null, \\\\\"src/App.vue\\\\\"),\n /*#__PURE__*/_createTextVNode(\\\\\" and save to reload. \\\\\")\n], -1 /* HOISTED */)\nconst _hoisted_5 = {\n class: \\\\\"App-link\\\\\",\n href: \\\\\"https://vuejs.org\\\\\",\n target: \\\\\"_blank\\\\\",\n rel: \\\\\"noopener noreferrer\\\\\"\n}\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\\\\\"div\\\\\", _hoisted_1, [\n _createVNode(\\\\\"header\\\\\", _hoisted_2, [\n _hoisted_3,\n _hoisted_4,\n _createVNode(\\\\\"a\\\\\", _hoisted_5, _toDisplayString(_ctx.message), 1 /* TEXT */)\n ])\n ]))\n};\n\ndefaultExport.render = render;\n\nexport default defaultExport;\",\n \"map\": \"\",\n },\n}\n`;\n\nexports[`plugin base only tpl 1`] = `\nObject {\n \".js\": Object {\n \"code\": \"const defaultExport = {};\n\nimport { openBlock as _openBlock, createBlock as _createBlock } from \\\\\"vue\\\\\"\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\\\\\"h1\\\\\", null, \\\\\"Vue Content Only Tpl\\\\\"))\n};\n\ndefaultExport.render = render;\n\nexport default defaultExport;\",\n \"map\": \"\",\n },\n}\n`;\n\nexports[`plugin base style scoped 1`] = `\nObject {\n \".css\": Object {\n \"code\": \"\nh1[data-v-XXXXXXXX] {\n color: red;\n}\n\",\n \"map\": \"\",\n },\n \".js\": Object {\n \"code\": \"\nconst defaultExport = {};\n\nimport { openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\\\\"vue\\\\\"\nconst _withId = /*#__PURE__*/_withScopeId(\\\\\"data-v-XXXXXXXX\\\\\")\n\nexport const render = /*#__PURE__*/_withId((_ctx, _cache) => {\n return (_openBlock(), _createBlock(\\\\\"h1\\\\\", null, \\\\\"Vue Content Style Scoped\\\\\"))\n});\n\ndefaultExport.render = render;\n\ndefaultExport.__scopeId = \\\\\"data-v-XXXXXXXX\\\\\";\n\nexport default defaultExport;\",\n \"map\": \"\",\n },\n}\n`;\n\nexports[`plugin base with sourceMap 1`] = `\nObject {\n \".css\": Object {\n \"code\": \"\n.App {\n text-align: center;\n}\n.App-header {\n background-color: #f9f6f6;\n color: #32485f;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n}\n.App-link {\n color: #00c185;\n}\n.App-logo {\n height: 40vmin;\n pointer-events: none;\n margin-bottom: 1rem;\n animation: App-logo-spin infinite 1.6s ease-in-out alternate;\n}\n@keyframes App-logo-spin {\nfrom {\n transform: scale(1);\n}\nto {\n transform: scale(1.06);\n}\n}\n\",\n \"map\": \"\",\n },\n \".js\": Object {\n \"code\": \"\nconst defaultExport = {\n data() {\n return {\n message: \\\\\"Learn Vue\\\\\"\n };\n }\n};\n\nimport { createVNode as _createVNode, createTextVNode as _createTextVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from \\\\\"vue\\\\\"\n\nconst _hoisted_1 = { class: \\\\\"App\\\\\" }\nconst _hoisted_2 = { class: \\\\\"App-header\\\\\" }\nconst _hoisted_3 = /*#__PURE__*/_createVNode(\\\\\"img\\\\\", {\n src: \\\\\"/logo.svg\\\\\",\n class: \\\\\"App-logo\\\\\",\n alt: \\\\\"logo\\\\\"\n}, null, -1 /* HOISTED */)\nconst _hoisted_4 = /*#__PURE__*/_createVNode(\\\\\"p\\\\\", null, [\n /*#__PURE__*/_createTextVNode(\\\\\" Edit \\\\\"),\n /*#__PURE__*/_createVNode(\\\\\"code\\\\\", null, \\\\\"src/App.vue\\\\\"),\n /*#__PURE__*/_createTextVNode(\\\\\" and save to reload. \\\\\")\n], -1 /* HOISTED */)\nconst _hoisted_5 = {\n class: \\\\\"App-link\\\\\",\n href: \\\\\"https://vuejs.org\\\\\",\n target: \\\\\"_blank\\\\\",\n rel: \\\\\"noopener noreferrer\\\\\"\n}\n\nexport function render(_ctx, _cache) {\n return (_openBlock(), _createBlock(\\\\\"div\\\\\", _hoisted_1, [\n _createVNode(\\\\\"header\\\\\", _hoisted_2, [\n _hoisted_3,\n _hoisted_4,\n _createVNode(\\\\\"a\\\\\", _hoisted_5, _toDisplayString(_ctx.message), 1 /* TEXT */)\n ])\n ]))\n};\n\ndefaultExport.render = render;\n\nexport default defaultExport;\",\n \"map\": \"\",\n },\n}\n`;\n" }, { "path": "plugins/plugin-vue/test/__snapshots__/script-compilers.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`esbuildCompile jsx 1`] = `\n\"import { Fragment } from 'vue';\nimport {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}\n\nimport {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"JsxContent\\\\\",\n setup() {\n return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\\\\"h1\\\\\", null, \\\\\"JsxContent\\\\\"));\n }\n});\"\n`;\n\nexports[`esbuildCompile ts 1`] = `\n\"import {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"TsContent\\\\\",\n setup() {\n const name = \\\\\"TsContent\\\\\";\n }\n});\"\n`;\n\nexports[`esbuildCompile tsx 1`] = `\n\"import { Fragment } from 'vue';\nimport {createVNode, isVNode} from 'vue';\nconst slice = Array.prototype.slice;\nexport function jsx(tag, props = null, children = null) {\n if (arguments.length > 3 || isVNode(children)) {\n children = slice.call(arguments, 2);\n }\n return createVNode(tag, props, children);\n}\n\nimport {defineComponent} from \\\\\"vue\\\\\";\nexport default defineComponent({\n name: \\\\\"TsxContent\\\\\",\n setup() {\n const name = \\\\\"TsxContent\\\\\";\n return () => /* @__PURE__ */ jsx(Fragment, null, /* @__PURE__ */ jsx(\\\\\"h1\\\\\", null, \\\\\"TsxContent\\\\\"));\n }\n});\"\n`;\n" }, { "path": "plugins/plugin-vue/test/plugin-tsx-jsx.test.js", "content": "const path = require('path');\nconst pluginTsxJsx = require('../plugin-tsx-jsx.js');\n\ntest('plugin with tsx', async () => {\n const pluginInstance = pluginTsxJsx({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/TsxContent.tsx');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n fileExt: '.tsx',\n });\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('plugin with jsx', async () => {\n const pluginInstance = pluginTsxJsx({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/JsxContent.jsx');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n fileExt: '.jsx',\n });\n expect(resultContent).toMatchSnapshot();\n});\n" }, { "path": "plugins/plugin-vue/test/plugin-vue-ts-tsx-jsx.test.js", "content": "const path = require('path');\nconst plugin = require('../plugin');\n\ntest('plugin vue with ts', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContentTs.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('plugin vue with tsx', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContentTsx.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('plugin vue with jsx', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContentJsx.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n expect(resultContent).toMatchSnapshot();\n});\n" }, { "path": "plugins/plugin-vue/test/plugin.test.js", "content": "const path = require('path');\nconst plugin = require('../plugin');\n\ntest('plugin base', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: false,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContent.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('plugin base with sourceMap', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContent.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('plugin base only tpl', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContentOnlyTpl.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('plugin base style scoped', async () => {\n const pluginInstance = plugin({\n buildOptions: {\n sourceMap: true,\n },\n });\n const pluginLoad = pluginInstance.load;\n const codeFilePath = path.resolve(__dirname, './stubs/VueContentStyleScoped.vue');\n const resultContent = await pluginLoad({\n filePath: codeFilePath,\n });\n ['.css', '.js'].forEach((key) => {\n const code = resultContent[key].code;\n resultContent[key].code = code.replace(/data-v-[a-z0-9]+/g, 'data-v-XXXXXXXX');\n });\n expect(resultContent).toMatchSnapshot();\n});\n" }, { "path": "plugins/plugin-vue/test/script-compilers.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst scriptCompilers = require('../src/script-compilers');\n\ntest('esbuildCompile ts', () => {\n const {esbuildCompile} = scriptCompilers;\n const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/TsContent.ts')).toString();\n const resultContent = esbuildCompile(codeContent, 'ts');\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('esbuildCompile tsx', () => {\n const {esbuildCompile} = scriptCompilers;\n const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/TsxContent.tsx')).toString();\n const resultContent = esbuildCompile(codeContent, 'tsx');\n expect(resultContent).toMatchSnapshot();\n});\n\ntest('esbuildCompile jsx', () => {\n const {esbuildCompile} = scriptCompilers;\n const codeContent = fs.readFileSync(path.resolve(__dirname, './stubs/JsxContent.jsx')).toString();\n const resultContent = esbuildCompile(codeContent, 'jsx');\n expect(resultContent).toMatchSnapshot();\n});\n" }, { "path": "plugins/plugin-vue/test/stubs/JsxContent.jsx", "content": "import {defineComponent} from 'vue';\n\nexport default defineComponent({\n name: 'JsxContent',\n setup() {\n return () => (\n <>\n

JsxContent

\n \n );\n },\n});\n" }, { "path": "plugins/plugin-vue/test/stubs/TsContent.ts", "content": "import {defineComponent} from 'vue';\n\nexport default defineComponent({\n name: 'TsContent',\n setup() {\n const name: string = 'TsContent';\n },\n});\n" }, { "path": "plugins/plugin-vue/test/stubs/TsxContent.tsx", "content": "import {defineComponent} from 'vue';\n\nexport default defineComponent({\n name: 'TsxContent',\n setup() {\n const name: string = 'TsxContent';\n return () => (\n <>\n

TsxContent

\n \n );\n },\n});\n" }, { "path": "plugins/plugin-vue/test/stubs/VueContent.vue", "content": "\n\n\n\n\n" }, { "path": "plugins/plugin-vue/test/stubs/VueContentJsx.vue", "content": "" }, { "path": "plugins/plugin-vue/test/stubs/VueContentOnlyTpl.vue", "content": "" }, { "path": "plugins/plugin-vue/test/stubs/VueContentStyleScoped.vue", "content": "\n\n\n\n" }, { "path": "plugins/plugin-vue/test/stubs/VueContentTs.vue", "content": "\n\n" }, { "path": "plugins/plugin-vue/test/stubs/VueContentTsx.vue", "content": "" }, { "path": "plugins/plugin-vue/test/stubs/tsconfig.json", "content": "{\n \"compilerOptions\": {\n \"jsx\": \"preserve\",\n \"jsxFactory\": \"h\",\n \"jsxFragmentFactory\": \"Fragment\"\n }\n}\n" }, { "path": "plugins/plugin-webpack/.gitignore", "content": "test/stubs/*_ignore/\n" }, { "path": "plugins/plugin-webpack/CHANGELOG.md", "content": "# @snowpack/plugin-webpack\n\n## 3.0.0\n\n### Major Changes\n\n- c57b57a0: upgraded plugin-webpack to webpack 5 (#3154) \n\n### Patch Changes\n\n- e93e5379: [ci] yarn format \n- 75c99b2f: use Webpack's output.path for emitted HTML (#3255) \n- 1823b35f: Chore: update docs to refer to snowpack.config.mjs (#3341) \n- 19b236df: [ci] yarn format \n- e9e8fb70: avoid conflicting JS entries when parsing HTML for Webpack (#3247) \n- e1bb3b89: [ci] yarn format \n- 9712f979: fix Webpack error formatting (#3256) \n- b0a1f206: Remove TSX components from app-template-vue-typescript (#3236) \n- 9091b598: [ci] yarn format \n- 9eb50368: update deps (#2928)\n- 56c5a231: fix typo in changelog\n\n## 2.3.1\n\n## Patch Changes\n\n- f154a879: Refactor plugin-webpack tests (#2517) \n- 41c29f25: [ci] yarn format\n- 83616faa: Keep original HTML attributes on script tags (#2498) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/plugin-webpack)._\n" }, { "path": "plugins/plugin-webpack/README.md", "content": "# @snowpack/plugin-webpack\n\nUse Webpack to bundle your Snowpack project for production when you run `snowpack build`.\n\nSee our [build pipeline](https://www.snowpack.dev/concepts/build-pipeline) docs for more information.\n\n### Install\n\n```\nnpm install --save-dev @snowpack/plugin-webpack\n```\n\nThen add `@snowpack/plugin-webpack` to `snowpack.config.mjs`:\n\n```js\nexport default {\n plugins: [\n [\n '@snowpack/plugin-webpack',\n {\n /* see \"Plugin Options\" below */\n },\n ],\n ],\n};\n```\n\nOnce added to the configuration, `@snowpack/plugin-webpack` will run automatically on `snowpack build`.\n\n### Plugin Options\n\n- `sourceMap: boolean` - Enable sourcemaps in the bundled output.\n- `outputPattern: {css: string, js: string, assets: string}` - Set the URL for your final bundled files. This is where they will be written to disk in the `build/` directory. See Webpack's [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename) documentation for examples of valid values.\n- `extendConfig: (config: WebpackConfig) => WebpackConfig` - extend your webpack config, see below.\n- `manifest: boolean | string` - Enable generating a manifest file. The default value is `false`, the default file name is `./asset-manifest.json` if setting manifest to `true`. The relative path is resolved from the output directory.\n- `htmlMinifierOptions: boolean | object` - [See below](#minify-html).\n- `failOnWarnings: boolean` - Does fail the build when Webpack emits warnings. The default value is `false`.\n\n#### Extending The Default Webpack Config\n\nThe `extendConfig` option is a function that you can provide to configure the default webpack config. If you provide this function, the plugin will pass its return value to `webpack.compile()`. Use this to make changes, add plugins, configure loaders, etc.\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-webpack',\n {\n extendConfig: (config) => {\n config.plugins.push(/* ... */);\n return config;\n },\n },\n ],\n ],\n};\n```\n\n#### Minify HTML\n\nWith `htmlMinifierOptions` you can either disable the minification entirely or provide your own [options](https://github.com/kangax/html-minifier#options-quick-reference).\n\n```js\n// snowpack.config.mjs\nexport default {\n plugins: [\n [\n '@snowpack/plugin-webpack',\n {\n htmlMinifierOptions: false, // disabled entirely,\n },\n ],\n ],\n};\n```\n\nThe default options are:\n\n```js\n{\n collapseWhitespace: true,\n removeComments: true,\n removeEmptyAttributes: true,\n removeRedundantAttributes: true,\n removeScriptTypeAttributes: true,\n removeStyleLinkTypeAttributes: true,\n}\n```\n" }, { "path": "plugins/plugin-webpack/package.json", "content": "{\n \"name\": \"@snowpack/plugin-webpack\",\n \"version\": \"3.0.0\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"homepage\": \"https://github.com/withastro/snowpack/tree/main/plugins/plugin-webpack#readme\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/plugin-webpack\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@babel/core\": \"^7.13.16\",\n \"@babel/preset-env\": \"^7.13.15\",\n \"babel-loader\": \"^8.1.0\",\n \"core-js\": \"^3.10.2\",\n \"css-loader\": \"^5.2.4\",\n \"css-minimizer-webpack-plugin\": \"^2.0.0\",\n \"glob\": \"^7.1.6\",\n \"html-minifier\": \"^4.0.0\",\n \"jsdom\": \"^16.5.3\",\n \"mini-css-extract-plugin\": \"^1.4.1\",\n \"webpack\": \"^5.34.0\",\n \"webpack-manifest-plugin\": \"^3.1.1\"\n },\n \"devDependencies\": {\n \"fs-extra\": \"^9.1.0\"\n }\n}\n" }, { "path": "plugins/plugin-webpack/plugin.js", "content": "const crypto = require('crypto');\nconst fs = require('fs');\nconst glob = require('glob');\nconst path = require('path');\nconst util = require('util');\nconst url = require('url');\nconst webpack = require('webpack');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst CssMinimizerPlugin = require('css-minimizer-webpack-plugin');\nconst {WebpackManifestPlugin} = require('webpack-manifest-plugin');\nconst jsdom = require('jsdom');\nconst {JSDOM} = jsdom;\nconst minify = require('html-minifier').minify;\n\nfunction insertBefore(newNode, existingNode) {\n existingNode.parentNode.insertBefore(newNode, existingNode);\n}\n\nfunction ensureDirectoryExists(dir) {\n if (!fs.existsSync(dir)) {\n fs.mkdirSync(dir, {recursive: true});\n }\n}\n\nfunction parseHTMLFiles({buildDirectory}) {\n // Get all html files from the output folder\n const pattern = buildDirectory + '/**/*.html';\n const htmlFiles = glob.sync(pattern).map((htmlPath) => path.relative(buildDirectory, htmlPath));\n\n const doms = {};\n const jsEntries = {};\n for (const htmlFile of htmlFiles) {\n const dom = new JSDOM(fs.readFileSync(path.join(buildDirectory, htmlFile)));\n\n //Find all local script, use it as the entrypoint\n const scripts = Array.from(dom.window.document.querySelectorAll('script'))\n .filter((el) => el.type.trim().toLowerCase() === 'module')\n .filter((el) => !/^[a-zA-Z]+:\\/\\//.test(el.src));\n\n for (const el of scripts) {\n const src = el.src.trim();\n const parsedPath = path.parse(src);\n\n // Using path + filename to avoid problems if files have the same name, i.e.\n // /index.js and /admin/index.js\n const name = path\n .join(parsedPath.dir, parsedPath.name)\n .replace(/\\\\/g, '/')\n // Paths other than the root will have a leading separator\n .replace(/^\\//, '');\n\n if (!(name in jsEntries)) {\n jsEntries[name] = {\n path: path.join(buildDirectory, src),\n occurrences: [],\n };\n }\n jsEntries[name].occurrences.push({script: el, dom});\n }\n\n doms[htmlFile] = dom;\n }\n return {doms, jsEntries};\n}\n\nfunction emitHTMLFiles({doms, jsEntries, stats, baseUrl, outputDirectory, htmlMinifierOptions}) {\n const entrypoints = stats.toJson({assets: false, hash: true}).entrypoints;\n\n //Now that webpack is done, modify the html files to point to the newly compiled resources\n Object.keys(jsEntries).forEach((name) => {\n if (entrypoints[name] !== undefined && entrypoints[name]) {\n const assetFiles = entrypoints[name].assets || [];\n const jsFiles = assetFiles.filter((d) => d.name.endsWith('.js'));\n const cssFiles = assetFiles.filter((d) => d.name.endsWith('.css'));\n\n for (const occurrence of jsEntries[name].occurrences) {\n const originalScriptEl = occurrence.script;\n const dom = occurrence.dom;\n const head = dom.window.document.querySelector('head');\n\n for (const jsFile of jsFiles) {\n // Clone node so we keep original attributes, and remove\n // `type=module` as that is not needed\n const scriptEl = originalScriptEl.cloneNode();\n scriptEl.removeAttribute('type');\n scriptEl.src = url.parse(baseUrl).protocol\n ? url.resolve(baseUrl, jsFile.name)\n : path.posix.join(baseUrl, jsFile.name);\n // insert _before_ so the relative order of these scripts is maintained\n insertBefore(scriptEl, originalScriptEl);\n }\n for (const cssFile of cssFiles) {\n const linkEl = dom.window.document.createElement('link');\n linkEl.setAttribute('rel', 'stylesheet');\n linkEl.href = url.parse(baseUrl).protocol\n ? url.resolve(baseUrl, cssFile.name)\n : path.posix.join(baseUrl, cssFile.name);\n head.append(linkEl);\n }\n originalScriptEl.remove();\n }\n }\n });\n\n //And write our modified html files out to the destination\n for (const [htmlFile, dom] of Object.entries(doms)) {\n const html = htmlMinifierOptions\n ? minify(dom.serialize(), htmlMinifierOptions)\n : dom.serialize();\n\n const outputFile = path.join(outputDirectory, htmlFile);\n // If the user specified a different output, we may not have an existing folder structure\n ensureDirectoryExists(path.dirname(outputFile));\n fs.writeFileSync(outputFile, html);\n }\n}\n\nfunction getSplitChunksConfig({numEntries}) {\n const isCss = (module) => module.type === `css/mini-extract`;\n /**\n * Implements a version of granular chunking, as described at https://web.dev/granular-chunking-nextjs/.\n */\n return {\n chunks: 'all',\n maxInitialRequests: 25,\n minSize: 20000,\n cacheGroups: {\n default: false,\n vendors: false,\n /**\n * NPM libraries larger than 100KB are pulled into their own chunk\n *\n * We use a smaller cutoff than the reference implementation (which does 150KB),\n * because our babel-loader config compresses whitespace with `compact: true`.\n */\n lib: {\n test(module) {\n return (\n !isCss(module) &&\n module.size() > 100000 &&\n /_snowpack[/\\\\]pkg[/\\\\]/.test(module.identifier())\n );\n },\n name(module) {\n /**\n * Name the chunk based on the filename in /pkg/*.\n *\n * E.g. /pkg/moment.js -> lib-moment.HASH.js\n */\n const ident = module.libIdent({context: 'dir'});\n const lastItem = ident\n .split('/')\n .reduceRight((item) => item)\n .replace(/\\.js$/, '');\n return `lib-${lastItem}`;\n },\n priority: 30,\n minChunks: 1,\n reuseExistingChunk: true,\n },\n // modules used by all entrypoints end up in commons\n commons: {\n test(module) {\n return !isCss(module);\n },\n name: 'commons',\n // don't create a commons chunk until there are 2+ entries\n minChunks: Math.max(2, numEntries),\n priority: 20,\n },\n // modules used by multiple chunks can be pulled into shared chunks\n shared: {\n test(module) {\n return !isCss(module);\n },\n name(module, chunks) {\n const hash = crypto\n .createHash(`sha1`)\n .update(chunks.reduce((acc, chunk) => acc + chunk.name, ``))\n .digest(`hex`);\n\n return hash;\n },\n priority: 10,\n minChunks: 2,\n reuseExistingChunk: true,\n },\n // Bundle all css & lazy css into one stylesheet to make sure lazy components do not break\n styles: {\n test(module) {\n return isCss(module);\n },\n name: `styles`,\n priority: 40,\n enforce: true,\n },\n },\n };\n}\n\nfunction getPresetEnvTargets({browserslist}) {\n if (Array.isArray(browserslist) || typeof browserslist === 'string') {\n return browserslist;\n } else if (typeof browserslist === 'object' && 'production' in browserslist) {\n return browserslist.production;\n } else {\n return '>0.75%, not ie 11, not UCAndroid >0, not OperaMini all';\n }\n}\n\nmodule.exports = function plugin(config, args = {}) {\n // Deprecated: args.mode\n if (args.mode && args.mode !== 'production') {\n throw new Error('args.mode support has been removed.');\n }\n // Validate: args.outputPattern\n args.outputPattern = args.outputPattern || {};\n const jsOutputPattern = args.outputPattern.js || 'js/[name].[contenthash].js';\n const cssOutputPattern = args.outputPattern.css || 'css/[name].[contenthash].css';\n const assetsOutputPattern = args.outputPattern.assets || 'assets/[name].[contenthash][ext]';\n if (!jsOutputPattern.endsWith('.js')) {\n throw new Error('Output Pattern for JS must end in .js');\n }\n if (!cssOutputPattern.endsWith('.css')) {\n throw new Error('Output Pattern for CSS must end in .css');\n }\n\n // Default options for HTMLMinifier\n // https://github.com/kangax/html-minifier#options-quick-reference\n const defaultHtmlMinifierOptions = {\n collapseWhitespace: true,\n removeComments: true,\n removeEmptyAttributes: true,\n removeRedundantAttributes: true,\n removeScriptTypeAttributes: true,\n removeStyleLinkTypeAttributes: true,\n };\n\n const htmlMinifierOptions =\n args.htmlMinifierOptions === false\n ? false\n : Object.assign({}, defaultHtmlMinifierOptions, args.htmlMinifierOptions);\n\n const manifest =\n typeof args.manifest === 'string'\n ? args.manifest\n : !!args.manifest\n ? './asset-manifest.json'\n : undefined;\n\n // Webpack handles minification for us, so its safe to always\n // disable Snowpack's default minifier.\n config.buildOptions.minify = false;\n // Webpack creates unique file hashes for all generated bundles,\n // so we clean the build directory before building to remove outdated\n // build artifacts.\n config.buildOptions.clean = true;\n\n return {\n name: '@snowpack/plugin-webpack',\n async optimize({buildDirectory, log}) {\n const buildOptions = config.buildOptions || {};\n let baseUrl = buildOptions.baseUrl || '/';\n const tempBuildManifest = JSON.parse(\n await fs.readFileSync(path.join(config.root || process.cwd(), 'package.json'), {\n encoding: 'utf-8',\n }),\n );\n const presetEnvTargets = getPresetEnvTargets(tempBuildManifest);\n\n let extendConfig = (cfg) => cfg;\n if (typeof args.extendConfig === 'function') {\n extendConfig = args.extendConfig;\n } else if (typeof args.extendConfig === 'object') {\n extendConfig = (cfg) => ({...cfg, ...args.extendConfig});\n }\n\n const {doms, jsEntries} = parseHTMLFiles({buildDirectory});\n\n if (Object.keys(jsEntries).length === 0) {\n throw new Error(\"Can't bundle without script tag in html\");\n }\n\n //Compile files using webpack\n let webpackConfig = {\n context: buildDirectory,\n resolve: {\n alias: {\n // TODO: Support a custom config.buildOptions.metaUrlPath\n '/_snowpack': path.join(buildDirectory, '_snowpack'),\n '/__snowpack__': path.join(buildDirectory, '__snowpack__'),\n '/web_modules': path.join(buildDirectory, 'web_modules'),\n },\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: [\n {\n loader: require.resolve('babel-loader'),\n options: {\n cwd: buildDirectory,\n configFile: false,\n babelrc: false,\n compact: true,\n presets: [\n [\n require.resolve('@babel/preset-env'),\n {\n targets: presetEnvTargets,\n bugfixes: true,\n modules: false,\n useBuiltIns: 'usage',\n corejs: 3,\n },\n ],\n ],\n },\n },\n {\n loader: require.resolve('./plugins/import-meta-fix.js'),\n },\n {\n loader: require.resolve('./plugins/proxy-import-resolve.js'),\n },\n ],\n },\n {\n test: /\\.css$/,\n exclude: /\\.module\\.css$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n },\n {\n loader: require.resolve('css-loader'),\n },\n ],\n },\n {\n test: /\\.module\\.css$/,\n use: [\n {\n loader: MiniCssExtractPlugin.loader,\n },\n {\n loader: require.resolve('css-loader'),\n options: {\n modules: true,\n },\n },\n ],\n },\n {\n test: /.*/,\n exclude: [/\\.js?$/, /\\.json?$/, /\\.css$/],\n // When using old assets loaders (i.e. file-loader/url-loader/raw-loader)\n // make sure to set 'javascript/auto' flag\n // https://webpack.js.org/guides/asset-modules/\n type: 'asset/resource',\n generator: {\n filename: assetsOutputPattern,\n },\n },\n ],\n },\n mode: 'production',\n devtool: args.sourceMap ? 'source-map' : undefined,\n optimization: {\n // extract webpack runtime to its own chunk: https://webpack.js.org/concepts/manifest/#runtime\n runtimeChunk: {\n name: `webpack-runtime`,\n },\n splitChunks: getSplitChunksConfig({numEntries: Object.keys(jsEntries).length}),\n minimizer: [\n `...`, // extends webpack internal ones (i.e. `terser-webpack-plugin`)\n new CssMinimizerPlugin({}),\n ],\n },\n };\n const plugins = [\n //Extract a css file from imported css files\n new MiniCssExtractPlugin({\n filename: cssOutputPattern,\n }),\n ];\n if (manifest) {\n plugins.push(new WebpackManifestPlugin({fileName: manifest}));\n }\n\n let entry = {};\n for (name in jsEntries) {\n entry[name] = jsEntries[name].path;\n }\n const extendedConfig = extendConfig({\n ...webpackConfig,\n plugins,\n entry,\n output: {\n path: buildDirectory,\n publicPath: baseUrl,\n filename: jsOutputPattern,\n },\n });\n const compiler = webpack(extendedConfig);\n\n const stats = await new Promise((resolve, reject) => {\n compiler.run((err, stats) => {\n if (err) {\n reject(err);\n return;\n }\n const info = stats.toJson(extendedConfig.stats);\n if (stats.hasErrors()) {\n console.error(\n 'Webpack errors:\\n' + info.errors.map((err) => err.message).join('\\n-----\\n'),\n );\n reject(Error(`Webpack failed with ${info.errors} error(s).`));\n return;\n }\n if (stats.hasWarnings()) {\n console.error(\n 'Webpack warnings:\\n' + info.warnings.map((err) => err.message).join('\\n-----\\n'),\n );\n if (args.failOnWarnings) {\n reject(Error(`Webpack failed with ${info.warnings} warnings(s).`));\n return;\n }\n }\n resolve(stats);\n });\n });\n\n if (extendedConfig.stats !== 'none') {\n console.log(\n stats.toString(\n extendedConfig.stats\n ? extendedConfig.stats\n : {\n colors: true,\n all: false,\n assets: true,\n },\n ),\n );\n }\n\n // If the user specified a path, we need to put the HTML there too\n const outputDirectory = extendedConfig.output.path;\n\n emitHTMLFiles({\n doms,\n jsEntries,\n stats,\n baseUrl,\n outputDirectory,\n htmlMinifierOptions,\n });\n },\n };\n};\n" }, { "path": "plugins/plugin-webpack/plugins/import-meta-fix.js", "content": "/**\nMIT License\n\nCopyright (c) 2018 open-wc\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n*/\n\nconst path = require('path');\nconst regex = /import\\.meta/g;\nfunction toBrowserPath(filePath, _path = path) {\n return filePath.replace(new RegExp(_path.sep === '\\\\' ? '\\\\\\\\' : _path.sep, 'g'), '/');\n}\n\n/**\n * Webpack loader to rewrite `import.meta` in modules.\n *\n * @example\n * return import.meta;\n * // becomes: return ({ url: `${window.location.protocol}//${window.location.host}/relative/path/to/file.js`, env: __SNOWPACK_ENV__ });\n *\n * return import.meta.url;\n * // becomes: return ({ url: `${window.location.protocol}//${window.location.host}/relative/path/to/file.js`m env: __SNOWPACK_ENV__ }).url;\n */\nmodule.exports = function (source) {\n const relativePath = this.context.substring(\n this.context.indexOf(this.rootContext) + this.rootContext.length + 1,\n this.resource.lastIndexOf(path.sep) + 1,\n );\n\n const browserPath = toBrowserPath(relativePath);\n\n const fileName = this.resource.substring(this.resource.lastIndexOf(path.sep) + 1);\n\n let found = false;\n let rewrittenSource = source.replace(regex, () => {\n found = true;\n return `({ url: getAbsoluteUrl('${browserPath}/${fileName}'), env: __SNOWPACK_ENV__ })`;\n });\n\n if (found) {\n return `\n function getAbsoluteUrl(relativeUrl) {\n const publicPath = __webpack_public_path__;\n let url = '';\n if (!publicPath || publicPath.indexOf('://') < 0) {\n url += window.location.protocol + '//' + window.location.host;\n }\n if (publicPath) {\n url += publicPath;\n } else {\n url += '/';\n }\n return url + relativeUrl;\n }\n${rewrittenSource}`;\n } else {\n return source;\n }\n};\n" }, { "path": "plugins/plugin-webpack/plugins/proxy-import-resolve.js", "content": "module.exports = function proxyImportResolver(source) {\n return source.replace(\n /(?:import|from)\\s*['\"].*\\.(\\w+)\\.proxy\\.js['\"]/g,\n (fullMatch, originalExt) => {\n return fullMatch.replace('.proxy.js', '');\n },\n );\n};\n" }, { "path": "plugins/plugin-webpack/test/__snapshots__/plugin.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`@snowpack/plugin-webpack minimal - all options: files 1`] = `\nArray [\n Object {\n \"content\": \"{\n \\\\\"index.js\\\\\": \\\\\"/index-826.js\\\\\",\n \\\\\"webpack-runtime.js\\\\\": \\\\\"/webpack-runtime-658.js\\\\\",\n \\\\\"styles.css\\\\\": \\\\\"/css/styles.XXXXXXXXXXXXXXXXXXXX.css\\\\\",\n \\\\\"assets/backpack.svg\\\\\": \\\\\"/assets/backpack.XXXXXXXXXXXXXXXXXXXX.svg\\\\\",\n \\\\\"index-826.js.map\\\\\": \\\\\"/index-826.js.map\\\\\",\n \\\\\"webpack-runtime-658.js.map\\\\\": \\\\\"/webpack-runtime-658.js.map\\\\\",\n \\\\\"styles.css.map\\\\\": \\\\\"/css/styles.XXXXXXXXXXXXXXXXXXXX.css.map\\\\\"\n}\",\n \"filename\": \"asset-manifest.json\",\n },\n Object {\n \"content\": \"\n\",\n \"filename\": \"backpack.svg\",\n },\n Object {\n \"content\": \"(self.webpackChunkplugin_webpack_test_minimal=self.webpackChunkplugin_webpack_test_minimal||[]).push([[826],{99:(s,e,t)=>{\\\\\"use strict\\\\\";t(933),console.log(\\\\\"test\\\\\")},933:(s,e,t)=>{\\\\\"use strict\\\\\";s.exports=t.p+\\\\\"assets/backpack.XXXXXXXXXXXXXXXXXXXX.svg\\\\\"}},s=>{\\\\\"use strict\\\\\";s.O(0,[532],(()=>(99,s(s.s=99)))),s.O()}]);\n//# sourceMappingURL=index-826.js.map\",\n \"filename\": \"index-826.js\",\n },\n Object {\n \"content\": \"{\\\\\"version\\\\\":3,\\\\\"sources\\\\\":[\\\\\"webpack://plugin-webpack-test-minimal/./index.js\\\\\"],\\\\\"names\\\\\":[\\\\\"console\\\\\",\\\\\"log\\\\\"],\\\\\"mappings\\\\\":\\\\\"8IAEAA,QAAQC,IAAI,S\\\\\",\\\\\"file\\\\\":\\\\\"index-826.js\\\\\",\\\\\"sourcesContent\\\\\":[\\\\\"import './styles.css';\\\\\\\\nimport './backpack.svg';\\\\\\\\nconsole.log('test');\\\\\\\\n\\\\\"],\\\\\"sourceRoot\\\\\":\\\\\"\\\\\"}\",\n \"filename\": \"index-826.js.map\",\n },\n Object {\n \"content\": \"Minimal test\",\n \"filename\": \"index.html\",\n },\n Object {\n \"content\": \"import './styles.css';\nimport './backpack.svg';\nconsole.log('test');\n\",\n \"filename\": \"index.js\",\n },\n Object {\n \"content\": \"{\n \\\\\"name\\\\\": \\\\\"plugin-webpack-test-minimal\\\\\",\n \\\\\"main\\\\\": \\\\\"src/index.js\\\\\"\n}\n\",\n \"filename\": \"package.json\",\n },\n Object {\n \"content\": \"body {\n background-color: skyblue;\n}\n\",\n \"filename\": \"styles.css\",\n },\n Object {\n \"content\": \"(()=>{\\\\\"use strict\\\\\";var r,e={},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var l=t[r]={exports:{}};return e[r](l,l.exports,n),l.exports}n.m=e,r=[],n.O=(e,t,a,l)=>{if(!t){var o=1/0;for(s=0;s=l)&&Object.keys(n.O).every((r=>n.O[r](t[i])))?t.splice(i--,1):(p=!1,l0&&r[s-1][2]>l;s--)r[s]=r[s-1];r[s]=[t,a,l]},n.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),n.p=\\\\\"/\\\\\",(()=>{var r={658:0,532:0};n.O.j=e=>0===r[e];var e=(e,t)=>{var a,l,[o,p,i]=t,s=0;for(a in p)n.o(p,a)&&(n.m[a]=p[a]);for(i&&i(n),e&&e(t);s {\\\\\\\\n\\\\\\\\tif(chunkIds) {\\\\\\\\n\\\\\\\\t\\\\\\\\tpriority = priority || 0;\\\\\\\\n\\\\\\\\t\\\\\\\\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\\\\\\\\n\\\\\\\\t\\\\\\\\tdeferred[i] = [chunkIds, fn, priority];\\\\\\\\n\\\\\\\\t\\\\\\\\treturn;\\\\\\\\n\\\\\\\\t}\\\\\\\\n\\\\\\\\tvar notFulfilled = Infinity;\\\\\\\\n\\\\\\\\tfor (var i = 0; i < deferred.length; i++) {\\\\\\\\n\\\\\\\\t\\\\\\\\tvar [chunkIds, fn, priority] = deferred[i];\\\\\\\\n\\\\\\\\t\\\\\\\\tvar fulfilled = true;\\\\\\\\n\\\\\\\\t\\\\\\\\tfor (var j = 0; j < chunkIds.length; j++) {\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\t\\\\\\\\tchunkIds.splice(j--, 1);\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\t} else {\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\t\\\\\\\\tfulfilled = false;\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\t\\\\\\\\tif(priority < notFulfilled) notFulfilled = priority;\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\t}\\\\\\\\n\\\\\\\\t\\\\\\\\t}\\\\\\\\n\\\\\\\\t\\\\\\\\tif(fulfilled) {\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\tdeferred.splice(i--, 1)\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\tresult = fn();\\\\\\\\n\\\\\\\\t\\\\\\\\t}\\\\\\\\n\\\\\\\\t}\\\\\\\\n\\\\\\\\treturn result;\\\\\\\\n};\\\\\",\\\\\"// The module cache\\\\\\\\nvar __webpack_module_cache__ = {};\\\\\\\\n\\\\\\\\n// The require function\\\\\\\\nfunction __webpack_require__(moduleId) {\\\\\\\\n\\\\\\\\t// Check if module is in cache\\\\\\\\n\\\\\\\\tvar cachedModule = __webpack_module_cache__[moduleId];\\\\\\\\n\\\\\\\\tif (cachedModule !== undefined) {\\\\\\\\n\\\\\\\\t\\\\\\\\treturn cachedModule.exports;\\\\\\\\n\\\\\\\\t}\\\\\\\\n\\\\\\\\t// Create a new module (and put it into the cache)\\\\\\\\n\\\\\\\\tvar module = __webpack_module_cache__[moduleId] = {\\\\\\\\n\\\\\\\\t\\\\\\\\t// no module.id needed\\\\\\\\n\\\\\\\\t\\\\\\\\t// no module.loaded needed\\\\\\\\n\\\\\\\\t\\\\\\\\texports: {}\\\\\\\\n\\\\\\\\t};\\\\\\\\n\\\\\\\\n\\\\\\\\t// Execute the module function\\\\\\\\n\\\\\\\\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\\\\\\\\n\\\\\\\\n\\\\\\\\t// Return the exports of the module\\\\\\\\n\\\\\\\\treturn module.exports;\\\\\\\\n}\\\\\\\\n\\\\\\\\n// expose the modules object (__webpack_modules__)\\\\\\\\n__webpack_require__.m = __webpack_modules__;\\\\\\\\n\\\\\\\\n\\\\\",\\\\\"__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))\\\\\",\\\\\"__webpack_require__.p = \\\\\\\\\\\\\"/\\\\\\\\\\\\\";\\\\\",\\\\\"// no baseURI\\\\\\\\n\\\\\\\\n// object to store loaded and loading chunks\\\\\\\\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\\\\\\\\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\\\\\\\\nvar installedChunks = {\\\\\\\\n\\\\\\\\t658: 0,\\\\\\\\n\\\\\\\\t532: 0\\\\\\\\n};\\\\\\\\n\\\\\\\\n// no chunk on demand loading\\\\\\\\n\\\\\\\\n// no prefetching\\\\\\\\n\\\\\\\\n// no preloaded\\\\\\\\n\\\\\\\\n// no HMR\\\\\\\\n\\\\\\\\n// no HMR manifest\\\\\\\\n\\\\\\\\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\\\\\\\\n\\\\\\\\n// install a JSONP callback for chunk loading\\\\\\\\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\\\\\\\\n\\\\\\\\tvar [chunkIds, moreModules, runtime] = data;\\\\\\\\n\\\\\\\\t// add \\\\\\\\\\\\\"moreModules\\\\\\\\\\\\\" to the modules object,\\\\\\\\n\\\\\\\\t// then flag all \\\\\\\\\\\\\"chunkIds\\\\\\\\\\\\\" as loaded and fire callback\\\\\\\\n\\\\\\\\tvar moduleId, chunkId, i = 0;\\\\\\\\n\\\\\\\\tfor(moduleId in moreModules) {\\\\\\\\n\\\\\\\\t\\\\\\\\tif(__webpack_require__.o(moreModules, moduleId)) {\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\t__webpack_require__.m[moduleId] = moreModules[moduleId];\\\\\\\\n\\\\\\\\t\\\\\\\\t}\\\\\\\\n\\\\\\\\t}\\\\\\\\n\\\\\\\\tif(runtime) runtime(__webpack_require__);\\\\\\\\n\\\\\\\\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\\\\\\\\n\\\\\\\\tfor(;i < chunkIds.length; i++) {\\\\\\\\n\\\\\\\\t\\\\\\\\tchunkId = chunkIds[i];\\\\\\\\n\\\\\\\\t\\\\\\\\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\\\\\\\\n\\\\\\\\t\\\\\\\\t\\\\\\\\tinstalledChunks[chunkId][0]();\\\\\\\\n\\\\\\\\t\\\\\\\\t}\\\\\\\\n\\\\\\\\t\\\\\\\\tinstalledChunks[chunkIds[i]] = 0;\\\\\\\\n\\\\\\\\t}\\\\\\\\n\\\\\\\\t__webpack_require__.O();\\\\\\\\n}\\\\\\\\n\\\\\\\\nvar chunkLoadingGlobal = self[\\\\\\\\\\\\\"webpackChunkplugin_webpack_test_minimal\\\\\\\\\\\\\"] = self[\\\\\\\\\\\\\"webpackChunkplugin_webpack_test_minimal\\\\\\\\\\\\\"] || [];\\\\\\\\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\\\\\\\\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));\\\\\"],\\\\\"sourceRoot\\\\\":\\\\\"\\\\\"}\",\n \"filename\": \"webpack-runtime-658.js.map\",\n },\n]\n`;\n\nexports[`@snowpack/plugin-webpack minimal - no options: files 1`] = `\nArray [\n Object {\n \"content\": \"\n\",\n \"filename\": \"backpack.svg\",\n },\n Object {\n \"content\": \"Minimal test\",\n \"filename\": \"index.html\",\n },\n Object {\n \"content\": \"import './styles.css';\nimport './backpack.svg';\nconsole.log('test');\n\",\n \"filename\": \"index.js\",\n },\n Object {\n \"content\": \"{\n \\\\\"name\\\\\": \\\\\"plugin-webpack-test-minimal\\\\\",\n \\\\\"main\\\\\": \\\\\"src/index.js\\\\\"\n}\n\",\n \"filename\": \"package.json\",\n },\n Object {\n \"content\": \"body {\n background-color: skyblue;\n}\n\",\n \"filename\": \"styles.css\",\n },\n]\n`;\n\nexports[`@snowpack/plugin-webpack respect extendedConfig.output.path: files 1`] = `\nArray [\n Object {\n \"content\": \"Minimal test\",\n \"filename\": \"index.html\",\n },\n]\n`;\n\nexports[`@snowpack/plugin-webpack multiple entrypoints w/ same filename: files 1`] = `\nArray [\n Object {\n \"content\": \"Multiple entrypoints test - root\",\n \"filename\": \"index.html\",\n },\n Object {\n \"content\": \"console.log('root test');\n\",\n \"filename\": \"index.js\",\n },\n Object {\n \"content\": \"{\n \\\\\"name\\\\\": \\\\\"plugin-webpack-test-minimal\\\\\",\n \\\\\"main\\\\\": \\\\\"src/index.js\\\\\"\n}\n\",\n \"filename\": \"package.json\",\n },\n]\n`;\n\nexports[`@snowpack/plugin-webpack multiple entrypoints w/ same filename: files 2`] = `\nArray [\n Object {\n \"content\": \"Multiple entrypoints test - /admin\",\n \"filename\": \"index.html\",\n },\n Object {\n \"content\": \"console.log('admin test');\n\",\n \"filename\": \"index.js\",\n },\n]\n`;\n" }, { "path": "plugins/plugin-webpack/test/plugin.test.js", "content": "const path = require('path');\nconst fs = require('fs-extra');\n\nconst plugin = require('../plugin');\nconst readFilesSync = require('./readFilesSync');\n\nconst STUBS_DIR = path.join(__dirname, 'stubs/minimal/');\nconst IGNORED_STUBS_DIR = path.join(__dirname, 'stubs/minimal_ignore/');\n\nconst MULTIPLE_DIR = path.join(__dirname, 'stubs/multiple-entrypoints/');\nconst IGNORED_MULTIPLE_DIR = path.join(__dirname, 'stubs/multiple-entrypoints_ignore/');\n\ndescribe('@snowpack/plugin-webpack', () => {\n // Copy over the stub folder to an git-ignored path and mock console.log\n beforeEach(() => {\n if (fs.existsSync(IGNORED_STUBS_DIR)) fs.removeSync(IGNORED_STUBS_DIR);\n fs.copySync(STUBS_DIR, IGNORED_STUBS_DIR);\n\n if (fs.existsSync(IGNORED_MULTIPLE_DIR)) fs.removeSync(IGNORED_MULTIPLE_DIR);\n fs.copySync(MULTIPLE_DIR, IGNORED_MULTIPLE_DIR);\n });\n\n afterAll(() => {\n if (fs.existsSync(IGNORED_STUBS_DIR)) fs.removeSync(IGNORED_STUBS_DIR);\n if (fs.existsSync(IGNORED_MULTIPLE_DIR)) fs.removeSync(IGNORED_MULTIPLE_DIR);\n });\n\n it('minimal - no options', async () => {\n const pluginInstance = plugin({\n buildOptions: {},\n });\n\n await pluginInstance.optimize({\n buildDirectory: IGNORED_STUBS_DIR,\n });\n\n expect(readFilesSync(IGNORED_STUBS_DIR)).toMatchSnapshot('files');\n });\n\n it('minimal - all options', async () => {\n const pluginInstance = plugin(\n {\n buildOptions: {},\n },\n {\n sourceMap: true,\n outputPattern: {\n js: '[name]-[id].js',\n },\n extendConfig: (config) => config,\n manifest: true,\n htmlMinifierOptions: true,\n },\n );\n\n await pluginInstance.optimize({\n buildDirectory: IGNORED_STUBS_DIR,\n });\n\n expect(readFilesSync(IGNORED_STUBS_DIR)).toMatchSnapshot('files');\n });\n\n it('respect extendedConfig.output.path', async () => {\n const pluginInstance = plugin(\n {\n buildOptions: {},\n },\n {\n extendConfig: (config) => {\n config.output.path = path.resolve(IGNORED_STUBS_DIR, 'dist');\n\n return config;\n },\n },\n );\n\n await pluginInstance.optimize({\n buildDirectory: IGNORED_STUBS_DIR,\n });\n\n expect(readFilesSync(path.join(IGNORED_STUBS_DIR, 'dist'))).toMatchSnapshot('files');\n expect(fs.existsSync(path.join(IGNORED_STUBS_DIR, 'js'))).toBe(false);\n expect(fs.existsSync(path.join(IGNORED_STUBS_DIR, 'css'))).toBe(false);\n expect(fs.existsSync(path.join(IGNORED_STUBS_DIR, 'assets'))).toBe(false);\n });\n\n it('multiple entrypoints w/ same filename', async () => {\n const pluginInstance = plugin({\n buildOptions: {},\n });\n\n await pluginInstance.optimize({\n buildDirectory: IGNORED_MULTIPLE_DIR,\n });\n\n const rootHtml = fs.readFileSync(path.join(IGNORED_MULTIPLE_DIR, 'index.html'), {\n encoding: 'utf8',\n });\n const adminHtml = fs.readFileSync(path.join(IGNORED_MULTIPLE_DIR, 'admin/index.html'), {\n encoding: 'utf8',\n });\n\n const rootScripts = rootHtml.match(/\n \n\n" }, { "path": "plugins/plugin-webpack/test/stubs/minimal/index.js", "content": "import './styles.css';\nimport './backpack.svg';\nconsole.log('test');\n" }, { "path": "plugins/plugin-webpack/test/stubs/minimal/package.json", "content": "{\n \"name\": \"plugin-webpack-test-minimal\",\n \"main\": \"src/index.js\"\n}\n" }, { "path": "plugins/plugin-webpack/test/stubs/minimal/styles.css", "content": "body {\n background-color: skyblue;\n}\n" }, { "path": "plugins/plugin-webpack/test/stubs/multiple-entrypoints/admin/index.html", "content": "\n\n \n \n Multiple entrypoints test - /admin\n \n \n \n \n\n" }, { "path": "plugins/plugin-webpack/test/stubs/multiple-entrypoints/admin/index.js", "content": "console.log('admin test');\n" }, { "path": "plugins/plugin-webpack/test/stubs/multiple-entrypoints/index.html", "content": "\n\n \n \n Multiple entrypoints test - root\n \n \n \n \n\n" }, { "path": "plugins/plugin-webpack/test/stubs/multiple-entrypoints/index.js", "content": "console.log('root test');\n" }, { "path": "plugins/plugin-webpack/test/stubs/multiple-entrypoints/package.json", "content": "{\n \"name\": \"plugin-webpack-test-minimal\",\n \"main\": \"src/index.js\"\n}\n" }, { "path": "plugins/web-test-runner-plugin/CHANGELOG.md", "content": "# @snowpack/web-test-runner-plugin\n\n## 0.2.2\n\n### Patch Changes\n\n- 50987423: Add \"repository\" and \"homepage\" listings (#2846) \n- bea1c56c: Simplify. cleanup, enhance snowpack internals (#2707)\n- a8a30339: [ci] yarn format\n- 25565308: Allow 404s in web-test-runner-plugin (#2546) \n- 7a79de95: fix bad snowpackconfig reference\n- a65023e2: [ci] yarn format\n\n## 0.2.1\n\n### Patch Changes\n\n- cc36acf2: Update @web/test-runner (#2222) \n\n_For older releases, check our curated [release update thread](https://github.com/withastro/snowpack/discussions/1183) or the raw [commit history](https://github.com/withastro/snowpack/commits/main/plugins/web-test-runner-plugin)._\n" }, { "path": "plugins/web-test-runner-plugin/README.md", "content": "# @snowpack/web-test-runner-plugin\n\nA [@web/test-runner](https://modern-web.dev/docs/test-runner/overview/) plugin to test Snowpack-powered projects. This plugin automatically connects to the Snowpack project in the current directory, loads the project configuration, and the uses your already-configured Snowpack build pipeline to build each test file.\n\n## Usage\n\n```\nnpm install @snowpack/web-test-runner-plugin --save-dev\n```\n\n```\n// web-test-runner.config.js\nmodule.exports = {\n plugins: [require('@snowpack/web-test-runner-plugin')()],\n};\n```\n\n## Options\n\nNone! If you need to configure Snowpack, you can do so in your project `snowpack.config.mjs` file.\n\nLooking for support for some missing option/configuration? Please file an isuse! Your feedback is important.\n" }, { "path": "plugins/web-test-runner-plugin/package.json", "content": "{\n \"name\": \"@snowpack/web-test-runner-plugin\",\n \"version\": \"0.2.2\",\n \"main\": \"plugin.js\",\n \"license\": \"MIT\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"plugins/web-test-runner-plugin\"\n },\n \"homepage\": \"https://www.snowpack.dev/guides/web-test-runner\",\n \"peerDependencies\": {\n \"@web/test-runner\": \">=0.10.0 <1.0.0\",\n \"snowpack\": \"^3.8.0\"\n },\n \"devDependencies\": {\n \"@web/test-runner\": \">=0.11.0\"\n },\n \"gitHead\": \"a01616bb0787d56cd782f94cecf2daa12c7594e4\"\n}\n" }, { "path": "plugins/web-test-runner-plugin/plugin.js", "content": "const {isTestFilePath} = require('@web/test-runner');\nconst snowpack = require('snowpack');\nconst path = require('path');\n\n/**\n * Checks whether the url is a virtual file served by @web/test-runner.\n * @param {string} url\n */\nfunction isTestRunnerFile(url) {\n return url.startsWith('/__web-dev-server') || url.startsWith('/__web-test-runner');\n}\n\nmodule.exports = function () {\n let server, config;\n\n return {\n name: 'snowpack-plugin',\n async serverStart({fileWatcher}) {\n config = await snowpack.loadConfiguration({\n mode: 'test',\n packageOptions: {external: ['/__web-dev-server__web-socket.js']},\n devOptions: {open: 'none', output: 'stream', hmr: false},\n });\n // npm packages should be installed/prepared ahead of time.\n console.log('[snowpack] starting server...');\n fileWatcher.add(Object.keys(config.mount));\n server = await snowpack.startServer({\n config,\n lockfile: null,\n });\n },\n async serverStop() {\n return server.shutdown();\n },\n async serve({request}) {\n if (isTestRunnerFile(request.url)) {\n return;\n }\n const reqPath = request.path;\n try {\n const result = await server.loadUrl(reqPath, {isSSR: false});\n return {body: result.contents, type: result.contentType};\n } catch {\n return;\n }\n },\n transformImport({source}) {\n if (!isTestFilePath(source) || isTestRunnerFile(source)) {\n return;\n }\n // PERF(fks): https://github.com/withastro/snowpack/pull/1259/files#r502963818\n const reqPath = source.substring(\n 0,\n source.indexOf('?') === -1 ? undefined : source.indexOf('?'),\n );\n const sourcePath = path.join(config.root || process.cwd(), reqPath);\n try {\n return snowpack.getUrlForFile(sourcePath, config);\n } catch {\n return;\n }\n },\n };\n};\n" }, { "path": "scripts/release-all.js", "content": "// How to release many packages at once:\n// 1. get a list of what everything is meant to be going out (git diff [LAST RELEASE COMMIT] --stat)\n// 2. create the release-all.js script (get the patch vs. minor vs. major for each package going out. ex: git diff [LAST RELEASE COMMIT] plugins/plugin-svelte)\n// 3. run `yarn build && yarn bundle`\n// 4. run `../release-all.js` (release-all script must be copied outside of the working directory, so that we pass the \"clean working directory\" check)\n\nconst release = require('./release.cjs');\n\nrelease('esinstall', 'latest', true);\nrelease('skypack', 'latest', true);\nrelease('snowpack', 'latest', true);\nrelease('app-template-blank-typescript', 'latest', true);\nrelease('app-template-lit-element', 'latest', true);\nrelease('app-template-preact-typescript', 'latest', true);\nrelease('app-template-react-typescript', 'latest', true);\nrelease('app-template-svelte-typescript', 'latest', true);\nrelease('app-template-vue-typescript', 'latest', true);\nrelease('plugins/plugin-optimize', 'latest', true);\nrelease('plugins/web-test-runner-plugin', 'latest', true);\n" }, { "path": "scripts/release.cjs", "content": "const fs = require('fs');\nconst path = require('path');\nconst execa = require('execa');\n\nfunction formatDate() {\n var d = new Date(),\n month = '' + (d.getMonth() + 1),\n day = '' + d.getDate(),\n year = d.getFullYear();\n\n if (month.length < 2) month = '0' + month;\n if (day.length < 2) day = '0' + day;\n\n return [year, month, day].join('-');\n}\n\nmodule.exports = function release(pkgFolder, tag, skipBuild) {\n console.log(`# release(${pkgFolder}, ${tag})`);\n\n const root = path.resolve(__dirname, '..');\n const dir = path.resolve(root, pkgFolder);\n if (execa.sync('git', ['status', '--porcelain'], {cwd: dir}).stdout) {\n console.error('working directory not clean!');\n process.exit(1);\n }\n\n if (skipBuild !== true) {\n console.log('Building...');\n console.log(execa.sync('yarn', ['run', 'build'], {cwd: root}));\n }\n\n console.log('Publishing...');\n const pkgJsonLoc = path.join(dir, 'package.json');\n if (!pkgFolder.startsWith('create-snowpack-app/')) {\n execa.sync('yarn', ['changeset', 'version']);\n }\n const {name: pkgName, version: newPkgVersion} = JSON.parse(fs.readFileSync(pkgJsonLoc, 'utf8'));\n const newPkgTag = `${pkgName}@${newPkgVersion}`;\n\n console.log(execa.sync('git', ['add', '-A'], {cwd: dir}));\n console.log(execa.sync('git', ['commit', '--allow-empty', '-m', `[skip ci] ${newPkgTag}`], {cwd: dir}));\n console.log(execa.sync('git', ['tag', newPkgTag], {cwd: dir}));\n if (pkgName === 'snowpack')\n console.log(execa.sync('git', ['tag', `v${newPkgVersion}`], {cwd: dir})); // 'snowpack' only: also tag as vX.X.X (for GitHub releases)\n console.log(execa.sync('npm', ['publish', '--tag', tag], {cwd: dir}));\n\n // Only push to github on latest release, since a pre-release will break\n // yarns ability to link workspaces (ex: ^3.0.0 doesn't match 3.1.0-pre.1).\n if (tag === 'latest') {\n console.log(execa.sync('git', ['push', 'origin', 'main'], {cwd: dir}));\n console.log(execa.sync('git', ['push', '--tags'], {cwd: dir}));\n }\n};\n" }, { "path": "skypack/.gitignore", "content": "node_modules\nlib" }, { "path": "skypack/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"bracketSpacing\": false,\n \"printWidth\": 100\n}\n" }, { "path": "skypack/CHANGELOG.md", "content": "# skypack\n\n## 0.3.3\n\n### Patch Changes\n\n- 5e84cdd8: Fixes a ghost dependency on 'tar'\n\n## 0.3.2\n\n### Patch Changes\n\n- b5e49467: update changelogs\n- bf220191: [ci] yarn format\n\n## 0.3.1\n\n### Patch Changes\n\n- 59ee847e: cleanup broken skypack sdk references\n" }, { "path": "skypack/LICENSE", "content": "MIT License\n\nCopyright (c) 2019 Fred K. Schott\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "skypack/README.md", "content": "# Skypack\n\nThis is an experimental SDK for interacting with the Skypack Package CDN. It is not yet ready for public use, and may change without notice. Use at your own risk!\n\nMore documentation will be written as this gets closer to a public release! Until then, you can browse the package code to get a better idea of the interface.\n\n```\nnpm install skypack\n```\n" }, { "path": "skypack/index.esm.mjs", "content": "import Pkg from './lib/index.js';\n\nexport const rollupPluginSkypack = Pkg.rollupPluginSkypack;\nexport const generateImportMap = Pkg.generateImportMap;\nexport const fetchCDN = Pkg.fetchCDN;\nexport const buildNewPackage = Pkg.buildNewPackage;\nexport const lookupBySpecifier = Pkg.lookupBySpecifier;\nexport const clearCache = Pkg.clearCache;\nexport const SKYPACK_ORIGIN = Pkg.SKYPACK_ORIGIN;\n" }, { "path": "skypack/package.json", "content": "{\n \"name\": \"skypack\",\n \"version\": \"0.3.3\",\n \"description\": \"The Skypack SDK.\",\n \"keywords\": [\n \"skypack\",\n \"esm\",\n \"cdn\",\n \"sdk\"\n ],\n \"author\": \"Fred K. Schott \",\n \"license\": \"MIT\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\",\n \"directory\": \"skypack\"\n },\n \"scripts\": {\n \"build\": \"tsc --noUnusedLocals false --noUnusedParameters false\",\n \"build:watch\": \"tsc --watch --noUnusedLocals false --noUnusedParameters false\",\n \"lint\": \"tsc --noEmit && package-check\"\n },\n \"engines\": {\n \"node\": \">=10.19.0\"\n },\n \"main\": \"lib/index.js\",\n \"types\": \"lib/index.d.ts\",\n \"exports\": {\n \".\": {\n \"import\": \"./index.esm.mjs\",\n \"require\": \"./lib/index.js\"\n },\n \"./package.json\": \"./package.json\"\n },\n \"files\": [\n \"lib\",\n \"index.bin.js\",\n \"index.esm.mjs\"\n ],\n \"dependencies\": {\n \"cacache\": \"^15.0.0\",\n \"cachedir\": \"^2.3.0\",\n \"esinstall\": \"^1.0.0\",\n \"etag\": \"^1.8.1\",\n \"find-up\": \"^5.0.0\",\n \"got\": \"^11.1.4\",\n \"kleur\": \"^4.1.0\",\n \"mkdirp\": \"^1.0.3\",\n \"p-queue\": \"^6.2.1\",\n \"rimraf\": \"^3.0.0\",\n \"rollup\": \"~2.37.1\",\n \"tar\": \"^6.1.0\",\n \"validate-npm-package-name\": \"^3.0.0\"\n }\n}\n" }, { "path": "skypack/src/index.ts", "content": "import mkdirp from 'mkdirp';\nimport cacache from 'cacache';\nimport path from 'path';\nimport tar from 'tar';\nimport fs from 'fs';\nimport url from 'url';\nimport got, {Response} from 'got';\nimport {IncomingHttpHeaders} from 'http';\nimport {ImportMap, RESOURCE_CACHE, HAS_CDN_HASH_REGEX} from './util';\n\nexport {rollupPluginSkypack} from './rollup-plugin-remote-cdn';\nexport const SKYPACK_ORIGIN = 'https://cdn.skypack.dev';\n\nfunction parseRawPackageImport(spec: string): [string, string | null] {\n const impParts = spec.split('/');\n if (spec.startsWith('@')) {\n const [scope, name, ...rest] = impParts;\n return [`${scope}/${name}`, rest.join('/') || null];\n }\n const [name, ...rest] = impParts;\n return [name, rest.join('/') || null];\n}\n\nexport class SkypackSDK {\n origin: string;\n\n constructor(options: {origin?: string} = {}) {\n this.origin = options.origin || SKYPACK_ORIGIN;\n }\n\n async generateImportMap(\n webDependencies: Record,\n inheritFromImportMap?: ImportMap,\n ): Promise {\n const newLockfile: ImportMap = inheritFromImportMap\n ? {imports: {...inheritFromImportMap.imports}}\n : {imports: {}};\n await Promise.all(\n Object.entries(webDependencies).map(async ([packageName, packageSemver]) => {\n if (packageSemver === null) {\n delete newLockfile.imports[packageName];\n delete newLockfile.imports[packageName + '/'];\n return;\n }\n const lookupResponse = await this.lookupBySpecifier(packageName, packageSemver);\n if (lookupResponse.error) {\n throw lookupResponse.error;\n }\n if (lookupResponse.pinnedUrl) {\n let keepGoing = true;\n const deepPinnedUrlParts = lookupResponse.pinnedUrl.split('/');\n // TODO: Get ?meta support to get this info via JSON instead of header manipulation\n deepPinnedUrlParts.shift(); // remove \"\"\n deepPinnedUrlParts.shift(); // remove \"pin\"\n\n while (keepGoing) {\n const investigate = deepPinnedUrlParts.pop()!;\n if (HAS_CDN_HASH_REGEX.test(investigate)) {\n keepGoing = false;\n deepPinnedUrlParts.push(investigate);\n }\n }\n newLockfile.imports[packageName] = this.origin + '/' + deepPinnedUrlParts.join('/');\n newLockfile.imports[packageName + '/'] =\n this.origin + '/' + deepPinnedUrlParts.join('/') + '/';\n }\n }),\n );\n const newLockfileSorted = Object.keys(newLockfile.imports).sort((a, b) => {\n // We want 'xxx/' to come after 'xxx', so we convert it to a space (the character with the highest sort order)\n // See: http://support.ecisolutions.com/doc-ddms/help/reportsmenu/ascii_sort_order_chart.htm\n return a.replace(/\\/$/, ' ').localeCompare(b.replace(/\\/$/, ' '));\n });\n return {\n imports: newLockfileSorted.reduce((prev, k) => {\n prev[k] = newLockfile.imports[k];\n return prev;\n }, {}),\n };\n }\n\n async fetch(\n resourceUrl: string,\n userAgent?: string,\n ): Promise<{\n body: Buffer;\n headers: IncomingHttpHeaders;\n statusCode: number;\n isCached: boolean;\n isStale: boolean;\n }> {\n if (!resourceUrl.startsWith(this.origin)) {\n resourceUrl = this.origin + resourceUrl;\n }\n\n const cachedResult = await cacache.get(RESOURCE_CACHE, resourceUrl).catch(() => null);\n if (cachedResult) {\n const cachedResultMetadata = cachedResult.metadata as ResourceCacheMetadata;\n const freshUntil = new Date(cachedResult.metadata.freshUntil);\n if (freshUntil >= new Date()) {\n return {\n isCached: true,\n isStale: false,\n body: cachedResult.data,\n headers: cachedResultMetadata.headers,\n statusCode: cachedResultMetadata.statusCode,\n };\n }\n }\n\n let freshResult: Response;\n try {\n freshResult = await got(resourceUrl, {\n headers: {'user-agent': userAgent || `skypack/v0.0.1`},\n throwHttpErrors: false,\n responseType: 'buffer',\n });\n } catch (err) {\n if (cachedResult) {\n const cachedResultMetadata = cachedResult.metadata as ResourceCacheMetadata;\n return {\n isCached: true,\n isStale: true,\n body: cachedResult.data,\n headers: cachedResultMetadata.headers,\n statusCode: cachedResultMetadata.statusCode,\n };\n }\n throw err;\n }\n\n const cacheUntilMatch = freshResult.headers['cache-control']?.match(/max-age=(\\d+)/);\n if (cacheUntilMatch) {\n var freshUntil = new Date();\n freshUntil.setSeconds(freshUntil.getSeconds() + parseInt(cacheUntilMatch[1]));\n // no need to await, since we `.catch()` to swallow any errors.\n cacache\n .put(RESOURCE_CACHE, resourceUrl, freshResult.body, {\n metadata: {\n headers: freshResult.headers,\n statusCode: freshResult.statusCode,\n freshUntil: freshUntil.toUTCString(),\n } as ResourceCacheMetadata,\n })\n .catch(() => null);\n }\n\n return {\n body: freshResult.body,\n headers: freshResult.headers,\n statusCode: freshResult.statusCode,\n isCached: false,\n isStale: false,\n };\n }\n\n async buildNewPackage(\n spec: string,\n semverString?: string,\n userAgent?: string,\n ): Promise {\n const [packageName, packagePath] = parseRawPackageImport(spec);\n const lookupUrl =\n `/new/${packageName}` +\n (semverString ? `@${semverString}` : ``) +\n (packagePath ? `/${packagePath}` : ``);\n try {\n const {statusCode} = await this.fetch(lookupUrl, userAgent);\n return {\n error: null,\n success: statusCode !== 500,\n };\n } catch (err) {\n return {error: err, success: false};\n }\n }\n\n async lookupBySpecifier(\n spec: string,\n semverString?: string,\n qs?: string,\n userAgent?: string,\n ): Promise {\n const [packageName, packagePath] = parseRawPackageImport(spec);\n const lookupUrl =\n `/${packageName}` +\n (semverString ? `@${semverString}` : ``) +\n (packagePath ? `/${packagePath}` : ``) +\n (qs ? `?${qs}` : ``);\n try {\n const {body, statusCode, headers, isCached, isStale} = await this.fetch(lookupUrl, userAgent);\n if (statusCode !== 200) {\n return {error: new Error(body.toString())};\n }\n return {\n error: null,\n body,\n isCached,\n isStale,\n importStatus: headers['x-import-status'] as string,\n importUrl: headers['x-import-url'] as string,\n pinnedUrl: headers['x-pinned-url'] as string | undefined,\n typesUrl: headers['x-typescript-types'] as string | undefined,\n };\n } catch (err) {\n return {error: err};\n }\n }\n\n async installTypes(spec: string, semverString?: string, dir?: string) {\n dir = dir || path.join(process.cwd(), '.types');\n const lookupResult = await this.lookupBySpecifier(spec, semverString, 'dts');\n if (lookupResult.error) {\n throw lookupResult.error;\n }\n if (!lookupResult.typesUrl) {\n throw new Error(`Skypack CDN: No types found \"${spec}\"`);\n }\n\n const typesTarballUrl = lookupResult.typesUrl.replace(/(mode=types.*?)\\/.*/, '$1/all.tgz');\n\n await mkdirp(dir);\n const tempDir = await cacache.tmp.mkdir(RESOURCE_CACHE);\n\n let tarballContents: Buffer;\n const cachedTarball = await cacache\n .get(RESOURCE_CACHE, typesTarballUrl)\n .catch((/* ignore */) => null);\n if (cachedTarball) {\n tarballContents = cachedTarball.data;\n } else {\n const tarballResponse = await this.fetch(typesTarballUrl);\n if (tarballResponse.statusCode !== 200) {\n throw new Error(tarballResponse.body.toString());\n }\n tarballContents = tarballResponse.body as any as Buffer;\n await cacache.put(RESOURCE_CACHE, typesTarballUrl, tarballContents);\n }\n\n const typesUrlParts = url.parse(typesTarballUrl).pathname!.split('/');\n const typesPackageName = url.parse(typesTarballUrl).pathname!.startsWith('/-/@')\n ? typesUrlParts[2] + '/' + typesUrlParts[3].split('@')[0]\n : typesUrlParts[2].split('@')[0];\n const typesPackageTarLoc = path.join(tempDir, `${typesPackageName}.tgz`);\n if (typesPackageName.includes('/')) {\n await mkdirp(path.dirname(typesPackageTarLoc));\n }\n fs.writeFileSync(typesPackageTarLoc, tarballContents);\n const typesPackageLoc = path.join(dir, typesPackageName);\n await mkdirp(typesPackageLoc);\n await tar.x({\n file: typesPackageTarLoc,\n cwd: typesPackageLoc,\n });\n }\n}\n\ninterface ResourceCacheMetadata {\n headers: IncomingHttpHeaders;\n statusCode: number;\n freshUntil: string;\n}\n\nexport type BuildNewPackageResponse =\n | {error: Error; success: false}\n | {\n error: null;\n success: boolean;\n };\n\nexport type LookupBySpecifierResponse =\n | {error: Error}\n | {\n error: null;\n body: Buffer;\n isCached: boolean;\n isStale: boolean;\n importStatus: string;\n importUrl: string;\n pinnedUrl: string | undefined;\n typesUrl: string | undefined;\n };\n\nexport async function clearCache() {\n return cacache.rm.all(RESOURCE_CACHE);\n}\n" }, { "path": "skypack/src/rollup-plugin-remote-cdn.ts", "content": "import cacache from 'cacache';\nimport {Plugin, ResolvedId} from 'rollup';\nimport {SkypackSDK} from './index';\nimport {AbstractLogger, HAS_CDN_HASH_REGEX, RESOURCE_CACHE} from './util';\n\n/**\n * rollup-plugin-remote-cdn\n *\n * Load import URLs from a remote CDN, sitting behind a local cache. The local\n * cache acts as a go-between for the resolve & load step: when we get back a\n * successful CDN resolution, we save the file to the local cache and then tell\n * rollup that it's safe to load from the cache in the `load()` hook.\n */\nexport function rollupPluginSkypack({sdk, logger}: {sdk: SkypackSDK; logger: AbstractLogger}) {\n const CACHED_FILE_ID_PREFIX = 'remote-pkg-cache:';\n\n return {\n name: 'snowpack:rollup-plugin-remote-cdn',\n async resolveId(source: string, importer) {\n let cacheKey: string;\n if (source.startsWith(sdk.origin)) {\n cacheKey = source;\n } else if (source.startsWith('/-/')) {\n cacheKey = sdk.origin + source;\n } else if (source.startsWith('/pin/')) {\n cacheKey = sdk.origin + source;\n } else {\n return null;\n }\n\n // If the source path is a CDN path including a hash, it's assumed the\n // file will never change and it is safe to pull from our local cache\n // without a network request.\n logger.debug(`resolve ${cacheKey}`, {name: 'install:remote'});\n if (HAS_CDN_HASH_REGEX.test(cacheKey)) {\n const cachedResult = await cacache.get\n .info(RESOURCE_CACHE, cacheKey)\n .catch((/* ignore */) => null);\n if (cachedResult) {\n return CACHED_FILE_ID_PREFIX + cacheKey;\n }\n }\n\n // Otherwise, make the remote request and cache the file on success.\n const {statusCode} = await sdk.fetch(cacheKey);\n if (statusCode === 200) {\n return CACHED_FILE_ID_PREFIX + cacheKey;\n }\n\n // If lookup failed, skip this plugin and resolve the import locally instead.\n // TODO: Log that this has happened (if some sort of verbose mode is enabled).\n const packageName = cacheKey\n .substring(sdk.origin.length)\n .replace('/-/', '')\n .replace('/pin/', '')\n .split('@')[0];\n return this.resolve(packageName, importer!, {skipSelf: true}).then((resolved) => {\n let finalResult = resolved;\n if (!finalResult) {\n finalResult = {id: packageName} as any as ResolvedId;\n }\n return finalResult;\n });\n },\n async load(id: string) {\n if (!id.startsWith(CACHED_FILE_ID_PREFIX)) {\n return null;\n }\n const cacheKey = id.substring(CACHED_FILE_ID_PREFIX.length);\n logger.debug(`load ${cacheKey}`, {name: 'install:remote'});\n const {body} = await sdk.fetch(cacheKey);\n return body.toString();\n },\n } as Plugin;\n}\n" }, { "path": "skypack/src/util.ts", "content": "import globalCacheDir from 'cachedir';\nimport etag from 'etag';\nimport findUp from 'find-up';\nimport fs from 'fs';\nimport mkdirp from 'mkdirp';\nimport path from 'path';\n\nexport interface AbstractLogger {\n debug: (...args: any[]) => void;\n log: (...args: any[]) => void;\n warn: (...args: any[]) => void;\n error: (...args: any[]) => void;\n}\nexport interface ImportMap {\n imports: {[packageName: string]: string};\n}\n\nexport const GLOBAL_CACHE_DIR = globalCacheDir('skypack');\nexport const RESOURCE_CACHE = path.join(GLOBAL_CACHE_DIR, 'pkg-cache-3.0');\nexport const HAS_CDN_HASH_REGEX = /\\-[a-zA-Z0-9]{16,}/;\n\n// A note on cache naming/versioning: We currently version our global caches\n// with the version of the last breaking change. This allows us to re-use the\n// same cache across versions until something in the data structure changes.\n// At that point, bump the version in the cache name to create a new unique\n// cache name.\nexport const BUILD_CACHE = path.join(GLOBAL_CACHE_DIR, 'build-cache-2.7');\n\nconst LOCKFILE_HASH_FILE = '.hash';\n\n// NOTE(fks): Must match empty script elements to work properly.\nexport const HTML_JS_REGEX = /()(.*?)<\\/script>/gms;\nexport const CSS_REGEX = /@import\\s*['\"](.*)['\"];/gs;\nexport const SVELTE_VUE_REGEX = /(]*>)(.*?)<\\/script>/gms;\n\nexport const URL_HAS_PROTOCOL_REGEX = /^(\\w+:)?\\/\\//;\n\nconst UTF8_FORMATS = ['.css', '.html', '.js', '.map', '.mjs', '.json', '.svg', '.txt', '.xml'];\nexport function getEncodingType(ext: string): 'utf-8' | undefined {\n return UTF8_FORMATS.includes(ext) ? 'utf-8' : undefined;\n}\n\nexport async function readLockfile(cwd: string): Promise {\n try {\n var lockfileContents = fs.readFileSync(path.join(cwd, 'snowpack.lock.json'), {\n encoding: 'utf-8',\n });\n } catch (err) {\n // no lockfile found, ignore and continue\n return null;\n }\n // If this fails, we actually do want to alert the user by throwing\n return JSON.parse(lockfileContents);\n}\n\nexport async function writeLockfile(loc: string, importMap: ImportMap): Promise {\n const sortedImportMap: ImportMap = {imports: {}};\n for (const key of Object.keys(importMap.imports).sort()) {\n sortedImportMap.imports[key] = importMap.imports[key];\n }\n fs.writeFileSync(loc, JSON.stringify(sortedImportMap, undefined, 2), {encoding: 'utf-8'});\n}\n\nexport function isTruthy(item: T | false | null | undefined): item is T {\n return Boolean(item);\n}\n\n/** Get the package name + an entrypoint within that package (if given). */\nexport function parsePackageImportSpecifier(imp: string): [string, string | null] {\n const impParts = imp.split('/');\n if (imp.startsWith('@')) {\n const [scope, name, ...rest] = impParts;\n return [`${scope}/${name}`, rest.join('/') || null];\n }\n const [name, ...rest] = impParts;\n return [name, rest.join('/') || null];\n}\n\n/**\n * Given a package name, look for that package's package.json manifest.\n * Return both the manifest location (if believed to exist) and the\n * manifest itself (if found).\n *\n * NOTE: You used to be able to require() a package.json file directly,\n * but now with export map support in Node v13 that's no longer possible.\n */\nexport function resolveDependencyManifest(dep: string, cwd: string): [string | null, any | null] {\n // Attempt #1: Resolve the dependency manifest normally. This works for most\n // packages, but fails when the package defines an export map that doesn't\n // include a package.json. If we detect that to be the reason for failure,\n // move on to our custom implementation.\n try {\n const depManifest = require.resolve(`${dep}/package.json`, {paths: [cwd]});\n return [depManifest, require(depManifest)];\n } catch (err) {\n // if its an export map issue, move on to our manual resolver.\n if (err.code !== 'ERR_PACKAGE_PATH_NOT_EXPORTED') {\n return [null, null];\n }\n }\n\n // Attempt #2: Resolve the dependency manifest manually. This involves resolving\n // the dep itself to find the entrypoint file, and then haphazardly replacing the\n // file path within the package with a \"./package.json\" instead. It's not as\n // thorough as Attempt #1, but it should work well until export maps become more\n // established & move out of experimental mode.\n let result = [null, null] as [string | null, any | null];\n try {\n const fullPath = require.resolve(dep, {paths: [cwd]});\n // Strip everything after the package name to get the package root path\n // NOTE: This find-replace is very gross, replace with something like upath.\n const searchPath = `${path.sep}node_modules${path.sep}${dep.replace('/', path.sep)}`;\n const indexOfSearch = fullPath.lastIndexOf(searchPath);\n if (indexOfSearch >= 0) {\n const manifestPath =\n fullPath.substring(0, indexOfSearch + searchPath.length + 1) + 'package.json';\n result[0] = manifestPath;\n const manifestStr = fs.readFileSync(manifestPath, {encoding: 'utf-8'});\n result[1] = JSON.parse(manifestStr);\n }\n } catch (err) {\n // ignore\n } finally {\n return result;\n }\n}\n\n/**\n * If Rollup erred parsing a particular file, show suggestions based on its\n * file extension (note: lowercase is fine).\n */\nexport const MISSING_PLUGIN_SUGGESTIONS: {[ext: string]: string} = {\n '.svelte':\n 'Try installing rollup-plugin-svelte and adding it to Snowpack (https://www.snowpack.dev/tutorials/svelte)',\n '.vue':\n 'Try installing rollup-plugin-vue and adding it to Snowpack (https://www.snowpack.dev/guides/vue)',\n};\n\nexport async function checkLockfileHash(dir: string) {\n const lockfileLoc = await findUp(['package-lock.json', 'yarn.lock']);\n if (!lockfileLoc) {\n return true;\n }\n const hashLoc = path.join(dir, LOCKFILE_HASH_FILE);\n const newLockHash = etag(await fs.promises.readFile(lockfileLoc, 'utf-8'));\n const oldLockHash = await fs.promises.readFile(hashLoc, 'utf-8').catch(() => '');\n return newLockHash === oldLockHash;\n}\n\nexport async function updateLockfileHash(dir: string) {\n const lockfileLoc = await findUp(['package-lock.json', 'yarn.lock']);\n if (!lockfileLoc) {\n return;\n }\n const hashLoc = path.join(dir, LOCKFILE_HASH_FILE);\n const newLockHash = etag(await fs.promises.readFile(lockfileLoc));\n await mkdirp(path.dirname(hashLoc));\n await fs.promises.writeFile(hashLoc, newLockHash);\n}\n\n/**\n * For the given import specifier, return an alias entry if one is matched.\n */\nexport function findMatchingAliasEntry(\n alias: Record,\n spec: string,\n): {from: string; to: string; type: 'package' | 'path'} | undefined {\n // Only match bare module specifiers. relative and absolute imports should not match\n if (\n spec === '.' ||\n spec === '..' ||\n spec.startsWith('./') ||\n spec.startsWith('../') ||\n spec.startsWith('/') ||\n spec.startsWith('http://') ||\n spec.startsWith('https://')\n ) {\n return undefined;\n }\n\n for (const [from, to] of Object.entries(alias)) {\n let foundType: 'package' | 'path' = isPackageAliasEntry(to) ? 'package' : 'path';\n const isExactMatch = spec === removeTrailingSlash(from);\n const isDeepMatch = spec.startsWith(addTrailingSlash(from));\n if (isExactMatch || isDeepMatch) {\n return {\n from,\n to,\n type: foundType,\n };\n }\n }\n}\n\n/**\n * For the given import specifier, return an alias entry if one is matched.\n */\nexport function isPackageAliasEntry(val: string): boolean {\n return !path.isAbsolute(val);\n}\n\n/** Get full extensions of files */\nexport function getExt(fileName: string) {\n return {\n /** base extension (e.g. `.js`) */\n baseExt: path.extname(fileName).toLocaleLowerCase(),\n /** full extension, if applicable (e.g. `.proxy.js`) */\n expandedExt: path.basename(fileName).replace(/[^.]+/, '').toLocaleLowerCase(),\n };\n}\n\n/** Replace file extensions */\nexport function replaceExt(fileName: string, oldExt: string, newExt: string): string {\n const extToReplace = new RegExp(`\\\\${oldExt}$`, 'i');\n return fileName.replace(extToReplace, newExt);\n}\n\n/**\n * Sanitizes npm packages that end in .js (e.g `tippy.js` -> `tippyjs`).\n * This is necessary because Snowpack can’t create both a file and directory\n * that end in .js.\n */\nexport function sanitizePackageName(filepath: string): string {\n const dirs = filepath.split('/');\n const file = dirs.pop() as string;\n return [...dirs.map((path) => path.replace(/\\.js$/i, 'js')), file].join('/');\n}\n\n// Source Map spec v3: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.lmz475t4mvbx\n\n/** CSS sourceMappingURL */\nexport function cssSourceMappingURL(code: string, sourceMappingURL: string) {\n return code + `/*# sourceMappingURL=${sourceMappingURL} */`;\n}\n\n/** JS sourceMappingURL */\nexport function jsSourceMappingURL(code: string, sourceMappingURL: string) {\n return code.replace(/\\n*$/, '') + `\\n//# sourceMappingURL=${sourceMappingURL}\\n`; // strip ending lines & append source map (with linebreaks for safety)\n}\n\nexport function removeLeadingSlash(path: string) {\n return path.replace(/^[/\\\\]+/, '');\n}\n\nexport function removeTrailingSlash(path: string) {\n return path.replace(/[/\\\\]+$/, '');\n}\n\nexport function addLeadingSlash(path: string) {\n return path.replace(/^\\/?/, '/');\n}\n\nexport function addTrailingSlash(path: string) {\n return path.replace(/\\/?$/, '/');\n}\n" }, { "path": "skypack/tsconfig.json", "content": "{\n \"include\": [\"src\"],\n \"compilerOptions\": {\n \"outDir\": \"lib\",\n \"module\": \"commonjs\",\n \"target\": \"es2018\",\n \"moduleResolution\": \"node\",\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"strict\": true,\n \"sourceMap\": true,\n \"noImplicitAny\": false,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"skipLibCheck\": true\n }\n}\n" }, { "path": "snowpack/.gitignore", "content": "lib\nnode_modules\nvendor/generated/\nvendor/types/\n" }, { "path": "snowpack/.npmignore", "content": "src\n\n" }, { "path": "snowpack/CHANGELOG.md", "content": "# snowpack\n\n## 3.8.8\n\n### Patch Changes\n\n- 57ee22fc: Fix for dynamic import scanning\n\n## 3.8.7\n\n### Patch Changes\n\n- d72dc7df: Bugfix: dev server hanging on circular dependencies\n- c6146e61: Fixes a ghost dependency on 'magic-string'\n\n## 3.8.6\n\n### Patch Changes\n\n- 0e9829ce: Fixes a regression caused by #3597\n\n## 3.8.5\n\n### Patch Changes\n\n- c103f4d4: Downgrade skypack versions\n\n## 3.8.4\n\n### Patch Changes\n\n- 47d0792f: Fix using assets from linked packages\n- 57f545cc: Fix issue where multiple onFileChange handlers overwrote each other\n- Updated dependencies [5e84cdd8]\n - skypack@0.3.3\n\n## 3.8.3\n\n### Patch Changes\n\n- 91da2b6a: Fix a small SSR bug with default exports\n\n## 3.8.2\n\n### Patch Changes\n\n- c4a55550: Fixes scanning of dynamic imports on packages\n\n## 3.8.1\n\n### Patch Changes\n\n- a1f56ef7: Remove type attribute from HMR script in dev server\n- 95d4309a: Remove exports field from package.json\n- Updated dependencies [9b1472f6]\n - esinstall@1.1.7\n\n## 3.8.0\n\n### Minor Changes\n\n- a3eadde7: Ship unbundled ESM & CJS Snowpack builds\n\n### Patch Changes\n\n- f4e0bc42: Fixes regression with modules executing more than once\n- ab4ddec3: Fix dot folder dev response\n\n## 3.7.1\n\n### Patch Changes\n\n- a4768503: Fix CSS Modules + baseUrl (#3515) \n\n## 3.7.0\n\n### Minor Changes\n\n- 4ab4f07e: configure if dotfiles are included in build (#3455)\n\n### Patch Changes\n\n- 101dc42f: Pass `external` modules through to `esbuild`. (#3499) \n- fe288ca4: Respect trailing slash in dev server (#3509) \n- 7939563b: Don’t scan imports from non-JS files (#3495) \n- e449b7b8: [ci] yarn format \n- 6506cff2: Chore: update deps (#3494) \n- 30b7ef45: Ensure remote package fetches always use the configured origin (#3397) \n\n## 3.6.2\n\n### Patch Changes\n\n- 33cd5648: Pass real filepath to transform plugins (#3483) \n\n## 3.6.1\n\n### Patch Changes\n\n- 110043e2: Check externals before resolving entrypoint (#3479) \n\n## 3.6.0\n\n### Minor Changes\n\n- ffee2c57: allow configuring loader (#3377) \n\n### Patch Changes\n\n- fb7eaaa4: Allow `external` CommonJS modules to be imported properly in Node (#3473) \n- 8cff0336: Make import.meta.url be the file URL in SSR (#3472) \n- 29e609aa: [#3188] Add ant-design/icons to NEVER_PEER_PACKAGES (#3443) \n- ded85e8a: Minor optimization on resolving path starts with '.' (#3361) \n- b8c76b00: Fix websocket proxying (#3225) \n\n## 3.5.9\n\n### Patch Changes\n\n- 343274e2: [ci] yarn format \n- d93d01ec: Fix race condition reading existing import-map.json files (#3453) \n\n## 3.5.8\n\n### Patch Changes\n\n- 611dac9a: [ci] yarn format \n- 7a1ae463: Handle runtime invalidation for proxy files (#3449) \n\n## 3.5.7\n\n### Patch Changes\n\n- 6e7f137b: [ci] yarn format \n- dc44eb75: Disconnect the HMR server when snowpack is shutdown (#3439) \n\n## 3.5.6\n\n### Patch Changes\n\n- f0534bb7: [ci] yarn format \n- 6ef3695d: Allow Snowpack to scan .astro files for imports (#3423) \n\n## 3.5.5\n\n### Patch Changes\n\n- d61fb0a8: [ci] yarn format \n- aed6a8fd: Modules marked as `external` should always be treated as external (#3408) \n- cd6ec781: [ci] yarn format \n- 64b377e3: Correctly handle subpackage imports marked as external (#3407) \n\n## 3.5.4\n\n### Patch Changes\n\n- 78d6ecf1: Fix: remove external override (#3401) \n\n## 3.5.3\n\n### Patch Changes\n\n- c659b7c3: [ci] yarn format \n- b375b8a3: Fix `external` behavior for local package source and SSR. (#3399) \n\n## 3.5.2\n\n### Patch Changes\n\n- 0f65cdf2: fix: construct NotFoundError before throwing (#3380) \n\n## 3.5.1\n\n### Patch Changes\n\n- 398ad9f1: Allow clean shutdown of dev server (#3349) \n\n## 3.5.0\n\n### Minor Changes\n\n- 84e39f8a: Enable cache directory path to be set explicitly (#3064) \n\n### Patch Changes\n\n- 91bb53c0: Don’t cache .css files for Tailwind projects (#3326) \n- 48f9c524: [ci] yarn format \n- 45e2a22b: Avoid uncaught exception when file is deleted (#3313) \n- e321bbee: resolve `.css` ESM imports to `.css.{js,ts}` if there's no `.css` file on disk (#3315) \n\n## 3.4.0\n\n### Minor Changes\n\n- 4403595e: Sourcemaps (#3271) \n\n### Patch Changes\n\n- fa7a5e3f: Typo (#3291) \n- 680272eb: Fix appending port 80 to url sometimes breaks hmr connectivity #3268 (#3269) \n- dc60a025: chore: update create-snowpack-app template deps (#3233) \n\n## 3.3.7\n\n### Patch Changes\n\n- 5e34b829: Fix missing build files from load plugins (#3230) \n\n## 3.3.6\n\n### Patch Changes\n\n- 9ad97afe: fix: CSS Modules exporting {} when no mount config (#3229) \n- ff1eaf66: [ci] yarn format \n- 0707fd63: fix: add mounted node_modules to ignore list (#3227) \n- f53e1833: chore: bump Snowpack version (#3228) \n- 3701201b: Support packageOptions.rollup.plugins (#3123) \n- cea40a05: Removes console log (#3204) \n- 3af6e064: [ci] yarn format \n- 1902f5c2: Correctly resolve preload urls from build manifest (#3201) \n\n## 3.3.4\n\n### Patch Changes\n\n- 8f044398: Restore proxy SSR rewriting for CSS Modules proxy (#3191) \n- 870b34c2: Take the result of the first plugin (#3190) \n- 758bdb27: Fix Sass + CSS Modules (#3186) \n- 5e58fc64: fix: Race condition in symlink directory read (#3181) \n- 28ea1f86: [ci] yarn format \n- e6861227: Support mounting within node_modules directory (#3134)\n- a089d86a: Test fixtures continued (#3100) \n\n## 3.3.3\n\n### Patch Changes\n\n- 1f82543d: Fix publicPath option in esbuild (#3175) \n- 83294444: Add CSS Modules in Build SSR (#3170) \n\n## 3.3.2\n\n### Patch Changes\n\n- dfd200a8: [ci] yarn format \n- fa96e618: Use a separate PackageSource for each config (#3164) \n\n## 3.3.1\n\n### Patch Changes\n\n- 35e38b6c: [ci] yarn format \n- a3951e31: Refactor the build to improve reusability (#3157) \n\n## 3.3.0\n\n### Minor Changes\n\n- deacbcd0: Streaming Package Imports v2 (#3028)\n- d9956f73: add explicit \"mode\" config (#3135)\n\n### Patch Changes\n\n- 25ed2885: [ci] yarn format\n- 6a15f872: Fix env.js always having MODE and NODE_ENV as development (#3132) \n- 63e30d32: Revert \"improve node_modules excluding\"\n- 3b3402bb: improve node_modules excluding\n- 48618f05: fix: remove tailing slash in import specifier as esinstall do (#3102) \n- b0481aa8: Honor devOptions.hmr option, fixes #3105 (#3114) \n- 42da07e4: fix: sourcemap config copy paste typo in config.ts in pr #2793 (#3115) \n- 9eb50368: update deps (#2928)\n- 18b9f09b: Simplify test suite (#2858)\n\n## 3.2.2\n\n### Patch Changes\n\n- a643af33: Detect Sass partial changes in dev (#3060) \n\n## 3.2.1\n\n### Patch Changes\n\n- 0663c1ac: fix HMR issue\n\n## 3.2.0\n\n### Minor Changes\n\n- 598f05a7: Feat: import.meta.glob and import.meta.globEager support (#2881) \n\n### Patch Changes\n\n- 56c5a231: fix typo in changelog\n- c3971f10: add snowpack release notes\n- 40f02cf4: reorder changelog entries\n- a25f407d: Update CHANGELOG.md\n- c9dacc29: Update CHANGELOG.md\n- a676d665: fix website package.json\n- 68df7237: support remote import if specifier has version in it\n- 16f58b99: [ci] yarn format\n- d3859c8d: fix lint\n- 57a65bb8: [ci] yarn format\n- 685f2200: add docs, cleanup handler\n- 5fe83d4d: [ci] yarn format\n- 844cbcbe: routes support upgrade event (#2988) \n- a17dd97c: Fix: Only import directory/index.js as a fallback mechanism (#3018) \n- e340dea9: Do not exclude folders starting with a dot (#2962) \n- fc6c1417: Improve CSS error message (#2973) \n- b41b14b0: Await promises in local source (#2972) \n\n## 3.1.2\n\n### Patch Changes\n\n- e50cb745: fix better handling for unscannable cjs packages\n- 1232e252: add back cjs-cjs compat from an earlier pr (#2934)\n\n## 3.1.1\n\n### Patch Changes\n\n- f53498ba: Fix preact regression (#2926)\n\n## 3.1.0\n\n### Minor Changes\n\n- bea1c56c: Simplify. cleanup, enhance snowpack internals (#2707)\n- 3ba7fede: feat: support specifying sourcemap type in config.optimize.sourcemap (#2793) \n- aa953cca: refactor: update to esbuild 0.9 (#2886) \n\n### Patch Changes\n\n- 872bfc74: [ci] yarn format \n- c8aee80f: Support compound output file extensions (#2593) \n- 8dbd6af3: [ci] yarn format \n- 88d3a9a9: handle legacy package urls (#2915)\n- 094b7a12: Add `openUrl` option to config (#2902) \n- aba028c4: [ci] yarn format \n- 4de244ef: Add support for custom TLS key files via devOptions.secure = { cert, key } (#2356) \n- da049ce4: [ci] yarn format \n- b569d35b: add getUrlForPackage utility (#2913) \n- d826a60c: Remove enumerability of converted ESM in SSR (#2920) \n- 941110cd: fix esbuild 0.9.x breaking change (#2914)\n- 35289b4b: improve import scanner perf (#2900)\n- a800bf3d: finalize picomatch support (#2912)\n- d33076a3: Speed up exclusions with picomatch (#2904) \n- 84e034cc: [ci] yarn format\n- f35bc421: fix debug log\n- 81fd028e: [ci] yarn format \n- 7c8236e8: Add config.env property to support non-prefixed env variables (#2390) \n- 337cfd7a: only target actual imports (Regex Fix) (#2817) \n- cd4f344b: [ci] yarn format \n- 0fce7efd: Support buildOptions.jsxInject in config (#2884) \n- dc503c84: speed up mount scanning with fdir (#2876)\n- e8dead62: improve handling of \".\" & \"..\" imports (#2877)\n- a178f286: run transform on all dependencies (#2878)\n- 27321b83: collect known imports by package and version\n- 3a6ad53a: update (#2363) \n- b2738967: improve cjs<>esm conversion of named exports (#2859)\n- 03ceb62d: Resolve missing extensions (#2839) \n- 28689888: [ci] yarn format\n- 689f58e9: SSR fixes (#2853) \n- 3549e43c: Fix Mac OS devOptions.open bug (#2798) \n- 21461ce5: Update @snowpack/plugin-postcss API (#2854) \n- 9fbe93fb: fix: revert snowpack to v3.0.13 for CI tests (#2851) \n- 339d3cf1: [ci] yarn format \n- ea4ebd17: Proper loading of ESM config files (#2834) \n- 8f022949: 3.1.0\n- 9d987e4a: fix watching logic and dashboard output\n- 15428ae4: [ci] yarn format\n- 43677e89: Add import support for .interface files, alongside .svelte, and .vue. (#2380) \n- 3d457a8e: fix(ssr-loader): support css modules (#2528) \n- 23d7b450: fix: recognise dot as a valid relative import (#2662) \n- 582808c3: [ci] yarn format\n- deabcb0e: don't escape utf-8 characters by cheerio and esbuild (#2755) \n- d35d50b4: [ci] yarn format\n- b756b49d: Fix snowpack add/rm for npm packages with @ prefix (#2665) \n- 58df86d4: add a tip if someone uses process.env\n- fdda447d: dont match meta paths to routes\n\n## 3.0.13\n\n### Patch Changes\n\n- 74d0be10: add resolve for bundled package\n\n## 3.0.12\n\n### Patch Changes\n\n- d3b6f769: Support packages that use export maps but have no main (#2659) \n- 2ae933be: add true logger error message\n- 0de849ee: Catch WebSocket message parse errors (#2470) \n- da75ff23: remove circular dependencies in util (#2366)\n- bfa32aff: proper default browser support for mac (#2364)\n- 1c44c22d: fix bad url access in import maps, snowpack add\n- 76dca31a: add octet-stream handling\n- 10f3461b: [ci] yarn format\n- 615f13a7: Add isHmrEnabled and isSSR to plugin transform. (#2332) \n- 65008c63: fix: prettier snowpack/src/build dir (#2346) \n- 690d3b1d: update prettier to use explicit formatting\n- f07105a9: Add root level export of clearCache (#2330) \n- 137139b4: [ci] yarn format\n- e0f01181: fix: prettier format (#2316) \n- 0fc858cf: fix bad optimize external filter\n- fb167098: load plugins relative to config root\n- 85ddf618: add JS API docs (#2315)\n- 49b29f97: [ci] yarn format\n\n## 3.0.11\n\n### Patch Changes\n\n- 58a36d4c: fix bad build conditional check\n- 37f7a55d: remove empty build folders from build\n- 6e01eeb5: improve build watch output\n- 137c58b0: fix init file issue\n- e2b74e7b: add fallback deprecation\n- 968720cf: remove rollup from bundle to pass peerDep checks\n- 70d25dad: Resolves #2265 (#2289) \n- 7b38b486: get tests passing\n- e6b618c5: [ci] yarn format\n\n## 3.0.10\n\n### Patch Changes\n\n- 1d071628: cleanup the bundled build before publishing\n- beb3f9a1: stop ignoring postcss in generated bundle\n- 2b797521: [ci] yarn format\n\n## 3.0.9\n\n### Patch Changes\n\n- d26c7733: [ci] yarn format\n\n## 3.0.8\n\n### Patch Changes\n\n- c2124bd7: json fix\n- e040f071: Fix postcss-modules being required as a dependency in projects (#2257) \n- c566aa10: add bundled type support for esinstall and skypack, remove as full deps\n- ecf85d52: move open back to regular dependency\n- b0f7280c: [ci] yarn format\n\n## 3.0.7\n\n### Patch Changes\n\n- 61bd4c3b: [ci] yarn format\n- eb5b366a: cleanup types, release script\n- 20e3ed21: move skypack and esbuild into real dependencies for now\n- e63d70fd: fix direct foo.svelte.css references\n- 01a80448: [ci] yarn format\n\n## 3.0.6\n\n### Patch Changes\n\n- 8f614490: final cleanup before v3 goes out\n- 15d77ea3: cleanup\n" }, { "path": "snowpack/LICENSE", "content": "MIT License\n\nCopyright (c) 2019 Fred K. Schott\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n\n\n\"\"\"\n\nThis license applies to parts of the src/dev.ts file originating from the\nhttps://github.com/lukejacksonn/servor repository:\n\nMIT License\nCopyright (c) 2019 Luke Jackson\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE." }, { "path": "snowpack/README.md", "content": "[![CI](https://github.com/withastro/snowpack/workflows/CI/badge.svg?event=push)](https://github.com/withastro/snowpack/actions)\n\n### What is Snowpack?\n\n**Snowpack is a modern, lightweight toolchain for web application development.** Traditional dev bundlers like webpack or Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This introduces lag between changing a file and seeing those changes reflected in the browser, sometimes as slow as several seconds.\n\nSnowpack solves this problem by serving your application **unbundled in development.** Any time you change a file, Snowpack never rebuilds more than a single file. There's no bundling to speak of, just a few milliseconds of single-file rebuilding and then an instant update in the browser via HMR. We call this new approach **O(1) Build Tooling.** You can read more about it in our [Snowpack 2.0 Release Post.](https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/)\n\nWhen you're ready to deploy your web application to users, you can add back a traditional bundler like Webpack or Parcel. With Snowpack you get bundled & optimized production performance without sacrificing dev speed by adding an unnecessary bundler,\n\n### Key Features\n\n- A dev environment that starts up in **50ms or less.**\n- Changes are reflected [instantly in the browser.](https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/#hot-module-replacement)\n- Integrates your favorite bundler for [production-optimized builds.](https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/#snowpack-build)\n- Out-of-the-box support for [TypeScript, JSX, CSS Modules and more.](https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/#features)\n- Connect your favorite tools with custom [build scripts](https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/#build-scripts) & [third-party plugins.](https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/#build-plugins)\n\n**💁 More info at the official [Snowpack website ➞](https://snowpack.dev)**\n" }, { "path": "snowpack/assets/hmr-client.js", "content": "/**\n * esm-hmr/runtime.ts\n * A client-side implementation of the ESM-HMR spec, for reference.\n */\n\nconst isWindowDefined = typeof window !== 'undefined';\n\nfunction log(...args) {\n console.log('[ESM-HMR]', ...args);\n}\nfunction reload() {\n if (!isWindowDefined) {\n return;\n }\n location.reload(true);\n}\n/** Clear all error overlays from the page */\nfunction clearErrorOverlay() {\n if (!isWindowDefined) {\n return;\n }\n document.querySelectorAll('hmr-error-overlay').forEach((el) => el.remove());\n}\n/** Create an error overlay (if custom element exists on the page). */\nfunction createNewErrorOverlay(data) {\n if (!isWindowDefined) {\n return;\n }\n const HmrErrorOverlay = customElements.get('hmr-error-overlay');\n if (HmrErrorOverlay) {\n const overlay = new HmrErrorOverlay(data);\n clearErrorOverlay();\n document.body.appendChild(overlay);\n }\n}\n\nlet SOCKET_MESSAGE_QUEUE = [];\nfunction _sendSocketMessage(msg) {\n socket.send(JSON.stringify(msg));\n}\nfunction sendSocketMessage(msg) {\n if (socket.readyState !== socket.OPEN) {\n SOCKET_MESSAGE_QUEUE.push(msg);\n } else {\n _sendSocketMessage(msg);\n }\n}\n\nlet socketURL = isWindowDefined && window.HMR_WEBSOCKET_URL;\nif (!socketURL) {\n const socketHost =\n isWindowDefined && window.HMR_WEBSOCKET_PORT && window.HMR_WEBSOCKET_PORT !== 80\n ? `${location.hostname}:${window.HMR_WEBSOCKET_PORT}`\n : location.host;\n socketURL = (location.protocol === 'http:' ? 'ws://' : 'wss://') + socketHost + '/';\n}\n\nconst socket = new WebSocket(socketURL, 'esm-hmr');\nsocket.addEventListener('open', () => {\n SOCKET_MESSAGE_QUEUE.forEach(_sendSocketMessage);\n SOCKET_MESSAGE_QUEUE = [];\n});\nconst REGISTERED_MODULES = {};\nclass HotModuleState {\n constructor(id) {\n this.data = {};\n this.isLocked = false;\n this.isDeclined = false;\n this.isAccepted = false;\n this.acceptCallbacks = [];\n this.disposeCallbacks = [];\n this.id = id;\n }\n lock() {\n this.isLocked = true;\n }\n dispose(callback) {\n this.disposeCallbacks.push(callback);\n }\n invalidate() {\n reload();\n }\n decline() {\n this.isDeclined = true;\n }\n accept(_deps, callback = true) {\n if (this.isLocked) {\n return;\n }\n if (!this.isAccepted) {\n sendSocketMessage({id: this.id, type: 'hotAccept'});\n this.isAccepted = true;\n }\n if (!Array.isArray(_deps)) {\n callback = _deps || callback;\n _deps = [];\n }\n if (callback === true) {\n callback = () => {};\n }\n const deps = _deps.map((dep) => {\n const ext = dep.split('.').pop();\n if (!ext) {\n dep += '.js';\n } else if (ext !== 'js') {\n dep += '.proxy.js';\n }\n return new URL(dep, `${window.location.origin}${this.id}`).pathname;\n });\n this.acceptCallbacks.push({\n deps,\n callback,\n });\n }\n}\nexport function createHotContext(fullUrl) {\n const id = new URL(fullUrl).pathname;\n const existing = REGISTERED_MODULES[id];\n if (existing) {\n existing.lock();\n runModuleDispose(id);\n return existing;\n }\n const state = new HotModuleState(id);\n REGISTERED_MODULES[id] = state;\n return state;\n}\n\n/** Called when any CSS file is loaded. */\nasync function runCssStyleAccept({url: id}) {\n const nonce = Date.now();\n const oldLinkEl =\n document.head.querySelector(`link[data-hmr=\"${id}\"]`) ||\n document.head.querySelector(`link[href=\"${id}\"]`);\n if (!oldLinkEl) {\n return true;\n }\n const linkEl = oldLinkEl.cloneNode(false);\n linkEl.dataset.hmr = id;\n linkEl.type = 'text/css';\n linkEl.rel = 'stylesheet';\n linkEl.href = id + '?mtime=' + nonce;\n linkEl.addEventListener(\n 'load',\n // Once loaded, remove the old link element (with some delay, to avoid FOUC)\n () => setTimeout(() => document.head.removeChild(oldLinkEl), 30),\n false,\n );\n oldLinkEl.parentNode.insertBefore(linkEl, oldLinkEl);\n return true;\n}\n\n/** Called when a new module is loaded, to pass the updated module to the \"active\" module */\nasync function runJsModuleAccept({url: id, bubbled}) {\n const state = REGISTERED_MODULES[id];\n if (!state) {\n return false;\n }\n if (state.isDeclined) {\n return false;\n }\n const acceptCallbacks = state.acceptCallbacks;\n const updateID = Date.now();\n for (const {deps, callback: acceptCallback} of acceptCallbacks) {\n const [module, ...depModules] = await Promise.all([\n import(id + `?mtime=${updateID}`),\n ...deps.map((d) => import(d + `?mtime=${updateID}`)),\n ]);\n acceptCallback({module, bubbled, deps: depModules});\n }\n return true;\n}\n\n/** Called when a new module is loaded, to run cleanup on the old module (if needed) */\nasync function runModuleDispose(id) {\n const state = REGISTERED_MODULES[id];\n if (!state) {\n return false;\n }\n if (state.isDeclined) {\n return false;\n }\n const disposeCallbacks = state.disposeCallbacks;\n state.disposeCallbacks = [];\n state.data = {};\n disposeCallbacks.map((callback) => callback());\n return true;\n}\nsocket.addEventListener('message', ({data: _data}) => {\n if (!_data) {\n return;\n }\n const data = JSON.parse(_data);\n if (data.type === 'reload') {\n log('message: reload');\n reload();\n return;\n }\n if (data.type === 'error') {\n console.error(\n `[ESM-HMR] ${data.fileLoc ? data.fileLoc + '\\n' : ''}`,\n data.title + '\\n' + data.errorMessage,\n );\n createNewErrorOverlay(data);\n return;\n }\n if (data.type === 'update') {\n log('message: update', data);\n (data.url.endsWith('.css') ? runCssStyleAccept(data) : runJsModuleAccept(data))\n .then((ok) => {\n if (ok) {\n clearErrorOverlay();\n } else {\n reload();\n }\n })\n .catch((err) => {\n console.error('[ESM-HMR] Hot Update Error', err);\n // A failed import gives a TypeError, but invalid ESM imports/exports give a SyntaxError.\n // Failed build results already get reported via a better WebSocket update.\n // We only want to report invalid code like a bad import that doesn't exist.\n if (err instanceof SyntaxError) {\n createNewErrorOverlay({\n title: 'Hot Update Error',\n fileLoc: data.url,\n errorMessage: err.message,\n errorStackTrace: err.stack,\n });\n }\n });\n return;\n }\n log('message: unknown', data);\n});\nlog('listening for file changes...');\n\n/** Runtime error reporting: If a runtime error occurs, show it in an overlay. */\nisWindowDefined &&\n window.addEventListener('error', function (event) {\n if (window.snowpackHmrErrorOverlayIgnoreErrors) {\n const ignoreErrors = window.snowpackHmrErrorOverlayIgnoreErrors;\n for (const item of ignoreErrors) {\n if (event.message && event.message.match(item)) {\n console.warn('[ESM-HMR] Hmr Error Overlay Ignored', event.message);\n return;\n }\n }\n }\n // Generate an \"error location\" string\n let fileLoc;\n if (event.filename) {\n fileLoc = event.filename;\n if (event.lineno !== undefined) {\n fileLoc += ` [:${event.lineno}`;\n if (event.colno !== undefined) {\n fileLoc += `:${event.colno}`;\n }\n fileLoc += `]`;\n }\n }\n let errorMessage = event.message;\n if (event.message === 'Uncaught ReferenceError: process is not defined') {\n errorMessage += `\\n(Tip: Node's \"process\" global does not exist in Snowpack. Use \"import.meta.env\" instead of \"process.env\").`;\n }\n createNewErrorOverlay({\n title: 'Unhandled Runtime Error',\n fileLoc,\n errorMessage: errorMessage,\n errorStackTrace: event.error ? event.error.stack : undefined,\n });\n });\n" }, { "path": "snowpack/assets/hmr-error-overlay.js", "content": "/*\nThis license applies to parts of this file originating from the\nhttps://github.com/vercel/next.js repository:\n\nThe MIT License (MIT)\n\nCopyright (c) 2020 Vercel, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n*/\n\n/*\nBackground: This file was copied from the rendered HTML output of the\nnextjs-error-overlay package / component. The source component was authored\nfor React & JSX which we didn't want to add as dependencies, so we grab the\noutput itself here.\n*/\n\nconst ERROR_OVERLAY_TEMPLATE = `\n \n\n
\n \n

Error

Source
\n

\n Loading...\n \n

\n 
Loading...
\n
\n`;\n\nconst template = document.createElement('template');\ntemplate.innerHTML = ERROR_OVERLAY_TEMPLATE;\n\ncustomElements.define(\n 'hmr-error-overlay',\n class HmrErrorOverlay extends HTMLElement {\n constructor({title, errorMessage, fileLoc, errorStackTrace}) {\n super();\n this.title = title;\n this.errorMessage = errorMessage;\n this.fileLoc = fileLoc;\n this.errorStackTrace = errorStackTrace;\n this.sr = this.attachShadow({mode: 'open'});\n this.sr.appendChild(template.content.cloneNode(true));\n this.close = this.close.bind(this);\n }\n\n connectedCallback() {\n this.sr.getElementById('close-button').addEventListener('click', this.close);\n this.sr.querySelector('[data-nextjs-dialog-backdrop]').addEventListener('click', this.close);\n\n this.sr.getElementById('nextjs__container_errors_label').innerText = this.title;\n this.sr.getElementById('nextjs__container_errors_desc').innerText = this.errorMessage;\n if (this.fileLoc) {\n this.sr.getElementById('error-file-loc').innerText = this.fileLoc;\n } else {\n this.sr.getElementById('error-file-loc').innerText = 'No source file.';\n }\n if (this.errorStackTrace) {\n this.sr.querySelector('pre').innerText = this.errorStackTrace;\n } else {\n this.sr.querySelector('pre').style.display = 'none';\n }\n }\n\n disconnectedCallback() {\n this.sr.getElementById('close-button').removeEventListener('click', this.close);\n this.sr\n .querySelector('[data-nextjs-dialog-backdrop]')\n .removeEventListener('click', this.close);\n }\n\n close() {\n this.parentNode.removeChild(this);\n }\n\n _watchEscape(event) {\n if (event.key === 'Escape') {\n this.close();\n }\n }\n },\n);\n" }, { "path": "snowpack/assets/openChrome.appleScript", "content": "(*\nCopyright (c) 2015-present, Facebook, Inc.\n\nThis source code is licensed under the MIT license found in the\nLICENSE file in the root directory of this source tree.\n*)\n\nproperty targetTab: null\nproperty targetTabIndex: -1\nproperty targetWindow: null\n\non run argv\n set theURL to item 1 of argv\n\n tell application \"Chrome\"\n\n if (count every window) = 0 then\n make new window\n end if\n\n -- 1: Looking for tab running debugger\n -- then, Reload debugging tab if found\n -- then return\n set found to my lookupTabWithUrl(theURL)\n if found then\n set targetWindow's active tab index to targetTabIndex\n tell targetTab to reload\n tell targetWindow to activate\n set index of targetWindow to 1\n return\n end if\n\n -- 2: Looking for Empty tab\n -- In case debugging tab was not found\n -- We try to find an empty tab instead\n set found to my lookupTabWithUrl(\"chrome://newtab/\")\n if found then\n set targetWindow's active tab index to targetTabIndex\n set URL of targetTab to theURL\n tell targetWindow to activate\n return\n end if\n\n -- 3: Create new tab\n -- both debugging and empty tab were not found\n -- make a new tab with url\n tell window 1\n activate\n make new tab with properties {URL:theURL}\n end tell\n end tell\nend run\n\n-- Function:\n-- Lookup tab with given url\n-- if found, store tab, index, and window in properties\n-- (properties were declared on top of file)\non lookupTabWithUrl(lookupUrl)\n tell application \"Chrome\"\n -- Find a tab with the given url\n set found to false\n set theTabIndex to -1\n repeat with theWindow in every window\n set theTabIndex to 0\n repeat with theTab in every tab of theWindow\n set theTabIndex to theTabIndex + 1\n if (theTab's URL as string) contains lookupUrl then\n -- assign tab, tab index, and window to properties\n set targetTab to theTab\n set targetTabIndex to theTabIndex\n set targetWindow to theWindow\n set found to true\n exit repeat\n end if\n end repeat\n\n if found then\n exit repeat\n end if\n end repeat\n end tell\n return found\nend lookupTabWithUrl" }, { "path": "snowpack/assets/require-or-import.js", "content": "'use strict';\nconst {pathToFileURL} = require('url');\nconst NATIVE_REQUIRE = eval('require');\nconst NATIVE_IMPORT = (filepath) => import(filepath);\nconst r = require('resolve');\n\n/**\n * A utility function to use Node's native `require` or dynamic `import` to load CJS or ESM files\n * @param {string} filepath\n */\nmodule.exports = async function requireOrImport(filepath, {from = process.cwd()} = {}) {\n return new Promise((resolve, reject) => {\n if (filepath.startsWith('node:')) {\n return NATIVE_IMPORT(filepath).then(\n (mdl) => resolve(mdl),\n (err) => reject(err),\n );\n }\n\n // Resolve path based on `from`\n const resolvedPath = r.sync(filepath, {\n basedir: from,\n });\n try {\n const mdl = NATIVE_REQUIRE(resolvedPath);\n\n // Add a `default` property on a CommonJS export so that it can be accessed from import statements.\n // This is set to enumerable: false to make it hidden(ish) to code.\n if (mdl && !('default' in mdl)) {\n Object.defineProperty(mdl, 'default', {\n configurable: true,\n enumerable: false,\n writable: true,\n value: mdl,\n });\n }\n\n resolve(mdl);\n } catch (e) {\n if (e instanceof SyntaxError && /export|import/.test(e.message)) {\n console.error(\n `Failed to load \"${filepath}\"!\\nESM format is not natively supported in \"node@${process.version}\".\\nPlease use CommonJS or upgrade to an LTS version of node above \"node@12.17.0\".`,\n );\n } else if (e.code === 'ERR_REQUIRE_ESM') {\n const url = pathToFileURL(resolvedPath);\n return NATIVE_IMPORT(url).then(\n (mdl) => resolve(mdl.default ? mdl.default : mdl),\n (err) => reject(err),\n );\n }\n try {\n return NATIVE_IMPORT(pathToFileURL(resolvedPath)).then(\n (mdl) => resolve(mdl.default ? mdl.default : mdl),\n (err) => reject(err),\n );\n } catch (e) {\n reject(e);\n }\n }\n });\n};\n" }, { "path": "snowpack/assets/snowpack-init-file.js", "content": "// Snowpack Configuration File\n// See all supported options: https://www.snowpack.dev/reference/configuration\n\n/** @type {import(\"snowpack\").SnowpackUserConfig } */\nmodule.exports = {\n mount: {\n /* ... */\n },\n plugins: [\n /* ... */\n ],\n packageOptions: {\n /* ... */\n },\n devOptions: {\n /* ... */\n },\n buildOptions: {\n /* ... */\n },\n};\n" }, { "path": "snowpack/index.bin.js", "content": "#!/usr/bin/env node\n'use strict';\n\nconst ver = process.versions.node;\nconst majorVer = parseInt(ver.split('.')[0], 10);\n\nif (majorVer < 10) {\n console.error('Node version ' + ver + ' is not supported, please use Node.js 10.0 or higher.');\n process.exit(1);\n}\n\nconst cli = require('./lib/cjs/index.js');\nconst run = cli.run || cli.cli || cli.default;\nrun(process.argv).catch(function (error) {\n console.error(`\n${error.stack || error.message || error}\n`);\n process.exit(1);\n});\n" }, { "path": "snowpack/package.json", "content": "{\n \"name\": \"snowpack\",\n \"version\": \"3.8.8\",\n \"description\": \"The ESM-powered frontend build tool. Fast, lightweight, unbundled.\",\n \"author\": \"Fred K. Schott \",\n \"license\": \"MIT\",\n \"keywords\": [\n \"bundle\",\n \"build\",\n \"build tool\",\n \"web\",\n \"esm\",\n \"esbuild\",\n \"wasm\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/withastro/snowpack.git\"\n },\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"scripts\": {\n \"build\": \"tsc --noUnusedLocals false --noUnusedParameters false && tsc -p tsconfig.cjs.json\",\n \"build:watch\": \"tsc --watch -p tsconfig.cjs.json\",\n \"lint\": \"tsc --noEmit\"\n },\n \"engines\": {\n \"node\": \">=10.19.0\"\n },\n \"types\": \"./lib/cjs/index.d.ts\",\n \"main\": \"./lib/cjs/index.js\",\n \"bin\": {\n \"sp\": \"./index.bin.js\",\n \"snowpack\": \"./index.bin.js\"\n },\n \"files\": [\n \"assets\",\n \"lib\",\n \"index.bin.js\"\n ],\n \"dependencies\": {\n \"@npmcli/arborist\": \"^2.6.4\",\n \"bufferutil\": \"^4.0.2\",\n \"cachedir\": \"^2.3.0\",\n \"cheerio\": \"1.0.0-rc.10\",\n \"chokidar\": \"^3.4.0\",\n \"cli-spinners\": \"^2.5.0\",\n \"compressible\": \"^2.0.18\",\n \"deepmerge\": \"^4.2.2\",\n \"default-browser-id\": \"^2.0.0\",\n \"detect-port\": \"^1.3.0\",\n \"es-module-lexer\": \"^0.3.24\",\n \"esbuild\": \"~0.9.0\",\n \"esinstall\": \"^1.1.7\",\n \"estree-walker\": \"^2.0.2\",\n \"etag\": \"^1.8.1\",\n \"execa\": \"^5.1.1\",\n \"fdir\": \"^5.0.0\",\n \"find-cache-dir\": \"^3.3.1\",\n \"find-up\": \"^5.0.0\",\n \"glob\": \"^7.1.7\",\n \"httpie\": \"^1.1.2\",\n \"is-plain-object\": \"^5.0.0\",\n \"is-reference\": \"^1.2.1\",\n \"isbinaryfile\": \"^4.0.6\",\n \"jsonschema\": \"~1.2.5\",\n \"kleur\": \"^4.1.1\",\n \"magic-string\": \"^0.25.7\",\n \"meriyah\": \"^3.1.6\",\n \"mime-types\": \"^2.1.26\",\n \"mkdirp\": \"^1.0.3\",\n \"npm-run-path\": \"^4.0.1\",\n \"open\": \"^8.2.1\",\n \"pacote\": \"^11.3.4\",\n \"periscopic\": \"^2.0.3\",\n \"picomatch\": \"^2.3.0\",\n \"postcss\": \"^8.3.5\",\n \"postcss-modules\": \"^4.0.0\",\n \"resolve\": \"^1.20.0\",\n \"resolve-from\": \"^5.0.0\",\n \"rimraf\": \"^3.0.0\",\n \"rollup\": \"~2.37.1\",\n \"signal-exit\": \"^3.0.3\",\n \"skypack\": \"^0.3.2\",\n \"slash\": \"~3.0.0\",\n \"source-map\": \"^0.7.3\",\n \"strip-ansi\": \"^6.0.0\",\n \"strip-comments\": \"^2.0.1\",\n \"utf-8-validate\": \"^5.0.3\",\n \"ws\": \"^7.3.0\",\n \"yargs-parser\": \"^20.0.0\"\n },\n \"devDependencies\": {\n \"@types/cheerio\": \"^0.22.29\"\n },\n \"optionalDependencies\": {\n \"fsevents\": \"^2.3.2\"\n }\n}\n" }, { "path": "snowpack/src/build/build-import-proxy.ts", "content": "import path from 'path';\nimport {logger} from '../logger';\nimport {SnowpackConfig} from '../types';\nimport {\n appendHtmlToHead,\n hasExtension,\n spliceString,\n HMR_CLIENT_CODE,\n HMR_OVERLAY_CODE,\n} from '../util';\nimport {generateSRI} from './import-sri';\nimport {scanImportGlob} from '../scan-import-glob';\nimport {cssModuleJSON} from './import-css';\n\nexport const SRI_CLIENT_HMR_SNOWPACK = generateSRI(Buffer.from(HMR_CLIENT_CODE));\nexport const SRI_ERROR_HMR_SNOWPACK = generateSRI(Buffer.from(HMR_OVERLAY_CODE));\n\nconst importMetaRegex = /import\\s*\\.\\s*meta/;\n\nexport function getMetaUrlPath(urlPath: string, config: SnowpackConfig): string {\n return path.posix.normalize(path.posix.join('/', config.buildOptions.metaUrlPath, urlPath));\n}\n\nexport function wrapImportMeta({\n code,\n hmr,\n env,\n config,\n}: {\n code: string;\n hmr: boolean;\n env: boolean;\n config: SnowpackConfig;\n}) {\n // Create Regex expressions here, since global regex has per-string state\n const importMetaHotRegex = /import\\s*\\.\\s*meta\\s*\\.\\s*hot/g;\n const importMetaEnvRegex = /import\\s*\\.\\s*meta\\s*\\.\\s*env/g;\n // Optimize: replace direct references to `import.meta.hot` by inlining undefined.\n // Do this first so that we can bail out in the next `import.meta` test.\n if (!hmr) {\n code = code.replace(importMetaHotRegex, 'undefined /* [snowpack] import.meta.hot */ ');\n }\n if (!importMetaRegex.test(code)) {\n return code;\n }\n let hmrSnippet = ``;\n if (hmr) {\n hmrSnippet = `import * as __SNOWPACK_HMR__ from '${getMetaUrlPath(\n 'hmr-client.js',\n config,\n )}';\\nimport.meta.hot = __SNOWPACK_HMR__.createHotContext(import.meta.url);\\n`;\n }\n let envSnippet = ``;\n if (env) {\n envSnippet = `import * as __SNOWPACK_ENV__ from '${getMetaUrlPath('env.js', config)}';\\n`;\n // Optimize any direct references `import.meta.env` by inlining the ref\n code = code.replace(importMetaEnvRegex, '__SNOWPACK_ENV__');\n // If we still detect references to `import.meta`, assign `import.meta.env` to be safe\n if (importMetaRegex.test(code)) {\n envSnippet += `import.meta.env = __SNOWPACK_ENV__;\\n`;\n }\n }\n return hmrSnippet + envSnippet + '\\n' + code;\n}\n\nexport function wrapHtmlResponse({\n code,\n hmr,\n hmrPort,\n isDev,\n config,\n mode,\n}: {\n code: string;\n hmr: boolean;\n hmrPort?: number;\n isDev: boolean;\n config: SnowpackConfig;\n mode: 'development' | 'production';\n}) {\n // replace %PUBLIC_URL% (along with surrounding slashes, if any)\n code = code.replace(/\\/?%PUBLIC_URL%\\/?/g, isDev ? '/' : config.buildOptions.baseUrl);\n // replace %MODE%\n code = code.replace(/%MODE%/g, mode);\n\n // replace any %SNOWPACK_PUBLIC_*%\n const snowpackPublicEnv = getSnowpackPublicEnvVariables();\n code = code.replace(/%SNOWPACK_PUBLIC_.+?%/gi, (match: string) => {\n const envVariableName = match.slice(1, -1);\n\n if (envVariableName in snowpackPublicEnv) {\n return snowpackPublicEnv[envVariableName] || '';\n }\n\n logger.warn(`Environment variable \"${envVariableName}\" is not set`);\n\n return match;\n });\n\n // replace any env variables defined in the config\n for (const envVar in config.env) {\n const matcher = new RegExp(`%${envVar}%`, 'g');\n const val = config.env[envVar] as string;\n code = code.replace(matcher, val);\n }\n\n // Full Page Transformations: Only full page responses should get these transformations.\n // Any code not containing `` is assumed to be an HTML fragment.\n const isFullPage = code.trim().toLowerCase().startsWith('');\n if (hmr && !isFullPage && !config.buildOptions.htmlFragments) {\n throw new Error(`HTML fragment found!\nHTML fragments (files not starting with \"\") are not transformed like full HTML pages.\nAdd the missing doctype, or set buildOptions.htmlFragments=true if HTML fragments are expected.`);\n }\n if (hmr && isFullPage) {\n let hmrScript = ``;\n if (hmrPort) {\n hmrScript += `\\n`;\n }\n hmrScript += ``;\n if (config.devOptions.hmrErrorOverlay) {\n hmrScript += ``;\n }\n code = appendHtmlToHead(code, hmrScript);\n }\n return code;\n}\n\nfunction generateJsonImportProxy({\n code,\n hmr,\n config,\n}: {\n code: string;\n hmr: boolean;\n config: SnowpackConfig;\n}) {\n const jsonImportProxyCode = `let json = ${JSON.stringify(JSON.parse(code))};\nexport default json;`;\n return wrapImportMeta({code: jsonImportProxyCode, hmr, env: false, config});\n}\n\nfunction generateCssImportProxy({\n code,\n hmr,\n config,\n}: {\n code: string;\n hmr: boolean;\n config: SnowpackConfig;\n}) {\n const cssImportProxyCode = `// [snowpack] add styles to the page (skip if no document exists)\nif (typeof document !== 'undefined') {${\n hmr\n ? `\n import.meta.hot.accept();\n import.meta.hot.dispose(() => {\n document.head.removeChild(styleEl);\n });\\n`\n : ''\n }\n const code = ${JSON.stringify(code)};\n\n const styleEl = document.createElement(\"style\");\n const codeEl = document.createTextNode(code);\n styleEl.type = 'text/css';\n styleEl.appendChild(codeEl);\n document.head.appendChild(styleEl);\n}`;\n return wrapImportMeta({code: cssImportProxyCode, hmr, env: false, config});\n}\n\nfunction createImportGlobValue(importGlob, i: number): {value: string; imports: string} {\n let value: string;\n let imports: string;\n\n if (importGlob.isEager) {\n value = `{\\n${importGlob.resolvedImports\n .map(\n (spec: string, j: number, {length: len}) =>\n `\\t\"${spec}\": __glob__${i}_${j}${j === len - 1 ? '' : ','}`,\n )\n .join('\\n')}\\n}`;\n imports = importGlob.resolvedImports\n .map((spec: string, j: number) => `import * as __glob__${i}_${j} from '${spec}';`)\n .join('\\n');\n } else {\n value = `{\\n${importGlob.resolvedImports\n .map(\n (spec: string, j: number, {length: len}) =>\n `\\t\"${spec}\": () => import(\"${spec}\")${j === len - 1 ? '' : ','}`,\n )\n .join('\\n')}\\n}`;\n imports = '';\n }\n\n return {value, imports};\n}\n\nexport async function transformGlobImports({\n contents: _code,\n resolveImportGlobSpecifier = async (i) => [i],\n}: {\n contents: string;\n resolveImportGlobSpecifier: any;\n}) {\n const importGlobs = scanImportGlob(_code);\n let rewrittenCode = _code;\n const resolvedImportGlobs = await Promise.all(\n importGlobs.reverse().map(({glob, ...importGlob}) => {\n return resolveImportGlobSpecifier(glob).then((resolvedImports) => ({\n ...importGlob,\n glob,\n resolvedImports,\n }));\n }),\n );\n\n resolvedImportGlobs.forEach((importGlob, i) => {\n const {value, imports} = createImportGlobValue(importGlob, i);\n rewrittenCode = spliceString(rewrittenCode, value, importGlob.start, importGlob.end);\n if (imports) {\n rewrittenCode = `${imports}\\n${rewrittenCode}`;\n }\n });\n\n return rewrittenCode;\n}\n\nasync function generateCssModuleImportProxy({\n url,\n code,\n hmr,\n config,\n}: {\n url: string;\n code: string;\n hmr: boolean;\n config: SnowpackConfig;\n}) {\n const reqUrl = url.replace(new RegExp(`^${config.buildOptions.baseUrl}`), '/'); // note: in build, buildOptions.baseUrl gets prepended. Remove that for looking up CSS Module code\n return `\nexport let code = ${JSON.stringify(code)};\nlet json = ${cssModuleJSON(reqUrl)};\nexport default json;\n${\n hmr\n ? `\nimport * as __SNOWPACK_HMR_API__ from '${getMetaUrlPath('hmr-client.js', config)}';\nimport.meta.hot = __SNOWPACK_HMR_API__.createHotContext(import.meta.url);\\n`\n : ``\n}\n// [snowpack] add styles to the page (skip if no document exists)\nif (typeof document !== 'undefined') {${\n hmr\n ? `\n import.meta.hot.dispose(() => {\n document && document.head.removeChild(styleEl);\n });\\n`\n : ``\n }\n const styleEl = document.createElement(\"style\");\n const codeEl = document.createTextNode(code);\n styleEl.type = 'text/css';\n\n styleEl.appendChild(codeEl);\n document.head.appendChild(styleEl);\n}`;\n}\n\nfunction generateDefaultImportProxy(url: string) {\n return `export default ${JSON.stringify(url)};`;\n}\n\nexport async function wrapImportProxy({\n url,\n code,\n hmr,\n config,\n}: {\n url: string;\n code: string | Buffer;\n hmr: boolean;\n config: SnowpackConfig;\n}) {\n if (hasExtension(url, '.json')) {\n return generateJsonImportProxy({code: code.toString(), hmr, config});\n }\n\n if (hasExtension(url, '.css')) {\n // if proxying a CSS file, remove its source map (the path no longer applies)\n const sanitized = code.toString().replace(/\\/\\*#\\s*sourceMappingURL=[^/]+\\//gm, '');\n return hasExtension(url, '.module.css')\n ? generateCssModuleImportProxy({url, code: sanitized, hmr, config})\n : generateCssImportProxy({code: sanitized, hmr, config});\n }\n\n return generateDefaultImportProxy(url);\n}\n\nexport function generateEnvModule({\n mode,\n isSSR,\n configEnv,\n}: {\n mode: SnowpackConfig['mode'];\n isSSR: boolean;\n configEnv?: Record;\n}) {\n const envObject: Record = {\n ...getSnowpackPublicEnvVariables(),\n ...(configEnv ?? {}),\n MODE: mode,\n NODE_ENV: mode,\n SSR: isSSR,\n };\n\n return Object.entries(envObject)\n .map(([key, val]) => {\n return `export const ${key} = ${JSON.stringify(val)};`;\n })\n .join('\\n');\n}\n\nconst PUBLIC_ENV_REGEX = /^SNOWPACK_PUBLIC_.+/;\nfunction getSnowpackPublicEnvVariables() {\n const envObject = {...process.env};\n for (const env of Object.keys(envObject)) {\n if (!PUBLIC_ENV_REGEX.test(env)) {\n delete envObject[env];\n }\n }\n return envObject;\n}\n" }, { "path": "snowpack/src/build/build-pipeline.ts", "content": "import path from 'path';\nimport {RawSourceMap, SourceMapConsumer, SourceMapGenerator} from 'source-map';\nimport url from 'url';\nimport {validatePluginLoadResult} from '../config';\nimport {logger} from '../logger';\nimport {PluginTransformResult, SnowpackBuildMap, SnowpackConfig} from '../types';\nimport {getExtension, readFile, removeExtension} from '../util';\nimport {cssModules, needsCSSModules} from './import-css';\n\nexport interface BuildFileOptions {\n isDev: boolean;\n isSSR: boolean;\n isPackage: boolean;\n isHmrEnabled: boolean;\n config: SnowpackConfig;\n}\n\n/**\n * Build Plugin First Pass: If a plugin defines a\n * `resolve` object, check it against the current\n * file's extension. If it matches, call the load()\n * functon and return it's result.\n *\n * If no match is found, fall back to just reading\n * the file from disk and return it.\n */\nasync function runPipelineLoadStep(\n srcPath: string,\n {isDev, isSSR, isPackage, isHmrEnabled, config}: BuildFileOptions,\n): Promise {\n const srcExt = getExtension(srcPath);\n\n const result: SnowpackBuildMap = {};\n\n for (const step of config.plugins) {\n if (!step.resolve || !step.resolve.input.some((ext) => srcPath.endsWith(ext))) {\n continue;\n }\n if (!step.load) {\n continue;\n }\n // v3.1: Some plugins break when run on node_modules/. This fix is in place until the plugins themselves have a chance to update.\n if (step.name.endsWith('@prefresh/snowpack/dist/index.js') && isPackage) {\n continue;\n }\n try {\n const debugPath = path.relative(config.root, srcPath);\n logger.debug(`load() starting… [${debugPath}]`, {name: step.name});\n const stepResult = await step.load({\n fileExt: srcExt,\n filePath: srcPath,\n isDev,\n isSSR,\n isPackage,\n isHmrEnabled,\n });\n logger.debug(`✔ load() success [${debugPath}]`, {name: step.name});\n\n validatePluginLoadResult(step, stepResult);\n\n if (typeof stepResult === 'string' || Buffer.isBuffer(stepResult)) {\n const mainOutputExt = step.resolve.output[0];\n result[mainOutputExt] = {code: stepResult};\n } else if (stepResult && typeof stepResult === 'object') {\n Object.keys(stepResult).forEach((ext) => {\n const output = stepResult[ext];\n\n // normalize to {code, map} format\n if (typeof output === 'string' || Buffer.isBuffer(output)) {\n result[ext] = {code: output};\n } else if (output) {\n result[ext] = output;\n }\n\n // ensure source maps are strings (it’s easy for plugins to pass back a JSON object)\n if (result[ext].map && typeof result[ext].map === 'object') {\n result[ext].map = JSON.stringify(stepResult[ext].map);\n }\n\n // if source maps disabled, don’t return any\n if (!config.buildOptions.sourcemap) result[ext].map = undefined;\n });\n\n break;\n }\n } catch (err) {\n // Attach metadata detailing where the error occurred.\n err.__snowpackBuildDetails = {name: step.name, step: 'load'};\n throw err;\n }\n }\n\n // handle CSS Modules, after plugins run\n if (needsCSSModules(srcPath)) {\n let contents: string = result['.css']\n ? (result['.css'].code as string)\n : ((await readFile(srcPath)) as string);\n if (contents) {\n // for CSS Modules URLs, we only need the destination URL (POSIX-style)\n let url = srcPath;\n for (const dir in config.mount) {\n if (srcPath.startsWith(dir)) {\n url = srcPath\n .replace(dir, config.mount[dir].url)\n .replace(/\\\\/g, '/')\n .replace(/\\/+/g, '/')\n .replace(/\\.(scss|sass)$/i, '.css');\n break;\n }\n }\n const {css, json} = await cssModules({contents, url});\n result['.css'] = {...(result['.css'] || {}), code: css};\n result['.json'] = {code: JSON.stringify(json)};\n }\n }\n\n // if no result was generated, return file as-is\n if (!Object.keys(result).length) {\n return {\n [srcExt]: {\n code: await readFile(srcPath),\n },\n };\n }\n\n return result;\n}\n\nasync function composeSourceMaps(\n id: string,\n base: string | RawSourceMap,\n derived: string | RawSourceMap,\n): Promise {\n const [baseMap, transformedMap] = await Promise.all([\n new SourceMapConsumer(base),\n new SourceMapConsumer(derived),\n ]);\n try {\n const generator = SourceMapGenerator.fromSourceMap(transformedMap);\n generator.applySourceMap(baseMap, id);\n return generator.toString();\n } finally {\n baseMap.destroy();\n transformedMap.destroy();\n }\n}\n\n/**\n * Build Plugin Second Pass: If a plugin defines a\n * transform() method,call it. Transform cannot change\n * the file extension, and was designed to run on\n * every file type and return null/undefined if no\n * change needed.\n */\nasync function runPipelineTransformStep(\n output: SnowpackBuildMap,\n srcPath: string,\n {isDev, isHmrEnabled, isPackage, isSSR, config}: BuildFileOptions,\n): Promise {\n const rootFilePath = removeExtension(srcPath, getExtension(srcPath));\n const rootFileName = path.basename(rootFilePath);\n for (const step of config.plugins) {\n if (!step.transform) {\n continue;\n }\n // v3.1: Some plugins break when run on node_modules/. This fix is in place until the plugins themselves have a chance to update.\n if (step.name.endsWith('@prefresh/snowpack/dist/index.js') && isPackage) {\n continue;\n }\n\n try {\n for (const destExt of Object.keys(output)) {\n const destBuildFile = output[destExt];\n const {code} = destBuildFile;\n const fileName = rootFileName + destExt;\n const filePath = rootFilePath + destExt;\n const debugPath = path.relative(config.root, filePath);\n logger.debug(`transform() starting… [${debugPath}]`, {name: step.name});\n const result = await step.transform({\n contents: code,\n isDev,\n isPackage,\n fileExt: destExt,\n id: filePath,\n srcPath,\n // @ts-ignore: Deprecated\n filePath: fileName,\n // @ts-ignore: Deprecated\n urlPath: `./${path.basename(rootFileName + destExt)}`,\n isHmrEnabled,\n isSSR,\n });\n logger.debug(`✔ transform() success [${debugPath}]`, {name: step.name});\n if (typeof result === 'string' || Buffer.isBuffer(result)) {\n // V2 API, simple string variant\n output[destExt].code = result;\n output[destExt].map = undefined;\n } else if (result && typeof result === 'object') {\n // V2 API, structured result variant\n const contents = (result as PluginTransformResult).contents || (result as any).result;\n if (contents) {\n output[destExt].code = contents;\n const map = (result as PluginTransformResult).map;\n let outputMap: string | undefined = undefined;\n if (map && config.buildOptions.sourcemap) {\n // if source maps disabled, don’t return any\n if (output[destExt].map) {\n outputMap = await composeSourceMaps(filePath, output[destExt].map!, map);\n } else {\n outputMap = typeof map === 'object' ? JSON.stringify(map) : map;\n }\n }\n output[destExt].map = outputMap;\n }\n }\n }\n } catch (err) {\n // Attach metadata detailing where the error occurred.\n err.__snowpackBuildDetails = {name: step.name, step: 'transform'};\n throw err;\n }\n }\n\n return output;\n}\n\nexport async function runPipelineOptimizeStep(\n buildDirectory: string,\n {config}: {config: SnowpackConfig},\n) {\n for (const step of config.plugins) {\n if (!step.optimize) {\n continue;\n }\n\n try {\n logger.debug('optimize() starting…', {name: step.name});\n await step.optimize({\n buildDirectory,\n // @ts-ignore: internal API only\n log: (msg) => {\n logger.info(msg, {name: step.name});\n },\n });\n logger.debug('✔ optimize() success', {name: step.name});\n } catch (err) {\n logger.error(err.toString() || err, {name: step.name});\n process.exit(1); // exit on error\n }\n }\n return null;\n}\n\nexport async function runPipelineCleanupStep({plugins}: SnowpackConfig) {\n for (const step of plugins) {\n if (!step.cleanup) {\n continue;\n }\n await step.cleanup();\n }\n}\n\n/** Core Snowpack file pipeline builder */\nexport async function buildFile(\n srcURL: URL,\n buildFileOptions: BuildFileOptions,\n): Promise {\n // Pass 1: Find the first plugin to load this file, and return the result\n const loadResult = await runPipelineLoadStep(url.fileURLToPath(srcURL), buildFileOptions);\n // Pass 2: Pass that result through every plugin transform() method.\n const transformResult = await runPipelineTransformStep(\n loadResult,\n url.fileURLToPath(srcURL),\n buildFileOptions,\n );\n // Return the final build result.\n return transformResult;\n}\n" }, { "path": "snowpack/src/build/file-builder.ts", "content": "import {InstallTarget} from 'esinstall';\nimport {promises as fs} from 'fs';\nimport mkdirp from 'mkdirp';\nimport path from 'path';\nimport url from 'url';\nimport {EsmHmrEngine} from '../hmr-server-engine';\nimport {\n scanCodeImportsExports,\n transformEsmImports,\n transformFileImports,\n} from '../rewrite-imports';\nimport {matchDynamicImportValue, scanImportsFromFiles} from '../scan-imports';\nimport {getPackageSource} from '../sources/util';\nimport {\n ImportMap,\n SnowpackBuildMap,\n SnowpackBuildResultFileManifest,\n SnowpackBuiltFile,\n SnowpackConfig,\n} from '../types';\nimport {\n createInstallTarget,\n isRemoteUrl,\n relativeURL,\n removeLeadingSlash,\n replaceExtension,\n} from '../util';\nimport {\n getMetaUrlPath,\n SRI_CLIENT_HMR_SNOWPACK,\n SRI_ERROR_HMR_SNOWPACK,\n transformGlobImports,\n wrapHtmlResponse,\n wrapImportMeta,\n wrapImportProxy,\n} from './build-import-proxy';\nimport {buildFile} from './build-pipeline';\nimport {getUrlsForFile} from './file-urls';\nimport {createImportResolver, createImportGlobResolver} from './import-resolver';\n\n/**\n * FileBuilder - This class is responsible for building a file. It is broken into\n * individual stages so that the entire application build process can be tackled\n * in stages (build -> resolve -> get response).\n */\nexport class FileBuilder {\n buildOutput: SnowpackBuildMap = {};\n resolvedOutput: SnowpackBuildMap = {};\n\n isDev: boolean;\n isHMR: boolean;\n isSSR: boolean;\n buildPromise: Promise | undefined;\n\n readonly loc: string;\n readonly urls: string[];\n readonly config: SnowpackConfig;\n hmrEngine: EsmHmrEngine | null = null;\n\n constructor({\n loc,\n isDev,\n isHMR,\n isSSR,\n config,\n hmrEngine,\n }: {\n loc: string;\n isDev: boolean;\n isHMR: boolean;\n isSSR: boolean;\n config: SnowpackConfig;\n hmrEngine?: EsmHmrEngine | null;\n }) {\n this.loc = loc;\n this.isDev = isDev;\n this.isHMR = isHMR;\n this.isSSR = isSSR;\n this.config = config;\n this.hmrEngine = hmrEngine || null;\n const urls = getUrlsForFile(loc, config);\n if (!urls) {\n throw new Error(`No mounted URLs configured for file: ${loc}`);\n }\n this.urls = urls;\n }\n\n private verifyRequestFromBuild(type: string): SnowpackBuiltFile | undefined {\n const possibleExtensions = this.urls.map((url) => path.extname(url));\n if (!possibleExtensions.includes(type))\n throw new Error(\n `${this.loc} - Requested content \"${type}\" but only built ${possibleExtensions.join(', ')}`,\n );\n return this.resolvedOutput[type];\n }\n\n /**\n * Resolve Imports: Resolved imports are based on the state of the file\n * system, so they can't be cached long-term with the build.\n */\n async resolveImports(\n isResolve: boolean,\n hmrParam?: string | false,\n importMap?: ImportMap,\n ): Promise {\n const urlPathDirectory = path.posix.dirname(this.urls[0]!);\n const pkgSource = getPackageSource(this.config);\n const resolvedImports: InstallTarget[] = [];\n for (const [type, outputResult] of Object.entries(this.buildOutput)) {\n if (!(type === '.js' || type === '.html' || type === '.css')) {\n continue;\n }\n let contents =\n typeof outputResult.code === 'string'\n ? outputResult.code\n : outputResult.code.toString('utf8');\n\n // Handle attached CSS.\n if (type === '.js' && this.buildOutput['.css']) {\n const relativeCssImport = `./${replaceExtension(\n path.posix.basename(this.urls[0]!),\n '.js',\n '.css',\n )}`;\n contents = `import '${relativeCssImport}';\\n` + contents;\n }\n // Finalize the response\n contents = this.finalizeResult(type, contents);\n //\n const resolveImportGlobSpecifier = createImportGlobResolver({\n fileLoc: this.loc,\n config: this.config,\n });\n // resolve all imports\n const resolveImportSpecifier = createImportResolver({\n fileLoc: this.loc,\n config: this.config,\n });\n const resolveImport = async (spec) => {\n // Ignore packages marked as external\n if (this.config.packageOptions.external?.includes(spec)) {\n return spec;\n }\n if (isRemoteUrl(spec)) {\n return spec;\n }\n // Try to resolve the specifier to a known URL in the project\n let resolvedImportUrl = resolveImportSpecifier(spec);\n // Handle a package import\n if (!resolvedImportUrl) {\n try {\n return await pkgSource.resolvePackageImport(spec, {\n importMap: importMap || (isResolve ? undefined : {imports: {}}),\n });\n } catch (err) {\n if (!isResolve && /not included in import map./.test(err.message)) {\n return spec;\n }\n throw err;\n }\n }\n return resolvedImportUrl || spec;\n };\n\n const scannedImports = await scanImportsFromFiles(\n [\n {\n baseExt: type,\n root: this.config.root,\n locOnDisk: this.loc,\n contents,\n },\n ],\n this.config,\n );\n contents = await transformGlobImports({contents, resolveImportGlobSpecifier});\n contents = await transformFileImports({type, contents}, async (spec) => {\n let resolvedImportUrl = await resolveImport(spec);\n\n // Handle normal \"./\" & \"../\" import specifiers\n const importExtName = path.posix.extname(resolvedImportUrl);\n const isProxyImport = importExtName && importExtName !== '.js' && importExtName !== '.mjs';\n const isAbsoluteUrlPath = path.posix.isAbsolute(resolvedImportUrl);\n if (isAbsoluteUrlPath) {\n if (isResolve && this.config.buildOptions.resolveProxyImports && isProxyImport) {\n resolvedImportUrl = resolvedImportUrl + '.proxy.js';\n }\n resolvedImports.push(createInstallTarget(resolvedImportUrl));\n } else {\n resolvedImports.push(\n ...scannedImports\n .filter(({specifier}) => specifier === spec)\n .map((installTarget) => {\n installTarget.specifier = resolvedImportUrl;\n return installTarget;\n }),\n );\n }\n if (isAbsoluteUrlPath) {\n // When dealing with an absolute import path, we need to honor the baseUrl\n // proxy modules may attach code to the root HTML (like style) so don't resolve\n resolvedImportUrl = relativeURL(urlPathDirectory, resolvedImportUrl);\n }\n return resolvedImportUrl;\n });\n\n // This is a hack since we can't currently scan \"script\" `src=` tags as imports.\n // Either move these to inline JavaScript in the script body, or add support for\n // `script.src=` and `link.href` scanning & resolving in transformFileImports().\n if (type === '.html' && this.isHMR) {\n if (contents.includes(SRI_CLIENT_HMR_SNOWPACK)) {\n resolvedImports.push(createInstallTarget(getMetaUrlPath('hmr-client.js', this.config)));\n }\n if (contents.includes(SRI_ERROR_HMR_SNOWPACK)) {\n resolvedImports.push(\n createInstallTarget(getMetaUrlPath('hmr-error-overlay.js', this.config)),\n );\n }\n }\n\n if (type === '.js' && hmrParam) {\n contents = await transformEsmImports(contents as string, (imp) => {\n const importUrl = path.posix.resolve(urlPathDirectory, imp);\n const node = this.hmrEngine?.getEntry(importUrl);\n if (node && node.needsReplacement) {\n this.hmrEngine?.markEntryForReplacement(node, false);\n return `${imp}?${hmrParam}`;\n }\n return imp;\n });\n }\n\n if (type === '.js') {\n const isHmrEnabled = contents.includes('import.meta.hot');\n const rawImports = await scanCodeImportsExports(contents);\n const resolvedImports = rawImports.map((imp) => {\n let spec = contents.substring(imp.s, imp.e).replace(/(\\/|\\\\)+$/, '');\n if (imp.d > -1) {\n spec = matchDynamicImportValue(spec) || '';\n }\n spec = spec.replace(/\\?mtime=[0-9]+$/, '');\n return path.posix.resolve(urlPathDirectory, spec);\n });\n this.hmrEngine?.setEntry(this.urls[0], resolvedImports, isHmrEnabled);\n }\n // Update the output with the new resolved imports\n this.resolvedOutput[type].code = contents;\n this.resolvedOutput[type].map = undefined;\n }\n return resolvedImports;\n }\n\n /**\n * Given a file, build it. Building a file sends it through our internal\n * file builder pipeline, and outputs a build map representing the final\n * build. A Build Map is used because one source file can result in multiple\n * built files (Example: .svelte -> .js & .css).\n */\n async build(isStatic: boolean) {\n if (this.buildPromise) {\n return this.buildPromise;\n }\n const fileBuilderPromise = (async () => {\n if (isStatic) {\n return {\n [path.extname(this.loc)]: {\n code: await fs.readFile(this.loc),\n map: undefined,\n },\n };\n }\n const builtFileOutput = await buildFile(url.pathToFileURL(this.loc), {\n config: this.config,\n isDev: this.isDev,\n isSSR: this.isSSR,\n isPackage: false,\n isHmrEnabled: this.isHMR,\n });\n return builtFileOutput;\n })();\n this.buildPromise = fileBuilderPromise;\n try {\n this.resolvedOutput = {};\n this.buildOutput = await fileBuilderPromise;\n for (const [outputKey, {code, map}] of Object.entries(this.buildOutput)) {\n this.resolvedOutput[outputKey] = {code, map};\n }\n } finally {\n this.buildPromise = undefined;\n }\n }\n\n private finalizeResult(type: string, content: string): string {\n // Wrap the response.\n switch (type) {\n case '.html': {\n content = wrapHtmlResponse({\n code: content as string,\n hmr: this.isHMR,\n hmrPort: this.hmrEngine ? this.hmrEngine.port : undefined,\n isDev: this.isDev,\n config: this.config,\n mode: this.isDev ? 'development' : 'production',\n });\n break;\n }\n case '.css': {\n break;\n }\n case '.js':\n {\n content = wrapImportMeta({\n code: content as string,\n env: true,\n hmr: this.isHMR,\n config: this.config,\n });\n }\n break;\n }\n // Return the finalized response.\n return content;\n }\n\n getResult(type: string): string | Buffer | undefined {\n const result = this.verifyRequestFromBuild(type);\n if (result) {\n // TODO: return result.map\n return result.code;\n }\n }\n\n getSourceMap(type: string): string | undefined {\n return this.resolvedOutput[type].map;\n }\n\n async getProxy(_url: string, type: string) {\n const code = this.resolvedOutput[type].code;\n const url = this.isDev ? _url : this.config.buildOptions.baseUrl + removeLeadingSlash(_url);\n return await wrapImportProxy({url, code, hmr: this.isHMR, config: this.config});\n }\n\n async writeToDisk(dir: string, results: SnowpackBuildResultFileManifest) {\n await mkdirp(path.dirname(path.join(dir, this.urls[0])));\n for (const outUrl of this.urls) {\n const buildOutput = results[outUrl].contents;\n const encoding = typeof buildOutput === 'string' ? 'utf8' : undefined;\n await fs.writeFile(path.join(dir, outUrl), buildOutput, encoding);\n }\n }\n}\n" }, { "path": "snowpack/src/build/file-urls.ts", "content": "import path from 'path';\nimport slash from 'slash';\nimport {MountEntry, SnowpackConfig} from '../types';\nimport {addExtension, getExtensionMatch, replaceExtension} from '../util';\nimport {needsCSSModules} from './import-css';\n\n/**\n * Map a file path to the hosted URL for a given \"mount\" entry.\n */\nexport function getUrlsForFileMount({\n fileLoc,\n mountKey,\n mountEntry,\n config,\n}: {\n fileLoc: string;\n mountKey: string;\n mountEntry: MountEntry;\n config: SnowpackConfig;\n}): string[] {\n const resolvedDirUrl = mountEntry.url === '/' ? '' : mountEntry.url;\n const mountedUrl = fileLoc.replace(mountKey, resolvedDirUrl).replace(/[/\\\\]+/g, '/');\n if (mountEntry.static) {\n return [mountedUrl];\n }\n return getBuiltFileUrls(mountedUrl, config);\n}\n\n/**\n * Map a file path to the hosted URL for a given \"mount\" entry.\n */\nexport function getBuiltFileUrls(filepath: string, config: SnowpackConfig): string[] {\n const fileName = path.basename(filepath);\n const extensionMatch = getExtensionMatch(fileName, config._extensionMap);\n if (!extensionMatch) {\n // CSS Modules require a special .json mapping here\n if (needsCSSModules(filepath)) {\n return [filepath, filepath + '.json'];\n }\n\n // Otherwise, return only the requested file\n return [filepath];\n }\n const [inputExt, outputExts] = extensionMatch;\n return outputExts.map((outputExt) => {\n if (outputExts.length > 1) {\n return addExtension(filepath, outputExt);\n } else {\n return replaceExtension(filepath, inputExt, outputExt);\n }\n });\n}\n\n/**\n * Get the final, hosted URL path for a given file on disk.\n */\nexport function getMountEntryForFile(\n fileLoc: string,\n config: SnowpackConfig,\n): [string, MountEntry] | null {\n // PERF: Use `for...in` here instead of the slower `Object.entries()` method\n // that we use everywhere else, since this function can get called 100s of\n // times during a build.\n for (const mountKey in config.mount) {\n if (!config.mount.hasOwnProperty(mountKey)) {\n continue;\n }\n if (!fileLoc.startsWith(mountKey + path.sep)) {\n continue;\n }\n return [mountKey, config.mount[mountKey]];\n }\n return null;\n}\n\n/**\n * Get the final, hosted URL path for a given file on disk.\n */\nexport function getUrlsForFile(fileLoc: string, config: SnowpackConfig): undefined | string[] {\n const mountEntryResult = getMountEntryForFile(fileLoc, config);\n if (!mountEntryResult) {\n if (!config.workspaceRoot) {\n return undefined;\n }\n const builtEntrypointUrls = getBuiltFileUrls(fileLoc, config);\n return builtEntrypointUrls.map((u) =>\n path.posix.join(\n config.buildOptions.metaUrlPath,\n 'link',\n slash(path.relative(config.workspaceRoot as string, u)),\n ),\n );\n }\n const [mountKey, mountEntry] = mountEntryResult;\n return getUrlsForFileMount({fileLoc, mountKey, mountEntry, config});\n}\n" }, { "path": "snowpack/src/build/import-css.ts", "content": "import postCss from 'postcss';\nimport postCssModules from 'postcss-modules';\nimport {logger} from '../logger';\n\nconst cssModuleNames = new Map();\n\n/** Generate CSS Modules for a given URL */\nexport async function cssModules({\n contents,\n url,\n}: {\n contents: string;\n url: string;\n}): Promise<{css: string; json: Record}> {\n let json: Record = {};\n const processor = postCss([\n postCssModules({\n getJSON: (_, moduleNames) => {\n json = moduleNames;\n cssModuleNames.set(url, JSON.stringify(moduleNames));\n },\n }),\n ]);\n\n const result = await processor.process(contents, {from: url, to: url});\n // log any warnings that happened.\n result\n .warnings()\n .forEach((element) => logger.warn(`${url} - ${element.text}`, {name: 'snowpack:cssmodules'}));\n return {\n css: result.css,\n json,\n };\n}\n\n/** Return CSS Modules JSON from URL */\nexport function cssModuleJSON(url: string): string {\n return cssModuleNames.get(url) || '{}';\n}\n\n/** Should this file get CSS Modules? */\nexport function needsCSSModules(url: string): boolean {\n return (\n url.endsWith('.module.css') || url.endsWith('.module.scss') || url.endsWith('.module.sass')\n );\n}\n" }, { "path": "snowpack/src/build/import-resolver.ts", "content": "import fs from 'fs';\nimport path from 'path';\nimport slash from 'slash';\nimport {SnowpackConfig} from '../types';\nimport {\n addExtension,\n findMatchingAliasEntry,\n getExtensionMatch,\n hasExtension,\n isRemoteUrl,\n replaceExtension,\n} from '../util';\nimport {getUrlsForFile} from './file-urls';\nimport glob from 'glob';\n\n/** Perform a file disk lookup for the requested import specifier. */\nexport function getFsStat(importedFileOnDisk: string): fs.Stats | false {\n try {\n return fs.statSync(importedFileOnDisk);\n } catch (err) {\n // file doesn't exist, that's fine\n }\n return false;\n}\n\n/** Resolve an import based on the state of the file/folder found on disk. */\nfunction resolveSourceSpecifier(\n lazyFileLoc: string,\n {parentFile, config}: {parentFile: string; config: SnowpackConfig},\n) {\n const lazyFileStat = getFsStat(lazyFileLoc);\n\n if (lazyFileStat && lazyFileStat.isFile()) {\n lazyFileLoc = lazyFileLoc;\n } else if (hasExtension(lazyFileLoc, '.js')) {\n const tsWorkaroundImportFileLoc = replaceExtension(lazyFileLoc, '.js', '.ts');\n if (getFsStat(tsWorkaroundImportFileLoc)) {\n lazyFileLoc = tsWorkaroundImportFileLoc;\n }\n } else if (hasExtension(lazyFileLoc, '.jsx')) {\n const tsWorkaroundImportFileLoc = replaceExtension(lazyFileLoc, '.jsx', '.tsx');\n if (getFsStat(tsWorkaroundImportFileLoc)) {\n lazyFileLoc = tsWorkaroundImportFileLoc;\n }\n } else {\n // missing extension\n if (getFsStat(lazyFileLoc + path.extname(parentFile))) {\n // first, try parent file’s extension\n lazyFileLoc = lazyFileLoc + path.extname(parentFile);\n } else {\n // otherwise, try and match any extension from the extension map\n for (const [ext, outputExts] of Object.entries(config._extensionMap)) {\n if (!outputExts.includes('.js')) continue; // only look through .js-friendly extensions\n if (getFsStat(lazyFileLoc + ext)) {\n lazyFileLoc = lazyFileLoc + ext;\n break;\n }\n }\n }\n\n if (!path.extname(lazyFileLoc)) {\n if (lazyFileStat && lazyFileStat.isDirectory()) {\n // Handle directory imports (ex: \"./components\" -> \"./components/index.js\")\n const trailingSlash = lazyFileLoc.endsWith(path.sep) ? '' : path.sep;\n lazyFileLoc = lazyFileLoc + trailingSlash + 'index.js';\n } else {\n // Fall back to .js.\n lazyFileLoc = lazyFileLoc + '.js';\n }\n }\n }\n\n // Transform the file extension (from input to output)\n const extensionMatch = getExtensionMatch(lazyFileLoc, config._extensionMap);\n\n if (extensionMatch) {\n const [inputExt, outputExts] = extensionMatch;\n if (outputExts.length > 1) {\n lazyFileLoc = addExtension(lazyFileLoc, outputExts[0]);\n } else {\n lazyFileLoc = replaceExtension(lazyFileLoc, inputExt, outputExts[0]);\n }\n }\n\n const resolvedUrls = getUrlsForFile(lazyFileLoc, config);\n return resolvedUrls ? resolvedUrls[0] : resolvedUrls;\n}\n\n/**\n * Create a import resolver function, which converts any import relative to the given file at \"fileLoc\"\n * to a proper URL. Returns false if no matching import was found, which usually indicates a package\n * not found in the import map.\n */\nexport function createImportResolver({fileLoc, config}: {fileLoc: string; config: SnowpackConfig}) {\n return function importResolver(spec: string): string | false {\n // Ignore \"http://*\" imports\n if (isRemoteUrl(spec)) {\n return spec;\n }\n // Ignore packages marked as external\n if (config.packageOptions.external?.includes(spec)) {\n return spec;\n }\n\n if (spec[0] === '/') {\n return spec;\n }\n if (spec[0] === '.') {\n const importedFileLoc = path.resolve(path.dirname(fileLoc), path.normalize(spec));\n return resolveSourceSpecifier(importedFileLoc, {parentFile: fileLoc, config}) || spec;\n }\n const aliasEntry = findMatchingAliasEntry(config, spec);\n if (aliasEntry && (aliasEntry.type === 'path' || aliasEntry.type === 'url')) {\n const {from, to} = aliasEntry;\n let result = spec.replace(from, to);\n if (aliasEntry.type === 'url') {\n return result;\n }\n const importedFileLoc = path.resolve(config.root, result);\n return resolveSourceSpecifier(importedFileLoc, {parentFile: fileLoc, config}) || spec;\n }\n return false;\n };\n}\n\nfunction toPath(url: string) {\n return url.replace(/\\//g, path.sep);\n}\n\n/**\n * Create a import glob resolver function, which converts any import globs relative to the given file at \"fileLoc\"\n * to a local file. These will additionally be transformed by the regular import resolver, so they do not need\n * to be finalized just yet\n */\nexport function createImportGlobResolver({\n fileLoc,\n config,\n}: {\n fileLoc: string;\n config: SnowpackConfig;\n}) {\n const rootDir = path.parse(process.cwd()).root;\n return async function importGlobResolver(spec: string): Promise {\n let searchSpec = toPath(spec);\n if (spec.startsWith('/')) {\n searchSpec = path.join(config.root, spec);\n }\n\n const aliasEntry = findMatchingAliasEntry(config, spec);\n if (aliasEntry && aliasEntry.type === 'path') {\n const {from, to} = aliasEntry;\n searchSpec = searchSpec.replace(from, to);\n searchSpec = path.resolve(config.root, searchSpec);\n }\n\n if (!searchSpec.startsWith(rootDir) && !searchSpec.startsWith('.')) {\n throw new Error(\n `Glob imports must be relative (starting with \".\") or absolute (starting with \"/\", which is treated as relative to project root)`,\n );\n }\n\n if (searchSpec.startsWith(rootDir)) {\n searchSpec = path.resolve(config.root, searchSpec);\n searchSpec = path.relative(path.dirname(fileLoc), searchSpec);\n }\n\n const resolved = await new Promise((resolve, reject) =>\n glob(searchSpec, {cwd: path.dirname(fileLoc), nodir: true}, (err, matches) => {\n if (err) {\n return reject(err);\n }\n return resolve(matches);\n }),\n );\n return resolved\n .map((fileLoc) => {\n const normalized = slash(fileLoc);\n if (normalized.startsWith('.') || normalized.startsWith('/')) return normalized;\n return `./${normalized}`;\n })\n .filter((_fileLoc) => {\n // If final import *might* be the same as the source file, double check to avoid importing self\n const finalImportAbsolute = slash(path.resolve(path.dirname(fileLoc), toPath(_fileLoc)));\n return slash(finalImportAbsolute) !== slash(fileLoc);\n });\n };\n}\n" }, { "path": "snowpack/src/build/import-sri.ts", "content": "import {createHash} from 'crypto';\n\ntype SupportedSRIAlgorithm = 'sha512' | 'sha384' | 'sha256';\nconst DEFAULT_CRYPTO_HASH = 'sha384';\nconst EMPTY_BUFFER = Buffer.from('');\n\nexport const generateSRI = (\n buffer: Buffer = EMPTY_BUFFER,\n hashAlgorithm: SupportedSRIAlgorithm = DEFAULT_CRYPTO_HASH,\n) => `${hashAlgorithm}-${createHash(hashAlgorithm).update(buffer).digest('base64')}`;\n" }, { "path": "snowpack/src/build/optimize.ts", "content": "import cheerio from 'cheerio';\nimport * as esbuild from 'esbuild';\nimport {promises as fs, readFileSync, unlinkSync, writeFileSync} from 'fs';\nimport {fdir} from 'fdir';\nimport mkdirp from 'mkdirp';\nimport path from 'path';\nimport {logger} from '../logger';\nimport {OptimizeOptions, SnowpackConfig} from '../types';\nimport {\n addLeadingSlash,\n addTrailingSlash,\n hasExtension,\n isRemoteUrl,\n isTruthy,\n removeLeadingSlash,\n removeTrailingSlash,\n deleteFromBuildSafe,\n} from '../util';\nimport {getUrlsForFile} from './file-urls';\n\ninterface ScannedHtmlEntrypoint {\n file: string;\n root: cheerio.Root;\n getScripts: () => cheerio.Cheerio;\n getStyles: () => cheerio.Cheerio;\n getLinks: (rel: 'stylesheet') => cheerio.Cheerio;\n}\n\n// The manifest type is the one from ESBuild, but we might delete the outputs key\ntype SnowpackMetaManifest = Omit & Partial;\n\n// We want to output our bundled build directly into our build directory, but esbuild\n// has a bug where it complains about overwriting source files even when write: false.\n// We create a fake bundle directory for now. Nothing ever actually gets written here.\nconst FAKE_BUILD_DIRECTORY = path.join(process.cwd(), '~~bundle~~');\nconst FAKE_BUILD_DIRECTORY_REGEX = /.*\\~\\~bundle\\~\\~[\\\\\\/]/;\n\n/** Collect deep imports in the given set, recursively. */\nfunction collectDeepImports(\n config: SnowpackConfig,\n url: string,\n manifest: SnowpackMetaManifest,\n set: Set,\n): void {\n const buildPrefix = removeLeadingSlash(config.buildOptions.out.replace(process.cwd(), ''))\n .split(path.sep)\n .join(path.posix.sep);\n const normalizedUrl = !url.startsWith(buildPrefix) ? path.posix.join(buildPrefix, url) : url;\n const relativeImportUrl = url.replace(buildPrefix, '');\n\n if (set.has(relativeImportUrl)) {\n return;\n }\n\n set.add(relativeImportUrl);\n\n const manifestEntry = manifest.inputs[normalizedUrl];\n if (!manifestEntry) {\n throw new Error('Not Found in manifest: ' + normalizedUrl);\n }\n manifestEntry.imports.forEach(({path}) => collectDeepImports(config, path, manifest, set));\n return;\n}\n\n/**\n * Scan a collection of HTML files for entrypoints. A file is deemed an \"html entrypoint\"\n * if it contains an element. This prevents partials from being scanned.\n */\nasync function scanHtmlEntrypoints(htmlFiles: string[]): Promise<(ScannedHtmlEntrypoint | null)[]> {\n return Promise.all(\n htmlFiles.map(async (htmlFile) => {\n const code = await fs.readFile(htmlFile, 'utf8');\n const root = cheerio.load(code, {decodeEntities: false});\n const isHtmlFragment = root.html().startsWith('');\n if (isHtmlFragment) {\n return null;\n }\n return {\n file: htmlFile,\n root,\n getScripts: () => root('script[type=\"module\"]'),\n getStyles: () => root('style'),\n getLinks: (rel: 'stylesheet') => root(`link[rel=\"${rel}\"]`),\n };\n }),\n );\n}\n\nasync function extractBaseUrl(htmlData: ScannedHtmlEntrypoint, baseUrl: string): Promise {\n const {root, getScripts, getLinks} = htmlData;\n if (!baseUrl || baseUrl === '/') {\n return;\n }\n getScripts().each((_, elem) => {\n const scriptRoot = root(elem);\n const scriptSrc = scriptRoot.attr('src');\n if (!scriptSrc || !scriptSrc.startsWith(baseUrl)) {\n return;\n }\n scriptRoot.attr('src', addLeadingSlash(scriptSrc.replace(baseUrl, '')));\n scriptRoot.attr('snowpack-baseurl', 'true');\n });\n getLinks('stylesheet').each((_, elem) => {\n const linkRoot = root(elem);\n const styleHref = linkRoot.attr('href');\n if (!styleHref || !styleHref.startsWith(baseUrl)) {\n return;\n }\n linkRoot.attr('href', addLeadingSlash(styleHref.replace(baseUrl, '')));\n linkRoot.attr('snowpack-baseurl', 'true');\n });\n}\n\nasync function restitchBaseUrl(htmlData: ScannedHtmlEntrypoint, baseUrl: string): Promise {\n const {root, getScripts, getLinks} = htmlData;\n getScripts()\n .filter('[snowpack-baseurl]')\n .each((_, elem) => {\n const scriptRoot = root(elem);\n const scriptSrc = scriptRoot.attr('src')!;\n scriptRoot.attr('src', removeTrailingSlash(baseUrl) + addLeadingSlash(scriptSrc));\n scriptRoot.removeAttr('snowpack-baseurl');\n });\n getLinks('stylesheet')\n .filter('[snowpack-baseurl]')\n .each((_, elem) => {\n const linkRoot = root(elem);\n const styleHref = linkRoot.attr('href')!;\n linkRoot.attr('href', removeTrailingSlash(baseUrl) + addLeadingSlash(styleHref));\n linkRoot.removeAttr('snowpack-baseurl');\n });\n}\n\nasync function extractInlineScripts(htmlData: ScannedHtmlEntrypoint): Promise {\n const {file, root, getScripts, getStyles} = htmlData;\n getScripts().each((i, elem) => {\n const scriptRoot = root(elem);\n const scriptContent = scriptRoot.contents().text();\n if (!scriptContent) {\n return;\n }\n scriptRoot.empty();\n writeFileSync(file + `.inline.${i}.js`, scriptContent);\n scriptRoot.attr('src', `./${path.basename(file)}.inline.${i}.js`);\n scriptRoot.attr('snowpack-inline', `true`);\n });\n getStyles().each((i, elem) => {\n const styleRoot = root(elem);\n const styleContent = styleRoot.contents().text();\n if (!styleContent) {\n return;\n }\n styleRoot.after(\n ``,\n );\n styleRoot.remove();\n writeFileSync(file + `.inline.${i}.css`, styleContent);\n });\n}\n\nasync function restitchInlineScripts(htmlData: ScannedHtmlEntrypoint): Promise {\n const {file, root, getScripts, getLinks} = htmlData;\n getScripts()\n .filter('[snowpack-inline]')\n .each((_, elem) => {\n const scriptRoot = root(elem);\n const scriptFile = path.resolve(file, '..', scriptRoot.attr('src')!);\n const scriptContent = readFileSync(scriptFile, 'utf8');\n scriptRoot.text(scriptContent);\n scriptRoot.removeAttr('src');\n scriptRoot.removeAttr('snowpack-inline');\n unlinkSync(scriptFile);\n });\n getLinks('stylesheet')\n .filter('[snowpack-inline]')\n .each((_, elem) => {\n const linkRoot = root(elem);\n const styleFile = path.resolve(file, '..', linkRoot.attr('href')!);\n const styleContent = readFileSync(styleFile, 'utf8');\n const newStyleEl = root('');\n newStyleEl.text(styleContent);\n linkRoot.after(newStyleEl);\n linkRoot.remove();\n unlinkSync(styleFile);\n });\n}\n\n/** Add new bundled CSS files to the HTML entrypoint file, if not already there. */\nfunction addNewBundledCss(\n htmlData: ScannedHtmlEntrypoint,\n manifest: SnowpackMetaManifest,\n baseUrl: string,\n): void {\n if (!manifest.outputs) {\n return;\n }\n for (const key of Object.keys(manifest.outputs)) {\n if (!hasExtension(key, '.css')) {\n continue;\n }\n const scriptKey = key.replace('.css', '.js');\n if (!manifest.outputs[scriptKey]) {\n continue;\n }\n const hasCssImportAlready = htmlData\n .getLinks('stylesheet')\n .toArray()\n .some((v) => {\n const {attribs} = v as cheerio.TagElement;\n return attribs && attribs.href.includes(removeLeadingSlash(key));\n });\n const hasScriptImportAlready = htmlData\n .getScripts()\n .toArray()\n .some((v) => {\n const {attribs} = v as cheerio.TagElement;\n return attribs && attribs.src.includes(removeLeadingSlash(scriptKey));\n });\n\n if (hasCssImportAlready || !hasScriptImportAlready) {\n continue;\n }\n const linkHref = removeTrailingSlash(baseUrl) + addLeadingSlash(key);\n htmlData.root('head').append(``);\n }\n}\n\n/**\n * Traverse the entrypoint for JS scripts, and add preload links to the HTML entrypoint.\n */\nfunction preloadEntrypoint(\n htmlData: ScannedHtmlEntrypoint,\n manifest: SnowpackMetaManifest,\n config: SnowpackConfig,\n): void {\n const {root, getScripts} = htmlData;\n const preloadScripts = getScripts()\n .map((_, elem) => {\n const {attribs} = elem as cheerio.TagElement;\n return attribs.src;\n })\n .get()\n .filter(isTruthy);\n const collectedDeepImports = new Set();\n for (const preloadScript of preloadScripts) {\n collectDeepImports(config, preloadScript, manifest, collectedDeepImports);\n }\n const baseUrl = config.buildOptions.baseUrl;\n for (const imp of collectedDeepImports) {\n const preloadUrl = (baseUrl ? removeTrailingSlash(baseUrl) : '') + addLeadingSlash(imp);\n root('head').append(``);\n }\n}\n\n/**\n * Handle the many different user input formats to return an array of strings.\n * resolve \"auto\" mode here.\n */\nasync function getEntrypoints(\n entrypoints: OptimizeOptions['entrypoints'],\n allBuildFiles: string[],\n) {\n if (entrypoints === 'auto') {\n // TODO: Filter allBuildFiles by HTML with head & body\n return allBuildFiles.filter((f) => hasExtension(f, '.html'));\n }\n if (Array.isArray(entrypoints)) {\n return entrypoints;\n }\n if (typeof entrypoints === 'function') {\n return entrypoints({files: allBuildFiles});\n }\n throw new Error('UNEXPECTED ENTRYPOINTS: ' + entrypoints);\n}\n\n/**\n * Resolve an array of string entrypoints to absolute file paths. Handle\n * source vs. build directory relative entrypoints here as well.\n */\nasync function resolveEntrypoints(\n entrypoints: string[],\n cwd: string,\n buildDirectoryLoc: string,\n config: SnowpackConfig,\n) {\n return Promise.all(\n entrypoints.map(async (entrypoint) => {\n if (path.isAbsolute(entrypoint)) {\n return entrypoint;\n }\n const buildEntrypoint = path.resolve(buildDirectoryLoc, entrypoint);\n if (await fs.stat(buildEntrypoint).catch(() => null)) {\n return buildEntrypoint;\n }\n const resolvedSourceFile = path.resolve(cwd, entrypoint);\n let resolvedSourceEntrypoint: string | undefined;\n if (await fs.stat(resolvedSourceFile).catch(() => null)) {\n const resolvedSourceUrls = getUrlsForFile(resolvedSourceFile, config);\n if (resolvedSourceUrls) {\n resolvedSourceEntrypoint = path.resolve(\n buildDirectoryLoc,\n removeLeadingSlash(resolvedSourceUrls[0]),\n );\n if (await fs.stat(resolvedSourceEntrypoint).catch(() => null)) {\n return resolvedSourceEntrypoint;\n }\n }\n }\n logger.error(`Error: entrypoint \"${entrypoint}\" not found in either build or source:`, {\n name: 'optimize',\n });\n logger.error(` ✘ Build Entrypoint: ${buildEntrypoint}`, {name: 'optimize'});\n logger.error(\n ` ✘ Source Entrypoint: ${resolvedSourceFile} ${\n resolvedSourceEntrypoint ? `-> ${resolvedSourceEntrypoint}` : ''\n }`,\n {name: 'optimize'},\n );\n throw new Error(`Optimize entrypoint \"${entrypoint}\" does not exist.`);\n }),\n );\n}\n\n/**\n * Process your entrypoints as either all JS or all HTML. If HTML,\n * scan those HTML files and add a Cheerio-powered root document\n * so that we can modify the HTML files as we go.\n */\nasync function processEntrypoints(\n originalEntrypointValue: OptimizeOptions['entrypoints'],\n entrypointFiles: string[],\n buildDirectoryLoc: string,\n baseUrl: string,\n): Promise<{htmlEntrypoints: null | ScannedHtmlEntrypoint[]; bundleEntrypoints: string[]}> {\n // If entrypoints are JS:\n if (entrypointFiles.every((f) => hasExtension(f, '.js'))) {\n return {htmlEntrypoints: null, bundleEntrypoints: entrypointFiles};\n }\n // If entrypoints are HTML:\n if (entrypointFiles.every((f) => hasExtension(f, '.html'))) {\n const rawHtmlEntrypoints = await scanHtmlEntrypoints(entrypointFiles);\n const htmlEntrypoints = rawHtmlEntrypoints.filter(isTruthy);\n if (\n originalEntrypointValue !== 'auto' &&\n rawHtmlEntrypoints.length !== htmlEntrypoints.length\n ) {\n throw new Error('INVALID HTML ENTRYPOINTS: ' + originalEntrypointValue);\n }\n htmlEntrypoints.forEach((val) => extractBaseUrl(val, baseUrl));\n htmlEntrypoints.forEach(extractInlineScripts);\n const bundleEntrypoints = Array.from(\n htmlEntrypoints.reduce((all, val) => {\n val.getLinks('stylesheet').each((_, elem) => {\n const {attribs} = elem as cheerio.TagElement;\n if (!attribs || !attribs.href || isRemoteUrl(attribs.href)) {\n return;\n }\n const resolvedCSS =\n attribs.href[0] === '/'\n ? path.resolve(buildDirectoryLoc, removeLeadingSlash(attribs.href))\n : path.resolve(val.file, '..', attribs.href);\n all.add(resolvedCSS);\n });\n val.getScripts().each((_, elem) => {\n const {attribs} = elem as cheerio.TagElement;\n if (!attribs.src || isRemoteUrl(attribs.src)) {\n return;\n }\n const resolvedJS =\n attribs.src[0] === '/'\n ? path.join(buildDirectoryLoc, removeLeadingSlash(attribs.src))\n : path.join(val.file, '..', attribs.src);\n all.add(resolvedJS);\n });\n return all;\n }, new Set()),\n );\n return {htmlEntrypoints, bundleEntrypoints};\n }\n // If entrypoints are mixed or neither, throw an error.\n throw new Error('MIXED ENTRYPOINTS: ' + entrypointFiles);\n}\n\n/**\n * Run esbuild on the build directory. This is run regardless of bundle=true or false,\n * since we use the generated manifest in either case.\n */\nasync function runEsbuildOnBuildDirectory(\n bundleEntrypoints: string[],\n allFiles: string[],\n config: SnowpackConfig,\n): Promise<{manifest: SnowpackMetaManifest; outputFiles: esbuild.OutputFile[]}> {\n // esbuild requires publicPath to be a remote URL. Only pass to esbuild if baseUrl is remote.\n let publicPath: string | undefined;\n if (\n config.buildOptions.baseUrl.startsWith('http:') ||\n config.buildOptions.baseUrl.startsWith('https:') ||\n config.buildOptions.baseUrl.startsWith('//')\n ) {\n publicPath = config.buildOptions.baseUrl;\n }\n const {outputFiles, warnings, metafile} = await esbuild.build({\n entryPoints: bundleEntrypoints,\n outdir: FAKE_BUILD_DIRECTORY,\n outbase: config.buildOptions.out,\n write: false,\n bundle: true,\n loader: config.optimize!.loader,\n sourcemap: config.optimize!.sourcemap,\n splitting: config.optimize!.splitting,\n format: 'esm',\n platform: 'browser',\n metafile: true,\n publicPath,\n minify: config.optimize!.minify,\n target: config.optimize!.target,\n external: Array.from(new Set(allFiles.map((f) => '*' + path.extname(f))))\n .filter((ext) => ext !== '*.js' && ext !== '*.mjs' && ext !== '*.css' && ext !== '*')\n .concat(config.packageOptions?.external ?? []),\n charset: 'utf8',\n });\n\n if (!outputFiles) {\n throw new Error('EMPTY BUILD');\n }\n if (warnings.length > 0) {\n console.warn(warnings);\n }\n outputFiles.forEach((f) => {\n f.path = f.path.replace(FAKE_BUILD_DIRECTORY_REGEX, addTrailingSlash(config.buildOptions.out));\n });\n const manifest = metafile!;\n if (!config.optimize?.bundle) {\n delete (manifest as SnowpackMetaManifest).outputs;\n } else {\n Object.entries(manifest.outputs).forEach(([f, val]) => {\n const newKey = f.replace(FAKE_BUILD_DIRECTORY_REGEX, '/');\n manifest.outputs[newKey] = val;\n delete manifest.outputs[f];\n });\n }\n logger.debug(`outputFiles: ${JSON.stringify(outputFiles.map((f) => f.path))}`);\n logger.debug(`manifest: ${JSON.stringify(manifest)}`);\n\n return {outputFiles, manifest};\n}\n\n/** The main optimize function: runs optimization on a build directory. */\nexport async function runBuiltInOptimize(config: SnowpackConfig) {\n const originalCwd = process.cwd();\n const buildDirectoryLoc = config.buildOptions.out;\n const options = config.optimize;\n if (!options) {\n return;\n }\n\n // * Scan to collect all build files: We'll need this throughout.\n const allBuildFiles = (await new fdir()\n .withFullPaths()\n .crawl(buildDirectoryLoc)\n .withPromise()) as string[];\n\n // * Resolve and validate your entrypoints: they may be JS or HTML\n const userEntrypoints = await getEntrypoints(options.entrypoints, allBuildFiles);\n logger.debug(JSON.stringify(userEntrypoints), {name: 'optimize.entrypoints'});\n const resolvedEntrypoints = await resolveEntrypoints(\n userEntrypoints,\n originalCwd,\n buildDirectoryLoc,\n config,\n );\n logger.debug('(resolved) ' + JSON.stringify(resolvedEntrypoints), {name: 'optimize.entrypoints'});\n const {htmlEntrypoints, bundleEntrypoints} = await processEntrypoints(\n options.entrypoints,\n resolvedEntrypoints,\n buildDirectoryLoc,\n config.buildOptions.baseUrl,\n );\n logger.debug(`htmlEntrypoints: ${JSON.stringify(htmlEntrypoints?.map((f) => f.file))}`);\n logger.debug(`bundleEntrypoints: ${JSON.stringify(bundleEntrypoints)}`);\n\n if (\n (!htmlEntrypoints || htmlEntrypoints.length === 0) &&\n bundleEntrypoints.length === 0 &&\n (options.bundle || options.preload)\n ) {\n throw new Error(\n '[optimize] No HTML entrypoints detected. Set \"entrypoints\" manually if your site HTML is generated outside of Snowpack (SSR, Rails, PHP, etc.).',\n );\n }\n\n // * Run esbuild on the entire build directory. Even if you are not writing the result\n // to disk (bundle: false), we still use the bundle manifest as an in-memory representation\n // of our import graph, saved to disk.\n const {manifest, outputFiles} = await runEsbuildOnBuildDirectory(\n bundleEntrypoints,\n allBuildFiles,\n config,\n );\n\n // * BUNDLE: TRUE - Save the bundle result to the build directory, and clean up to remove all original\n // build files that now live in the bundles.\n if (options.bundle) {\n for (const bundledInput of Object.keys(manifest.inputs)) {\n const outputKey = path.relative(buildDirectoryLoc, path.resolve(process.cwd(), bundledInput));\n if (!manifest.outputs![`/` + outputKey]) {\n logger.debug(`Removing bundled source file: ${path.resolve(buildDirectoryLoc, outputKey)}`);\n deleteFromBuildSafe(path.resolve(buildDirectoryLoc, outputKey), config);\n }\n }\n deleteFromBuildSafe(\n path.resolve(\n buildDirectoryLoc,\n removeLeadingSlash(path.posix.join(config.buildOptions.metaUrlPath, 'pkg')),\n ),\n config,\n );\n for (const outputFile of outputFiles!) {\n mkdirp.sync(path.dirname(outputFile.path));\n await fs.writeFile(outputFile.path, outputFile.contents);\n }\n if (htmlEntrypoints) {\n for (const htmlEntrypoint of htmlEntrypoints) {\n addNewBundledCss(htmlEntrypoint, manifest, config.buildOptions.baseUrl);\n }\n }\n }\n // * BUNDLE: FALSE - Just minifying & transform the CSS & JS files in place.\n else if (options.minify || options.target) {\n for (const f of allBuildFiles) {\n if (['.js', '.css'].includes(path.extname(f))) {\n let code = await fs.readFile(f, 'utf8');\n const minified = await esbuild.transform(code, {\n sourcefile: path.basename(f),\n loader: path.extname(f).slice(1) as 'js' | 'css',\n minify: options.minify,\n target: options.target,\n charset: 'utf8',\n });\n code = minified.code;\n await fs.writeFile(f, code);\n }\n }\n }\n\n // * Restitch any inline scripts into HTML entrypoints that had been split out\n // for the sake of bundling/manifest.\n if (htmlEntrypoints) {\n for (const htmlEntrypoint of htmlEntrypoints) {\n restitchInlineScripts(htmlEntrypoint);\n }\n }\n\n // * PRELOAD: TRUE - Add preload link elements for each HTML entrypoint, to flatten\n // and optimize any deep import waterfalls.\n if (options.preload) {\n if (options.bundle) {\n throw new Error('preload is not needed when bundle=true, and cannot be used in combination.');\n }\n if (!htmlEntrypoints || htmlEntrypoints.length === 0) {\n throw new Error('preload only works with HTML entrypoints.');\n }\n for (const htmlEntrypoint of htmlEntrypoints) {\n preloadEntrypoint(htmlEntrypoint, manifest, config);\n }\n }\n\n // * Restitch any inline scripts into HTML entrypoints that had been split out\n // for the sake of bundling/manifest.\n if (htmlEntrypoints) {\n for (const htmlEntrypoint of htmlEntrypoints) {\n restitchBaseUrl(htmlEntrypoint, config.buildOptions.baseUrl);\n }\n }\n\n // Write the final HTML entrypoints to disk (if they exist).\n if (htmlEntrypoints) {\n for (const htmlEntrypoint of htmlEntrypoints) {\n await fs.writeFile(htmlEntrypoint.file, htmlEntrypoint.root.html());\n }\n }\n\n // Write the final build manifest to disk.\n if (options.manifest) {\n await fs.writeFile(\n path.join(config.buildOptions.out, 'build-manifest.json'),\n JSON.stringify(manifest),\n );\n }\n process.chdir(originalCwd);\n return;\n}\n" }, { "path": "snowpack/src/build/process.ts", "content": "import type {ImportMap, InstallTarget} from 'esinstall';\nimport type {\n LoadUrlOptions,\n CommandOptions,\n OnFileChangeCallback,\n SnowpackConfig,\n SnowpackDevServer,\n} from '../types';\nimport * as colors from 'kleur/colors';\nimport {promises as fs} from 'fs';\nimport {performance} from 'perf_hooks';\nimport {fdir} from 'fdir';\nimport mkdirp from 'mkdirp';\nimport path from 'path';\nimport picomatch from 'picomatch';\nimport slash from 'slash';\nimport {getUrlsForFile} from './file-urls';\nimport {runPipelineCleanupStep, runPipelineOptimizeStep} from './build-pipeline';\nimport {wrapImportProxy} from './build-import-proxy';\nimport {runBuiltInOptimize} from './optimize';\nimport {startServer} from '../commands/dev';\nimport {getPackageSource} from '../sources/util';\nimport {installPackages} from '../sources/local-install';\nimport {deleteFromBuildSafe, isPathImport, isRemoteUrl, IS_DOTFILE_REGEX} from '../util';\nimport {logger} from '../logger';\n\ninterface BuildState {\n commandOptions: CommandOptions;\n config: SnowpackConfig;\n\n // Environments\n isWatch: boolean;\n isDev: boolean;\n isSSR: boolean;\n isHMR: boolean;\n\n // Options\n // Should the build directory be cleaned first\n clean: boolean;\n\n // State\n allBareModuleSpecifiers: InstallTarget[];\n allFileUrlsUnique: Set;\n allFileUrlsToProcess: string[];\n buildDirectoryLoc: string;\n devServer: SnowpackDevServer;\n optimizedImportMap?: ImportMap;\n}\n\nfunction getIsHmrEnabled(config: SnowpackConfig) {\n return config.buildOptions.watch && !!config.devOptions.hmr;\n}\n\n/**\n * Scan a directory and remove any empty folders, recursively.\n */\nasync function removeEmptyFolders(directoryLoc: string): Promise {\n if (!(await fs.stat(directoryLoc)).isDirectory()) {\n return false;\n }\n // If folder is empty, clear it\n const files = await fs.readdir(directoryLoc);\n if (files.length === 0) {\n await fs.rmdir(directoryLoc);\n return false;\n }\n // Otherwise, step in and clean each contained item\n await Promise.all(files.map((file) => removeEmptyFolders(path.join(directoryLoc, file))));\n // After, check again if folder is now empty\n const afterFiles = await fs.readdir(directoryLoc);\n if (afterFiles.length == 0) {\n await fs.rmdir(directoryLoc);\n }\n return true;\n}\n\nasync function installOptimizedDependencies(\n installTargets: InstallTarget[],\n installDest: string,\n commandOptions: CommandOptions,\n) {\n const baseInstallOptions = {\n dest: installDest,\n external: commandOptions.config.packageOptions.external,\n env: {NODE_ENV: commandOptions.config.mode},\n treeshake: commandOptions.config.buildOptions.watch\n ? false\n : commandOptions.config.optimize?.treeshake !== false,\n };\n\n const pkgSource = getPackageSource(commandOptions.config);\n const installOptions = await pkgSource.modifyBuildInstallOptions(\n baseInstallOptions,\n installTargets,\n );\n // 2. Install dependencies, based on the scan of your final build.\n const installResult = await installPackages({\n config: commandOptions.config,\n isSSR: commandOptions.config.buildOptions.ssr,\n isDev: false,\n installTargets,\n installOptions,\n });\n return installResult;\n}\n\nexport async function createBuildState(commandOptions: CommandOptions): Promise {\n const {config} = commandOptions;\n const isWatch = !!config.buildOptions.watch;\n const isDev = !!isWatch;\n const isSSR = !!config.buildOptions.ssr;\n const isHMR = getIsHmrEnabled(config);\n\n // Seems like maybe we shouldn't be doing this...\n config.buildOptions.resolveProxyImports = !config.optimize?.bundle;\n config.devOptions.hmrPort = isHMR ? config.devOptions.hmrPort : undefined;\n config.devOptions.port = 0;\n\n const clean = config.buildOptions.clean;\n const buildDirectoryLoc = config.buildOptions.out;\n\n const devServer = await startServer(commandOptions, {isDev, isWatch, preparePackages: false});\n\n return {\n commandOptions,\n config,\n isDev,\n isHMR,\n isSSR,\n isWatch,\n clean,\n\n buildDirectoryLoc,\n allBareModuleSpecifiers: [],\n allFileUrlsUnique: new Set(),\n allFileUrlsToProcess: [],\n devServer,\n };\n}\n\nexport function maybeCleanBuildDirectory(state: BuildState) {\n const {buildDirectoryLoc} = state;\n if (state.clean) {\n deleteFromBuildSafe(buildDirectoryLoc, state.config);\n }\n mkdirp.sync(buildDirectoryLoc);\n}\n\nexport async function addBuildFiles(state: BuildState, files: string[]) {\n const {config} = state;\n const excludeGlobs = [...config.exclude, ...config.testOptions.files];\n const foundExcludeMatch = picomatch(excludeGlobs);\n const mountedNodeModules = Object.keys(config.mount).filter((v) => v.includes('node_modules'));\n\n const allFileUrls: string[] = [];\n\n for (const f of files) {\n if (foundExcludeMatch(f)) {\n const isMounted = mountedNodeModules.find((mountKey) => f.startsWith(mountKey));\n if (!isMounted || (isMounted && foundExcludeMatch(f.slice(isMounted.length)))) {\n continue;\n }\n }\n const fileUrls = getUrlsForFile(f, config)!;\n allFileUrls.push(...fileUrls);\n }\n\n state.allBareModuleSpecifiers = [];\n state.allFileUrlsUnique = new Set(allFileUrls);\n state.allFileUrlsToProcess = [...state.allFileUrlsUnique];\n}\n\nexport async function addBuildFilesFromMountpoints(state: BuildState): Promise {\n const {config} = state;\n\n const possibleFiles: string[] = [];\n\n for (const [mountKey, mountEntry] of Object.entries(config.mount)) {\n logger.debug(`Mounting directory: '${mountKey}' as URL '${mountEntry.url}'`);\n const allMatchedFiles = (await new fdir()\n .withFullPaths()\n .crawl(mountKey)\n .withPromise()) as string[];\n if (mountEntry.dot) {\n possibleFiles.push(...allMatchedFiles);\n } else {\n possibleFiles.push(...allMatchedFiles.filter((f) => !IS_DOTFILE_REGEX.test(slash(f)))); // TODO: use a file URL instead\n }\n }\n\n addBuildFiles(state, possibleFiles);\n}\n\ntype FlushLoadOptions = LoadUrlOptions & {encoding?: undefined};\n\nasync function flushFileQueue(\n state: BuildState,\n ignorePkg: boolean,\n loadOptions: FlushLoadOptions,\n) {\n const {\n config,\n allFileUrlsUnique,\n allFileUrlsToProcess,\n allBareModuleSpecifiers,\n buildDirectoryLoc,\n devServer,\n isHMR,\n } = state;\n\n const pkgUrlPrefix = path.posix.join(config.buildOptions.metaUrlPath, 'pkg/');\n\n logger.debug(`QUEUE: ${allFileUrlsToProcess}`);\n while (allFileUrlsToProcess.length > 0) {\n const fileUrl = allFileUrlsToProcess.shift()!;\n const fileDestinationLoc = path.join(buildDirectoryLoc, fileUrl);\n logger.debug(`BUILD: ${fileUrl}`);\n // ignore package URLs when `ignorePkg` is true, EXCEPT proxy imports. Those can sometimes\n // be added after the intial package scan, depending on how a non-JS package is imported.\n if (ignorePkg && fileUrl.startsWith(pkgUrlPrefix)) {\n if (fileUrl.endsWith('.proxy.js')) {\n const pkgContents = await fs.readFile(\n path.join(buildDirectoryLoc, fileUrl.replace('.proxy.js', '')),\n );\n const pkgContentsProxy = await wrapImportProxy({\n url: fileUrl.replace('.proxy.js', ''),\n code: pkgContents,\n hmr: isHMR,\n config: config,\n });\n await fs.writeFile(fileDestinationLoc, pkgContentsProxy);\n }\n continue;\n }\n const result = await devServer.loadUrl(fileUrl, loadOptions);\n if (!result) {\n // if this URL doesn’t exist, skip to next file (it may be an optional output type, such as .css for .svelte)\n logger.debug(`BUILD: ${fileUrl} skipped (no output)`);\n continue;\n }\n await mkdirp(path.dirname(fileDestinationLoc));\n await fs.writeFile(fileDestinationLoc, result.contents);\n for (const installTarget of result.imports) {\n const importedUrl = installTarget.specifier;\n logger.debug(`ADD: ${importedUrl}`);\n if (isRemoteUrl(importedUrl)) {\n // do nothing\n } else if (isPathImport(importedUrl)) {\n if (importedUrl[0] === '/') {\n if (!allFileUrlsUnique.has(importedUrl)) {\n allFileUrlsUnique.add(importedUrl);\n allFileUrlsToProcess.push(importedUrl);\n }\n } else {\n logger.warn(`warn: import \"${importedUrl}\" of \"${fileUrl}\" could not be resolved.`);\n }\n } else {\n allBareModuleSpecifiers.push(installTarget);\n }\n }\n }\n}\n\nexport async function buildFiles(state: BuildState) {\n const {isSSR, isHMR} = state;\n\n logger.info(colors.yellow('! building files...'));\n const buildStart = performance.now();\n await flushFileQueue(state, false, {isSSR, isHMR, isResolve: false});\n const buildEnd = performance.now();\n logger.info(\n `${colors.green('✔')} files built. ${colors.dim(\n `[${((buildEnd - buildStart) / 1000).toFixed(2)}s]`,\n )}`,\n );\n}\n\nexport async function buildDependencies(state: BuildState) {\n const {commandOptions, config, buildDirectoryLoc, isWatch} = state;\n logger.info(colors.yellow('! building dependencies...'));\n const packagesStart = performance.now();\n if (isWatch) {\n const pkgSource = getPackageSource(config);\n await pkgSource.prepare();\n } else {\n const installDest = path.join(buildDirectoryLoc, config.buildOptions.metaUrlPath, 'pkg');\n const installResult = await installOptimizedDependencies(\n [...state.allBareModuleSpecifiers],\n installDest,\n commandOptions,\n );\n state.optimizedImportMap = installResult.importMap;\n }\n const packagesEnd = performance.now();\n logger.info(\n `${colors.green('✔')} dependencies built. ${colors.dim(\n `[${((packagesEnd - packagesStart) / 1000).toFixed(2)}s]`,\n )}`,\n );\n}\n\nexport async function writeToDisk(state: BuildState) {\n const {isHMR, isSSR, isWatch} = state;\n\n logger.info(colors.yellow('! writing to disk...'));\n const writeStart = performance.now();\n state.allFileUrlsToProcess = [...state.allFileUrlsUnique];\n await flushFileQueue(state, !isWatch, {\n isSSR,\n isHMR,\n isResolve: true,\n importMap: state.optimizedImportMap,\n });\n const writeEnd = performance.now();\n logger.info(\n `${colors.green('✔')} write complete. ${colors.dim(\n `[${((writeEnd - writeStart) / 1000).toFixed(2)}s]`,\n )}`,\n );\n}\n\nexport async function startWatch(state: BuildState) {\n const {config, devServer, isSSR, isHMR} = state;\n\n let onFileChangeCallback: OnFileChangeCallback = () => {};\n devServer.onFileChange(async ({filePath}) => {\n // First, do our own re-build logic\n const fileUrls = getUrlsForFile(filePath, config);\n if (!fileUrls || fileUrls.length === 0) {\n return;\n }\n state.allFileUrlsToProcess.push(fileUrls[0]);\n await flushFileQueue(state, false, {\n isSSR,\n isHMR,\n isResolve: true,\n importMap: state.optimizedImportMap,\n });\n // Then, call the user's onFileChange callback (if one was provided)\n await onFileChangeCallback({filePath});\n });\n\n if (devServer.hmrEngine) {\n logger.info(`${colors.green(`HMR ready:`)} ws://localhost:${devServer.hmrEngine.port}`);\n }\n\n return {\n onFileChange: (callback) => (onFileChangeCallback = callback),\n shutdown() {\n return devServer.shutdown();\n },\n };\n}\n\nexport async function optimize(state: BuildState) {\n const {config, buildDirectoryLoc} = state;\n\n // \"--optimize\" mode - Optimize the build.\n if (config.optimize || config.plugins.some((p) => p.optimize)) {\n const optimizeStart = performance.now();\n logger.info(colors.yellow('! optimizing build...'));\n await runBuiltInOptimize(config);\n await runPipelineOptimizeStep(buildDirectoryLoc, {config});\n const optimizeEnd = performance.now();\n logger.info(\n `${colors.green('✔')} build optimized. ${colors.dim(\n `[${((optimizeEnd - optimizeStart) / 1000).toFixed(2)}s]`,\n )}`,\n );\n }\n}\n\nexport async function postBuildCleanup(state: BuildState) {\n const {buildDirectoryLoc, config, devServer} = state;\n\n await removeEmptyFolders(buildDirectoryLoc);\n await runPipelineCleanupStep(config);\n logger.info(`${colors.underline(colors.green(colors.bold('▶ Build Complete!')))}`);\n await devServer.shutdown();\n}\n" }, { "path": "snowpack/src/commands/add-rm.ts", "content": "import {send} from 'httpie';\nimport {cyan, dim, underline} from 'kleur/colors';\nimport path from 'path';\nimport {logger} from '../logger';\nimport {CommandOptions, LockfileManifest} from '../types';\nimport {\n convertLockfileToSkypackImportMap,\n convertSkypackImportMapToLockfile,\n LOCKFILE_NAME,\n writeLockfile,\n createRemotePackageSDK,\n} from '../util';\nimport {getPackageSource} from '../sources/util';\n\nfunction pkgInfoFromString(str) {\n const idx = str.lastIndexOf('@');\n if (idx <= 0) return [str];\n return [str.slice(0, idx), str.slice(idx + 1)];\n}\n\nexport async function addCommand(addValue: string, commandOptions: CommandOptions) {\n const {lockfile, config} = commandOptions;\n if (config.packageOptions.source === 'remote-next') {\n throw new Error(\n `[remote-next] add command has been deprecated. Manually add dependencies to the \"dependencies\" object in your snowpack config file.`,\n );\n }\n if (config.packageOptions.source !== 'remote') {\n throw new Error(`add command requires packageOptions.source=\"remote\".`);\n }\n const remotePackageSDK = createRemotePackageSDK(config);\n let [pkgName, pkgSemver] = pkgInfoFromString(addValue);\n const installMessage = pkgSemver ? `${pkgName}@${pkgSemver}` : pkgName;\n logger.info(`fetching ${cyan(installMessage)} from CDN...`);\n if (!pkgSemver || pkgSemver === 'latest') {\n const {data} = await send('GET', `http://registry.npmjs.org/${pkgName}/latest`);\n pkgSemver = `^${data.version}`;\n }\n logger.info(\n `adding ${cyan(underline(`${pkgName}@${pkgSemver}`))} to your project lockfile. ${dim(\n `(${LOCKFILE_NAME})`,\n )}`,\n );\n const addedDependency = {[pkgName]: pkgSemver};\n const lookupResponse = await remotePackageSDK.lookupBySpecifier(pkgName, pkgSemver);\n if (lookupResponse.error) {\n throw new Error(`There was a problem looking up ${pkgName}@${pkgSemver}`);\n }\n const newLockfile: LockfileManifest = convertSkypackImportMapToLockfile(\n {\n ...lockfile?.dependencies,\n ...addedDependency,\n },\n await remotePackageSDK.generateImportMap(\n addedDependency,\n lockfile\n ? convertLockfileToSkypackImportMap(config.packageOptions.origin, lockfile)\n : undefined,\n ),\n );\n await writeLockfile(path.join(config.root, LOCKFILE_NAME), newLockfile);\n await getPackageSource(config).prepare();\n}\n\nexport async function rmCommand(addValue: string, commandOptions: CommandOptions) {\n const {lockfile, config} = commandOptions;\n if (config.packageOptions.source === 'remote-next') {\n throw new Error(\n `[remote-next] rm command has been deprecated. Manually remove dependencies from the \"dependencies\" object in your snowpack config file.`,\n );\n }\n if (config.packageOptions.source !== 'remote') {\n throw new Error(`rm command requires packageOptions.source=\"remote\".`);\n }\n const remotePackageSDK = createRemotePackageSDK(config);\n let [pkgName] = pkgInfoFromString(addValue);\n logger.info(`removing ${cyan(pkgName)} from project lockfile...`);\n const newLockfile: LockfileManifest = convertSkypackImportMapToLockfile(\n lockfile?.dependencies ?? {},\n await remotePackageSDK.generateImportMap(\n {[pkgName]: null},\n lockfile\n ? convertLockfileToSkypackImportMap(config.packageOptions.origin, lockfile)\n : undefined,\n ),\n );\n delete newLockfile.dependencies[pkgName];\n await writeLockfile(path.join(config.root, LOCKFILE_NAME), newLockfile);\n await getPackageSource(config).prepare();\n}\n" }, { "path": "snowpack/src/commands/build.ts", "content": "import type {CommandOptions, SnowpackBuildResult} from '../types';\nimport {logger} from '../logger';\nimport {\n createBuildState,\n maybeCleanBuildDirectory,\n addBuildFilesFromMountpoints,\n buildFiles,\n buildDependencies,\n optimize,\n writeToDisk,\n postBuildCleanup,\n startWatch,\n} from '../build/process';\n\nexport async function build(commandOptions: CommandOptions): Promise {\n const buildState = await createBuildState(commandOptions);\n\n // Start by cleaning the directory\n maybeCleanBuildDirectory(buildState);\n\n await addBuildFilesFromMountpoints(buildState);\n await buildFiles(buildState);\n await buildDependencies(buildState);\n await writeToDisk(buildState);\n\n // \"--watch\" mode - Start watching the file system.\n if (buildState.isWatch) {\n return startWatch(buildState);\n }\n\n await optimize(buildState);\n await postBuildCleanup(buildState);\n\n return {\n onFileChange: () => {\n throw new Error('build().onFileChange() only supported in \"watch\" mode.');\n },\n shutdown: () => {\n throw new Error('build().shutdown() only supported in \"watch\" mode.');\n },\n };\n}\n\nexport async function command(commandOptions: CommandOptions) {\n try {\n commandOptions.config.devOptions.output =\n commandOptions.config.devOptions.output ||\n (commandOptions.config.buildOptions.watch ? 'dashboard' : 'stream');\n await build(commandOptions);\n } catch (err) {\n logger.error(err.message);\n logger.error(err.stack);\n process.exit(1);\n }\n\n if (commandOptions.config.buildOptions.watch) {\n // We intentionally never want to exit in watch mode!\n return new Promise(() => {});\n }\n}\n" }, { "path": "snowpack/src/commands/dev.ts", "content": "import {FSWatcher} from 'chokidar';\nimport isCompressible from 'compressible';\nimport {InstallTarget} from 'esinstall';\nimport etag from 'etag';\nimport {EventEmitter} from 'events';\nimport {createReadStream, promises as fs, statSync} from 'fs';\nimport {fdir} from 'fdir';\nimport picomatch from 'picomatch';\nimport type {Socket} from 'net';\nimport http from 'http';\nimport http2 from 'http2';\nimport * as colors from 'kleur/colors';\nimport mime from 'mime-types';\nimport os from 'os';\nimport path from 'path';\nimport {performance} from 'perf_hooks';\nimport slash from 'slash';\nimport stream from 'stream';\nimport url from 'url';\nimport zlib from 'zlib';\nimport {generateEnvModule, getMetaUrlPath, wrapImportProxy} from '../build/build-import-proxy';\nimport {FileBuilder} from '../build/file-builder';\nimport {getBuiltFileUrls, getMountEntryForFile, getUrlsForFile} from '../build/file-urls';\nimport {startHmrEngine} from '../dev/hmr';\nimport {logger} from '../logger';\nimport {getPackageSource} from '../sources/util';\nimport {createLoader as createServerRuntime} from '../ssr-loader';\nimport {\n CommandOptions,\n LoadResult,\n LoadUrlOptions,\n OnFileChangeCallback,\n RouteConfigObject,\n ServerRuntime,\n SnowpackConfig,\n SnowpackDevServer,\n} from '../types';\nimport {\n createInstallTarget,\n getCacheKey,\n HMR_CLIENT_CODE,\n HMR_OVERLAY_CODE,\n isFsEventsEnabled,\n IS_DOTFILE_REGEX,\n openInBrowser,\n} from '../util';\nimport {getPort, startDashboard, paintEvent} from './paint';\nimport {cssModuleJSON} from '../build/import-css';\nimport {runPipelineCleanupStep} from '../build/build-pipeline';\n\nexport class OneToManyMap {\n readonly keyToValue = new Map();\n readonly valueToKey = new Map();\n add(key: string, _value: string | string[]) {\n const value = Array.isArray(_value) ? _value : [_value];\n this.keyToValue.set(key, value);\n for (const val of value) {\n this.valueToKey.set(val, key);\n }\n }\n delete(key: string) {\n const value = this.value(key);\n this.keyToValue.delete(key);\n if (value) {\n for (const val of value) {\n this.valueToKey.delete(val);\n }\n }\n }\n key(value: string) {\n return this.valueToKey.get(value);\n }\n value(key: string) {\n return this.keyToValue.get(key);\n }\n}\n\ninterface FoundFile {\n loc: string;\n type: string;\n // contents: Buffer;\n isStatic: boolean;\n isResolve: boolean;\n}\n\nconst FILE_BUILD_RESULT_ERROR = `Build Result Error: There was a problem with a file build result.`;\n\n/**\n * If encoding is defined, return a string. Otherwise, return a Buffer.\n */\nfunction encodeResponse(\n response: Buffer | string,\n encoding: BufferEncoding | undefined | null,\n): Buffer | string {\n if (encoding === undefined) {\n return response;\n }\n if (encoding) {\n if (typeof response === 'string') {\n return response;\n } else {\n return response.toString(encoding);\n }\n }\n if (typeof response === 'string') {\n return Buffer.from(response);\n } else {\n return response;\n }\n}\n\n/**\n * A helper class for \"Not Found\" errors, storing data about what file lookups were attempted.\n */\nexport class NotFoundError extends Error {\n constructor(url: string, lookups?: string[]) {\n if (!lookups) {\n super(`Not Found (${url})`);\n } else {\n super(`Not Found (${url}):\\n${lookups.map((loc) => ' ✘ ' + loc).join('\\n')}`);\n }\n }\n}\n\nfunction sendResponseFile(\n req: http.IncomingMessage,\n res: http.ServerResponse,\n {contents, originalFileLoc, contentType}: LoadResult,\n) {\n const body = Buffer.from(contents);\n const ETag = etag(body, {weak: true});\n const headers: Record = {\n 'Accept-Ranges': 'bytes',\n 'Access-Control-Allow-Origin': '*',\n 'Content-Type': contentType || 'application/octet-stream',\n ETag,\n Vary: 'Accept-Encoding',\n };\n\n if (req.headers['if-none-match'] === ETag) {\n res.writeHead(304, headers);\n res.end();\n return;\n }\n\n let acceptEncoding = (req.headers['accept-encoding'] as string) || '';\n if (\n req.headers['cache-control']?.includes('no-transform') ||\n ['HEAD', 'OPTIONS'].includes(req.method!) ||\n !contentType ||\n !isCompressible(contentType)\n ) {\n acceptEncoding = '';\n }\n\n // Handle gzip compression\n if (/\\bgzip\\b/.test(acceptEncoding) && stream.Readable.from) {\n const bodyStream = stream.Readable.from([body]);\n headers['Content-Encoding'] = 'gzip';\n res.writeHead(200, headers);\n stream.pipeline(bodyStream, zlib.createGzip(), res, function onError(err) {\n if (err) {\n res.end();\n logger.error(`✘ An error occurred serving ${colors.bold(req.url!)}`);\n logger.error(typeof err !== 'string' ? err.toString() : err);\n }\n });\n return;\n }\n\n // Handle partial requests\n // TODO: This throws out a lot of hard work, and ignores any build. Improve.\n const {range} = req.headers;\n if (range) {\n if (!originalFileLoc) {\n throw new Error('Virtual files do not support partial requests');\n }\n const {size: fileSize} = statSync(originalFileLoc);\n const [rangeStart, rangeEnd] = range.replace(/bytes=/, '').split('-');\n\n const start = parseInt(rangeStart, 10);\n const end = rangeEnd ? parseInt(rangeEnd, 10) : fileSize - 1;\n const chunkSize = end - start + 1;\n\n const fileStream = createReadStream(originalFileLoc, {start, end});\n res.writeHead(206, {\n ...headers,\n 'Content-Range': `bytes ${start}-${end}/${fileSize}`,\n 'Content-Length': chunkSize,\n });\n fileStream.pipe(res);\n return;\n }\n\n res.writeHead(200, headers);\n res.write(body);\n res.end();\n}\n\nfunction sendResponseError(req: http.IncomingMessage, res: http.ServerResponse, status: number) {\n const contentType = mime.contentType(path.extname(req.url!) || '.html');\n const headers: Record = {\n 'Access-Control-Allow-Origin': '*',\n 'Accept-Ranges': 'bytes',\n 'Content-Type': contentType || 'application/octet-stream',\n Vary: 'Accept-Encoding',\n };\n res.writeHead(status, headers);\n res.end();\n}\n\nfunction handleResponseError(req, res, err: Error | NotFoundError) {\n if (err instanceof NotFoundError) {\n // Don't log favicon \"Not Found\" errors. Browsers automatically request a favicon.ico file\n // from the server, which creates annoying errors for new apps / first experiences.\n if (req.url !== '/favicon.ico') {\n logger.error(`[404] ${err.message}`);\n }\n sendResponseError(req, res, 404);\n return;\n }\n console.log(err);\n logger.error(err.toString());\n logger.error(`[500] ${req.url}`, {\n // @ts-ignore\n name: err.__snowpackBuildDetails?.name,\n });\n sendResponseError(req, res, 500);\n return;\n}\n\nfunction getServerRuntime(\n sp: SnowpackDevServer,\n config: SnowpackConfig,\n options: {invalidateOnChange?: boolean} = {},\n): ServerRuntime {\n const runtime = createServerRuntime({\n config,\n load: async (url) => {\n const result = await sp.loadUrl(url, {isSSR: true, allowStale: false, encoding: 'utf8'});\n if (!result) throw new NotFoundError(url);\n return result;\n },\n });\n\n if (options.invalidateOnChange !== false) {\n sp.onFileChange(({filePath}) => {\n const url = sp.getUrlForFile(filePath);\n if (url) {\n runtime.invalidateModule(url);\n }\n });\n }\n return runtime;\n}\n\nexport async function startServer(\n commandOptions: CommandOptions,\n {\n isDev: _isDev,\n isWatch: _isWatch,\n preparePackages: _preparePackages,\n }: {isDev?: boolean; isWatch?: boolean; preparePackages?: boolean} = {},\n): Promise {\n const {config} = commandOptions;\n const isDev = _isDev ?? config.mode !== 'production';\n const isWatch = _isWatch ?? true;\n const isPreparePackages = _preparePackages ?? true;\n const pkgSource = getPackageSource(config);\n if (isPreparePackages) {\n await pkgSource.prepare();\n logger.info(colors.bold('Ready!'));\n }\n let serverStart = performance.now();\n const {port: defaultPort, hostname, open, openUrl} = config.devOptions;\n const messageBus = new EventEmitter();\n const PACKAGE_PATH_PREFIX = path.posix.join(config.buildOptions.metaUrlPath, 'pkg/');\n const PACKAGE_LINK_PATH_PREFIX = path.posix.join(config.buildOptions.metaUrlPath, 'link/');\n let port: number | undefined;\n let warnedDeprecatedPackageImport = new Set();\n if (defaultPort !== 0) {\n port = await getPort(defaultPort);\n // Reset the clock if we had to wait for the user prompt to select a new port.\n if (port !== defaultPort) {\n serverStart = performance.now();\n }\n }\n\n // Fill in any command-specific plugin methods.\n for (const p of config.plugins) {\n p.markChanged = (fileLoc) => {\n knownETags.clear();\n onWatchEvent(fileLoc);\n };\n }\n\n if (isWatch && config.devOptions.output === 'dashboard' && process.stdout.isTTY) {\n startDashboard(messageBus, config);\n } else {\n // \"stream\": Log relevent events to the console.\n messageBus.on(paintEvent.WORKER_MSG, ({id, msg}) => {\n logger.info(msg.trim(), {name: id});\n });\n }\n\n const symlinkDirectories = new Map>();\n const inMemoryBuildCache = new Map();\n let fileToUrlMapping = new OneToManyMap();\n const excludeGlobs = [\n ...config.exclude,\n ...(config.mode === 'test' ? [] : config.testOptions.files),\n ];\n\n const foundExcludeMatch = picomatch(excludeGlobs, {ignore: '**/node_modules/**'});\n\n for (const [mountKey, mountEntry] of Object.entries(config.mount)) {\n logger.debug(`Mounting directory: '${mountKey}' as URL '${mountEntry.url}'`);\n const files = (await new fdir()\n .withFullPaths()\n // Note: exclude() only matches directories, and not files. However, the cost\n // of false positives here is minor, so do this as a quick check to possibly\n // skip scanning into entire folder trees.\n .exclude((_, dirPath) => foundExcludeMatch(dirPath))\n .crawl(mountKey)\n .withPromise()) as string[];\n\n for (const f of files) {\n fileToUrlMapping.add(f, getUrlsForFile(f, config)!);\n }\n }\n\n logger.debug(`Using in-memory cache: ${fileToUrlMapping}`);\n\n const readCredentials = async (cwd: string) => {\n const secure = config.devOptions.secure;\n let cert: Buffer;\n let key: Buffer;\n\n if (typeof secure === 'object') {\n cert = secure.cert as Buffer;\n key = secure.key as Buffer;\n } else {\n const certPath = path.join(cwd, 'snowpack.crt');\n const keyPath = path.join(cwd, 'snowpack.key');\n [cert, key] = await Promise.all([fs.readFile(certPath), fs.readFile(keyPath)]);\n }\n\n return {\n cert,\n key,\n };\n };\n\n let credentials: {cert: Buffer; key: Buffer} | undefined;\n if (config.devOptions.secure) {\n try {\n logger.debug(`reading credentials`);\n credentials = await readCredentials(config.root);\n } catch (e) {\n logger.error(`✘ No HTTPS credentials found!`);\n logger.info(`You can specify HTTPS credentials via either:\n\n - Including credentials in your project config under ${colors.yellow(`devOptions.secure`)}.\n - Including ${colors.yellow('snowpack.crt')} and ${colors.yellow(\n 'snowpack.key',\n )} files in your project's root directory.\n\n You can automatically generate credentials for your project via either:\n\n - ${colors.cyan('devcert')}: ${colors.yellow('npx devcert-cli generate localhost')}\n https://github.com/davewasmer/devcert-cli (no install required)\n\n - ${colors.cyan('mkcert')}: ${colors.yellow(\n 'mkcert -install && mkcert -key-file snowpack.key -cert-file snowpack.crt localhost',\n )}\n https://github.com/FiloSottile/mkcert (install required)`);\n process.exit(1);\n }\n }\n\n for (const runPlugin of config.plugins) {\n if (runPlugin.run) {\n logger.debug(`starting ${runPlugin.name} run() workers`);\n runPlugin\n .run({\n isDev,\n // @ts-ignore: internal API only\n log: (msg, data) => {\n if (msg === 'CONSOLE_INFO') {\n logger.info(data.msg, {name: runPlugin.name});\n } else {\n messageBus.emit(msg, {...data, id: runPlugin.name});\n }\n },\n })\n .then(() => {\n logger.info('Command completed.', {name: runPlugin.name});\n })\n .catch((err) => {\n logger.error(`Command exited with error code: ${err}`, {name: runPlugin.name});\n process.exit(1);\n });\n }\n }\n\n function getOutputExtensionMatch() {\n let outputExts: string[] = [];\n for (const plugin of config.plugins) {\n if (plugin.resolve) {\n for (const outputExt of plugin.resolve.output) {\n const ext = outputExt.toLowerCase();\n if (!outputExts.includes(ext)) {\n outputExts.push(ext);\n }\n }\n }\n }\n outputExts = outputExts.sort((a, b) => b.split('.').length - a.split('.').length);\n\n return (base: string): string => {\n const basename = base.toLowerCase();\n for (const ext of outputExts) {\n if (basename.endsWith(ext)) return ext;\n }\n return path.extname(basename);\n };\n }\n\n const matchOutputExt = getOutputExtensionMatch();\n\n async function loadUrl(\n reqUrl: string,\n opt?: (LoadUrlOptions & {encoding?: undefined}) | undefined,\n ): Promise | undefined>;\n async function loadUrl(\n reqUrl: string,\n opt: LoadUrlOptions & {encoding: BufferEncoding},\n ): Promise | undefined>;\n async function loadUrl(\n reqUrl: string,\n opt: LoadUrlOptions & {encoding: null},\n ): Promise | undefined>;\n async function loadUrl(\n reqUrl: string,\n {\n isSSR: _isSSR,\n isHMR: _isHMR,\n isResolve: _isResolve,\n encoding: _encoding,\n importMap,\n }: LoadUrlOptions = {},\n ): Promise {\n const isSSR = _isSSR ?? false;\n // // Default to HMR on, but disable HMR if SSR mode is enabled.\n const isHMR = _isHMR ?? (!!config.devOptions.hmr && !isSSR);\n const encoding = _encoding ?? null;\n const reqUrlHmrParam = reqUrl.includes('?mtime=') && reqUrl.split('?')[1];\n let reqPath = decodeURI(url.parse(reqUrl).pathname!);\n\n if (reqPath === getMetaUrlPath('/hmr-client.js', config)) {\n return {\n contents: encodeResponse(HMR_CLIENT_CODE, encoding),\n imports: [],\n originalFileLoc: null,\n contentType: 'application/javascript',\n };\n }\n if (reqPath === getMetaUrlPath('/hmr-error-overlay.js', config)) {\n return {\n contents: encodeResponse(HMR_OVERLAY_CODE, encoding),\n imports: [],\n originalFileLoc: null,\n contentType: 'application/javascript',\n };\n }\n if (reqPath === getMetaUrlPath('/env.js', config)) {\n return {\n contents: encodeResponse(\n generateEnvModule({\n mode: config.mode,\n isSSR,\n configEnv: config.env,\n }),\n encoding,\n ),\n imports: [],\n originalFileLoc: null,\n contentType: 'application/javascript',\n };\n }\n // * NPM Packages:\n // NPM packages are served via `/_snowpack/pkg/` URLs. Behavior varies based on package source (local, remote)\n // but as a general rule all URLs contained within are managed by the package source loader. When this URL\n // prefix is hit, we load the file through the selected package source loader.\n if (reqPath.startsWith(PACKAGE_PATH_PREFIX)) {\n // Backwards-compatable redirect for legacy package URLs: If someone has created an import URL manually\n // (ex: /_snowpack/pkg/react.js) then we need to redirect and warn to use our new API in the future.\n if (reqUrl.split('.').length <= 2 && config.packageOptions.source !== 'remote') {\n if (!warnedDeprecatedPackageImport.has(reqUrl)) {\n logger.warn(\n `(${reqUrl}) Deprecated manual package import. Please use snowpack.getUrlForPackage() to create package URLs instead.`,\n );\n warnedDeprecatedPackageImport.add(reqUrl);\n }\n const redirectUrl = await pkgSource.resolvePackageImport(\n reqUrl.replace(PACKAGE_PATH_PREFIX, '').replace(/\\.js/, ''),\n );\n reqPath = decodeURI(url.parse(redirectUrl).pathname!);\n }\n const resourcePath = reqPath.replace(/\\.map$/, '').replace(/\\.proxy\\.js$/, '');\n const webModuleUrl = resourcePath.substr(PACKAGE_PATH_PREFIX.length);\n let loadedModule = await pkgSource.load(webModuleUrl, {isSSR});\n if (!loadedModule) {\n throw new NotFoundError(reqPath);\n }\n if (reqPath.endsWith('.proxy.js')) {\n return {\n imports: [],\n contents: await wrapImportProxy({\n url: resourcePath,\n code: loadedModule.contents,\n hmr: isHMR,\n config: config,\n }),\n originalFileLoc: null,\n contentType: 'application/javascript',\n };\n }\n return {\n imports: loadedModule.imports,\n contents: encodeResponse(loadedModule.contents, encoding),\n originalFileLoc: null,\n contentType: mime.lookup(reqPath) || 'application/javascript',\n };\n }\n\n // Most of the time, resourcePath should have \".map\" and \".proxy.js\" extensions stripped to\n // match the file on disk. However, sometimes the on disk is an actual source map in a static\n // directory, so we can't strip that info just yet. Try the exact match first, and then strip\n // it later on if there is no match.\n let resourcePath = reqPath;\n let resourceType = matchOutputExt(reqPath);\n if (IS_DOTFILE_REGEX.test(reqPath)) resourceType = '';\n let foundFile: FoundFile;\n\n // * Workspaces & Linked Packages:\n // The \"local\" package resolver supports npm packages that live in a local directory,\n // usually a part of your monorepo/workspace. Snowpack treats these files as source files,\n // with each file served individually and rebuilt instantly when changed. In the future,\n // these linked packages may be bundled again with a rapid bundler like esbuild.\n if (config.workspaceRoot && reqPath.startsWith(PACKAGE_LINK_PATH_PREFIX)) {\n const symlinkResourceUrl = reqPath.substr(PACKAGE_LINK_PATH_PREFIX.length);\n const symlinkResourceLoc = path.resolve(\n config.workspaceRoot as string,\n process.platform === 'win32' ? symlinkResourceUrl.replace(/\\//g, '\\\\') : symlinkResourceUrl,\n );\n const symlinkResourceDirectory = path.dirname(symlinkResourceLoc);\n const fileStat = await fs.stat(symlinkResourceDirectory).catch(() => null);\n if (!fileStat) {\n throw new NotFoundError(reqPath, [symlinkResourceDirectory]);\n }\n // If this is the first file served out of this linked directory\n // - add it to our file watcher (to enable HMR)\n // - add it to our file<>URL mapping for future lookups\n // - add a promise to our directory<>promise map, which acts as\n // a guard to ensure no loadUrls for this directory proceed before\n // proccessing of this directory is done\n // Each directory is scanned shallowly, so nested directories inside\n // of `symlinkDirectories` are okay.\n if (!symlinkDirectories.get(symlinkResourceDirectory)) {\n logger.debug(\n `Mounting symlink directory: '${symlinkResourceDirectory}' as URL '${path.dirname(\n reqPath,\n )}'`,\n );\n symlinkDirectories.set(symlinkResourceDirectory, processDirectory());\n watcher && watcher.add(symlinkResourceDirectory);\n\n async function processDirectory() {\n const shallowFiles = (await new fdir()\n .withFullPaths()\n .withMaxDepth(0)\n .crawl(symlinkResourceDirectory)\n .withPromise()) as string[];\n\n for (const f of shallowFiles) {\n if (fileToUrlMapping.value(f)) {\n logger.warn(\n `Warning: mounted file is being imported as a package.\\n` +\n `Workspace & monorepo packages work automatically and do not need to be mounted.`,\n );\n } else {\n fileToUrlMapping.add(\n f,\n getBuiltFileUrls(f, config).map((u) => {\n const url = path.posix.join(\n config.buildOptions.metaUrlPath,\n 'link',\n slash(path.relative(config.workspaceRoot as string, u)),\n );\n return url;\n }),\n );\n }\n }\n }\n }\n\n // guard: ensure directory is properly read and files registered before proceeding\n await symlinkDirectories.get(symlinkResourceDirectory);\n\n let attemptedFileLoc = fileToUrlMapping.key(reqPath);\n if (!attemptedFileLoc) {\n resourcePath = reqPath.replace(/\\.map$/, '').replace(/\\.proxy\\.js$/, '');\n resourceType = path.extname(resourcePath);\n }\n attemptedFileLoc = fileToUrlMapping.key(resourcePath);\n if (!attemptedFileLoc) {\n throw new NotFoundError(reqPath);\n }\n const fileLocationExists = await fs.stat(attemptedFileLoc).catch(() => null);\n if (!fileLocationExists) {\n throw new NotFoundError(reqPath, [attemptedFileLoc]);\n }\n let foundType = path.extname(reqPath);\n if (!foundType && attemptedFileLoc.endsWith('.html')) foundType = '.html';\n if (IS_DOTFILE_REGEX.test(reqPath)) foundType = '';\n foundFile = {\n loc: attemptedFileLoc,\n type: foundType,\n isStatic: false,\n isResolve: true,\n };\n }\n // * Local Files\n // If this is not a special URL route, then treat it as a normal file request.\n // Check our file<>URL mapping for the most relevant match, and continue if found.\n // Otherwise, return a 404.\n else {\n let attemptedFileLoc = fileToUrlMapping.key(resourcePath);\n if (!attemptedFileLoc) {\n resourcePath = reqPath.replace(/\\.map$/, '').replace(/\\.proxy\\.js$/, '');\n if (resourcePath.endsWith('/')) {\n resourcePath += 'index.html'; // if trailing slash, pretending like /index.html was requested makes the below much easier\n }\n resourceType = path.extname(resourcePath);\n }\n attemptedFileLoc =\n fileToUrlMapping.key(resourcePath) ||\n fileToUrlMapping.key(resourcePath + '.html') ||\n fileToUrlMapping.key(resourcePath + '/index.html');\n if (!attemptedFileLoc) {\n // last attempt: if this is a CSS Module, try and load JSON\n if (resourcePath.endsWith('.module.css.json')) {\n const srcLoc = resourcePath.replace(/\\.json$/i, '');\n return {\n imports: [],\n contents: cssModuleJSON(srcLoc),\n originalFileLoc: srcLoc,\n contentType: mime.lookup('.json'),\n };\n }\n\n throw new NotFoundError(reqPath);\n }\n\n const [, mountEntry] = getMountEntryForFile(attemptedFileLoc, config)!;\n\n // TODO: This data type structuring/destructuring is neccesary for now,\n // but we hope to add \"virtual file\" support soon via plugins. This would\n // be the interface for those response types.\n let foundType = path.extname(reqPath);\n if (!foundType && attemptedFileLoc.endsWith('.html')) foundType = '.html';\n if (IS_DOTFILE_REGEX.test(reqPath)) foundType = '';\n foundFile = {\n loc: attemptedFileLoc,\n type: foundType,\n isStatic: mountEntry.static,\n isResolve: mountEntry.resolve,\n };\n }\n\n const {loc: fileLoc, type: responseType} = foundFile;\n\n // TODO: Once plugins are able to add virtual files + imports, this will no longer be needed.\n // - isStatic Workaround: HMR plugins need to add scripts to HTML file, even if static.\n const isStatic = foundFile.isStatic && responseType !== '.html';\n const isResolve = _isResolve ?? true;\n\n // 1. Check the hot build cache. If it's already found, then just serve it.\n const cacheKey = getCacheKey(fileLoc, {isSSR, mode: config.mode});\n let fileBuilder: FileBuilder | undefined = inMemoryBuildCache.get(cacheKey);\n if (!fileBuilder) {\n fileBuilder = new FileBuilder({\n loc: fileLoc,\n isDev,\n isSSR,\n isHMR,\n config,\n hmrEngine,\n });\n // note: for Tailwind, CSS needs to avoid caching in dev server (Tailwind needs to handle rebuilding, not Snowpack)\n const isTailwind =\n config.devOptions.tailwindConfig && (fileLoc.endsWith('.css') || fileLoc.endsWith('.pcss'));\n if (!isTailwind) {\n inMemoryBuildCache.set(cacheKey, fileBuilder);\n }\n }\n\n function handleFinalizeError(err: Error) {\n logger.error(FILE_BUILD_RESULT_ERROR);\n hmrEngine &&\n hmrEngine.broadcastMessage({\n type: 'error',\n title: FILE_BUILD_RESULT_ERROR,\n errorMessage: err.toString(),\n fileLoc,\n errorStackTrace: err.stack,\n });\n }\n\n let finalizedResponse: string | Buffer | undefined;\n let resolvedImports: InstallTarget[] = [];\n try {\n if (Object.keys(fileBuilder.buildOutput).length === 0) {\n await fileBuilder.build(isStatic);\n }\n if (resourcePath !== reqPath && reqPath.endsWith('.proxy.js')) {\n finalizedResponse = await fileBuilder.getProxy(resourcePath, resourceType);\n\n // CSS Modules only: also generate JSON module mapping (not imported so must be added manually)\n if (reqPath.endsWith('.module.css.proxy.js') && fileBuilder.buildOutput['.json']) {\n resolvedImports.push(createInstallTarget(`${resourcePath}.json`));\n }\n } else if (resourcePath !== reqPath && reqPath.endsWith('.map')) {\n finalizedResponse = fileBuilder.getSourceMap(resourcePath);\n } else {\n if (foundFile.isResolve) {\n // TODO: Warn if reqUrlHmrParam was needed here? HMR can't work if URLs aren't resolved.\n resolvedImports = await fileBuilder.resolveImports(isResolve, reqUrlHmrParam, importMap);\n }\n finalizedResponse = fileBuilder.getResult(resourceType);\n }\n } catch (err) {\n handleFinalizeError(err);\n throw err;\n }\n\n if (finalizedResponse) {\n return {\n imports: resolvedImports,\n contents: encodeResponse(finalizedResponse, encoding),\n originalFileLoc: fileLoc,\n contentType: mime.lookup(responseType),\n };\n }\n }\n\n /**\n * A simple map to optimize the speed of our 304 responses. If an ETag check is\n * sent in the request, check if it matches the last known etag for tat file.\n *\n * Remember: This is just a nice-to-have! If we get this logic wrong, it can mean\n * stale files in the user's cache. Feel free to clear aggressively, as needed.\n */\n const knownETags = new Map();\n\n function matchRouteHandler(\n reqUrl: string,\n expectHandler: 'dest',\n ): RouteConfigObject['dest'] | null;\n function matchRouteHandler(\n reqUrl: string,\n expectHandler: 'upgrade',\n ): RouteConfigObject['upgrade'] | null;\n function matchRouteHandler(\n reqUrl: string,\n expectHandler: 'dest' | 'upgrade',\n ): RouteConfigObject['dest'] | RouteConfigObject['upgrade'] | null {\n if (reqUrl.startsWith(config.buildOptions.metaUrlPath)) {\n return null;\n }\n const reqPath = decodeURI(url.parse(reqUrl).pathname!);\n const reqExt = matchOutputExt(reqPath);\n const isRoute = !reqExt || reqExt.toLowerCase() === '.html';\n for (const route of config.routes) {\n if (route.match === 'routes' && !isRoute) {\n continue;\n }\n if (!route[expectHandler]) {\n continue;\n }\n if (route._srcRegex.test(reqPath)) {\n return route[expectHandler];\n }\n }\n return null;\n }\n\n /**\n * Fully handle the response for a given request. This is used internally for\n * every response that the dev server sends, but it can also be used via the\n * JS API to handle most boilerplate around request handling.\n */\n async function handleRequest(\n req: http.IncomingMessage,\n res: http.ServerResponse,\n {handleError}: {handleError?: boolean} = {},\n ) {\n let reqUrl = req.url!;\n const matchedRouteHandler = matchRouteHandler(reqUrl, 'dest');\n // If a route is matched, rewrite the URL or call the route function\n if (matchedRouteHandler) {\n if (typeof matchedRouteHandler === 'string') {\n reqUrl = matchedRouteHandler;\n } else {\n return matchedRouteHandler(req, res);\n }\n }\n // Check if we can send back an optimized 304 response\n const quickETagCheck = req.headers['if-none-match'];\n const quickETagCheckUrl = reqUrl.replace(/\\/$/, '/index.html');\n if (quickETagCheck && quickETagCheck === knownETags.get(quickETagCheckUrl)) {\n logger.debug(`optimized etag! sending 304...`);\n res.writeHead(304, {'Access-Control-Allow-Origin': '*'});\n res.end();\n return;\n }\n // Backwards-compatable redirect for legacy package URLs: If someone has created an import URL manually\n // (ex: /_snowpack/pkg/react.js) then we need to redirect and warn to use our new API in the future.\n if (\n reqUrl.startsWith(PACKAGE_PATH_PREFIX) &&\n reqUrl.split('.').length <= 2 &&\n config.packageOptions.source !== 'remote'\n ) {\n if (!warnedDeprecatedPackageImport.has(reqUrl)) {\n logger.warn(\n `(${reqUrl}) Deprecated manual package import. Please use snowpack.getUrlForPackage() to create package URLs instead.`,\n );\n warnedDeprecatedPackageImport.add(reqUrl);\n }\n const redirectUrl = await pkgSource.resolvePackageImport(\n reqUrl.replace(PACKAGE_PATH_PREFIX, '').replace(/\\.js/, ''),\n );\n res.writeHead(301, {Location: redirectUrl});\n res.end();\n return;\n }\n\n // Otherwise, load the file and respond if successful.\n try {\n const result = await loadUrl(reqUrl, {allowStale: true, encoding: null});\n if (!result) {\n throw new NotFoundError(reqUrl);\n }\n sendResponseFile(req, res, result);\n if (result.checkStale) {\n await result.checkStale();\n }\n if (result.contents) {\n const tag = etag(result.contents, {weak: true});\n const reqPath = decodeURI(url.parse(reqUrl).pathname!);\n knownETags.set(reqPath, tag);\n }\n return;\n } catch (err) {\n // Some consumers may want to handle/ignore errors themselves.\n if (handleError === false) {\n throw err;\n }\n handleResponseError(req, res, err);\n }\n }\n\n async function handleUpgrade(req: http.IncomingMessage, socket: Socket, head: Buffer) {\n let reqUrl = req.url!;\n const matchedRouteHandler = matchRouteHandler(reqUrl, 'upgrade');\n if (matchedRouteHandler) {\n matchedRouteHandler(req, socket, head);\n }\n }\n\n type Http2RequestListener = (\n request: http2.Http2ServerRequest,\n response: http2.Http2ServerResponse,\n ) => void;\n const createServer = (responseHandler: http.RequestListener | Http2RequestListener) => {\n if (credentials) {\n return http2.createSecureServer(\n {...credentials!, allowHTTP1: true},\n responseHandler as Http2RequestListener,\n );\n }\n\n return http.createServer(responseHandler as http.RequestListener);\n };\n\n let server: http.Server | http2.Http2Server | undefined;\n if (port) {\n server = createServer(async (req, res) => {\n // Attach a request logger.\n res.on('finish', () => {\n const {method, url} = req;\n const {statusCode} = res;\n logger.debug(`[${statusCode}] ${method} ${url}`);\n });\n // Otherwise, pass requests directly to Snowpack's request handler.\n handleRequest(req, res);\n })\n .on('upgrade', (req, socket, head) => {\n handleUpgrade(req, socket, head);\n })\n .on('error', (err: Error) => {\n logger.error(colors.red(` ✘ Failed to start server at port ${colors.bold(port!)}.`), err);\n server!.close();\n process.exit(1);\n })\n .listen(port);\n\n // Announce server has started\n const remoteIps = Object.values(os.networkInterfaces())\n .reduce((every: os.NetworkInterfaceInfo[], i) => [...every, ...(i || [])], [])\n .filter((i) => i.family === 'IPv4' && i.internal === false)\n .map((i) => i.address);\n const protocol = config.devOptions.secure ? 'https:' : 'http:';\n\n // Log the successful server start.\n const startTimeMs = Math.round(performance.now() - serverStart);\n logger.info(colors.green(`Server started in ${startTimeMs}ms.`));\n logger.info(`${colors.green('Local:')} ${`${protocol}//${hostname}:${port}`}`);\n if (remoteIps.length > 0) {\n logger.info(`${colors.green('Network:')} ${`${protocol}//${remoteIps[0]}:${port}`}`);\n }\n }\n\n // HMR Engine\n const {hmrEngine, handleHmrUpdate} = config.devOptions.hmr\n ? startHmrEngine(inMemoryBuildCache, server, port, config)\n : {hmrEngine: undefined, handleHmrUpdate: undefined};\n\n // Allow the user to hook into this callback, if they like (noop by default)\n let onFileChangeCallbacks: OnFileChangeCallback[] = [];\n let watcher: FSWatcher | undefined;\n\n // Watch src files\n async function onWatchEvent(fileLoc: string) {\n logger.info(\n colors.cyan('File changed: ') + path.relative(config.workspaceRoot || config.root, fileLoc),\n );\n\n const updatedUrls = getUrlsForFile(fileLoc, config);\n if (updatedUrls) {\n handleHmrUpdate && handleHmrUpdate(fileLoc, updatedUrls[0]);\n knownETags.delete(updatedUrls[0]);\n knownETags.delete(updatedUrls[0] + '.proxy.js');\n }\n inMemoryBuildCache.delete(getCacheKey(fileLoc, {isSSR: true, mode: config.mode}));\n inMemoryBuildCache.delete(getCacheKey(fileLoc, {isSSR: false, mode: config.mode}));\n await Promise.all(onFileChangeCallbacks.map((callback) => callback({filePath: fileLoc})));\n\n for (const plugin of config.plugins) {\n plugin.onChange && plugin.onChange({filePath: fileLoc});\n }\n }\n\n if (isWatch) {\n // Start watching the file system.\n // Defer \"chokidar\" loading to here, to reduce impact on overall startup time\n const chokidar = await import('chokidar');\n watcher = chokidar.watch([], {\n ignored: config.exclude.filter((k) => k !== '**/_*.{sass,scss}'), // Sass partials ignored for builds, but not for dev changes\n persistent: true,\n ignoreInitial: true,\n disableGlobbing: false,\n useFsEvents: isFsEventsEnabled(),\n });\n watcher.on('add', async (fileLoc) => {\n knownETags.clear();\n await pkgSource.prepareSingleFile(fileLoc);\n await onWatchEvent(fileLoc);\n fileToUrlMapping.add(fileLoc, getUrlsForFile(fileLoc, config)!);\n });\n watcher.on('unlink', async (fileLoc) => {\n knownETags.clear();\n await onWatchEvent(fileLoc);\n fileToUrlMapping.delete(fileLoc);\n });\n watcher.on('change', async (fileLoc) => {\n // TODO: If this needs to build a new dependency, report to the browser via HMR event.\n await pkgSource.prepareSingleFile(fileLoc);\n await onWatchEvent(fileLoc);\n });\n // [hmrDelay] - Let users with noisy startups delay HMR (ex: 11ty, tsc builds)\n setTimeout(() => {\n watcher!.add(Object.keys(config.mount));\n if (config.devOptions.output !== 'dashboard' || !process.stdout.isTTY) {\n logger.info(colors.cyan('watching for file changes... '));\n }\n }, config.devOptions.hmrDelay);\n }\n\n // Open the user's browser (ignore if failed)\n if (server && port && open && open !== 'none') {\n const protocol = config.devOptions.secure ? 'https:' : 'http:';\n await openInBrowser(protocol, hostname, port, open, openUrl).catch((err) => {\n logger.debug(`Browser open error: ${err}`);\n });\n }\n\n const sp: SnowpackDevServer = {\n port: port || defaultPort,\n hmrEngine,\n rawServer: server,\n loadUrl,\n handleRequest,\n sendResponseFile,\n sendResponseError,\n getUrlForPackage: (pkgSpec: string) => {\n return pkgSource.resolvePackageImport(pkgSpec);\n },\n getUrlForFile: (fileLoc: string) => {\n const result = getUrlsForFile(fileLoc, config);\n return result ? result[0] : null;\n },\n onFileChange: (callback) => onFileChangeCallbacks.push(callback),\n getServerRuntime: (options) => getServerRuntime(sp, config, options),\n async shutdown() {\n watcher && (await watcher.close());\n await runPipelineCleanupStep(config);\n server && server.close();\n hmrEngine && (await hmrEngine.stop());\n },\n markChanged(fileLoc) {\n knownETags.clear();\n onWatchEvent(fileLoc);\n },\n };\n return sp;\n}\n\nexport async function command(commandOptions: CommandOptions) {\n try {\n // Set some CLI-focused defaults\n commandOptions.config.devOptions.output =\n commandOptions.config.devOptions.output || 'dashboard';\n commandOptions.config.devOptions.open = commandOptions.config.devOptions.open || 'default';\n commandOptions.config.devOptions.hmr = commandOptions.config.devOptions.hmr !== false;\n // Start the server\n await startServer(commandOptions, {isWatch: true});\n } catch (err) {\n logger.error(err.message);\n logger.debug(err.stack);\n process.exit(1);\n }\n return new Promise(() => {});\n}\n" }, { "path": "snowpack/src/commands/init.ts", "content": "import {promises as fs, existsSync} from 'fs';\nimport {bold, dim} from 'kleur/colors';\nimport path from 'path';\nimport {logger} from '../logger';\nimport {CommandOptions} from '../types';\nimport {INIT_TEMPLATE_FILE} from '../util';\n\nexport async function command(commandOptions: CommandOptions) {\n const {config} = commandOptions;\n logger.info(`Creating new project configuration file... ${dim('(snowpack.config.js)')}`);\n if (!existsSync(path.join(config.root, 'package.json'))) {\n logger.error(`Error: create a package.json file in your project root`);\n process.exit(1);\n }\n const destLoc = path.join(config.root, 'snowpack.config.js');\n if (existsSync(destLoc)) {\n logger.error(`Error: File already exists, cannot overwrite ${destLoc}`);\n process.exit(1);\n }\n await fs.writeFile(destLoc, INIT_TEMPLATE_FILE);\n logger.info(`File created! Open ${bold('snowpack.config.js')} to customize your project.`);\n}\n" }, { "path": "snowpack/src/commands/paint.ts", "content": "import spinners from 'cli-spinners';\nimport detectPort from 'detect-port';\nimport {EventEmitter} from 'events';\nimport * as colors from 'kleur/colors';\nimport readline from 'readline';\nimport util from 'util';\nimport {logger} from '../logger';\nimport {SnowpackConfig} from '../types';\n\nexport const paintEvent = {\n BUILD_FILE: 'BUILD_FILE',\n LOAD_ERROR: 'LOAD_ERROR',\n SERVER_START: 'SERVER_START',\n WORKER_COMPLETE: 'WORKER_COMPLETE',\n WORKER_MSG: 'WORKER_MSG',\n WORKER_RESET: 'WORKER_RESET',\n};\n\n/**\n * Get the actual port, based on the `defaultPort`.\n * If the default port was not available, then we'll prompt the user if its okay\n * to use the next available port.\n */\nexport async function getPort(defaultPort: number): Promise {\n const bestAvailablePort = await detectPort(defaultPort);\n if (defaultPort !== bestAvailablePort) {\n let useNextPort: boolean = false;\n if (process.stdout.isTTY) {\n const rl = readline.createInterface({input: process.stdin, output: process.stdout});\n useNextPort = await new Promise((resolve) => {\n rl.question(\n colors.yellow(\n `! Port ${colors.bold(defaultPort)} not available. Run on port ${colors.bold(\n bestAvailablePort,\n )} instead? (Y/n) `,\n ),\n (answer) => {\n resolve(!/^no?$/i.test(answer));\n },\n );\n });\n rl.close();\n }\n if (!useNextPort) {\n logger.error(\n `✘ Port ${colors.bold(defaultPort)} not available. Use ${colors.bold(\n '--port',\n )} to specify a different port.`,\n );\n process.exit(1);\n }\n }\n return bestAvailablePort;\n}\n\nexport function startDashboard(bus: EventEmitter, _config: SnowpackConfig) {\n let spinnerFrame = 0;\n\n // \"dashboard\": Pipe console methods to the logger, and then start the dashboard.\n logger.debug(`attaching console.log listeners`);\n console.log = (...args: [any, ...any[]]) => {\n logger.info(util.format(...args));\n };\n console.warn = (...args: [any, ...any[]]) => {\n logger.warn(util.format(...args));\n };\n console.error = (...args: [any, ...any[]]) => {\n logger.error(util.format(...args));\n };\n\n function paintDashboard() {\n let dashboardMsg = colors.cyan(\n `${spinners.dots.frames[spinnerFrame]} watching for file changes...`,\n );\n const lines = dashboardMsg.split('\\n').length;\n return {msg: dashboardMsg, lines};\n }\n\n function clearDashboard(num, msg?) {\n // Clear Info Line\n while (num > 0) {\n process.stdout.clearLine(0);\n process.stdout.cursorTo(0);\n process.stdout.moveCursor(0, -1);\n num--;\n }\n if (!msg || cleanTimestamp(msg) !== lastMsg) {\n process.stdout.moveCursor(0, 1);\n }\n }\n\n let lastMsg: string = '\\0';\n let lastMsgCount = 1;\n function addTimestamp(msg: string): string {\n let counter = '';\n if (cleanTimestamp(msg) === lastMsg) {\n lastMsgCount++;\n counter = colors.yellow(` (x${lastMsgCount})`);\n } else {\n lastMsgCount = 1;\n }\n return msg + counter;\n }\n\n function cleanTimestamp(msg: string): string {\n return msg.replace(/^.*\\]/, '');\n }\n\n bus.on(paintEvent.WORKER_MSG, ({id, msg}) => {\n const cleanedMsg = msg.trim();\n if (!cleanedMsg) {\n return;\n }\n for (const individualMsg of cleanedMsg.split('\\n')) {\n logger.info(individualMsg, {name: id});\n }\n });\n\n let currentDashboardHeight = 1;\n\n function onLog(msg: string) {\n clearDashboard(currentDashboardHeight, msg);\n process.stdout.write(addTimestamp(msg));\n lastMsg = cleanTimestamp(msg);\n process.stdout.write('\\n');\n const result = paintDashboard();\n process.stdout.write(result.msg);\n currentDashboardHeight = result.lines;\n }\n logger.on('debug', onLog);\n logger.on('info', onLog);\n logger.on('warn', onLog);\n logger.on('error', onLog);\n\n setInterval(() => {\n spinnerFrame = (spinnerFrame + 1) % spinners.dots.frames.length;\n clearDashboard(currentDashboardHeight);\n const result = paintDashboard();\n process.stdout.write(result.msg);\n currentDashboardHeight = result.lines;\n }, 1000);\n\n logger.debug(`dashboard started`);\n}\n" }, { "path": "snowpack/src/commands/prepare.ts", "content": "import * as colors from 'kleur/colors';\nimport {logger} from '../logger';\nimport {getPackageSource} from '../sources/util';\nimport {CommandOptions} from '../types';\n\nexport async function command(commandOptions: CommandOptions) {\n const {config, lockfile} = commandOptions;\n logger.info(colors.yellow('! preparing your project...'));\n if (config.packageOptions.source === 'remote') {\n if (!config.packageOptions.types) {\n logger.info(\n colors.green('✔') +\n ' nothing to prepare. ' +\n colors.dim(\n '(if using TypeScript, set `packageOptions.types=true` to fetch package TypeScript types ahead-of-time.)',\n ),\n );\n return;\n }\n if (!lockfile) {\n logger.info(\n colors.yellow(\n '! no dependencies found. run \"snowpack add [package]\" to add a dependencies to your project.',\n ),\n );\n return;\n }\n }\n const pkgSource = getPackageSource(config);\n await pkgSource.prepare();\n logger.info(colors.green('✔') + ' project ready!');\n}\n" }, { "path": "snowpack/src/config.ts", "content": "import crypto from 'crypto';\nimport {all as merge} from 'deepmerge';\nimport projectCacheDir from 'find-cache-dir';\nimport {existsSync} from 'fs';\nimport {isPlainObject} from 'is-plain-object';\nimport {validate} from 'jsonschema';\nimport {dim} from 'kleur/colors';\nimport os from 'os';\nimport path from 'path';\nimport {logger} from './logger';\nimport {esbuildPlugin} from './plugins/plugin-esbuild';\nimport {\n CLIFlags,\n MountEntry,\n PackageOptionsLocal,\n PackageOptionsRemote,\n PluginLoadResult,\n RouteConfigObject,\n SnowpackConfig,\n SnowpackPlugin,\n SnowpackUserConfig,\n} from './types';\nimport {\n addLeadingSlash,\n addTrailingSlash,\n NATIVE_REQUIRE,\n REQUIRE_OR_IMPORT,\n removeTrailingSlash,\n isPathImport,\n} from './util';\nimport {GLOBAL_CACHE_DIR} from './sources/util';\nimport type {Awaited} from './util';\n\nconst CONFIG_NAME = 'snowpack';\nconst ALWAYS_EXCLUDE = ['**/_*.{sass,scss}', '**.d.ts'];\nconst DEFAULT_PROJECT_CACHE_DIR =\n projectCacheDir({name: 'snowpack'}) ||\n // If `projectCacheDir()` is null, no node_modules directory exists.\n // Use the current path (hashed) to create a cache entry in the global cache instead.\n // Because this is specifically for dependencies, this fallback should rarely be used.\n path.join(GLOBAL_CACHE_DIR, crypto.createHash('md5').update(process.cwd()).digest('hex'));\n\n// default settings\nconst DEFAULT_ROOT = process.cwd();\nconst DEFAULT_CONFIG: SnowpackUserConfig = {\n root: DEFAULT_ROOT,\n plugins: [],\n alias: {},\n env: {},\n exclude: [],\n routes: [],\n dependencies: {},\n devOptions: {\n secure: false,\n hostname: 'localhost',\n port: 8080,\n hmrDelay: 0,\n hmrPort: undefined,\n hmrErrorOverlay: true,\n },\n buildOptions: {\n out: 'build',\n baseUrl: '/',\n metaUrlPath: '_snowpack',\n cacheDirPath: DEFAULT_PROJECT_CACHE_DIR,\n clean: true,\n sourcemap: false,\n watch: false,\n htmlFragments: false,\n ssr: false,\n resolveProxyImports: true,\n },\n testOptions: {\n files: ['__tests__/**/*', '**/*.@(spec|test).*'],\n },\n packageOptions: {source: 'local'},\n};\n\nexport const DEFAULT_PACKAGES_LOCAL_CONFIG: PackageOptionsLocal = {\n source: 'local',\n external: [],\n packageLookupFields: [],\n knownEntrypoints: [],\n};\n\nexport const REMOTE_PACKAGE_ORIGIN = 'https://pkg.snowpack.dev';\n\nconst DEFAULT_PACKAGES_REMOTE_CONFIG: PackageOptionsRemote = {\n source: 'remote',\n origin: REMOTE_PACKAGE_ORIGIN,\n external: [],\n knownEntrypoints: [],\n cache: '.snowpack',\n types: false,\n};\n\nconst configSchema = {\n type: 'object',\n properties: {\n mode: {type: 'string', enum: ['test', 'development', 'production']},\n extends: {type: 'string'},\n exclude: {type: 'array', items: {type: 'string'}},\n plugins: {type: 'array'},\n env: {type: 'object'},\n alias: {\n type: 'object',\n additionalProperties: {type: 'string'},\n },\n mount: {\n type: 'object',\n additionalProperties: {\n oneOf: [\n {type: 'string'},\n {\n type: ['object'],\n properties: {\n url: {type: 'string'},\n static: {type: 'boolean'},\n resolve: {type: 'boolean'},\n dot: {type: 'boolean'},\n },\n },\n ],\n },\n },\n devOptions: {\n type: 'object',\n properties: {\n secure: {\n oneOf: [\n {type: 'boolean'},\n {\n type: 'object',\n properties: {\n cert: {},\n key: {},\n },\n },\n ],\n },\n port: {type: 'number'},\n openUrl: {type: 'string'},\n open: {type: 'string'},\n output: {type: 'string', enum: ['stream', 'dashboard']},\n hmr: {type: 'boolean'},\n hmrDelay: {type: 'number'},\n hmrPort: {type: 'number'},\n hmrErrorOverlay: {type: 'boolean'},\n tailwindConfig: {type: 'string'},\n },\n },\n packageOptions: {\n type: 'object',\n properties: {\n dest: {type: 'string'},\n external: {type: 'array', items: {type: 'string'}},\n treeshake: {type: 'boolean'},\n installTypes: {type: 'boolean'},\n polyfillNode: {type: 'boolean'},\n env: {\n type: 'object',\n additionalProperties: {\n oneOf: [\n {id: 'EnvVarString', type: 'string'},\n {id: 'EnvVarNumber', type: 'number'},\n {id: 'EnvVarTrue', type: 'boolean', enum: [true]},\n ],\n },\n },\n rollup: {\n type: 'object',\n properties: {\n context: {type: 'string'},\n plugins: {type: 'array', items: {type: 'object'}},\n dedupe: {\n type: 'array',\n items: {type: 'string'},\n },\n },\n },\n },\n },\n buildOptions: {\n type: ['object'],\n properties: {\n out: {type: 'string'},\n baseUrl: {type: 'string'},\n cacheDirPath: {type: 'string'},\n clean: {type: 'boolean'},\n sourcemap: {\n oneOf: [{type: 'boolean'}, {type: 'string', enum: ['inline']}],\n },\n watch: {type: 'boolean'},\n ssr: {type: 'boolean'},\n htmlFragments: {type: 'boolean'},\n jsxFactory: {type: 'string'},\n jsxFragment: {type: 'string'},\n jsxInject: {type: 'string'},\n },\n },\n testOptions: {\n type: 'object',\n properties: {\n files: {type: 'array', items: {type: 'string'}},\n },\n },\n experiments: {\n type: ['object'],\n properties: {},\n },\n optimize: {\n type: ['object'],\n properties: {\n preload: {type: 'boolean'},\n bundle: {type: 'boolean'},\n loader: {type: 'object'},\n splitting: {type: 'boolean'},\n treeshake: {type: 'boolean'},\n manifest: {type: 'boolean'},\n minify: {type: 'boolean'},\n target: {type: 'string'},\n },\n },\n proxy: {\n type: 'object',\n },\n },\n};\n\n/**\n * Convert CLI flags to an incomplete Snowpack config representation.\n * We need to be careful about setting properties here if the flag value\n * is undefined, since the deep merge strategy would then overwrite good\n * defaults with 'undefined'.\n */\nexport function expandCliFlags(flags: CLIFlags): SnowpackUserConfig {\n const result = {\n packageOptions: {},\n devOptions: {},\n buildOptions: {},\n experiments: {},\n } as {packageOptions: any; devOptions: any; buildOptions: any; experiments: any; optimize?: any};\n const {help, version, reload, config, ...relevantFlags} = flags;\n\n const CLI_ONLY_FLAGS = ['quiet', 'verbose'];\n\n for (const [flag, val] of Object.entries(relevantFlags)) {\n if (flag === '_' || flag.includes('-')) {\n continue;\n }\n if (configSchema.properties[flag]) {\n result[flag] = val;\n continue;\n }\n if (flag === 'source') {\n result.packageOptions = {source: val};\n continue;\n }\n if (configSchema.properties.experiments.properties[flag]) {\n result.experiments[flag] = val;\n continue;\n }\n if (configSchema.properties.optimize.properties[flag]) {\n result.optimize = result.optimize || {};\n result.optimize[flag] = val;\n continue;\n }\n if (configSchema.properties.packageOptions.properties[flag]) {\n result.packageOptions[flag] = val;\n continue;\n }\n if (configSchema.properties.devOptions.properties[flag]) {\n result.devOptions[flag] = val;\n continue;\n }\n if (configSchema.properties.buildOptions.properties[flag]) {\n result.buildOptions[flag] = val;\n continue;\n }\n if (CLI_ONLY_FLAGS.includes(flag)) {\n continue;\n }\n logger.error(`Unknown CLI flag: \"${flag}\"`);\n process.exit(1);\n }\n if (result.packageOptions.env) {\n result.packageOptions.env = result.packageOptions.env.reduce((acc, id) => {\n const index = id.indexOf('=');\n const [key, val] = index > 0 ? [id.substr(0, index), id.substr(index + 1)] : [id, true];\n acc[key] = val;\n return acc;\n }, {});\n }\n return result;\n}\n\n/** load and normalize plugins from config */\nfunction loadPlugins(config: SnowpackConfig): {\n plugins: SnowpackPlugin[];\n extensionMap: Record;\n} {\n const plugins: SnowpackPlugin[] = [];\n\n function execPluginFactory(pluginFactory: any, pluginOptions: any = {}): SnowpackPlugin {\n let plugin: SnowpackPlugin | null = null;\n plugin = pluginFactory(config, pluginOptions) as SnowpackPlugin;\n return plugin;\n }\n\n function loadPluginFromConfig(\n pluginLoc: string,\n options: any,\n config: SnowpackConfig,\n ): SnowpackPlugin {\n if (!path.isAbsolute(pluginLoc)) {\n throw new Error(\n `Snowpack Internal Error: plugin ${pluginLoc} should have been resolved to an absolute path.`,\n );\n }\n const pluginRef = NATIVE_REQUIRE(pluginLoc, {paths: [config.root]});\n let plugin: SnowpackPlugin;\n try {\n plugin = typeof pluginRef.default === 'function' ? pluginRef.default : pluginRef;\n if (typeof plugin !== 'function') logger.error(`plugin ${pluginLoc} must export a function.`);\n plugin = execPluginFactory(plugin, options) as SnowpackPlugin;\n } catch (err) {\n logger.error(err.toString());\n throw err;\n }\n\n if (!plugin.name) {\n plugin.name = path.relative(process.cwd(), pluginLoc);\n }\n\n // Add any internal plugin methods. Placeholders are okay when individual\n // commands implement these differently.\n plugin.markChanged = (file) => {\n logger.debug(`clearCache(${file}) called, but function not yet hooked up.`, {\n name: plugin.name,\n });\n };\n\n // Finish up.\n validatePlugin(plugin);\n return plugin;\n }\n\n // 2. config.plugins\n config.plugins.forEach((ref) => {\n const pluginName = Array.isArray(ref) ? ref[0] : ref;\n const pluginOptions = Array.isArray(ref) ? ref[1] : {};\n const plugin = loadPluginFromConfig(pluginName, pluginOptions, config);\n logger.debug(`loaded plugin: ${pluginName}`);\n plugins.push(plugin);\n });\n\n // add internal JS handler plugin\n plugins.push(execPluginFactory(esbuildPlugin, {input: ['.mjs', '.jsx', '.ts', '.tsx']}));\n\n const extensionMap = plugins.reduce((map, {resolve}) => {\n if (resolve) {\n for (const inputExt of resolve.input) {\n map[inputExt] = resolve.output;\n }\n }\n return map;\n }, {} as Record);\n\n return {\n plugins,\n extensionMap,\n };\n}\n\nfunction normalizeMount(config: SnowpackConfig) {\n const mountedDirs: Record> = config.mount || {};\n const normalizedMount: Record = {};\n for (const [mountDir, rawMountEntry] of Object.entries(mountedDirs)) {\n const mountEntry: Partial =\n typeof rawMountEntry === 'string'\n ? {url: rawMountEntry, static: false, resolve: true, dot: false}\n : rawMountEntry;\n if (!mountEntry.url) {\n handleConfigError(\n `mount[${mountDir}]: Object \"${mountEntry.url}\" missing required \"url\" option.`,\n );\n return normalizedMount;\n }\n if (mountEntry.url[0] !== '/') {\n handleConfigError(\n `mount[${mountDir}]: Value \"${mountEntry.url}\" must be a URL path, and start with a \"/\"`,\n );\n }\n normalizedMount[removeTrailingSlash(mountDir)] = {\n url: mountEntry.url === '/' ? '/' : removeTrailingSlash(mountEntry.url),\n static: mountEntry.static ?? false,\n resolve: mountEntry.resolve ?? true,\n dot: mountEntry.dot ?? false,\n };\n }\n // if no mounted directories, mount the root directory to the base URL\n if (!Object.keys(normalizedMount).length) {\n normalizedMount[config.root] = {\n url: '/',\n static: false,\n resolve: true,\n dot: false,\n };\n }\n return normalizedMount;\n}\n\nfunction normalizeRoutes(routes: RouteConfigObject[]): RouteConfigObject[] {\n return routes.map(({src, dest, upgrade, match}, i) => {\n // Normalize\n if (typeof dest === 'string') {\n dest = addLeadingSlash(dest);\n }\n if (!src.startsWith('^')) {\n src = '^' + src;\n }\n if (!src.endsWith('$')) {\n src = src + '$';\n }\n // Validate\n try {\n return {src, dest, upgrade, match: match || 'all', _srcRegex: new RegExp(src)};\n } catch (err) {\n throw new Error(`config.routes[${i}].src: invalid regular expression syntax \"${src}\"`);\n }\n });\n}\n\n/** resolve --dest relative to cwd, etc. */\nfunction normalizeConfig(_config: SnowpackUserConfig): SnowpackConfig {\n // TODO: This function is really fighting with TypeScript. Now that we have an accurate\n // SnowpackUserConfig type, we can have this function construct a fresh config object\n // from scratch instead of trying to modify the user's config object in-place.\n let config: SnowpackConfig = _config as any as SnowpackConfig;\n config.mode = config.mode || (process.env.NODE_ENV as SnowpackConfig['mode']);\n if (config.packageOptions.source === 'local') {\n config.packageOptions.rollup = config.packageOptions.rollup || {};\n config.packageOptions.rollup.plugins = config.packageOptions.rollup.plugins || [];\n }\n // normalize config URL/path values\n config.buildOptions.out = removeTrailingSlash(config.buildOptions.out);\n config.buildOptions.baseUrl = addTrailingSlash(config.buildOptions.baseUrl);\n config.buildOptions.metaUrlPath = removeTrailingSlash(\n addLeadingSlash(config.buildOptions.metaUrlPath),\n );\n config.mount = normalizeMount(config);\n config.routes = normalizeRoutes(config.routes);\n\n config.exclude = Array.from(\n new Set([\n ...ALWAYS_EXCLUDE,\n // Always ignore the final build directory.\n `${config.buildOptions.out}/**`,\n // We want to ignore all node_modules directories.\n `**/node_modules/**`,\n // If a node_modules directory is explicity mounted, it should be treated as source.\n // In that case, we add the mounted directory to \"picomatch.ignore\" elsewhere\n ...config.exclude,\n ]),\n );\n\n if (config.optimize && JSON.stringify(config.optimize) !== '{}') {\n config.optimize = {\n entrypoints: config.optimize.entrypoints ?? 'auto',\n preload: config.optimize.preload ?? false,\n bundle: config.optimize.bundle ?? false,\n loader: config.optimize.loader,\n sourcemap: config.optimize.sourcemap ?? true,\n splitting: config.optimize.splitting ?? false,\n treeshake: config.optimize.treeshake ?? true,\n manifest: config.optimize.manifest ?? false,\n target: config.optimize.target ?? 'es2020',\n minify: config.optimize.minify ?? false,\n };\n } else {\n config.optimize = undefined;\n }\n\n // new pipeline\n const {plugins, extensionMap} = loadPlugins(config);\n config.plugins = plugins;\n config._extensionMap = extensionMap;\n\n // If any plugins defined knownEntrypoints, add them here\n for (const {knownEntrypoints} of config.plugins) {\n if (knownEntrypoints) {\n config.packageOptions.knownEntrypoints =\n config.packageOptions.knownEntrypoints.concat(knownEntrypoints);\n }\n }\n\n plugins.forEach((plugin) => {\n if (plugin.config) {\n plugin.config(config);\n }\n });\n\n return config;\n}\n\nfunction handleConfigError(msg: string) {\n logger.error(msg);\n throw new Error(msg);\n}\n\nfunction handleValidationErrors(filepath: string, err: ConfigValidationError) {\n const msg = `! ${filepath}\\n${err.message}`;\n logger.error(msg);\n logger.info(dim(`See https://www.snowpack.dev for more info.`));\n throw new Error(msg);\n}\n\nfunction handleDeprecatedConfigError(mainMsg: string, ...msgs: string[]) {\n const msg = `${mainMsg}\\n${msgs.join('\\n')}See https://www.snowpack.dev for more info.`;\n logger.error(msg);\n throw new Error(msg);\n}\n\nfunction valdiateDeprecatedConfig(rawConfig: any) {\n if (rawConfig.scripts) {\n handleDeprecatedConfigError(\n '[v3.0] Legacy \"scripts\" config is deprecated in favor of \"plugins\". Safe to remove if empty.',\n );\n }\n if (rawConfig.proxy) {\n handleDeprecatedConfigError(\n '[v3.0] Legacy \"proxy\" config is deprecated in favor of \"routes\". Safe to remove if empty.',\n );\n }\n if (rawConfig.buildOptions?.metaDir) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.buildOptions.metaDir\" is now \"config.buildOptions.metaUrlPath\".',\n );\n }\n if (rawConfig.buildOptions?.webModulesUrl) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.buildOptions.webModulesUrl\" is now always set within the \"config.buildOptions.metaUrlPath\" directory.',\n );\n }\n if (rawConfig.buildOptions?.sourceMaps) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.buildOptions.sourceMaps\" is now \"config.buildOptions.sourcemap\".',\n );\n }\n if (rawConfig.installOptions) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.installOptions\" is now \"config.packageOptions\". Safe to remove if empty.',\n );\n }\n if (rawConfig.packageOptions?.externalPackage) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.installOptions.externalPackage\" is now \"config.packageOptions.external\".',\n );\n }\n if (rawConfig.packageOptions?.treeshake) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.installOptions.treeshake\" is now \"config.optimize.treeshake\".',\n );\n }\n if (rawConfig.install) {\n handleDeprecatedConfigError(\n '[v3.0] \"config.install\" is now \"config.packageOptions.knownEntrypoints\". Safe to remove if empty.',\n );\n }\n if (rawConfig.experiments?.source) {\n handleDeprecatedConfigError(\n '[v3.0] Experiment promoted! \"config.experiments.source\" is now \"config.packageOptions.source\".',\n );\n }\n if (rawConfig.packageOptions?.source === 'skypack') {\n handleDeprecatedConfigError(\n '[v3.0] Renamed! \"config.experiments.source=skypack\" is now \"config.packageOptions.source=remote\".',\n );\n }\n if (rawConfig.experiments?.ssr) {\n handleDeprecatedConfigError(\n '[v3.0] Experiment promoted! \"config.experiments.ssr\" is now \"config.buildOptions.ssr\".',\n );\n }\n if (rawConfig.experiments?.optimize) {\n handleDeprecatedConfigError(\n '[v3.0] Experiment promoted! \"config.experiments.optimize\" is now \"config.optimize\".',\n );\n }\n if (rawConfig.experiments?.routes) {\n handleDeprecatedConfigError(\n '[v3.0] Experiment promoted! \"config.experiments.routes\" is now \"config.routes\".',\n );\n }\n if (rawConfig.devOptions?.fallback) {\n handleDeprecatedConfigError(\n '[v3.0] Deprecated! \"devOptions.fallback\" is now replaced by \"routes\".\\n' +\n 'More info: https://www.snowpack.dev/guides/routing',\n );\n }\n}\n\nfunction validatePlugin(plugin: SnowpackPlugin) {\n const pluginName = plugin.name;\n if (plugin.resolve && !plugin.load) {\n handleConfigError(`[${pluginName}] \"resolve\" config found but \"load()\" method missing.`);\n }\n if (!plugin.resolve && plugin.load) {\n handleConfigError(`[${pluginName}] \"load\" method found but \"resolve()\" config missing.`);\n }\n if (plugin.resolve && !Array.isArray(plugin.resolve.input)) {\n handleConfigError(\n `[${pluginName}] \"resolve.input\" should be an array of input file extensions.`,\n );\n }\n if (plugin.resolve && !Array.isArray(plugin.resolve.output)) {\n handleConfigError(\n `[${pluginName}] \"resolve.output\" should be an array of output file extensions.`,\n );\n }\n}\n\nexport function validatePluginLoadResult(\n plugin: SnowpackPlugin,\n result: PluginLoadResult | string | void | undefined | null,\n) {\n const pluginName = plugin.name;\n if (!result) {\n return;\n }\n const isValidSingleResultType = typeof result === 'string' || Buffer.isBuffer(result);\n if (isValidSingleResultType && plugin.resolve!.output.length !== 1) {\n handleConfigError(\n `[plugin=${pluginName}] \"load()\" returned a string, but \"resolve.output\" contains multiple possible outputs. If multiple outputs are expected, the object return format is required.`,\n );\n }\n const unexpectedOutput =\n typeof result === 'object' &&\n Object.keys(result).find((fileExt) => !plugin.resolve!.output.includes(fileExt));\n if (unexpectedOutput) {\n handleConfigError(\n `[plugin=${pluginName}] \"load()\" returned entry \"${unexpectedOutput}\" not found in \"resolve.output\": ${\n plugin.resolve!.output\n }`,\n );\n }\n}\n\n/**\n * Get the config base path, that all relative config values should resolve to. In order:\n * - The directory of the config file path, if it exists.\n * - The config.root value, if given.\n * - Otherwise, the current working directory of the process.\n */\nfunction getConfigBasePath(configFileLoc: string | undefined, configRoot: string | undefined) {\n return (\n (configFileLoc && path.dirname(configFileLoc)) ||\n (configRoot && path.resolve(process.cwd(), configRoot)) ||\n process.cwd()\n );\n}\n\nfunction resolveRelativeConfigAlias(\n aliasConfig: Record,\n configBase: string,\n): SnowpackUserConfig['alias'] {\n const cleanAliasConfig = {};\n for (const [target, replacement] of Object.entries(aliasConfig)) {\n const isDirectory = target.endsWith('/');\n if (isPathImport(replacement)) {\n cleanAliasConfig[target] = isDirectory\n ? addTrailingSlash(path.resolve(configBase, replacement))\n : removeTrailingSlash(path.resolve(configBase, replacement));\n } else {\n cleanAliasConfig[target] = replacement;\n }\n }\n return cleanAliasConfig;\n}\n\nfunction resolveRelativeConfigMount(\n mountConfig: Record,\n configBase: string,\n): SnowpackUserConfig['mount'] {\n const cleanMountConfig = {};\n for (const [target, replacement] of Object.entries(mountConfig)) {\n cleanMountConfig[path.resolve(configBase, target)] = replacement;\n }\n return cleanMountConfig;\n}\n\nfunction resolveRelativeConfig(config: SnowpackUserConfig, configBase: string): SnowpackUserConfig {\n if (config.root) {\n config.root = path.resolve(configBase, config.root);\n }\n if (config.workspaceRoot) {\n config.workspaceRoot = path.resolve(configBase, config.workspaceRoot);\n }\n if (config.buildOptions?.out) {\n config.buildOptions.out = path.resolve(configBase, config.buildOptions.out);\n }\n if (config.packageOptions?.source === 'remote' && config.packageOptions.cache) {\n config.packageOptions.cache = path.resolve(configBase, config.packageOptions.cache);\n }\n if (config.extends && /^[\\.\\/\\\\]/.test(config.extends)) {\n config.extends = path.resolve(configBase, config.extends);\n }\n if (config.plugins) {\n config.plugins = config.plugins.map((plugin) => {\n const name = Array.isArray(plugin) ? plugin[0] : plugin;\n const absName = path.isAbsolute(name) ? name : require.resolve(name, {paths: [configBase]});\n if (Array.isArray(plugin)) {\n plugin.splice(0, 1, absName);\n return plugin;\n }\n return absName;\n });\n }\n if (config.mount) {\n config.mount = resolveRelativeConfigMount(config.mount, configBase);\n }\n if (config.alias) {\n config.alias = resolveRelativeConfigAlias(config.alias, configBase);\n }\n return config;\n}\n\nclass ConfigValidationError extends Error {\n constructor(errors: (Error | string)[]) {\n super(`Configuration Error:\\n${errors.map((err) => ` - ${err.toString()}`).join(os.EOL)}`);\n }\n}\n\nfunction validateConfig(config: SnowpackConfig) {\n for (const mountDir of Object.keys(config.mount)) {\n if (!existsSync(mountDir)) {\n logger.warn(`config.mount[${mountDir}]: mounted directory does not exist.`);\n }\n }\n}\n\nexport function createConfiguration(config: SnowpackUserConfig = {}): SnowpackConfig {\n // Validate the configuration object against our schema. Report any errors.\n const {errors: validationErrors} = validate(config, configSchema, {\n propertyName: CONFIG_NAME,\n allowUnknownAttributes: false,\n });\n if (validationErrors.length > 0) {\n throw new ConfigValidationError(validationErrors);\n }\n // Inherit any undefined values from the default configuration. If no config argument\n // was passed (or no configuration file found in loadConfiguration) then this function\n // will effectively return a copy of the DEFAULT_CONFIG object.\n const mergedConfig = merge(\n [\n DEFAULT_CONFIG,\n {\n packageOptions:\n config.packageOptions?.source === 'remote'\n ? DEFAULT_PACKAGES_REMOTE_CONFIG\n : DEFAULT_PACKAGES_LOCAL_CONFIG,\n },\n config,\n ],\n {\n isMergeableObject: (val) => isPlainObject(val) || Array.isArray(val),\n },\n );\n // Resolve relative config values. If using loadConfiguration, all config values should\n // already be resolved relative to the config file path so that this should be a no-op.\n // But, we still need to run it in case you called this function directly.\n const configBase = getConfigBasePath(undefined, config.root);\n resolveRelativeConfig(mergedConfig, configBase);\n const normalizedConfig = normalizeConfig(mergedConfig);\n validateConfig(normalizedConfig);\n return normalizedConfig;\n}\n\nasync function loadConfigurationFile(\n filename: string,\n overrides: SnowpackUserConfig = {},\n): Promise<{filepath: string | undefined; config: SnowpackUserConfig} | null> {\n const loc = path.resolve(overrides.root || process.cwd(), filename);\n if (!existsSync(loc)) return null;\n const config = await REQUIRE_OR_IMPORT(loc);\n return {filepath: loc, config};\n}\n\nexport async function loadConfiguration(\n overrides: SnowpackUserConfig = {},\n configPath?: string,\n): Promise {\n let result: Awaited> = null;\n // if user specified --config path, load that\n if (configPath) {\n result = await loadConfigurationFile(configPath, overrides);\n if (!result) {\n throw new Error(`Snowpack config file could not be found: ${configPath}`);\n }\n }\n\n const configs = [\n 'snowpack.config.mjs',\n 'snowpack.config.cjs',\n 'snowpack.config.js',\n 'snowpack.config.json',\n ];\n\n // If no config was found above, search for one.\n if (!result) {\n for (const potentialConfigurationFile of configs) {\n if (result) break;\n result = await loadConfigurationFile(potentialConfigurationFile, overrides);\n }\n }\n\n // Support package.json \"snowpack\" config\n if (!result) {\n const potentialPackageJsonConfig = await loadConfigurationFile('package.json', overrides);\n if (potentialPackageJsonConfig && (potentialPackageJsonConfig.config as any).snowpack) {\n result = {\n filepath: potentialPackageJsonConfig.filepath,\n config: (potentialPackageJsonConfig.config as any).snowpack,\n };\n }\n }\n\n if (!result) {\n logger.warn('Hint: run \"snowpack init\" to create a project config file. Using defaults...');\n result = {filepath: undefined, config: {}};\n }\n\n const {config, filepath} = result;\n const configBase = getConfigBasePath(filepath, config.root);\n valdiateDeprecatedConfig(config);\n valdiateDeprecatedConfig(overrides);\n resolveRelativeConfig(config, configBase);\n\n let extendConfig: SnowpackUserConfig = {} as SnowpackUserConfig;\n if (config.extends) {\n const extendConfigLoc = require.resolve(config.extends, {paths: [configBase]});\n const extendResult = await loadConfigurationFile(extendConfigLoc, {});\n if (!extendResult) {\n handleConfigError(`Could not locate \"extends\" config at ${extendConfigLoc}`);\n process.exit(1);\n }\n extendConfig = extendResult.config;\n const extendValidation = validate(extendConfig, configSchema, {\n allowUnknownAttributes: false,\n propertyName: CONFIG_NAME,\n });\n if (extendValidation.errors && extendValidation.errors.length > 0) {\n handleValidationErrors(extendConfigLoc, new ConfigValidationError(extendValidation.errors));\n }\n valdiateDeprecatedConfig(extendConfig);\n resolveRelativeConfig(extendConfig, configBase);\n }\n\n // if valid, apply config over defaults\n const mergedConfig = merge([extendConfig, config, overrides], {\n isMergeableObject: (val) => isPlainObject(val) || Array.isArray(val),\n });\n\n try {\n return createConfiguration(mergedConfig);\n } catch (err) {\n if (err instanceof ConfigValidationError) {\n handleValidationErrors(filepath!, err);\n }\n throw err;\n }\n}\n" }, { "path": "snowpack/src/dev/hmr.ts", "content": "import type http from 'http';\nimport type http2 from 'http2';\nimport path from 'path';\nimport onProcessExit from 'signal-exit';\nimport {FileBuilder} from '../build/file-builder';\nimport {EsmHmrEngine} from '../hmr-server-engine';\nimport {SnowpackConfig} from '../types';\nimport {getCacheKey, hasExtension} from '../util';\n\nexport function startHmrEngine(\n inMemoryBuildCache: Map,\n server: http.Server | http2.Http2Server | undefined,\n serverPort: number | undefined,\n config: SnowpackConfig,\n) {\n const {hmrDelay} = config.devOptions;\n const hmrPort = config.devOptions.hmrPort || serverPort;\n const hmrEngine = new EsmHmrEngine({server, port: hmrPort, delay: hmrDelay});\n onProcessExit(() => {\n hmrEngine.disconnectAllClients();\n });\n\n // Live Reload + File System Watching\n function updateOrBubble(url: string, visited: Set) {\n if (visited.has(url)) {\n return;\n }\n const node = hmrEngine.getEntry(url);\n const isBubbled = visited.size > 0;\n if (node && node.isHmrEnabled) {\n hmrEngine.broadcastMessage({type: 'update', url, bubbled: isBubbled});\n }\n visited.add(url);\n if (node && node.isHmrAccepted) {\n // Found a boundary, no bubbling needed\n } else if (node && node.dependents.size > 0) {\n node.dependents.forEach((dep) => {\n hmrEngine.markEntryForReplacement(node, true);\n updateOrBubble(dep, visited);\n });\n } else {\n // We've reached the top, trigger a full page refresh\n hmrEngine.broadcastMessage({type: 'reload'});\n }\n }\n\n function handleHmrUpdate(fileLoc: string, originalUrl: string) {\n // CSS files may be loaded directly in the client (not via JS import / .proxy.js)\n // so send an \"update\" event to live update if thats the case.\n if (hasExtension(originalUrl, '.css') && !hasExtension(originalUrl, '.module.css')) {\n hmrEngine.broadcastMessage({type: 'update', url: originalUrl, bubbled: false});\n }\n\n // Append \".proxy.js\" to Non-JS files to match their registered URL in the\n // client app.\n let updatedUrl = originalUrl;\n if (!hasExtension(updatedUrl, '.js')) {\n updatedUrl += '.proxy.js';\n }\n\n // Check if a virtual file exists in the resource cache (ex: CSS from a\n // Svelte file) If it does, mark it for HMR replacement but DONT trigger a\n // separate HMR update event. This is because a virtual resource doesn't\n // actually exist on disk, so we need the main resource (the JS) to load\n // first. Only after that happens will the CSS exist.\n const virtualCssFileUrl = updatedUrl.replace(/.js$/, '.css');\n const virtualNode =\n virtualCssFileUrl.includes(path.basename(fileLoc)) &&\n hmrEngine.getEntry(`${virtualCssFileUrl}.proxy.js`);\n if (virtualNode) {\n hmrEngine.markEntryForReplacement(virtualNode, true);\n }\n\n // If the changed file exists on the page, trigger a new HMR update.\n if (hmrEngine.getEntry(updatedUrl)) {\n updateOrBubble(updatedUrl, new Set());\n return;\n }\n\n // Otherwise, reload the page if the file exists in our hot cache (which\n // means that the file likely exists on the current page, but is not\n // supported by HMR (HTML, image, etc)).\n if (inMemoryBuildCache.has(getCacheKey(fileLoc, {isSSR: false, mode: config.mode}))) {\n hmrEngine.broadcastMessage({type: 'reload'});\n return;\n }\n }\n\n return {hmrEngine, handleHmrUpdate};\n}\n" }, { "path": "snowpack/src/hmr-server-engine.ts", "content": "import WebSocket from 'ws';\nimport stripAnsi from 'strip-ansi';\nimport type http from 'http';\nimport type http2 from 'http2';\nimport {logger} from './logger';\n\ninterface Dependency {\n dependents: Set;\n dependencies: Set;\n isHmrEnabled: boolean;\n isHmrAccepted: boolean;\n needsReplacement: boolean;\n needsReplacementCount: number;\n}\n\ntype HMRMessage =\n | {type: 'reload'}\n | {type: 'update'; url: string; bubbled: boolean}\n | {\n type: 'error';\n title: string;\n errorMessage: string;\n fileLoc?: string;\n errorStackTrace?: string;\n };\n\nconst DEFAULT_CONNECT_DELAY = 2000;\nconst DEFAULT_PORT = 12321;\n\ninterface EsmHmrEngineOptions {\n server: http.Server | http2.Http2Server | undefined;\n port?: number | undefined;\n delay?: number;\n}\nexport class EsmHmrEngine {\n clients: Set = new Set();\n dependencyTree = new Map();\n\n private delay: number = 0;\n private currentBatch: HMRMessage[] = [];\n private currentBatchTimeout: NodeJS.Timer | null = null;\n private cachedConnectErrors: Set = new Set();\n readonly port: number = 0;\n private wss: WebSocket.Server;\n\n constructor(options: EsmHmrEngineOptions) {\n this.port = options.port || DEFAULT_PORT;\n const wss = (this.wss = options.server\n ? new WebSocket.Server({noServer: true})\n : new WebSocket.Server({port: this.port}));\n if (options.delay) {\n this.delay = options.delay;\n }\n\n if (options.server) {\n options.server.on('upgrade', (req, socket, head) => {\n // Only handle upgrades to ESM-HMR requests, ignore others.\n if (req.headers['sec-websocket-protocol'] !== 'esm-hmr') {\n return;\n }\n wss.handleUpgrade(req, socket, head, (client) => {\n wss.emit('connection', client, req);\n });\n });\n }\n wss.on('connection', (client) => {\n this.connectClient(client);\n this.registerListener(client);\n if (this.cachedConnectErrors.size > 0) {\n this.dispatchMessage(Array.from(this.cachedConnectErrors), client);\n }\n });\n wss.on('close', (client: WebSocket | undefined) => {\n if (client) {\n this.disconnectClient(client);\n }\n });\n }\n\n registerListener(client: WebSocket) {\n client.on('message', (data) => {\n try {\n const message = JSON.parse(data.toString());\n if (message.type === 'hotAccept') {\n const entry = this.getEntry(message.id, true) as Dependency;\n entry.isHmrAccepted = true;\n entry.isHmrEnabled = true;\n }\n } catch (error) {\n logger.error(error.toString());\n }\n });\n }\n\n createEntry(sourceUrl: string) {\n const newEntry: Dependency = {\n dependencies: new Set(),\n dependents: new Set(),\n needsReplacement: false,\n needsReplacementCount: 0,\n isHmrEnabled: false,\n isHmrAccepted: false,\n };\n this.dependencyTree.set(sourceUrl, newEntry);\n return newEntry;\n }\n\n getEntry(sourceUrl: string, createIfNotFound = false) {\n const result = this.dependencyTree.get(sourceUrl);\n if (result) {\n return result;\n }\n if (createIfNotFound) {\n return this.createEntry(sourceUrl);\n }\n return null;\n }\n\n setEntry(sourceUrl: string, imports: string[], isHmrEnabled = false) {\n const result = this.getEntry(sourceUrl, true)!;\n const outdatedDependencies = new Set(result.dependencies);\n result.isHmrEnabled = isHmrEnabled;\n for (const importUrl of imports) {\n this.addRelationship(sourceUrl, importUrl);\n outdatedDependencies.delete(importUrl);\n }\n for (const importUrl of outdatedDependencies) {\n this.removeRelationship(sourceUrl, importUrl);\n }\n }\n\n removeRelationship(sourceUrl: string, importUrl: string) {\n let importResult = this.getEntry(importUrl);\n importResult && importResult.dependents.delete(sourceUrl);\n const sourceResult = this.getEntry(sourceUrl);\n sourceResult && sourceResult.dependencies.delete(importUrl);\n }\n\n addRelationship(sourceUrl: string, importUrl: string) {\n if (importUrl !== sourceUrl) {\n let importResult = this.getEntry(importUrl, true)!;\n importResult.dependents.add(sourceUrl);\n const sourceResult = this.getEntry(sourceUrl, true)!;\n sourceResult.dependencies.add(importUrl);\n }\n }\n\n markEntryForReplacement(entry: Dependency, state: boolean) {\n if (state) {\n entry.needsReplacementCount++;\n } else {\n entry.needsReplacementCount--;\n }\n entry.needsReplacement = !!entry.needsReplacementCount;\n }\n\n broadcastMessage(data: HMRMessage) {\n // Special \"error\" event handling\n if (data.type === 'error') {\n // Clean: remove any console styling before we send to the browser\n // NOTE(@fks): If another event ever needs this, okay to generalize.\n data.title = data.title && stripAnsi(data.title);\n data.errorMessage = data.errorMessage && stripAnsi(data.errorMessage);\n data.fileLoc = data.fileLoc && stripAnsi(data.fileLoc);\n data.errorStackTrace = data.errorStackTrace && stripAnsi(data.errorStackTrace);\n // Cache: Cache errors in case an HMR client connects after the error (first page load).\n if (\n Array.from(this.cachedConnectErrors).every(\n (f) => JSON.stringify(f) !== JSON.stringify(data),\n )\n ) {\n this.cachedConnectErrors.add(data);\n setTimeout(() => {\n this.cachedConnectErrors.delete(data);\n }, DEFAULT_CONNECT_DELAY);\n }\n }\n if (this.delay > 0) {\n if (this.currentBatchTimeout) {\n clearTimeout(this.currentBatchTimeout);\n }\n this.currentBatch.push(data);\n this.currentBatchTimeout = setTimeout(() => this.dispatchBatch(), this.delay || 100);\n } else {\n this.dispatchMessage([data]);\n }\n }\n\n dispatchBatch() {\n if (this.currentBatchTimeout) {\n clearTimeout(this.currentBatchTimeout);\n }\n if (this.currentBatch.length > 0) {\n this.dispatchMessage(this.currentBatch);\n this.currentBatch = [];\n }\n }\n\n /**\n * This is shared logic to dispatch messages to the clients. The public methods\n * `broadcastMessage` and `dispatchBatch` manage the delay then use this,\n * internally when it's time to actually send the data.\n */\n private dispatchMessage(messageBatch: HMRMessage[], singleClient?: WebSocket) {\n if (messageBatch.length === 0) {\n return;\n }\n const clientRecipientList = singleClient ? [singleClient] : this.clients;\n let singleSummaryMessage = messageBatch.find((message) => message.type === 'reload') || null;\n clientRecipientList.forEach((client) => {\n if (client.readyState === WebSocket.OPEN) {\n if (singleSummaryMessage) {\n client.send(JSON.stringify(singleSummaryMessage));\n } else {\n messageBatch.forEach((data) => {\n client.send(JSON.stringify(data));\n });\n }\n } else {\n this.disconnectClient(client);\n }\n });\n }\n\n connectClient(client: WebSocket) {\n this.clients.add(client);\n }\n\n disconnectClient(client: WebSocket) {\n client.terminate();\n this.clients.delete(client);\n }\n\n disconnectAllClients() {\n for (const client of this.clients) {\n this.disconnectClient(client);\n }\n }\n\n stop(): Promise {\n // This will disconnect clients so no need to do that ourselves.\n return new Promise((resolve, reject) => {\n this.wss.close((err) => {\n if (err) {\n reject(err);\n } else {\n resolve(void 0);\n }\n });\n });\n }\n}\n" }, { "path": "snowpack/src/index.ts", "content": "import * as colors from 'kleur/colors';\nimport util from 'util';\nimport yargs from 'yargs-parser';\nimport {addCommand, rmCommand} from './commands/add-rm';\nimport {command as initCommand} from './commands/init';\nimport {command as prepareCommand} from './commands/prepare';\nimport {command as buildCommand} from './commands/build';\nimport {command as devCommand} from './commands/dev';\nimport {clearCache, getPackageSource} from './sources/util';\nimport {logger} from './logger';\nimport {loadConfiguration, expandCliFlags} from './config';\nimport {CLIFlags, CommandOptions, SnowpackConfig} from './types';\nimport {readLockfile} from './util.js';\nimport {getUrlsForFile} from './build/file-urls';\nexport * from './types';\n\n// Stable API\nexport {startServer, NotFoundError} from './commands/dev';\nexport {build} from './commands/build';\nexport {loadConfiguration, createConfiguration} from './config.js';\nexport {readLockfile as loadLockfile} from './util.js';\nexport {clearCache} from './sources/util';\nexport {logger} from './logger';\n\n// Helper API\nexport function getUrlForFile(fileLoc: string, config: SnowpackConfig) {\n const result = getUrlsForFile(fileLoc, config);\n return result ? result[0] : result;\n}\nexport function preparePackages({config}: CommandOptions) {\n const pkgSource = getPackageSource(config);\n return pkgSource.prepare();\n}\n\n// Deprecated API\nexport function startDevServer() {\n throw new Error('startDevServer() was been renamed to startServer().');\n}\nexport function buildProject() {\n throw new Error('buildProject() was been renamed to build().');\n}\nexport function loadAndValidateConfig() {\n throw new Error(\n 'loadAndValidateConfig() has been deprecated in favor of loadConfiguration() and createConfiguration().',\n );\n}\n\nfunction printHelp() {\n logger.info(\n `\n${colors.bold(`snowpack`)} - A faster build system for the modern web.\n\n Snowpack is best configured via config file.\n But, most configuration can also be passed via CLI flags.\n 📖 ${colors.dim('https://www.snowpack.dev/reference/configuration')}\n\n${colors.bold('Commands:')}\n snowpack init Create a new project config file.\n snowpack prepare Prepare your project for development (optional).\n snowpack dev Develop your project locally.\n snowpack build Build your project for production.\n snowpack add [package] Add a package to your project.\n snowpack rm [package] Remove a package from your project.\n\n${colors.bold('Flags:')}\n --config [path] Set the location of your project config file.\n --help Show this help message.\n --version Show the current version.\n --reload Clear the local cache (useful for troubleshooting).\n --cache-dir-path Specify a custom cache directory.\n --verbose Enable verbose log messages.\n --quiet Enable minimal log messages.\n `.trim(),\n );\n}\n\nexport async function cli(args: string[]) {\n // parse CLI flags\n const cliFlags = yargs(args, {\n array: ['install', 'env', 'exclude', 'external'],\n }) as CLIFlags;\n\n if (cliFlags.verbose) {\n logger.level = 'debug';\n }\n if (cliFlags.quiet) {\n logger.level = 'silent';\n }\n if (cliFlags.help) {\n printHelp();\n process.exit(0);\n }\n if (cliFlags.version) {\n logger.info(require('../../package.json').version);\n process.exit(0);\n }\n if (cliFlags.reload) {\n logger.info(colors.yellow('! clearing cache...'));\n await clearCache();\n }\n\n const cmd = cliFlags['_'][2];\n logger.debug(`run command: ${cmd}`);\n if (!cmd) {\n printHelp();\n process.exit(1);\n }\n\n // Set this early -- before config loading -- so that plugins see it.\n if (cmd === 'build') {\n process.env.NODE_ENV = process.env.NODE_ENV || 'production';\n }\n if (cmd === 'dev') {\n process.env.NODE_ENV = process.env.NODE_ENV || 'development';\n }\n\n const cliConfig = expandCliFlags(cliFlags);\n const config = await loadConfiguration(cliConfig, cliFlags.config);\n logger.debug(`config loaded: ${util.format(config)}`);\n const lockfile = await readLockfile(config.root);\n logger.debug(`lockfile ${lockfile ? 'loaded.' : 'not loaded'}`);\n const commandOptions: CommandOptions = {\n config,\n lockfile,\n };\n\n if (cmd === 'add') {\n await addCommand(cliFlags['_'][3], commandOptions);\n return process.exit(0);\n }\n if (cmd === 'rm') {\n await rmCommand(cliFlags['_'][3], commandOptions);\n return process.exit(0);\n }\n\n if (cliFlags['_'].length > 3) {\n logger.error(`Unexpected multiple commands`);\n process.exit(1);\n }\n\n if (cmd === 'prepare') {\n await prepareCommand(commandOptions);\n return process.exit(0);\n }\n if (cmd === 'init') {\n await initCommand(commandOptions);\n return process.exit(0);\n }\n if (cmd === 'build') {\n await buildCommand(commandOptions);\n return process.exit(0);\n }\n if (cmd === 'dev') {\n await devCommand(commandOptions);\n return process.exit(0);\n }\n\n logger.error(`Unrecognized command: ${cmd}`);\n process.exit(1);\n}\n" }, { "path": "snowpack/src/lexer-util.ts", "content": "export function checkIdent(code: string, pos: number, text: string): boolean {\n return code.slice(pos, pos + text.length) === text;\n}\n\nexport function isEOL(code: string, pos: number): boolean {\n return code.charAt(pos) === '\\n' || (code.charAt(pos) === '\\r' && code.charAt(pos + 1) === '\\n');\n}\n\n/*\n * Adopted from https://github.com/guybedford/es-module-lexer\n * Licensed under the\n *\n * MIT License\n * -----------\n *\n * Copyright (C) 2018-2019 Guy Bedford\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the \"Software\"),\n * to deal in the Software without restriction, including without limitation\n * the rights to use, copy, modify, merge, publish, distribute, sublicense,\n * and/or sell copies of the Software, and to permit persons to whom the\n * Software is furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included\n * in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL\n * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n */\n\nexport function isBrOrWsOrPunctuatorNotDot(ch: string): boolean {\n const c = ch.charCodeAt(0);\n return (c > 8 && c < 14) || c == 32 || c == 160 || (isPunctuator(ch) && ch != '.');\n}\n\nexport function isPunctuator(ch: string): boolean {\n const c = ch.charCodeAt(0);\n // 23 possible punctuator endings: !%&()*+,-./:;<=>?[]^{}|~\n return (\n ch == '!' ||\n ch == '%' ||\n ch == '&' ||\n (c > 39 && c < 48) ||\n (c > 57 && c < 64) ||\n ch == '[' ||\n ch == ']' ||\n ch == '^' ||\n (c > 122 && c < 127)\n );\n}\n\nexport function keywordStart(source: string, pos: number) {\n return pos === 0 || isBrOrWsOrPunctuatorNotDot(source.charAt(pos - 1));\n}\n" }, { "path": "snowpack/src/logger.ts", "content": "import * as colors from 'kleur/colors';\nimport {LoggerLevel, LoggerEvent, LoggerOptions} from './types';\n\nexport interface LogRecord {\n val: string;\n count: number;\n}\n\nconst levels: Record = {\n debug: 20,\n info: 30,\n warn: 40,\n error: 50,\n silent: 90,\n};\n\n/** Custom logger heavily-inspired by https://github.com/pinojs/pino with extra features like log retentian */\nclass SnowpackLogger {\n /** set the log level (can be changed after init) */\n public level: LoggerLevel = 'info';\n /** configure maximum number of logs to keep (default: 500) */\n public logCount = 500;\n\n private history: {val: string; count: number}[] = []; // this is immutable; must be accessed with Logger.getHistory()\n private callbacks: Record void> = {\n debug: (message: string) => {\n console.log(message);\n },\n info: (message: string) => {\n console.log(message);\n },\n warn: (message: string) => {\n console.warn(message);\n },\n error: (message: string) => {\n console.error(message);\n },\n };\n\n private log({\n level,\n name,\n message,\n task,\n }: {\n level: LoggerEvent;\n name: string;\n message: string;\n task?: Function;\n }) {\n // test if this level is enabled or not\n if (levels[this.level] > levels[level]) {\n return; // do nothing\n }\n\n // format\n let text = message;\n if (level === 'warn') text = colors.yellow(text);\n if (level === 'error') text = colors.red(text);\n const time = new Date();\n const log = `${colors.dim(\n `[${String(time.getHours() + 1).padStart(2, '0')}:${String(time.getMinutes() + 1).padStart(\n 2,\n '0',\n )}:${String(time.getSeconds()).padStart(2, '0')}]`,\n )} ${colors.dim(`[${name}]`)} ${text}`;\n\n // add to log history and remove old logs to keep memory low\n const lastHistoryItem = this.history[this.history.length - 1];\n if (lastHistoryItem && lastHistoryItem.val === log) {\n lastHistoryItem.count++;\n } else {\n this.history.push({val: log, count: 1});\n }\n while (this.history.length > this.logCount) {\n this.history.shift();\n }\n\n // log\n if (typeof this.callbacks[level] === 'function') {\n this.callbacks[level](log);\n } else {\n throw new Error(`No logging method defined for ${level}`);\n }\n\n // logger takes a possibly processor-intensive task, and only\n // processes it when this log level is enabled\n task && task(this);\n }\n\n /** emit messages only visible when --debug is passed */\n public debug(message: string, options?: LoggerOptions): void {\n const name = (options && options.name) || 'snowpack';\n this.log({level: 'debug', name, message, task: options?.task});\n }\n\n /** emit general info */\n public info(message: string, options?: LoggerOptions): void {\n const name = (options && options.name) || 'snowpack';\n this.log({level: 'info', name, message, task: options?.task});\n }\n\n /** emit non-fatal warnings */\n public warn(message: string, options?: LoggerOptions): void {\n const name = (options && options.name) || 'snowpack';\n this.log({level: 'warn', name, message, task: options?.task});\n }\n\n /** emit critical error messages */\n public error(message: string, options?: LoggerOptions): void {\n const name = (options && options.name) || 'snowpack';\n this.log({level: 'error', name, message, task: options?.task});\n }\n\n /** get full logging history */\n public getHistory(): ReadonlyArray {\n return this.history;\n }\n\n /** listen for events */\n public on(event: LoggerEvent, callback: (message: string) => void) {\n this.callbacks[event] = callback;\n }\n}\n\n/** export one logger to rest of app */\nexport const logger = new SnowpackLogger();\n" }, { "path": "snowpack/src/plugins/plugin-esbuild.ts", "content": "import * as esbuild from 'esbuild';\nimport * as colors from 'kleur/colors';\nimport path from 'path';\nimport {promises as fs} from 'fs';\nimport {SnowpackPlugin, SnowpackConfig} from '../types';\nimport {logger} from '../logger';\n\nconst IS_PREACT = /from\\s+['\"]preact['\"]/;\nfunction checkIsPreact(contents: string) {\n return IS_PREACT.test(contents);\n}\n\ntype Loader = 'js' | 'jsx' | 'ts' | 'tsx';\n\nfunction getLoader(filePath: string): {loader: Loader; isJSX: boolean} {\n const ext = path.extname(filePath);\n const loader: Loader = ext === '.mjs' ? 'js' : (ext.substr(1) as Loader);\n const isJSX = loader.endsWith('x');\n return {loader, isJSX};\n}\n\nexport function esbuildPlugin(config: SnowpackConfig, {input}: {input: string[]}): SnowpackPlugin {\n return {\n name: '@snowpack/plugin-esbuild',\n resolve: {\n input,\n output: ['.js'],\n },\n async load({filePath}) {\n let contents = await fs.readFile(filePath, 'utf8');\n const {loader, isJSX} = getLoader(filePath);\n if (isJSX) {\n const jsxInject = config.buildOptions.jsxInject ? `${config.buildOptions.jsxInject}\\n` : '';\n contents = jsxInject + contents;\n }\n const isPreact = isJSX && checkIsPreact(contents);\n let jsxFactory = config.buildOptions.jsxFactory ?? (isPreact ? 'h' : undefined);\n let jsxFragment = config.buildOptions.jsxFragment ?? (isPreact ? 'Fragment' : undefined);\n\n const {code, map, warnings} = await esbuild.transform(contents, {\n loader: loader,\n jsxFactory,\n jsxFragment,\n sourcefile: filePath,\n sourcemap: config.buildOptions.sourcemap && 'inline',\n charset: 'utf8',\n sourcesContent: config.mode !== 'production',\n });\n for (const warning of warnings) {\n logger.error(`${colors.bold('!')} ${filePath}\n ${warning.text}`);\n }\n return {\n '.js': {\n code: code || '',\n map,\n },\n };\n },\n cleanup() {},\n };\n}\n" }, { "path": "snowpack/src/rewrite-imports.ts", "content": "import {matchDynamicImportValue} from './scan-imports';\nimport {CSS_REGEX, HTML_JS_REGEX, HTML_STYLE_REGEX} from './util';\n\nconst {parse} = require('es-module-lexer');\n\nconst WEBPACK_MAGIC_COMMENT_REGEX = /\\/\\*[\\s\\S]*?\\*\\//g;\n\ninterface RewriteInstruction {\n start: number;\n end: number;\n rewrite: string;\n}\n\nfunction applyRewrites(source: string, rewrites: RewriteInstruction[]) {\n let result = ``;\n let index = 0;\n rewrites\n .sort((a, b) => a.start - b.start)\n .forEach(({start, end, rewrite}) => {\n result += source.substring(index, start) + rewrite;\n index = end;\n });\n result += source.substring(index);\n return result;\n}\n\nexport async function scanCodeImportsExports(code: string): Promise {\n const [imports] = await parse(code);\n return imports.filter((imp: any) => {\n //imp.d = -2 = import.meta.url = we can skip this for now\n if (imp.d === -2) {\n return false;\n }\n // imp.d > -1 === dynamic import\n if (imp.d > -1) {\n const importStatement = code.substring(imp.s, imp.e);\n return !!matchDynamicImportValue(importStatement);\n }\n return true;\n });\n}\n\nexport async function transformEsmImports(\n _code: string,\n replaceImport: (specifier: string) => string | Promise,\n) {\n const imports = await scanCodeImportsExports(_code);\n const collectedRewrites: RewriteInstruction[] = [];\n await Promise.all(\n imports.map(async (imp) => {\n let spec = _code.substring(imp.s, imp.e).replace(/(\\/|\\\\)+$/, '');\n let webpackMagicCommentMatches;\n if (imp.d > -1) {\n // Extracting comments from spec as they are stripped in `matchDynamicImportValue`\n webpackMagicCommentMatches = spec.match(WEBPACK_MAGIC_COMMENT_REGEX);\n spec = matchDynamicImportValue(spec) || '';\n }\n let rewrittenImport = await replaceImport(spec);\n if (imp.d > -1) {\n rewrittenImport = webpackMagicCommentMatches\n ? `${webpackMagicCommentMatches.join(' ')} ${JSON.stringify(rewrittenImport)}`\n : JSON.stringify(rewrittenImport);\n }\n collectedRewrites.push({rewrite: rewrittenImport, start: imp.s, end: imp.e});\n }),\n );\n const result = applyRewrites(_code, collectedRewrites);\n return result;\n}\n\nasync function transformHtmlImports(\n code: string,\n replaceImport: (specifier: string) => string | Promise,\n) {\n const collectedRewrites: RewriteInstruction[] = [];\n let match;\n const jsImportRegex = new RegExp(HTML_JS_REGEX);\n while ((match = jsImportRegex.exec(code))) {\n const [, scriptTag, scriptCode] = match;\n // Only transform a script element if it contains inlined code / is not empty.\n if (scriptCode.trim()) {\n collectedRewrites.push({\n rewrite: await transformEsmImports(scriptCode, replaceImport),\n start: match.index + scriptTag.length,\n end: match.index + scriptTag.length + scriptCode.length,\n });\n }\n }\n const cssImportRegex = new RegExp(HTML_STYLE_REGEX);\n while ((match = cssImportRegex.exec(code))) {\n const [, styleTag, styleCode] = match;\n // Only transform a script element if it contains inlined code / is not empty.\n if (styleCode.trim()) {\n collectedRewrites.push({\n rewrite: await transformCssImports(styleCode, replaceImport),\n start: match.index + styleTag.length,\n end: match.index + styleTag.length + styleCode.length,\n });\n }\n }\n const rewrittenCode = applyRewrites(code, collectedRewrites);\n return rewrittenCode;\n}\n\nasync function transformCssImports(\n code: string,\n replaceImport: (specifier: string) => string | Promise,\n) {\n const collectedRewrites: RewriteInstruction[] = [];\n let match;\n const importRegex = new RegExp(CSS_REGEX);\n while ((match = importRegex.exec(code))) {\n const [fullMatch, spec] = match;\n // Only transform a script element if it contains inlined code / is not empty.\n collectedRewrites.push({\n // CSS doesn't support proxy files, so always point to the original file\n rewrite: `@import \"${(await replaceImport(spec)).replace('.proxy.js', '')}\";`,\n start: match.index,\n end: match.index + fullMatch.length,\n });\n }\n const rewrittenCode = applyRewrites(code, collectedRewrites);\n return rewrittenCode;\n}\n\nexport async function transformFileImports(\n {type, contents}: {type: string; contents: string},\n replaceImport: (specifier: string) => string | Promise,\n) {\n if (type === '.js') {\n return transformEsmImports(contents, replaceImport);\n }\n if (type === '.html') {\n return transformHtmlImports(contents, replaceImport);\n }\n if (type === '.css') {\n return transformCssImports(contents, replaceImport);\n }\n throw new Error(\n `Incompatible filetype: cannot scan ${type} files for ESM imports. This is most likely an error within Snowpack.`,\n );\n}\n\nexport async function transformAddMissingDefaultExport(_code: string) {\n // We need to add a default export, just so that our re-importer doesn't break\n const [, allExports] = await parse(_code);\n if (!allExports.includes('default')) {\n return _code + '\\n\\nexport default null;';\n }\n return _code;\n}\n" }, { "path": "snowpack/src/scan-import-glob.ts", "content": "import {keywordStart, checkIdent, isEOL} from './lexer-util';\n\nexport interface ImportGlobStatement {\n start: number;\n end: number;\n glob: string;\n isEager: boolean;\n}\n\nconst enum ScannerState {\n idle,\n inImport,\n maybeImportMeta,\n onImportMeta,\n onImportMetaGlob,\n inSingleQuote,\n inDoubleQuote,\n inTemplateLiteral,\n inCall,\n inSingleLineComment,\n inMutliLineComment,\n}\n\n// Specifically NOT using /g here as it is stateful!\nconst IMPORT_META_GLOB_REGEX = /import\\s*\\.\\s*meta\\s*\\.\\s*glob/;\n\nexport function scanImportGlob(code: string) {\n if (!IMPORT_META_GLOB_REGEX.test(code)) return [];\n\n let pos = -1;\n let start = 0;\n let end = 0;\n let state = ScannerState.idle;\n\n let importGlobs: ImportGlobStatement[] = [];\n let importGlob: ImportGlobStatement | null = null;\n let glob: string = '';\n\n while (pos++ < code.length) {\n const ch = code.charAt(pos);\n\n if (isInQuote(state)) {\n switch (ch) {\n case '\"':\n case \"'\":\n case '`': {\n state = ScannerState.idle;\n break;\n }\n default: {\n glob += ch;\n }\n }\n continue;\n }\n\n if (isInComment(state)) {\n if (state === ScannerState.inSingleLineComment && isEOL(code, pos)) {\n state = ScannerState.idle;\n } else if (state === ScannerState.inMutliLineComment && checkIdent(code, pos, '*/')) {\n state = ScannerState.idle;\n } else {\n continue;\n }\n }\n\n switch (ch) {\n case '/': {\n if (isInQuote(state)) continue;\n\n if (code[pos + 1] === '/') {\n state = ScannerState.inSingleLineComment;\n } else if (code[pos + 1] === '*') {\n state = ScannerState.inMutliLineComment;\n }\n break;\n }\n case 'i': {\n if (keywordStart(code, pos) && checkIdent(code, pos, 'import')) {\n state = ScannerState.inImport;\n start = pos;\n }\n break;\n }\n case '.': {\n if (state === ScannerState.inImport) {\n state = ScannerState.maybeImportMeta;\n }\n break;\n }\n case 'm': {\n if (state === ScannerState.maybeImportMeta && checkIdent(code, pos, 'meta')) {\n state = ScannerState.onImportMeta;\n }\n break;\n }\n case 'g': {\n if (state === ScannerState.onImportMeta && checkIdent(code, pos, 'glob')) {\n state = ScannerState.onImportMetaGlob;\n const isEager = checkIdent(code, pos, 'globEager');\n importGlob = {start, isEager} as any;\n }\n break;\n }\n case '\"': {\n state = ScannerState.inDoubleQuote;\n glob = '';\n break;\n }\n case \"'\": {\n state = ScannerState.inSingleQuote;\n glob = '';\n break;\n }\n case '`': {\n state = ScannerState.inTemplateLiteral;\n glob = '';\n break;\n }\n case '(': {\n if (state === ScannerState.onImportMetaGlob) state = ScannerState.inCall;\n break;\n }\n case ')': {\n state = ScannerState.idle;\n end = pos + 1;\n if (importGlob) {\n Object.assign(importGlob, {glob, end});\n importGlobs.push(importGlob);\n importGlob = null;\n start = 0;\n end = 0;\n }\n break;\n }\n }\n }\n\n return importGlobs as ImportGlobStatement[];\n}\n\nfunction isInQuote(state: ScannerState): boolean {\n return (\n state === ScannerState.inDoubleQuote ||\n state === ScannerState.inSingleQuote ||\n state === ScannerState.inTemplateLiteral\n );\n}\n\nfunction isInComment(state: ScannerState): boolean {\n return state === ScannerState.inSingleLineComment || state === ScannerState.inMutliLineComment;\n}\n" }, { "path": "snowpack/src/scan-imports.ts", "content": "import {ImportSpecifier, init as initESModuleLexer, parse} from 'es-module-lexer';\nimport {InstallTarget} from 'esinstall';\nimport glob from 'glob';\nimport picomatch from 'picomatch';\nimport {fdir} from 'fdir';\nimport path from 'path';\nimport slash from 'slash';\nimport stripComments from 'strip-comments';\nimport {logger} from './logger';\nimport {ScannableExt, SnowpackConfig, SnowpackSourceFile} from './types';\nimport {\n createInstallTarget,\n CSS_REGEX,\n findMatchingAliasEntry,\n getExtension,\n HTML_JS_REGEX,\n HTML_STYLE_REGEX,\n isImportOfPackage,\n isTruthy,\n readFile,\n SVELTE_VUE_REGEX,\n ASTRO_REGEX,\n IS_DOTFILE_REGEX,\n} from './util';\n\n// [@\\w] - Match a word-character or @ (valid package name)\n// (?!.*(:\\/\\/)) - Ignore if previous match was a protocol (ex: http://)\nconst BARE_SPECIFIER_REGEX = /^[@\\w](?!.*(:\\/\\/))/;\n\nconst ESM_IMPORT_REGEX =\n /(? 0) {\n installTargets.push(...scanDepList(knownEntrypoints, config.root));\n }\n // TODO: remove this if block; move logic inside scanImports\n if (scannedFiles) {\n installTargets.push(...(await scanImportsFromFiles(scannedFiles, config)));\n } else {\n installTargets.push(...(await scanImports(config.mode === 'test', config)));\n }\n return installTargets.filter(\n (dep) =>\n !config.packageOptions.external.some((packageName) =>\n isImportOfPackage(dep.specifier, packageName),\n ),\n );\n}\n\nconst scannableExts = new Set([\n '.astro',\n '.cjs',\n '.css',\n '.html',\n '.interface',\n '.js',\n '.jsx',\n '.less',\n '.mjs',\n '.sass',\n '.scss',\n '.svelte',\n '.ts',\n '.tsx',\n '.vue',\n]);\nfunction isFileScannable(ext: string): boolean {\n return scannableExts.has(ext as ScannableExt); // note: needed to keep Set() correct above, but this fn should test any string (hence \"as\").\n}\n\nexport function matchDynamicImportValue(importStatement: string) {\n const matched = stripComments(importStatement).match(/^\\s*('([^']+)'|\"([^\"]+)\")\\s*$/m);\n return matched?.[2] || matched?.[3] || null;\n}\n\nexport function getWebModuleSpecifierFromCode(code: string, imp: ImportSpecifier): string | null {\n // import.meta: we can ignore\n if (imp.d === -2) {\n return null;\n }\n // Static imports: easy to parse\n if (imp.d === -1) {\n return code.substring(imp.s, imp.e);\n }\n // Dynamic imports: a bit trickier to parse. Today, we only support string literals.\n const importStatement = code.substring(imp.s, imp.e);\n return matchDynamicImportValue(importStatement);\n}\n\n/**\n * parses an import specifier, looking for a web modules to install. If a web module is not detected,\n * null is returned.\n */\nfunction parseWebModuleSpecifier(specifier: string | null): null | string {\n if (!specifier) {\n return null;\n }\n // If specifier is a \"bare module specifier\" (ie: package name) just return it directly\n if (BARE_SPECIFIER_REGEX.test(specifier)) {\n return specifier;\n }\n return null;\n}\n\nfunction parseImportStatement(code: string, imp: ImportSpecifier): null | InstallTarget {\n const webModuleSpecifier = parseWebModuleSpecifier(getWebModuleSpecifierFromCode(code, imp));\n if (!webModuleSpecifier) {\n return null;\n }\n\n const importStatement = stripComments(code.substring(imp.ss, imp.se));\n if (/^import\\s+type/.test(importStatement)) {\n return null;\n }\n\n const isDynamicImport = imp.d > -1;\n const hasDefaultImport = !isDynamicImport && DEFAULT_IMPORT_REGEX.test(importStatement);\n const hasNamespaceImport = !isDynamicImport && importStatement.includes('*');\n\n const namedImports = (importStatement.match(HAS_NAMED_IMPORTS_REGEX)! || [, ''])[1]\n .split(',') // split `import { a, b, c }` by comma\n .map((name) => name.replace(STRIP_AS, '').trim()) // remove “ as …” and trim\n .filter(isTruthy);\n\n return {\n specifier: webModuleSpecifier,\n all: isDynamicImport || (!hasDefaultImport && !hasNamespaceImport && namedImports.length === 0),\n default: hasDefaultImport,\n namespace: hasNamespaceImport,\n named: namedImports,\n };\n}\n\nfunction cleanCodeForParsing(code: string): string {\n code = stripComments(code);\n const allMatches: string[] = [];\n let match;\n const importRegex = new RegExp(ESM_IMPORT_REGEX);\n while ((match = importRegex.exec(code))) {\n allMatches.push(match);\n }\n const dynamicImportRegex = new RegExp(ESM_DYNAMIC_IMPORT_REGEX);\n while ((match = dynamicImportRegex.exec(code))) {\n allMatches.push(match);\n }\n return allMatches.map(([full]) => full).join('\\n');\n}\n\nfunction parseJsForInstallTargets(contents: string): InstallTarget[] {\n let imports: ImportSpecifier[] = [];\n // Attempt #1: Parse the file as JavaScript. JSX and some decorator\n // syntax will break this.\n try {\n imports.push(...parse(contents)[0]);\n } catch (err) {\n // Attempt #2: Parse only the import statements themselves.\n // This lets us guarentee we aren't sending any broken syntax to our parser,\n // but at the expense of possible false +/- caused by our regex extractor.\n contents = cleanCodeForParsing(contents);\n imports.push(...parse(contents)[0]);\n }\n return (\n imports\n .map((imp) => parseImportStatement(contents, imp))\n .filter(isTruthy)\n // Babel macros are not install targets!\n .filter((target) => !/[./]macro(\\.js)?$/.test(target.specifier))\n );\n}\n\nfunction parseCssForInstallTargets(code: string): InstallTarget[] {\n const installTargets: InstallTarget[] = [];\n let match;\n const importRegex = new RegExp(CSS_REGEX);\n while ((match = importRegex.exec(code))) {\n const [, spec] = match;\n const webModuleSpecifier = parseWebModuleSpecifier(spec);\n if (webModuleSpecifier) {\n installTargets.push(createInstallTarget(webModuleSpecifier));\n }\n }\n return installTargets;\n}\n\nfunction parseFileForInstallTargets({\n locOnDisk,\n baseExt,\n contents,\n root,\n}: SnowpackSourceFile): InstallTarget[] {\n const relativeLoc = path.relative(root, locOnDisk);\n\n try {\n switch (baseExt as ScannableExt) {\n case '.css':\n case '.less':\n case '.sass':\n case '.scss': {\n logger.debug(`Scanning ${relativeLoc} for imports as CSS`);\n return parseCssForInstallTargets(contents);\n }\n case '.html':\n case '.svelte':\n case '.interface':\n case '.vue': {\n logger.debug(`Scanning ${relativeLoc} for imports as HTML`);\n return [\n ...parseCssForInstallTargets(extractCssFromHtml(contents)),\n ...parseJsForInstallTargets(extractJsFromHtml({contents, baseExt})),\n ];\n }\n case '.astro': {\n logger.debug(`Scanning ${relativeLoc} for imports as Astro`);\n return [\n ...parseCssForInstallTargets(extractCssFromHtml(contents)),\n ...parseJsForInstallTargets(extractJsFromAstro(contents)),\n ];\n }\n case '.cjs':\n case '.js':\n case '.jsx':\n case '.mjs':\n case '.ts':\n case '.tsx': {\n logger.debug(`Scanning ${relativeLoc} for imports as JS`);\n return parseJsForInstallTargets(contents);\n }\n default: {\n logger.debug(\n `Skip scanning ${relativeLoc} for imports (unknown file extension ${baseExt})`,\n );\n return [];\n }\n }\n } catch (err) {\n // Another error! No hope left, just abort.\n logger.error(`! ${locOnDisk}`);\n throw err;\n }\n}\n\n/** Extract only JS within element\n .filter((s) => s.trim())\n .join('\\n');\n}\n\n/** Extract only CSS within element\n .filter((s) => s.trim())\n .join('\\n');\n}\n\nfunction extractJsFromAstro(contents: string): string {\n const allMatches: string[][] = [];\n let match;\n let regex = new RegExp(ASTRO_REGEX);\n // No while loop because we only care about the top frontmatter\n if ((match = regex.exec(contents))) {\n allMatches.push(match);\n }\n return allMatches\n .map((match) => match[1]) // match[1] is the code inside the frontmatter\n .filter((s) => s.trim())\n .join('\\n');\n}\n\nexport function scanDepList(depList: string[], cwd: string): InstallTarget[] {\n return depList\n .map((whitelistItem) => {\n if (!glob.hasMagic(whitelistItem)) {\n return [createInstallTarget(whitelistItem, true)];\n } else {\n const nodeModulesLoc = path.join(cwd, 'node_modules');\n return scanDepList(glob.sync(whitelistItem, {cwd: nodeModulesLoc, nodir: true}), cwd);\n }\n })\n .reduce((flat, item) => flat.concat(item), []);\n}\n\nexport async function scanImports(\n includeTests: boolean,\n config: SnowpackConfig,\n): Promise {\n await initESModuleLexer;\n\n const includeFileSets = await Promise.all(\n Object.entries(config.mount).map(async ([fromDisk, mountEntry]) => {\n const allMatchedFiles = (await new fdir()\n .withFullPaths()\n .crawl(fromDisk)\n .withPromise()) as string[];\n if (mountEntry.dot) {\n return allMatchedFiles;\n }\n return allMatchedFiles.filter((f) => !IS_DOTFILE_REGEX.test(slash(f))); // TODO: use a file URL instead\n }),\n );\n const includeFiles = Array.from(new Set(([] as string[]).concat.apply([], includeFileSets)));\n if (includeFiles.length === 0) {\n return [];\n }\n\n // Scan every matched JS file for web dependency imports\n const excludeGlobs = includeTests\n ? config.exclude\n : [...config.exclude, ...config.testOptions.files];\n const mountedNodeModules = Object.keys(config.mount).filter((v) => v.includes('node_modules'));\n const foundExcludeMatch = picomatch(excludeGlobs);\n const loadedFiles: (SnowpackSourceFile | null)[] = await Promise.all(\n includeFiles.map(async (filePath: string): Promise => {\n // don’t waste time trying to scan files that aren’t scannable\n if (!isFileScannable(path.extname(filePath))) {\n return null;\n }\n if (foundExcludeMatch(filePath)) {\n const isMounted = mountedNodeModules.find((mountKey) => filePath.startsWith(mountKey));\n if (!isMounted || (isMounted && foundExcludeMatch(filePath.slice(isMounted.length)))) {\n return null;\n }\n }\n return {\n baseExt: getExtension(filePath),\n root: config.root,\n locOnDisk: filePath,\n contents: await readFile(filePath),\n };\n }),\n );\n\n return scanImportsFromFiles(loadedFiles.filter(isTruthy), config);\n}\n\nexport async function scanImportsFromFiles(\n loadedFiles: SnowpackSourceFile[],\n config: SnowpackConfig,\n): Promise {\n await initESModuleLexer;\n return loadedFiles\n .filter((sourceFile) => !Buffer.isBuffer(sourceFile.contents)) // filter out binary files from import scanning\n .map((sourceFile) => parseFileForInstallTargets(sourceFile as SnowpackSourceFile))\n .reduce((flat, item) => flat.concat(item), [])\n .filter((target) => {\n const aliasEntry = findMatchingAliasEntry(config, target.specifier);\n return !aliasEntry || aliasEntry.type === 'package';\n })\n .sort((impA, impB) => impA.specifier.localeCompare(impB.specifier));\n}\n" }, { "path": "snowpack/src/sources/local-install.ts", "content": "import {install, InstallOptions as EsinstallOptions, InstallTarget} from 'esinstall';\nimport url from 'url';\nimport util from 'util';\nimport {buildFile} from '../build/build-pipeline';\nimport {logger} from '../logger';\nimport {ImportMap, SnowpackBuiltFile, SnowpackConfig} from '../types';\n\ninterface InstallOptions {\n config: SnowpackConfig;\n isDev: boolean;\n isSSR: boolean;\n installOptions: EsinstallOptions;\n installTargets: (InstallTarget | string)[];\n}\n\ninterface InstallResult {\n importMap: ImportMap;\n needsSsrBuild: boolean;\n}\n\nexport async function installPackages({\n config,\n isDev,\n isSSR,\n installOptions,\n installTargets,\n}: InstallOptions): Promise {\n if (installTargets.length === 0) {\n return {\n importMap: {imports: {}} as ImportMap,\n needsSsrBuild: false,\n };\n }\n const loggerName =\n installTargets.length === 1\n ? `esinstall:${\n typeof installTargets[0] === 'string' ? installTargets[0] : installTargets[0].specifier\n }`\n : `esinstall`;\n let needsSsrBuild = false;\n\n const finalResult = await install(installTargets, {\n cwd: config.root,\n alias: config.alias,\n logger: {\n debug: (...args: [any, ...any[]]) => logger.debug(util.format(...args), {name: loggerName}),\n log: (...args: [any, ...any[]]) => logger.info(util.format(...args), {name: loggerName}),\n warn: (...args: [any, ...any[]]) => logger.warn(util.format(...args), {name: loggerName}),\n error: (...args: [any, ...any[]]) => logger.error(util.format(...args), {name: loggerName}),\n },\n // Important! Lots of options come in through here,\n // `external` is a very important one to NOT override.\n ...installOptions,\n stats: false,\n rollup: {\n plugins: [\n ...(installOptions?.rollup?.plugins ?? []),\n {\n name: 'esinstall:snowpack',\n async load(id: string) {\n // SSR Packages: Some file types build differently for SSR vs. non-SSR.\n // This line checks for those file types. Svelte is the only known file\n // type for now, but you can add to this line if you encounter another.\n needsSsrBuild = needsSsrBuild || id.endsWith('.svelte');\n const output = await buildFile(url.pathToFileURL(id), {\n config,\n isDev,\n isSSR,\n isPackage: true,\n isHmrEnabled: false,\n });\n let jsResponse: SnowpackBuiltFile | undefined;\n for (const [outputType, outputContents] of Object.entries(output)) {\n if (outputContents && outputType === '.js') {\n jsResponse = outputContents;\n }\n }\n if (jsResponse && Buffer.isBuffer(jsResponse.code)) {\n jsResponse.code = jsResponse.code.toString();\n }\n return jsResponse as {code: string; map?: string};\n },\n },\n ],\n },\n });\n logger.debug('Successfully ran esinstall.');\n return {importMap: finalResult.importMap, needsSsrBuild};\n}\n" }, { "path": "snowpack/src/sources/local.ts", "content": "import Arborist from '@npmcli/arborist';\nimport {\n InstallOptions,\n InstallTarget,\n resolveDependencyManifest as _resolveDependencyManifest,\n resolveEntrypoint,\n} from 'esinstall';\nimport findUp from 'find-up';\nimport {existsSync, promises as fs} from 'fs';\nimport * as colors from 'kleur/colors';\nimport mkdirp from 'mkdirp';\nimport pacote from 'pacote';\nimport path from 'path';\nimport rimraf from 'rimraf';\nimport slash from 'slash';\nimport {getBuiltFileUrls} from '../build/file-urls';\nimport {logger} from '../logger';\nimport {scanCodeImportsExports, transformFileImports} from '../rewrite-imports';\nimport {getInstallTargets, getWebModuleSpecifierFromCode} from '../scan-imports';\nimport {ImportMap, PackageOptionsLocal, PackageSource, SnowpackConfig} from '../types';\nimport {\n createInstallTarget,\n findMatchingAliasEntry,\n getExtension,\n isJavaScript,\n isPathImport,\n isRemoteUrl,\n parsePackageImportSpecifier,\n readFile,\n} from '../util';\nimport {GLOBAL_CACHE_DIR} from './util';\nimport {installPackages} from './local-install';\n\nconst CURRENT_META_FILE_CONTENTS = `.snowpack cache - Do not edit this directory!\n\nThe \".snowpack\" cache directory is fully managed for you by Snowpack.\nManual changes that you make to the files inside could break things.\n\nCommit this directory to source control to speed up cold starts.\n\nFound an issue? You can always delete the \".snowpack\"\ndirectory and Snowpack will recreate it on next run.\n\n[.meta.version=2]`;\n\nconst NEVER_PEER_PACKAGES: Set = new Set([\n '@babel/runtime',\n '@babel/runtime-corejs3',\n 'babel-runtime',\n 'dom-helpers',\n 'es-abstract',\n 'node-fetch',\n 'whatwg-fetch',\n 'tslib',\n '@ant-design/icons-svg',\n '@ant-design/icons',\n]);\n\nfunction isPackageCJS(manifest: any): boolean {\n return (\n // If a \"module\" entrypoint is defined, we'll use that.\n !manifest.module &&\n // If \"type\":\"module\", assume ESM.\n manifest.type !== 'module' &&\n // If export map exists, assume ESM exists somewhere within it.\n !manifest.exports &&\n // If \"main\" exists and ends in \".mjs\", assume ESM.\n !manifest.main?.endsWith('.mjs')\n );\n}\n\nfunction getRootPackageDirectory(loc: string) {\n const parts = loc.split('node_modules');\n if (parts.length === 1) {\n return undefined;\n }\n const packageParts = parts.pop()!.split(path.sep).filter(Boolean);\n const packageRoot = path.join(parts.join('node_modules'), 'node_modules');\n if (packageParts[0].startsWith('@')) {\n return path.join(packageRoot, packageParts[0], packageParts[1]);\n } else {\n return path.join(packageRoot, packageParts[0]);\n }\n}\n\n/**\n * Return your source config, in object format. pacote, arborist, and cacahe\n * all support the same set of options here for configuring your npm registry.\n */\nfunction getNpmConnectionOptions(source: string | object): object {\n if (source === 'local' || source === 'remote-next') {\n return {};\n } else if (typeof source === 'string') {\n return {registry: source};\n } else {\n return source;\n }\n}\n\ntype PackageImportData = {\n entrypoint: string;\n loc: string;\n installDest: string;\n packageVersion: string;\n packageName: string;\n};\n\nexport class PackageSourceLocal implements PackageSource {\n config: SnowpackConfig;\n arb: Arborist;\n npmConnectionOptions: object;\n cacheDirectory: string;\n packageSourceDirectory: string;\n memoizedResolve: Record = {};\n memoizedImportMap: Record = {};\n allPackageImports: Record = {};\n allSymlinkImports: Record = {};\n allKnownSpecs = new Set();\n allKnownProjectSpecs = new Set();\n hasWorkspaceWarningFired = false;\n\n constructor(config: SnowpackConfig) {\n this.config = config;\n this.npmConnectionOptions = getNpmConnectionOptions(config.packageOptions.source);\n if (config.packageOptions.source === 'local') {\n this.cacheDirectory = config.buildOptions.cacheDirPath\n ? path.resolve(config.buildOptions.cacheDirPath)\n : GLOBAL_CACHE_DIR;\n this.packageSourceDirectory = config.root;\n this.arb = null;\n } else {\n this.cacheDirectory = path.join(config.root, '.snowpack');\n this.packageSourceDirectory = path.join(config.root, '.snowpack', 'source');\n this.arb = new Arborist({\n ...this.npmConnectionOptions,\n path: this.packageSourceDirectory,\n packageLockOnly: true,\n });\n }\n }\n\n private async setupCacheDirectory() {\n const {config, packageSourceDirectory, cacheDirectory} = this;\n const lockfileLoc = path.join(cacheDirectory, 'lock.json');\n const manifestLoc = path.join(packageSourceDirectory, 'package.json');\n const manifestLockLoc = path.join(packageSourceDirectory, 'package-lock.json');\n await mkdirp(packageSourceDirectory);\n if (config.dependencies) {\n await fs.writeFile(\n path.join(packageSourceDirectory, 'package.json'),\n JSON.stringify(\n {\n '//': 'snowpack-mananged meta file. Do not edit this file!',\n dependencies: config.dependencies,\n },\n null,\n 2,\n ),\n 'utf8',\n );\n if (existsSync(lockfileLoc)) {\n const lockfile = await fs.readFile(lockfileLoc);\n await fs.writeFile(manifestLockLoc, lockfile);\n } else {\n if (existsSync(manifestLockLoc)) await fs.unlink(manifestLockLoc);\n }\n } else {\n if (existsSync(manifestLoc)) await fs.unlink(manifestLoc);\n if (existsSync(manifestLockLoc)) await fs.unlink(manifestLockLoc);\n }\n }\n\n private async setupPackageRootDirectory(installTargets: InstallTarget[]) {\n const {arb, config} = this;\n const result = await arb.loadVirtual().catch(() => null);\n const packageNamesNeedInstall = new Set(\n installTargets\n .map((spec) => {\n let [_packageName] = parsePackageImportSpecifier(spec.specifier);\n // handle aliases\n const aliasEntry = findMatchingAliasEntry(config, _packageName);\n if (aliasEntry && aliasEntry.type === 'package') {\n const {from, to} = aliasEntry;\n _packageName = _packageName.replace(from, to);\n }\n if (!config.dependencies[_packageName]) {\n return _packageName;\n }\n // Needed to make TS happy. Gets filtered out in next step.\n return '';\n })\n .filter(Boolean),\n );\n\n const needsInstall = result\n ? [...packageNamesNeedInstall].every((name) => !result.children.get(name))\n : true;\n if (needsInstall) {\n await arb.buildIdealTree({add: [...packageNamesNeedInstall]});\n await arb.reify();\n const savedPackageLockfileLoc = path.join(this.packageSourceDirectory, 'package-lock.json');\n const savedPackageLockfile = await fs.readFile(savedPackageLockfileLoc);\n await fs.writeFile(path.join(this.cacheDirectory, 'lock.json'), savedPackageLockfile);\n }\n }\n\n async prepare() {\n const installDirectoryHashLoc = path.join(this.cacheDirectory, '.meta');\n const installDirectoryHash = existsSync(installDirectoryHashLoc)\n ? await fs.readFile(installDirectoryHashLoc, 'utf8')\n : undefined;\n\n if (installDirectoryHash === CURRENT_META_FILE_CONTENTS) {\n logger.debug(`Install directory \".meta\" file is up-to-date. Welcome back!`);\n } else if (installDirectoryHash) {\n logger.info(\n 'Snowpack updated! Rebuilding your dependencies for the latest version of Snowpack...',\n );\n await this.clearCache();\n } else {\n logger.info(\n `${colors.bold('Welcome to Snowpack!')} Because this is your first time running\\n` +\n `this project, Snowpack needs to prepare your dependencies. This is a one-time step\\n` +\n `and the results will be cached for the lifetime of your project. Please wait...`,\n );\n }\n\n const {config} = this;\n // If we're managing the the packages directory, setup some basic files.\n if (config.packageOptions.source !== 'local') {\n await this.setupCacheDirectory();\n }\n // Scan your project for imports.\n const installTargets = await getInstallTargets(config, config.packageOptions.knownEntrypoints);\n this.allKnownProjectSpecs = new Set(installTargets.map((t) => t.specifier));\n const allKnownPackageNames = new Set([\n ...[...this.allKnownProjectSpecs].map((spec) => parsePackageImportSpecifier(spec)[0]),\n ...Object.keys(config.dependencies),\n ]);\n // If we're managing the the packages directory, lookup & resolve the packages.\n if (config.packageOptions.source !== 'local') {\n await this.setupPackageRootDirectory(installTargets);\n await Promise.all(\n [...allKnownPackageNames].map((packageName) => this.installPackage(packageName)),\n );\n }\n for (const spec of this.allKnownProjectSpecs) {\n await this.buildPackageImport(spec);\n }\n // Save some metdata. Useful for next time.\n await mkdirp(path.dirname(installDirectoryHashLoc));\n await fs.writeFile(installDirectoryHashLoc, CURRENT_META_FILE_CONTENTS, 'utf-8');\n return;\n }\n\n async prepareSingleFile(fileLoc: string) {\n const {config, allKnownProjectSpecs} = this;\n // get install targets (imports) for a single file.\n const installTargets = await getInstallTargets(config, config.packageOptions.knownEntrypoints, [\n {\n baseExt: getExtension(fileLoc),\n root: config.root,\n locOnDisk: fileLoc,\n contents: await readFile(fileLoc),\n },\n ]);\n // Filter out all known imports, we're only looking for new ones.\n const newImports = installTargets.filter((t) => !allKnownProjectSpecs.has(t.specifier));\n // Build all new package imports.\n for (const spec of newImports) {\n await this.buildPackageImport(spec.specifier);\n allKnownProjectSpecs.add(spec.specifier);\n }\n }\n\n async load(id: string, {isSSR}: {isSSR?: boolean} = {}) {\n const {config, allPackageImports} = this;\n const packageImport = allPackageImports[id];\n if (!packageImport) {\n return;\n }\n const {loc, entrypoint, packageName, packageVersion} = packageImport;\n let {installDest} = packageImport;\n if (isSSR && existsSync(installDest + '-ssr')) {\n installDest += '-ssr';\n }\n let packageCode = await fs.readFile(loc, 'utf8');\n const imports: InstallTarget[] = [];\n const type = path.extname(loc);\n if (!(type === '.js' || type === '.html' || type === '.css')) {\n return {contents: packageCode, imports};\n }\n const packageImportMap = JSON.parse(\n await fs.readFile(path.join(installDest, 'import-map.json'), 'utf8'),\n );\n const resolveImport = async (spec): Promise => {\n if (isRemoteUrl(spec)) {\n return spec;\n }\n if (spec.startsWith('/')) {\n return spec;\n }\n // These are a bit tricky: relative paths within packages always point to\n // relative files within the built package (ex: 'pkg/common/XXX-hash.js`).\n // We resolve these to a new kind of \"internal\" import URL that's different\n // from the normal, flattened URL for public imports.\n if (isPathImport(spec)) {\n const newLoc = path.resolve(path.dirname(loc), spec);\n const resolvedSpec = slash(path.relative(installDest, newLoc));\n const publicImportEntry = Object.entries(packageImportMap.imports).find(\n ([, v]) => v === './' + resolvedSpec,\n );\n // If this matches the destination of a public package import, resolve to it.\n if (publicImportEntry) {\n spec = publicImportEntry[0];\n return await this.resolvePackageImport(spec, {source: entrypoint});\n }\n // Otherwise, create a relative import ID for the internal file.\n const relativeImportId = path.posix.join(`${packageName}.v${packageVersion}`, resolvedSpec);\n this.allPackageImports[relativeImportId] = {\n entrypoint: path.join(installDest, 'package.json'),\n loc: newLoc,\n installDest,\n packageVersion,\n packageName,\n };\n return path.posix.join(config.buildOptions.metaUrlPath, 'pkg', relativeImportId);\n }\n // Otherwise, resolve this specifier as an external package.\n return await this.resolvePackageImport(spec, {source: entrypoint});\n };\n packageCode = await transformFileImports({type, contents: packageCode}, async (spec) => {\n let resolvedImportUrl = await resolveImport(spec);\n const importExtName = path.posix.extname(resolvedImportUrl);\n const isProxyImport = importExtName && importExtName !== '.js' && importExtName !== '.mjs';\n if (config.buildOptions.resolveProxyImports && isProxyImport) {\n resolvedImportUrl = resolvedImportUrl + '.proxy.js';\n }\n imports.push(\n createInstallTarget(\n path.resolve(\n path.posix.join(config.buildOptions.metaUrlPath, 'pkg', id),\n resolvedImportUrl,\n ),\n ),\n );\n return resolvedImportUrl;\n });\n return {contents: packageCode, imports};\n }\n\n async modifyBuildInstallOptions(installOptions, installTargets) {\n const config = this.config;\n if (config.packageOptions.source === 'remote') {\n return installOptions;\n }\n installOptions.cwd = config.root;\n installOptions.rollup = config.packageOptions.rollup;\n installOptions.sourcemap = config.buildOptions.sourcemap;\n installOptions.polyfillNode = config.packageOptions.polyfillNode;\n installOptions.packageLookupFields = config.packageOptions.packageLookupFields;\n installOptions.packageExportLookupFields = config.packageOptions.packageExportLookupFields;\n if (config.packageOptions.source === 'local') {\n return installOptions;\n }\n installOptions.cwd = this.packageSourceDirectory;\n await this.setupCacheDirectory();\n await this.setupPackageRootDirectory(installTargets);\n const buildArb = new Arborist({\n ...this.npmConnectionOptions,\n path: this.packageSourceDirectory,\n });\n await buildArb.buildIdealTree();\n await buildArb.reify();\n return installOptions;\n }\n\n private async resolveArbNode(packageName: string, source: string): Promise {\n const {config, arb} = this;\n if (config.packageOptions.source === 'local') {\n return false;\n }\n const lookupStr = path.relative(this.packageSourceDirectory, source);\n const lookupParts = lookupStr.split(path.sep);\n let lookupNode = arb.actualTree || arb.virtualTree;\n let exactLookupNode = lookupNode;\n // Use the souce file path to travel the dependency tree,\n // looking for the most specific match for packageName.\n while (lookupNode && lookupNode.children && lookupParts.length > 0) {\n const part = lookupParts.shift();\n if (part !== 'node_modules') {\n continue;\n }\n let lookupPackageName = lookupParts.shift()!;\n if (lookupPackageName.startsWith('@')) {\n lookupPackageName += '/' + lookupParts.shift()!;\n }\n lookupNode = lookupNode.children.get(lookupPackageName);\n if (lookupNode && lookupNode.children.has(packageName)) {\n exactLookupNode = lookupNode;\n }\n }\n // If no nested match was found, exactLookupNode is still the root node.\n return exactLookupNode.children.get(packageName);\n }\n\n private async installPackage(packageName: string, _source?: string): Promise {\n const {config, arb} = this;\n const source = _source || this.packageSourceDirectory;\n if (config.packageOptions.source === 'local') {\n return false;\n }\n const arbNode = await this.resolveArbNode(packageName, source);\n if (!arbNode) {\n await arb.buildIdealTree({add: [packageName]});\n await arb.reify();\n // TODO: log this to the user somehow? Tell them to add the new package to dependencies obj?\n const savedPackageLockfileLoc = path.join(this.packageSourceDirectory, 'package-lock.json');\n const savedPackageLockfile = await fs.readFile(savedPackageLockfileLoc, 'utf-8');\n await fs.writeFile(path.join(this.cacheDirectory, 'lock.json'), savedPackageLockfile);\n // Retry.\n return this.installPackage(packageName, source);\n }\n if (existsSync(arbNode.path)) {\n return false;\n }\n await pacote.extract(arbNode.resolved, arbNode.path, this.npmConnectionOptions);\n return true;\n }\n\n private async buildPackageImport(spec: string, _source?: string, logLine = false, depth = 0) {\n const {config, memoizedResolve, memoizedImportMap, allKnownSpecs, allPackageImports} = this;\n const source = _source || this.packageSourceDirectory;\n const aliasEntry = findMatchingAliasEntry(config, spec);\n if (aliasEntry && aliasEntry.type === 'package') {\n const {from, to} = aliasEntry;\n spec = spec.replace(from, to);\n }\n\n const [_packageName] = parsePackageImportSpecifier(spec);\n\n // Before doing anything, check for symlinks because symlinks shouldn't be built.\n try {\n const entrypoint = resolveEntrypoint(spec, {\n cwd: source,\n packageLookupFields: [\n 'snowpack:source',\n ...((config.packageOptions as PackageOptionsLocal).packageLookupFields || []),\n ],\n });\n const isSymlink = !entrypoint.includes(path.join('node_modules', _packageName));\n if (isSymlink) {\n return;\n }\n } catch (err) {\n // that's fine, package just doesn't exist yet. Go download it.\n }\n\n // Check to see if this package is marked as external, in which case skip the build.\n if (this.isExternal(_packageName, spec)) {\n return;\n }\n\n await this.installPackage(_packageName, source);\n const entrypoint = resolveEntrypoint(spec, {\n cwd: source,\n packageLookupFields: [\n 'snowpack:source',\n ...((config.packageOptions as PackageOptionsLocal).packageLookupFields || []),\n ],\n });\n\n // if this has already been memoized, exit\n if (memoizedResolve[entrypoint]) return memoizedResolve[entrypoint];\n\n let rootPackageDirectory = getRootPackageDirectory(entrypoint);\n if (!rootPackageDirectory) {\n const rootPackageManifestLoc = await findUp('package.json', {cwd: entrypoint});\n if (!rootPackageManifestLoc) {\n throw new Error(`Error resolving import ${spec}: No parent package.json found.`);\n }\n rootPackageDirectory = path.dirname(rootPackageManifestLoc);\n }\n\n const packageManifestLoc = path.join(rootPackageDirectory, 'package.json');\n const packageManifestStr = await fs.readFile(packageManifestLoc, 'utf8');\n const packageManifest = JSON.parse(packageManifestStr);\n const packageName = packageManifest.name || _packageName;\n const packageVersion = packageManifest.version || 'unknown';\n const packageUID = packageName + '@' + packageVersion;\n const installDest = path.join(this.cacheDirectory, 'build', packageUID);\n const isKnownSpec = allKnownSpecs.has(`${packageUID}:${spec}`);\n allKnownSpecs.add(`${packageUID}:${spec}`);\n\n // NOTE(@fks): This build step used to use a queue system, which allowed multiple\n // parallel builds at once. Unfortunately, these builds are compute heavy and not well\n // parallelized, so the queue was removed but the standalone inline function remains.\n const newImportMap = await (async (): Promise => {\n // Look up the import map of the already-installed package.\n // If spec already exists, then this import map is valid.\n const lineBullet = colors.dim(depth === 0 ? '+' : '└──'.padStart(depth * 2 + 1, ' '));\n let packageFormatted = spec + colors.dim('@' + packageVersion);\n const existingImportMapLoc = path.join(installDest, 'import-map.json');\n let existingImportMap: ImportMap | undefined = memoizedImportMap[packageName];\n if (!existingImportMap) {\n // note: this must happen BEFORE the check on disk to prevent a race condition.\n // If two lookups occur at once from different sources, then we mark this as “taken” immediately and finish the lookup async\n memoizedImportMap[packageName] = {imports: {}}; // TODO: this may not exist; should we throw an error?\n try {\n const importMapHandle = await fs.open(existingImportMapLoc, 'r+');\n if (importMapHandle) {\n const importMapData = await importMapHandle.readFile('utf8');\n existingImportMap = importMapData ? JSON.parse(importMapData) : null;\n memoizedImportMap[packageName] = existingImportMap as ImportMap;\n await importMapHandle.close();\n }\n } catch (err) {\n delete memoizedImportMap[packageName]; // if there was trouble reading this, free up memoization\n }\n }\n\n // Kick off a build, if needed.\n let importMap = existingImportMap;\n let needsBuild = !existingImportMap?.imports[spec];\n if (logLine || (depth === 0 && (!importMap || needsBuild))) {\n logLine = true;\n // TODO: We need to confirm version match, not just package import match\n const isDedupe = depth > 0 && (isKnownSpec || this.allKnownProjectSpecs.has(spec));\n logger.info(`${lineBullet} ${packageFormatted}${isDedupe ? colors.dim(` (dedupe)`) : ''}`);\n }\n if (!importMap || needsBuild) {\n const installTargets = [...allKnownSpecs]\n .filter((spec) => spec.startsWith(packageUID))\n .map((spec) => spec.substr(packageUID.length + 1));\n // TODO: external should be a function in esinstall\n\n const filteredExternal = (external: string) =>\n external !== _packageName && !NEVER_PEER_PACKAGES.has(external);\n\n const dependenciesAndPeerDependencies = Object.keys(\n packageManifest.dependencies || {},\n ).concat(Object.keys(packageManifest.peerDependencies || {}));\n const devDependencies = Object.keys(packageManifest.devDependencies || {});\n\n // Packages that should be marked as externalized. Any dependency\n // or peerDependency that is not one of the packages we want to always bundle\n const externalPackages = config.packageOptions.external.concat(\n dependenciesAndPeerDependencies.filter(filteredExternal),\n );\n\n // The same as above, but includes devDependencies.\n const externalPackagesFull = externalPackages.concat(\n devDependencies.filter(filteredExternal),\n );\n\n // To improve our ESM<>CJS conversion, we need to know the status of all dependencies.\n // This function returns a function, which can be used to fetch package.json manifests.\n // - When source = \"local\", this happens on the local file system (/w memoization).\n // - When source = \"remote-next\", this happens via remote manifest fetching (/w pacote caching).\n const getMemoizedResolveDependencyManifest = async () => {\n const results = {};\n if (config.packageOptions.source === 'local') {\n return (packageName: string) => {\n results[packageName] =\n results[packageName] ||\n _resolveDependencyManifest(packageName, rootPackageDirectory!)[1];\n return results[packageName];\n };\n }\n await Promise.all(\n externalPackages.map(async (externalPackage) => {\n const arbNode = await this.resolveArbNode(externalPackage, rootPackageDirectory!);\n results[arbNode.name] = await pacote.manifest(`${arbNode.name}@${arbNode.version}`, {\n ...this.npmConnectionOptions,\n fullMetadata: true,\n });\n }),\n );\n return (packageName: string) => {\n return results[packageName];\n };\n };\n const resolveDependencyManifest = await getMemoizedResolveDependencyManifest();\n const installOptions: InstallOptions = {\n dest: installDest,\n cwd: packageManifestLoc,\n // This installer is only ever run in development. In production, many packages\n // are installed together to take advantage of tree-shaking and package bundling.\n env: {NODE_ENV: this.config.mode},\n treeshake: false,\n sourcemap: config.buildOptions.sourcemap,\n alias: config.alias,\n external: externalPackagesFull,\n // ESM<>CJS Compatability: If we can detect that a dependency is common.js vs. ESM, then\n // we can provide this hint to esinstall to improve our cross-package import support.\n externalEsm: (imp) => {\n const [packageName] = parsePackageImportSpecifier(imp);\n const result = resolveDependencyManifest(packageName);\n return !result || !isPackageCJS(result);\n },\n };\n if (config.packageOptions.source === 'local') {\n if (config.packageOptions.polyfillNode !== undefined) {\n installOptions.polyfillNode = config.packageOptions.polyfillNode;\n }\n if (config.packageOptions.packageLookupFields !== undefined) {\n installOptions.packageLookupFields = config.packageOptions.packageLookupFields;\n }\n if (config.packageOptions.namedExports !== undefined) {\n installOptions.namedExports = config.packageOptions.namedExports;\n }\n if (config.packageOptions.rollup !== undefined) {\n installOptions.rollup = config.packageOptions.rollup;\n }\n }\n const installResult = await installPackages({\n config,\n isDev: true,\n isSSR: false,\n installTargets,\n installOptions,\n });\n logger.debug(`${lineBullet} ${packageFormatted} DONE`);\n if (installResult.needsSsrBuild) {\n logger.info(`${lineBullet} ${packageFormatted} ${colors.dim(`(ssr)`)}`);\n await installPackages({\n config,\n isDev: true,\n isSSR: true,\n installTargets,\n installOptions: {\n ...installOptions,\n dest: installDest + '-ssr',\n },\n });\n logger.debug(`${lineBullet} ${packageFormatted} (ssr) DONE`);\n }\n importMap = installResult.importMap;\n }\n const dependencyFileLoc = path.join(installDest, importMap.imports[spec]);\n const loadedFile = await fs.readFile(dependencyFileLoc!);\n if (isJavaScript(dependencyFileLoc)) {\n const newPackageImports = new Set();\n const code = loadedFile.toString('utf8');\n for (const imp of await scanCodeImportsExports(code)) {\n let spec = getWebModuleSpecifierFromCode(code, imp);\n if (spec === null) {\n continue;\n }\n\n // remove trailing slash from end of specifier (easier for Node to resolve)\n spec = spec.replace(/(\\/|\\\\)+$/, '');\n\n if (isRemoteUrl(spec)) {\n continue; // ignore remote files\n }\n if (isPathImport(spec)) {\n continue;\n }\n const [scannedPackageName] = parsePackageImportSpecifier(spec);\n if (scannedPackageName && memoizedImportMap[scannedPackageName]) {\n continue; // if we’ve already installed this, then don’t reinstall\n }\n newPackageImports.add(spec);\n }\n\n for (const packageImport of newPackageImports) {\n await this.buildPackageImport(packageImport, entrypoint, logLine, depth + 1);\n }\n }\n return importMap;\n })();\n\n const dependencyFileLoc = path.join(installDest, newImportMap.imports[spec]);\n\n // Flatten the import map value into a resolved, public import ID.\n // ex: \"./react.js\" -> \"react.v17.0.1.js\"\n const importId = newImportMap.imports[spec]\n .replace(/\\//g, '.')\n .replace(/^\\.+/g, '')\n .replace(/\\.([^\\.]*?)$/, `.v${packageVersion}.$1`);\n allPackageImports[importId] = {\n entrypoint,\n loc: dependencyFileLoc,\n installDest,\n packageName,\n packageVersion,\n };\n // Memoize the result, for faster runtime lookups.\n memoizedResolve[entrypoint] = importId;\n return memoizedResolve[entrypoint];\n }\n\n async resolvePackageImport(\n _spec: string,\n options: {source?: string; importMap?: ImportMap; isRetry?: boolean} = {},\n ) {\n const {config, memoizedResolve, allSymlinkImports} = this;\n const source = options.source || this.packageSourceDirectory;\n let spec = _spec;\n const aliasEntry = findMatchingAliasEntry(config, spec);\n if (aliasEntry && aliasEntry.type === 'package') {\n const {from, to} = aliasEntry;\n spec = spec.replace(from, to);\n }\n\n const [packageName] = parsePackageImportSpecifier(spec);\n\n // If this import is marked as external, do not transform the original spec\n if (this.isExternal(packageName, spec)) {\n return spec;\n }\n\n const entrypoint = resolveEntrypoint(spec, {\n cwd: source,\n packageLookupFields: [\n 'snowpack:source',\n ...((config.packageOptions as PackageOptionsLocal).packageLookupFields || []),\n ],\n });\n\n // Imports in the same project should never change once resolved. Check the memoized cache here to speed up faster repeat page loads.\n // NOTE(fks): This is mainly needed because `resolveEntrypoint` can be slow and blocking, which creates issues when many files\n // are loaded/resolved at once (ex: antd). If we can improve the performance there and make that async, this may no longer be\n // necessary.\n if (!options.importMap) {\n if (memoizedResolve[entrypoint]) {\n return path.posix.join(config.buildOptions.metaUrlPath, 'pkg', memoizedResolve[entrypoint]);\n }\n }\n\n const isSymlink = !entrypoint.includes(path.join('node_modules', packageName));\n const isWithinRoot = config.workspaceRoot && entrypoint.startsWith(config.workspaceRoot);\n if (isSymlink && config.workspaceRoot && isWithinRoot) {\n const builtEntrypointUrls = getBuiltFileUrls(entrypoint, config);\n const builtEntrypointUrl = slash(\n path.relative(config.workspaceRoot, builtEntrypointUrls[0]!),\n );\n allSymlinkImports[builtEntrypointUrl] = entrypoint;\n return path.posix.join(config.buildOptions.metaUrlPath, 'link', builtEntrypointUrl);\n } else if (isSymlink && config.workspaceRoot !== false && !this.hasWorkspaceWarningFired) {\n this.hasWorkspaceWarningFired = true;\n logger.warn(\n colors.bold(`${spec}: Locally linked package detected outside of project root.\\n`) +\n `If you are working in a workspace/monorepo, set your snowpack.config.js \"workspaceRoot\" to your workspace\\n` +\n `directory to take advantage of fast HMR updates for linked packages. Otherwise, this package will be\\n` +\n `cached until its package.json \"version\" changes. To silence this warning, set \"workspaceRoot: false\".`,\n );\n }\n\n if (options.importMap) {\n if (options.importMap.imports[spec]) {\n return path.posix.join(\n config.buildOptions.metaUrlPath,\n 'pkg',\n options.importMap.imports[spec],\n );\n }\n throw new Error(`Unexpected: spec ${spec} not included in import map.`);\n }\n // Unscanned package imports can happen. Warn the user, and then build the import individually.\n logger.warn(\n colors.bold(`${spec}: Unscannable package import found.\\n`) +\n `Snowpack scans source files for package imports at startup, and on every change.\\n` +\n `But, sometimes an import gets added during the build process, invisible to our file scanner.\\n` +\n `We'll prepare this package for you now, but should add \"${spec}\" to \"knownEntrypoints\"\\n` +\n `in your config file so that this gets prepared with the rest of your imports during startup.`,\n );\n // Built the new import, and then try resolving again.\n if (options.isRetry) {\n throw new Error(`Unexpected: Unscanned package import \"${spec}\" couldn't be built/resolved.`);\n }\n await this.buildPackageImport(_spec, options.source, true);\n return this.resolvePackageImport(_spec, {source: options.source, isRetry: true});\n }\n\n clearCache() {\n return rimraf.sync(this.cacheDirectory);\n }\n\n getCacheFolder() {\n return this.cacheDirectory;\n }\n\n private isExternal(packageName: string, specifier: string): boolean {\n const {config} = this;\n for (const external of config.packageOptions.external) {\n if (\n packageName === external ||\n specifier === external ||\n packageName.startsWith(external + '/')\n ) {\n return true;\n }\n }\n return false;\n }\n}\n" }, { "path": "snowpack/src/sources/remote.ts", "content": "import {existsSync} from 'fs';\nimport * as colors from 'kleur/colors';\nimport path from 'path';\nimport rimraf from 'rimraf';\nimport {clearCache as clearSkypackCache, rollupPluginSkypack, SkypackSDK} from 'skypack';\nimport util from 'util';\nimport {logger} from '../logger';\nimport {LockfileManifest, PackageOptionsRemote, PackageSource, SnowpackConfig} from '../types';\nimport {\n convertLockfileToSkypackImportMap,\n createRemotePackageSDK,\n isJavaScript,\n parsePackageImportSpecifier,\n readLockfile,\n} from '../util';\n\nconst fetchedPackages = new Set();\nfunction logFetching(origin: string, packageName: string, packageSemver: string | undefined) {\n if (fetchedPackages.has(packageName)) {\n return;\n }\n fetchedPackages.add(packageName);\n logger.info(\n `import ${colors.bold(packageName + (packageSemver ? `@${packageSemver}` : ''))} ${colors.dim(\n `→ ${origin}/${packageName}`,\n )}`,\n );\n if (!packageSemver || packageSemver === 'latest') {\n logger.info(colors.yellow(`pin dependency to this version: \\`snowpack add ${packageName}\\``));\n }\n}\n\n/**\n * Remote Package Source: A generic interface through which\n * Snowpack interacts with the Skypack CDN. Used to load dependencies\n * from the CDN during both development and optimized building.\n */\nexport class PackageSourceRemote implements PackageSource {\n config: SnowpackConfig;\n lockfile: LockfileManifest | null = null;\n remotePackageSDK: SkypackSDK;\n\n constructor(config: SnowpackConfig) {\n this.config = config;\n this.remotePackageSDK = createRemotePackageSDK(config);\n }\n\n async prepare() {\n this.lockfile = await readLockfile(this.config.root);\n const {config, lockfile} = this;\n // Only install types if `packageOptions.types=true`. Otherwise, no need to prepare anything.\n if (config.packageOptions.source === 'remote' && !config.packageOptions.types) {\n return;\n }\n const lockEntryList = lockfile && (Object.keys(lockfile.lock) as string[]);\n if (!lockfile || !lockEntryList || lockEntryList.length === 0) {\n return;\n }\n\n logger.info('checking for new TypeScript types...', {name: 'packageOptions.types'});\n await rimraf.sync(path.join(this.getCacheFolder(), '.snowpack/types'));\n for (const lockEntry of lockEntryList) {\n const [packageName, semverRange] = lockEntry.split('#');\n const exactVersion = lockfile.lock[lockEntry]?.substr(packageName.length + 1);\n await this.remotePackageSDK\n .installTypes(\n packageName,\n exactVersion || semverRange,\n path.join(this.getCacheFolder(), 'types'),\n )\n .catch((err) => logger.debug('dts fetch error: ' + err.message));\n }\n // Skypack resolves imports on the fly, so no import map needed.\n logger.info(`types updated. ${colors.dim('→ ./.snowpack/types')}`, {\n name: 'packageOptions.types',\n });\n }\n\n async prepareSingleFile() {\n // Do nothing! Skypack loads packages on-demand.\n }\n\n async modifyBuildInstallOptions(installOptions) {\n const {config, lockfile} = this;\n installOptions.importMap = lockfile\n ? convertLockfileToSkypackImportMap(\n (config.packageOptions as PackageOptionsRemote).origin,\n lockfile,\n )\n : undefined;\n installOptions.rollup = installOptions.rollup || {};\n installOptions.rollup.plugins = installOptions.rollup.plugins || [];\n installOptions.rollup.plugins.push(\n rollupPluginSkypack({\n sdk: this.remotePackageSDK,\n logger: {\n debug: (...args: [any, ...any[]]) => logger.debug(util.format(...args)),\n log: (...args: [any, ...any[]]) => logger.info(util.format(...args)),\n warn: (...args: [any, ...any[]]) => logger.warn(util.format(...args)),\n error: (...args: [any, ...any[]]) => logger.error(util.format(...args)),\n },\n }) as Plugin,\n );\n // config.installOptions.lockfile = lockfile || undefined;\n return installOptions;\n }\n\n async load(spec: string) {\n const {config, lockfile} = this;\n let body: Buffer;\n if (\n spec.startsWith('-/') ||\n spec.startsWith('pin/') ||\n spec.startsWith('new/') ||\n spec.startsWith('error/')\n ) {\n body = (await this.remotePackageSDK.fetch(`/${spec}`)).body;\n } else {\n const [packageName, packagePath] = parsePackageImportSpecifier(spec);\n if (lockfile && lockfile.dependencies[packageName]) {\n const lockEntry = packageName + '#' + lockfile.dependencies[packageName];\n if (packagePath) {\n body = (\n await this.remotePackageSDK.fetch('/' + lockfile.lock[lockEntry] + '/' + packagePath)\n ).body;\n } else {\n body = (await this.remotePackageSDK.fetch('/' + lockfile.lock[lockEntry])).body;\n }\n } else {\n const packageSemver = 'latest';\n logFetching(\n (config.packageOptions as PackageOptionsRemote).origin,\n packageName,\n packageSemver,\n );\n let lookupResponse = await this.remotePackageSDK.lookupBySpecifier(spec, packageSemver);\n if (!lookupResponse.error && lookupResponse.importStatus === 'NEW') {\n const buildResponse = await this.remotePackageSDK.buildNewPackage(spec, packageSemver);\n if (!buildResponse.success) {\n throw new Error('Package could not be built!');\n }\n lookupResponse = await this.remotePackageSDK.lookupBySpecifier(spec, packageSemver);\n }\n if (lookupResponse.error) {\n throw lookupResponse.error;\n }\n // Trigger a type fetch asynchronously. We want to resolve the JS as fast as possible, and\n // the result of this is totally disconnected from the loading flow.\n if (!existsSync(path.join(this.getCacheFolder(), '.snowpack/types', packageName))) {\n this.remotePackageSDK\n .installTypes(\n packageName,\n packageSemver,\n path.join(this.getCacheFolder(), '.snowpack/types'),\n )\n .catch(() => 'thats fine!');\n }\n body = lookupResponse.body;\n }\n }\n const ext = path.extname(spec);\n if (!ext || isJavaScript(spec)) {\n return {\n contents: body\n .toString()\n .replace(/(from|import) \\'\\//g, `$1 '${config.buildOptions.metaUrlPath}/pkg/`)\n .replace(/(from|import) \\\"\\//g, `$1 \"${config.buildOptions.metaUrlPath}/pkg/`),\n imports: [],\n };\n }\n\n return {contents: body, imports: []};\n }\n\n // TODO: Remove need for lookup URLs\n async resolvePackageImport(spec: string) {\n return path.posix.join(this.config.buildOptions.metaUrlPath, 'pkg', spec);\n }\n\n static clearCache() {\n return clearSkypackCache();\n }\n\n /** @deprecated */\n clearCache() {\n return clearSkypackCache();\n }\n\n getCacheFolder() {\n const {config} = this;\n return (\n (config.packageOptions.source === 'remote' && config.packageOptions.cache) ||\n path.join(config.root, '.snowpack')\n );\n }\n}\n" }, { "path": "snowpack/src/sources/util.ts", "content": "import {PackageSource, SnowpackConfig} from '../types';\nimport {PackageSourceLocal} from './local';\nimport {PackageSourceRemote} from './remote';\nimport path from 'path';\nimport rimraf from 'rimraf';\nimport globalCacheDir from 'cachedir';\n\nexport const GLOBAL_CACHE_DIR = globalCacheDir('snowpack');\n\nexport async function clearCache() {\n return Promise.all([\n PackageSourceRemote.clearCache(),\n // NOTE(v4.0): This function is called before config has been created.\n // But, when `packageOptions.source=\"remote-next\"` the \".snowpack\" cache\n // directory lives in the config.root directory. We fake it here,\n // and can revisit this API (probably add config as an arg) in v4.0.\n rimraf.sync(path.join(process.cwd(), '.snowpack')),\n rimraf.sync(path.join(process.cwd(), 'node_modules', '.cache', 'snowpack')),\n ]);\n}\n\nconst remoteSourceCache = new WeakMap();\nconst localSourceCache = new WeakMap();\n\nexport function getPackageSource(config: SnowpackConfig): PackageSource {\n if (config.packageOptions.source === 'remote') {\n if (remoteSourceCache.has(config)) {\n return remoteSourceCache.get(config)!;\n }\n\n const source = new PackageSourceRemote(config);\n remoteSourceCache.set(config, source);\n return source;\n }\n\n if (localSourceCache.has(config)) {\n return localSourceCache.get(config)!;\n }\n\n const source = new PackageSourceLocal(config);\n localSourceCache.set(config, source);\n return source;\n}\n" }, { "path": "snowpack/src/ssr-loader/index.ts", "content": "import {existsSync, readFileSync} from 'fs';\nimport {resolve, pathToFileURL} from 'url';\nimport {ServerRuntime, ServerRuntimeConfig, LoadResult} from '../types';\nimport {sourcemap_stacktrace} from './sourcemaps';\nimport {transform} from './transform';\nimport {REQUIRE_OR_IMPORT} from '../util';\n\ninterface ModuleInstance {\n exports: any;\n css: string[];\n}\n\ntype ModuleInitializer = () => Promise;\n\nfunction moduleInit(fn: ModuleInitializer) {\n let promise: null | Promise = null;\n return function () {\n return promise || (promise = fn());\n };\n}\n\n// This function makes it possible to load modules from the snowpack server, for the sake of SSR.\nexport function createLoader({config, load}: ServerRuntimeConfig): ServerRuntime {\n const cache = new Map();\n const graph = new Map();\n\n async function getModule(importer: string, imported: string, urlStack: string[]) {\n if (imported[0] === '/' || imported[0] === '.') {\n const pathname = resolve(importer, imported);\n if (!graph.has(pathname)) graph.set(pathname, new Set());\n graph.get(pathname).add(importer);\n return _load(pathname, urlStack);\n }\n\n return moduleInit(async function () {\n const mod = await REQUIRE_OR_IMPORT(imported, {\n from: config.root || config.workspaceRoot || process.cwd(),\n });\n\n return {\n exports: mod,\n css: [],\n };\n });\n }\n\n function invalidateModule(path) {\n // If the cache doesn't have this path, check if it's a proxy file.\n if (!cache.has(path) && cache.has(path + '.proxy.js')) {\n path = path + '.proxy.js';\n }\n\n cache.delete(path);\n const dependents = graph.get(path);\n graph.delete(path);\n if (dependents) dependents.forEach(invalidateModule);\n }\n\n async function _load(url, urlStack): Promise {\n if (urlStack.includes(url)) {\n console.warn(`Circular dependency: ${urlStack.join(' -> ')} -> ${url}`);\n return async () => ({\n exports: null,\n css: [],\n });\n }\n if (cache.has(url)) {\n return cache.get(url);\n }\n const promise = (async function () {\n const loaded = await load(url);\n return moduleInit(function () {\n try {\n return initializeModule(url, loaded, urlStack.concat(url));\n } catch (e) {\n cache.delete(url);\n throw e;\n }\n });\n })();\n cache.set(url, promise);\n return promise;\n }\n\n async function initializeModule(\n url: string,\n loaded: LoadResult,\n urlStack: string[],\n ): Promise {\n const {code, deps, css, names} = transform(loaded.contents);\n\n const exports = {};\n const allCss = new Set(css.map((relative) => resolve(url, relative)));\n const fileURL = loaded.originalFileLoc ? pathToFileURL(loaded.originalFileLoc) : null;\n\n // Load dependencies but do not execute.\n const depsLoaded: Array> = deps.map(\n async (dep) => {\n return {\n name: dep.name,\n init: await getModule(url, dep.source, urlStack),\n };\n },\n );\n\n // Execute dependencies *in order*.\n const depValues: Array<{name: string; value: any}> = [];\n for await (const {name, init} of depsLoaded) {\n const module = await init();\n module.css.forEach((dep) => allCss.add(dep));\n\n depValues.push({\n name: name,\n value: module.exports,\n });\n }\n\n const args = [\n {\n name: 'global',\n value: global,\n },\n {\n name: 'require',\n value: (id) => {\n // TODO can/should this restriction be relaxed?\n throw new Error(\n `Use import instead of require (attempted to load '${id}' from '${url}')`,\n );\n },\n },\n {\n name: names.exports,\n value: exports,\n },\n {\n name: names.__export,\n value: (name, get) => {\n Object.defineProperty(exports, name, {get});\n },\n },\n {\n name: names.__export_all,\n value: (mod) => {\n // Copy over all of the descriptors.\n const descriptors = Object.getOwnPropertyDescriptors(mod);\n Object.defineProperties(exports, descriptors);\n },\n },\n {\n name: names.__import,\n value: (source) =>\n getModule(url, source, urlStack)\n .then((fn) => fn())\n .then((mod) => mod.exports),\n },\n {\n name: names.__import_meta,\n value: {url: fileURL},\n },\n ...depValues,\n ];\n\n const fn = new Function(...args.map((d) => d.name), `${code}\\n//# sourceURL=${url}`);\n\n try {\n fn(...args.map((d) => d.value));\n } catch (e) {\n e.stack = await sourcemap_stacktrace(e.stack, async (address) => {\n if (existsSync(address)) {\n // it's a filepath\n return readFileSync(address, 'utf-8');\n }\n\n try {\n const {contents} = await load(address);\n return contents;\n } catch {\n // fail gracefully\n }\n });\n\n throw e;\n }\n\n return {\n exports,\n css: Array.from(allCss),\n };\n }\n\n return {\n importModule: async (url) => {\n const init = await _load(url, []);\n const mod = await init();\n return mod;\n },\n invalidateModule: (url) => {\n invalidateModule(url);\n },\n };\n}\n" }, { "path": "snowpack/src/ssr-loader/sourcemaps.ts", "content": "import path from 'path';\nimport {SourceMapConsumer} from 'source-map';\n\nfunction get_sourcemap_url(contents) {\n const reversed = contents.split('\\n').reverse().join('\\n');\n\n const match = /\\/[/*]#[ \\t]+sourceMappingURL=([^\\s'\"]+?)(?:[ \\t]+|$)/gm.exec(reversed);\n if (match) return match[1];\n\n return undefined;\n}\n\nasync function replace_async(str, regex, asyncFn) {\n const promises: Promise[] = [];\n str.replace(regex, (match, ...args) => {\n const promise = asyncFn(match, ...args);\n promises.push(promise);\n });\n const data = await Promise.all(promises);\n return str.replace(regex, () => data.shift());\n}\n\n// TODO does Snowpack compose sourcemaps, or will this only undo\n// the last in a series of transformations?\nexport async function sourcemap_stacktrace(stack, load_contents) {\n const replace = (line) =>\n replace_async(\n line,\n /^ {4}at (?:(.+?)\\s+\\()?(?:(.+?):(\\d+)(?::(\\d+))?)\\)?/,\n async (input, var_name, address, line, column) => {\n if (!address) return input;\n\n const contents = await load_contents(address);\n if (!contents) return input;\n\n const sourcemap_url = get_sourcemap_url(contents);\n if (!sourcemap_url) return input;\n\n let dir = path.dirname(address);\n let sourcemap_data;\n\n if (/^data:application\\/json[^,]+base64,/.test(sourcemap_url)) {\n const raw_data = sourcemap_url.slice(sourcemap_url.indexOf(',') + 1);\n try {\n sourcemap_data = Buffer.from(raw_data, 'base64').toString();\n } catch {\n return input;\n }\n } else {\n const sourcemap_path = path.resolve(dir, sourcemap_url);\n const data = await load_contents(sourcemap_path);\n\n if (!data) return input;\n\n sourcemap_data = data;\n dir = path.dirname(sourcemap_path);\n }\n\n let raw_sourcemap;\n try {\n raw_sourcemap = JSON.parse(sourcemap_data);\n } catch {\n return input;\n }\n\n // TODO: according to typings, this code cannot work;\n // the constructor returns a promise that needs to be awaited\n const consumer = await new SourceMapConsumer(raw_sourcemap);\n\n const pos = consumer.originalPositionFor({\n line: Number(line),\n column: Number(column),\n bias: SourceMapConsumer.LEAST_UPPER_BOUND,\n });\n\n if (!pos.source) return input;\n\n const source_path = path.resolve(dir, pos.source);\n const source = `${source_path}:${pos.line || 0}:${pos.column || 0}`;\n\n if (!var_name) return ` at ${source}`;\n return ` at ${var_name} (${source})`;\n },\n );\n\n return (await Promise.all(stack.split('\\n').map(replace))).join('\\n');\n}\n" }, { "path": "snowpack/src/ssr-loader/transform.ts", "content": "import * as meriyah from 'meriyah';\nimport MagicString from 'magic-string';\nimport {analyze, extract_names} from 'periscopic';\nimport {walk} from 'estree-walker';\nimport is_reference from 'is-reference';\n\nexport function transform(data) {\n const code = new MagicString(data);\n const ast: any = meriyah.parseModule(data, {\n ranges: true,\n next: true,\n });\n\n const {map, scope} = analyze(ast);\n const all_identifiers = new Set();\n\n // first, get a list of all the identifiers used in the module...\n walk(ast, {\n enter(node: any, parent: any) {\n if (is_reference(node as any, parent as any)) {\n all_identifiers.add(node.name);\n }\n },\n });\n\n // ...then deconflict injected values...\n function deconflict(name) {\n while (all_identifiers.has(name)) name += '_';\n return name;\n }\n\n const exports = deconflict('exports');\n const __import = deconflict('__import');\n const __import_meta = deconflict('__import_meta');\n const __export = deconflict('__export');\n const __export_all = deconflict('__export_all');\n\n // ...then extract imports/exports...\n let uid = 0;\n const get_import_name = () => deconflict(`__import${uid++}`);\n\n const replacements = new Map();\n const deps: any[] = [];\n const css: any[] = [];\n\n ast.body.forEach((node) => {\n if (node.type === 'ImportDeclaration') {\n const is_namespace =\n node.specifiers[0] && node.specifiers[0].type === 'ImportNamespaceSpecifier';\n const default_specifier = node.specifiers.find((specifier) => !specifier.imported);\n\n const name = is_namespace\n ? node.specifiers[0].local.name\n : default_specifier\n ? default_specifier.local.name\n : get_import_name();\n\n const source = node.source.value;\n if (source.endsWith('.css.proxy.js') && !source.endsWith('.module.css.proxy.js')) {\n // CSS proxy: only include CSS\n css.push(source.replace(/\\.proxy\\.js$/, ''));\n } else {\n if (source.endsWith('.module.css.proxy.js')) {\n // CSS Modules Proxy: include both CSS and JS\n const cssSource = source.replace(/\\.proxy\\.js$/, '');\n css.push(cssSource);\n }\n deps.push({name, source});\n\n if (!is_namespace) {\n node.specifiers.forEach((specifier) => {\n const prop = specifier.imported ? specifier.imported.name : 'default';\n replacements.set(specifier.local.name, `${name}.${prop}`);\n });\n }\n }\n\n code.remove(node.start, node.end);\n }\n\n if (node.type === 'ExportAllDeclaration') {\n const source = node.source.value;\n const name = get_import_name();\n\n deps.push({name, source});\n\n code.overwrite(node.start, node.end, `${__export_all}(${name})`);\n }\n\n if (node.type === 'ExportDefaultDeclaration') {\n code.overwrite(node.start, node.declaration.start - 1, `${exports}.default = `);\n }\n\n if (node.type === 'ExportNamedDeclaration') {\n if (node.source) {\n const name = get_import_name();\n const source = node.source.value;\n\n deps.push({name, source});\n\n const export_block = node.specifiers\n .map((specifier) => {\n return `${__export}('${specifier.exported.name}', () => ${name}.${specifier.local.name})`;\n })\n .join('; ');\n\n code.overwrite(node.start, node.end, export_block);\n } else if (node.declaration) {\n // `export const foo = ...` or `export function foo() {...}`\n code.remove(node.start, node.declaration.start);\n\n let suffix;\n\n if (node.declaration.type === 'VariableDeclaration') {\n const names: string[] = [];\n node.declaration.declarations.forEach((declarator) => {\n names.push(...extract_names(declarator.id));\n });\n\n suffix = names.map((name) => ` ${__export}('${name}', () => ${name});`).join('');\n } else {\n const {name} = node.declaration.id;\n suffix = ` ${__export}('${name}', () => ${name});`;\n }\n\n code.appendLeft(node.end, suffix);\n } else {\n if (node.specifiers.length > 0) {\n code.remove(node.start, node.specifiers[0].start);\n\n node.specifiers.forEach((specifier) => {\n code.overwrite(\n specifier.start,\n specifier.end,\n `${__export}('${specifier.exported.name}', () => ${specifier.local.name})`,\n );\n });\n\n code.remove(node.specifiers[node.specifiers.length - 1].end, node.end);\n } else {\n // export {};\n code.remove(node.start, node.end);\n }\n }\n }\n });\n\n // ...then rewrite import references\n if (replacements.size) {\n let current_scope = scope;\n\n walk(ast, {\n enter(node: any, parent: any) {\n if (map.has(node)) {\n current_scope = map.get(node) || current_scope;\n }\n\n if (node.type === 'ImportDeclaration') {\n this.skip();\n return;\n }\n\n if (!is_reference(node, parent)) return;\n if (!replacements.has(node.name)) return;\n if (parent.type === 'ExportSpecifier') return;\n\n if (current_scope.find_owner(node.name) === scope) {\n let replacement = replacements.get(node.name);\n if (parent.type === 'Property' && node === parent.key && node === parent.value) {\n replacement = `${node.name}: ${replacement}`;\n }\n code.overwrite(node.start, node.end, replacement);\n }\n },\n leave(node: any) {\n if (map.has(node)) {\n if (!current_scope.parent) {\n throw new Error('Unexpected: (!current_scope.parent.parent)');\n }\n current_scope = current_scope.parent;\n }\n },\n });\n }\n\n // replace import.meta and import(dynamic)\n if (/import\\s*\\.\\s*meta/.test(data) || /import\\s*\\(/.test(data)) {\n walk(ast.body, {\n enter(node: any) {\n if (node.type === 'MetaProperty' && node.meta.name === 'import') {\n code.overwrite(node.start, node.end, __import_meta);\n } else if (node.type === 'ImportExpression') {\n code.overwrite(node.start, node.start + 6, __import);\n }\n },\n });\n }\n\n return {\n code: code.toString(),\n deps,\n css,\n names: {exports, __import, __import_meta, __export, __export_all},\n };\n}\n" }, { "path": "snowpack/src/types.ts", "content": "import type {InstallOptions as EsinstallOptions, InstallTarget} from 'esinstall';\nimport type {Loader} from 'esbuild';\nimport type * as net from 'net';\nimport type * as http from 'http';\nimport type * as http2 from 'http2';\nimport type {EsmHmrEngine} from './hmr-server-engine';\n\n// RawSourceMap is inlined here for bundle purposes.\n// import type {RawSourceMap} from 'source-map';\nexport interface RawSourceMap {\n version: number;\n sources: string[];\n names: string[];\n sourceRoot?: string;\n sourcesContent?: string[];\n mappings: string;\n file: string;\n}\n\nexport type DeepPartial = {\n [P in keyof T]?: T[P] extends Array\n ? Array>\n : T[P] extends ReadonlyArray\n ? ReadonlyArray>\n : DeepPartial;\n};\n\nexport interface ServerRuntimeConfig {\n config: SnowpackConfig;\n load: (url: string) => Promise>;\n}\nexport interface ServerRuntime {\n importModule: (url: string) => Promise>;\n invalidateModule: (url: string) => void;\n}\n\nexport interface ServerRuntimeModule {\n exports: T;\n css: string[];\n}\n\nexport interface LoadResult {\n contents: T;\n imports: InstallTarget[];\n originalFileLoc: string | null;\n contentType: string | false;\n checkStale?: () => Promise;\n}\n\nexport type OnFileChangeCallback = ({filePath: string}) => any;\nexport interface LoadUrlOptions {\n isSSR?: boolean;\n isHMR?: boolean;\n isResolve?: boolean;\n allowStale?: boolean;\n encoding?: undefined | BufferEncoding | null;\n importMap?: ImportMap;\n}\n\nexport interface SnowpackDevServer {\n port: number;\n hmrEngine?: EsmHmrEngine;\n rawServer?: http.Server | http2.Http2Server | undefined;\n loadUrl: {\n (reqUrl: string, opt?: (LoadUrlOptions & {encoding?: undefined}) | undefined): Promise<\n LoadResult | undefined\n >;\n (reqUrl: string, opt: LoadUrlOptions & {encoding: BufferEncoding}): Promise<\n LoadResult | undefined\n >;\n (reqUrl: string, opt: LoadUrlOptions & {encoding: null}): Promise<\n LoadResult | undefined\n >;\n };\n handleRequest: (\n req: http.IncomingMessage,\n res: http.ServerResponse,\n options?: {handleError?: boolean},\n ) => Promise;\n sendResponseFile: (\n req: http.IncomingMessage,\n res: http.ServerResponse,\n {contents, originalFileLoc, contentType}: LoadResult,\n ) => void;\n getServerRuntime: (options?: {invalidateOnChange?: boolean}) => ServerRuntime;\n sendResponseError: (req: http.IncomingMessage, res: http.ServerResponse, status: number) => void;\n getUrlForFile: (fileLoc: string) => string | null;\n getUrlForPackage: (packageSpec: string) => Promise;\n onFileChange: (callback: OnFileChangeCallback) => void;\n shutdown(): Promise;\n markChanged: (fileLoc: string) => void;\n}\n\nexport type SnowpackBuildResultFileManifest = Record<\n string,\n {source: string | null; contents: string | Buffer}\n>;\n\nexport interface SnowpackBuildResult {\n // result: SnowpackBuildResultFileManifest;\n onFileChange: (callback: OnFileChangeCallback) => void;\n shutdown(): Promise;\n}\n\nexport type SnowpackBuiltFile = {\n code: string | Buffer;\n map?: string;\n};\n\nexport type SnowpackBuildMap = Record;\n\n/** Standard file interface */\nexport interface SnowpackSourceFile {\n /** base extension (e.g. `.js`) */\n baseExt: string;\n /** file contents */\n contents: Type;\n /** if no location on disk, assume this exists in memory */\n locOnDisk: string;\n /** project \"root\" directory */\n root: string;\n}\n\nexport interface PluginLoadOptions {\n /** The absolute file path of the source file, on disk. */\n filePath: string;\n /** A helper for just the file extension of the source file (ex: \".js\", \".svelte\") */\n fileExt: string;\n /** True if builder is in dev mode (`snowpack dev` or `snowpack build --watch`) */\n isDev: boolean;\n /** True if HMR is enabled (add any HMR code to the output here). */\n isHmrEnabled: boolean;\n /** True if builder is in SSR mode */\n isSSR: boolean;\n /** True if file being transformed is inside of a package. */\n isPackage: boolean;\n}\n\nexport interface PluginTransformOptions {\n /** The final build file path (note: this may differ from the source, e.g. `.vue` will yield `.js` and `.css` IDs) */\n id: string;\n /** The original source location on disk (it may differ from ID) */\n srcPath: string;\n /** The extension of the file */\n fileExt: string;\n /** Contents of the file to transform */\n contents: string | Buffer;\n /** True if builder is in dev mode (`snowpack dev` or `snowpack build --watch`) */\n isDev: boolean;\n /** True if HMR is enabled (add any HMR code to the output here). */\n isHmrEnabled: boolean;\n /** True if builder is in SSR mode */\n isSSR: boolean;\n /** True if file being transformed is inside of a package. */\n isPackage: boolean;\n}\n\nexport interface PluginRunOptions {\n isDev: boolean;\n}\n\n/** map of extensions -> code (e.g. { \".js\": \"[code]\", \".css\": \"[code]\" }) */\nexport type PluginLoadResult = SnowpackBuildMap;\n\nexport type PluginTransformResult = {contents: string; map: string | RawSourceMap};\n\nexport interface PluginOptimizeOptions {\n buildDirectory: string;\n}\n\nexport interface SnowpackPlugin {\n /** name of the plugin */\n name: string;\n /** Tell Snowpack how the load() function will resolve files. */\n resolve?: {\n /**\n file extensions that this load function takes as input (e.g. [\".jsx\",\n \".js\", …])\n */\n input: string[];\n /**\n file extensions that this load function outputs (e.g. [\".js\", \".css\"])\n */\n output: string[];\n };\n /** load a file that matches resolve.input */\n load?(options: PluginLoadOptions): Promise;\n /** transform a file that matches resolve.input */\n transform?(\n options: PluginTransformOptions,\n ): Promise;\n /** runs a command, unrelated to file building (e.g. TypeScript, ESLint) */\n run?(options: PluginRunOptions): Promise;\n /** optimize the entire built application */\n optimize?(options: PluginOptimizeOptions): Promise;\n /** cleanup any long-running instances/services before exiting. */\n cleanup?(): void | Promise;\n /** Known dependencies that should be installed */\n knownEntrypoints?: string[];\n /** read and modify the Snowpack config object */\n config?(snowpackConfig: SnowpackConfig): void;\n /** Called when a watched file changes during development. */\n onChange?({filePath}: {filePath: string}): void;\n /** (internal interface, not set by the user) Mark a file as changed. */\n markChanged?(file: string): void;\n}\n\n/** Snowpack Build Plugin type */\nexport type SnowpackPluginFactory = (\n snowpackConfig: SnowpackConfig,\n pluginOptions?: PluginOptions,\n) => SnowpackPlugin;\n\nexport type MountEntry = {\n url: string;\n static: boolean;\n resolve: boolean;\n dot: boolean;\n};\n\nexport interface OptimizeOptions {\n entrypoints: 'auto' | string[] | ((options: {files: string[]}) => string[]);\n preload: boolean;\n bundle: boolean;\n loader?: {[ext: string]: Loader};\n sourcemap: boolean | 'both' | 'inline' | 'external';\n splitting: boolean;\n treeshake: boolean;\n manifest: boolean;\n minify: boolean;\n target: 'es2020' | 'es2019' | 'es2018' | 'es2017';\n}\n\nexport interface RouteConfigObject {\n src: string;\n dest: string | ((req: http.IncomingMessage, res: http.ServerResponse) => void) | undefined;\n upgrade: ((req: http.IncomingMessage, socket: net.Socket, head: Buffer) => void) | undefined;\n match: 'routes' | 'all';\n _srcRegex: RegExp;\n}\n\nexport interface PackageOptionsLocal\n extends Omit<\n EsinstallOptions,\n 'alias' | 'dest' | 'sourcemap' | 'verbose' | 'logger' | 'cwd' | 'dest' | 'treeshake'\n > {\n source: 'local' | 'remote-next' | {[key: string]: string};\n external: string[];\n knownEntrypoints: string[];\n}\n\nexport interface PackageOptionsRemote {\n source: 'remote';\n external: string[];\n knownEntrypoints: string[];\n origin: string;\n cache: string;\n types: boolean;\n}\n\n// interface this library uses internally\nexport interface SnowpackConfig {\n root: string;\n mode: 'test' | 'development' | 'production';\n workspaceRoot?: string | false;\n extends?: string;\n exclude: string[];\n env?: Record;\n mount: Record;\n alias: Record;\n plugins: SnowpackPlugin[];\n dependencies: Record;\n devOptions: {\n secure: boolean | {cert: string | Buffer; key: string | Buffer};\n hostname: string;\n port: number;\n openUrl?: string;\n open?: string;\n output?: 'stream' | 'dashboard';\n hmr?: boolean;\n hmrDelay: number;\n hmrPort: number | undefined;\n hmrErrorOverlay: boolean;\n tailwindConfig?: string;\n };\n buildOptions: {\n out: string;\n baseUrl: string;\n metaUrlPath: string;\n cacheDirPath: string;\n clean: boolean;\n sourcemap: 'inline' | false | undefined;\n watch: boolean;\n htmlFragments: boolean;\n jsxFactory: string | undefined;\n jsxFragment: string | undefined;\n jsxInject: string | undefined;\n ssr: boolean;\n resolveProxyImports: boolean;\n };\n testOptions: {\n files: string[];\n };\n packageOptions: PackageOptionsLocal | PackageOptionsRemote;\n /** Optimize your site for production. */\n optimize?: OptimizeOptions;\n /** Configure routes during development. */\n routes: RouteConfigObject[];\n /** EXPERIMENTAL - This section is experimental and not yet finalized. May change across minor versions. */\n experiments: {\n /* intentionally left blank */\n };\n _extensionMap: Record;\n}\n\nexport type SnowpackUserConfig = {\n root?: string;\n mode?: SnowpackConfig['mode'];\n workspaceRoot?: string;\n install?: string[];\n env?: Record;\n extends?: string;\n exclude?: string[];\n mount?: Record>;\n alias?: Record;\n plugins?: (string | [string, any])[];\n dependencies?: Record;\n devOptions?: Partial;\n buildOptions?: Partial;\n testOptions?: Partial;\n packageOptions?: Partial;\n optimize?: Partial;\n routes?: Pick[];\n experiments?: {\n /* intentionally left blank */\n };\n};\nexport interface CLIFlags {\n help?: boolean; // display help text\n version?: boolean; // display Snowpack version\n reload?: boolean;\n root?: string; // manual path to project root\n config?: string; // manual path to config file\n env?: string[]; // env vars\n open?: string[];\n secure?: boolean;\n verbose?: boolean;\n quiet?: boolean;\n [flag: string]: any;\n}\n\nexport interface ImportMap {\n imports: {[specifier: string]: string};\n}\n\nexport interface LockfileManifest {\n dependencies: {[packageName: string]: string};\n lock: {[specifier: string]: string};\n}\n\nexport interface CommandOptions {\n config: SnowpackConfig;\n lockfile?: LockfileManifest | null;\n}\n\nexport type LoggerLevel = 'debug' | 'info' | 'warn' | 'error' | 'silent'; // same as Pino\nexport type LoggerEvent = 'debug' | 'info' | 'warn' | 'error';\nexport interface LoggerOptions {\n /** (optional) change name at beginning of line */\n name?: string;\n /** (optional) do some additional work after logging a message, if log level is enabled */\n task?: Function;\n}\n\n/** PackageSource - a common interface for loading and interacting with dependencies. */\nexport interface PackageSource {\n /**\n * Do any work needed before starting the dev server or build. Either will wait\n * for this to complete before continuing. Example: For \"local\", this involves\n * running esinstall (if needed) to prepare your local dependencies as ESM.\n */\n prepare(): Promise;\n /**\n * Like prepare(), but only looks at a single file and meant to run at anytime,\n * usually after the server has already started and is running.\n */\n prepareSingleFile(fileLoc: string): Promise;\n /**\n * Load a dependency with the given spec (ex: \"/pkg/react\" -> \"react\")\n * If load fails or is unsuccessful, reject the promise.\n */\n load(\n spec: string,\n options: {isSSR: boolean},\n ): Promise;\n /** Resolve a package import to URL (ex: \"react\" -> \"/pkg/react\") */\n resolvePackageImport(\n spec: string,\n options?: {source?: string; importMap?: ImportMap; depth?: number},\n ): Promise;\n /** Modify the build install config for optimized build install. */\n modifyBuildInstallOptions(\n installOptions: EsinstallOptions,\n installTargets: InstallTarget[],\n ): Promise;\n getCacheFolder(): string;\n clearCache(): void | Promise;\n}\n\nexport type ScannableExt =\n | '.astro'\n | '.cjs'\n | '.css'\n | '.html'\n | '.interface'\n | '.js'\n | '.jsx'\n | '.less'\n | '.mjs'\n | '.sass'\n | '.scss'\n | '.svelte'\n | '.ts'\n | '.tsx'\n | '.vue';\n" }, { "path": "snowpack/src/util.ts", "content": "import etag from 'etag';\nimport execa from 'execa';\nimport findUp from 'find-up';\nimport fs from 'fs';\nimport {isBinaryFile} from 'isbinaryfile';\nimport mkdirp from 'mkdirp';\nimport open from 'open';\nimport path from 'path';\nimport rimraf from 'rimraf';\nimport url from 'url';\nimport getDefaultBrowserId from 'default-browser-id';\nimport type {ImportMap, LockfileManifest, SnowpackConfig} from './types';\nimport type {InstallTarget} from 'esinstall';\nimport {SkypackSDK} from 'skypack';\nimport {REMOTE_PACKAGE_ORIGIN} from './config';\nimport {GLOBAL_CACHE_DIR} from './sources/util';\n\n// (!) Beware circular dependencies! No relative imports!\n// Because this file is imported from so many different parts of Snowpack,\n// importing other relative files inside of it is likely to introduce broken\n// circular dependencies (sometimes only visible in the final bundled build.)\nexport const IS_DOTFILE_REGEX = /\\/\\.[^\\/]+$/; // note: always assume forward-slashes, even on Windows\n\nexport const LOCKFILE_NAME = 'snowpack.deps.json';\n\n// We need to use eval here to prevent Rollup from detecting this use of `require()`\nexport const NATIVE_REQUIRE = eval('require');\n\n// We need to use an external file here to prevent Typescript/Rollup from modifying `require` and `import`\n// NOTE: revisit this when `node@10` reaches EOL. Can we move everything to ESM and just use `import`?\nexport const REQUIRE_OR_IMPORT: (\n id: string,\n opts?: {from?: string},\n) => Promise = require('../../assets/require-or-import.js');\n\nexport function createRemotePackageSDK(config: SnowpackConfig) {\n // This should only be called when config.packageOptions.source is 'remote'.\n if (config.packageOptions.source !== 'remote') {\n throw new Error('expected \"remote\" packageOptions.source');\n }\n\n // For consistency with previous behavior, we default to REMOTE_PACKAGE_ORIGIN\n // if no origin is provided. We could simply leave it undefined and allow\n // SkypackSDK to use its own default.\n return new SkypackSDK({\n origin: config.packageOptions.origin || REMOTE_PACKAGE_ORIGIN,\n });\n}\n\n// A note on cache naming/versioning: We currently version our global caches\n// with the version of the last breaking change. This allows us to re-use the\n// same cache across versions until something in the data structure changes.\n// At that point, bump the version in the cache name to create a new unique\n// cache name.\nexport const BUILD_CACHE = path.join(GLOBAL_CACHE_DIR, 'build-cache-2.7');\nconst LOCKFILE_HASH_FILE = '.hash';\n\n// NOTE(fks): Must match empty script elements to work properly.\nexport const HTML_JS_REGEX = /(]*?type=\"module\".*?>)(.*?)<\\/script>/gims;\nexport const HTML_STYLE_REGEX = /()(.*?)<\\/style>/gims;\nexport const CSS_REGEX = /@import\\s*['\"](.*?)['\"];/gs;\nexport const SVELTE_VUE_REGEX = /(]*>)(.*?)<\\/script>/gims;\nexport const ASTRO_REGEX = /---(.*?)---/gims;\n\nexport function getCacheKey(fileLoc: string, {isSSR, mode}) {\n return `${fileLoc}?mode=${mode}&isSSR=${isSSR ? '1' : '0'}`;\n}\n\nexport type Awaited = T extends PromiseLike ? Awaited : T;\n\n/**\n * Like rimraf, but will fail if \"dir\" is outside of your configured build output directory.\n */\nexport function deleteFromBuildSafe(dir: string, config: SnowpackConfig) {\n const {out} = config.buildOptions;\n if (!path.isAbsolute(dir)) {\n throw new Error(`rimrafSafe(): dir ${dir} must be a absolute path`);\n }\n if (!path.isAbsolute(out)) {\n throw new Error(`rimrafSafe(): buildOptions.out ${out} must be a absolute path`);\n }\n if (!dir.startsWith(out)) {\n throw new Error(`rimrafSafe(): ${dir} outside of buildOptions.out ${out}`);\n }\n return rimraf.sync(dir);\n}\n\n/** Read file from disk; return a string if it’s a code file */\nexport async function readFile(filepath: string): Promise {\n let data = await fs.promises.readFile(filepath);\n if (!data) {\n console.error(\n `Unexpected Node.js error: readFile(${filepath}) returned undefined.\\n\\n` +\n `Somehow in Github CI / Jest its possible for fs.promises.readFile to return undefined.\\n` +\n `This should be impossible, and has not yet been reproduced in the real world, but we do see it in our own CI.\\n` +\n `If you are seeing this error, please report!`,\n );\n data = fs.readFileSync(filepath);\n }\n const isBinary = await isBinaryFile(data);\n return isBinary ? data : data.toString('utf8');\n}\n\nexport async function readLockfile(cwd: string): Promise {\n try {\n var lockfileContents = fs.readFileSync(path.join(cwd, LOCKFILE_NAME), {\n encoding: 'utf8',\n });\n } catch (err) {\n // no lockfile found, ignore and continue\n return null;\n }\n // If this fails, we actually do want to alert the user by throwing\n return JSON.parse(lockfileContents);\n}\n\nexport function createInstallTarget(specifier: string, all = true): InstallTarget {\n return {\n specifier,\n all,\n default: false,\n namespace: false,\n named: [],\n };\n}\n\nfunction sortObject(originalObject: Record): Record {\n const newObject = {};\n for (const key of Object.keys(originalObject).sort()) {\n newObject[key] = originalObject[key];\n }\n return newObject;\n}\n\nexport function convertLockfileToSkypackImportMap(\n origin: string,\n lockfile: LockfileManifest,\n): ImportMap {\n const result = {imports: {}};\n for (const [key, val] of Object.entries(lockfile.lock)) {\n result.imports[key.replace(/\\#.*/, '')] = origin + '/' + val;\n result.imports[key.replace(/\\#.*/, '') + '/'] = origin + '/' + val + '/';\n }\n return result;\n}\n\nexport function convertSkypackImportMapToLockfile(\n dependencies: Record,\n importMap: ImportMap,\n): LockfileManifest {\n const result = {dependencies, lock: {}};\n for (const [key, val] of Object.entries(dependencies)) {\n if (importMap.imports[key]) {\n const valPath = url.parse(importMap.imports[key]).pathname;\n result.lock[key + '#' + val] = valPath?.substr(1);\n }\n }\n return result;\n}\n\nexport async function writeLockfile(loc: string, importMap: LockfileManifest): Promise {\n importMap.dependencies = sortObject(importMap.dependencies);\n importMap.lock = sortObject(importMap.lock);\n fs.writeFileSync(loc, JSON.stringify(importMap, undefined, 2), {encoding: 'utf8'});\n}\n\nexport function isTruthy(item: T | false | null | undefined): item is T {\n return Boolean(item);\n}\n\n/**\n * Returns true if fsevents exists. When Snowpack is bundled, automatic fsevents\n * detection fails for many libraries. This function helps add back support.\n */\nexport function isFsEventsEnabled(): boolean {\n try {\n NATIVE_REQUIRE('fsevents');\n return true;\n } catch (e) {\n return false;\n }\n}\n\n/** Get the package name + an entrypoint within that package (if given). */\nexport function parsePackageImportSpecifier(imp: string): [string, string | null] {\n const impParts = imp.split('/');\n if (imp.startsWith('@')) {\n const [scope, name, ...rest] = impParts;\n return [`${scope}/${name}`, rest.join('/') || null];\n }\n const [name, ...rest] = impParts;\n return [name, rest.join('/') || null];\n}\n\n/**\n * Given a package name, look for that package's package.json manifest.\n * Return both the manifest location (if believed to exist) and the\n * manifest itself (if found).\n *\n * NOTE: You used to be able to require() a package.json file directly,\n * but now with export map support in Node v13 that's no longer possible.\n */\nexport function resolveDependencyManifest(dep: string, cwd: string): [string | null, any | null] {\n // Attempt #1: Resolve the dependency manifest normally. This works for most\n // packages, but fails when the package defines an export map that doesn't\n // include a package.json. If we detect that to be the reason for failure,\n // move on to our custom implementation.\n try {\n const depManifest = fs.realpathSync.native(\n require.resolve(`${dep}/package.json`, {paths: [cwd]}),\n );\n return [depManifest, NATIVE_REQUIRE(depManifest)];\n } catch (err) {\n // if its an export map issue, move on to our manual resolver.\n if (err.code !== 'ERR_PACKAGE_PATH_NOT_EXPORTED') {\n return [null, null];\n }\n }\n\n // Attempt #2: Resolve the dependency manifest manually. This involves resolving\n // the dep itself to find the entrypoint file, and then haphazardly replacing the\n // file path within the package with a \"./package.json\" instead. It's not as\n // thorough as Attempt #1, but it should work well until export maps become more\n // established & move out of experimental mode.\n let result = [null, null] as [string | null, any | null];\n try {\n const fullPath = fs.realpathSync.native(require.resolve(dep, {paths: [cwd]}));\n // Strip everything after the package name to get the package root path\n // NOTE: This find-replace is very gross, replace with something like upath.\n const searchPath = `${path.sep}node_modules${path.sep}${dep.replace('/', path.sep)}`;\n const indexOfSearch = fullPath.lastIndexOf(searchPath);\n if (indexOfSearch >= 0) {\n const manifestPath =\n fullPath.substring(0, indexOfSearch + searchPath.length + 1) + 'package.json';\n result[0] = manifestPath;\n const manifestStr = fs.readFileSync(manifestPath, {encoding: 'utf8'});\n result[1] = JSON.parse(manifestStr);\n }\n } catch (err) {\n // ignore\n } finally {\n return result;\n }\n}\n\n/**\n * If Rollup erred parsing a particular file, show suggestions based on its\n * file extension (note: lowercase is fine).\n */\nexport const MISSING_PLUGIN_SUGGESTIONS: {[ext: string]: string} = {\n '.svelte':\n 'Try installing rollup-plugin-svelte and adding it to Snowpack (https://www.snowpack.dev/tutorials/svelte)',\n '.vue':\n 'Try installing rollup-plugin-vue and adding it to Snowpack (https://www.snowpack.dev/guides/vue)',\n};\n\nconst appNames = {\n win32: {\n brave: 'brave',\n },\n darwin: {\n brave: 'Brave Browser',\n },\n linux: {\n brave: 'brave',\n },\n};\n\nasync function openInExistingChromeBrowser(url: string) {\n // see if Chrome process is open; fail if not\n await execa.command('ps cax | grep \"Google Chrome\"', {\n shell: true,\n });\n // use open Chrome tab if exists; create new Chrome tab if not\n const openChrome = execa(\n 'osascript ../../assets/openChrome.appleScript \"' + encodeURI(url) + '\"',\n {\n cwd: __dirname,\n stdio: 'ignore',\n shell: true,\n },\n );\n // if Chrome doesn’t respond within 3s, fall back to opening new tab in default browser\n let isChromeStalled = setTimeout(() => {\n openChrome.cancel();\n }, 3000);\n try {\n await openChrome;\n } catch (err) {\n if (err.isCanceled) {\n console.warn(`Chrome not responding to Snowpack after 3s. Opening in new tab.`);\n } else {\n console.error(err.toString() || err);\n }\n throw err;\n } finally {\n clearTimeout(isChromeStalled);\n }\n}\nexport async function openInBrowser(\n protocol: string,\n hostname: string,\n port: number,\n browser: string,\n openUrl?: string,\n): Promise {\n const url = new URL(openUrl || '', `${protocol}//${hostname}:${port}`).toString();\n if (/chrome/i.test(browser)) {\n browser = open.apps.chrome as string;\n }\n if (/brave/i.test(browser)) {\n browser = appNames[process.platform]['brave'];\n }\n const isMacChrome =\n process.platform === 'darwin' &&\n (/chrome/i.test(browser) ||\n (/default/i.test(browser) && /chrome/i.test(await getDefaultBrowserId())));\n if (!isMacChrome) {\n await (browser === 'default' ? open(url) : open(url, {app: {name: browser}}));\n return;\n }\n try {\n // If we're on macOS, and we haven't requested a specific browser,\n // we can try opening Chrome with AppleScript. This lets us reuse an\n // existing tab when possible instead of creating a new one.\n await openInExistingChromeBrowser(url);\n } catch (err) {\n // if no open Chrome process, just go ahead and open default browser.\n await open(url);\n }\n}\n\nexport async function checkLockfileHash(dir: string) {\n const lockfileLoc = await findUp(['package-lock.json', 'yarn.lock']);\n if (!lockfileLoc) {\n return true;\n }\n const hashLoc = path.join(dir, LOCKFILE_HASH_FILE);\n const newLockHash = etag(await fs.promises.readFile(lockfileLoc, 'utf8'));\n const oldLockHash = await fs.promises.readFile(hashLoc, 'utf8').catch(() => '');\n return newLockHash === oldLockHash;\n}\n\nexport async function updateLockfileHash(dir: string) {\n const lockfileLoc = await findUp(['package-lock.json', 'yarn.lock']);\n if (!lockfileLoc) {\n return;\n }\n const hashLoc = path.join(dir, LOCKFILE_HASH_FILE);\n const newLockHash = etag(await fs.promises.readFile(lockfileLoc));\n await mkdirp(path.dirname(hashLoc));\n await fs.promises.writeFile(hashLoc, newLockHash);\n}\n\nfunction getAliasType(val: string): 'package' | 'path' | 'url' {\n if (isRemoteUrl(val)) {\n return 'url';\n }\n return !path.isAbsolute(val) ? 'package' : 'path';\n}\n\n/**\n * For the given import specifier, return an alias entry if one is matched.\n */\nexport function findMatchingAliasEntry(\n config: SnowpackConfig,\n spec: string,\n): {from: string; to: string; type: 'package' | 'path' | 'url'} | undefined {\n // Only match bare module specifiers. relative and absolute imports should not match\n if (isPathImport(spec) || isRemoteUrl(spec)) {\n return undefined;\n }\n\n for (const [from, to] of Object.entries(config.alias)) {\n const isExactMatch = spec === from;\n const isDeepMatch = spec.startsWith(addTrailingSlash(from));\n if (isExactMatch || isDeepMatch) {\n return {\n from,\n to,\n type: getAliasType(to),\n };\n }\n }\n}\n\n/**\n * Get the most specific file extension match possible.\n */\nexport function getExtensionMatch(\n fileName: string,\n extensionMap: Record,\n): [string, string[]] | undefined {\n let extensionPartial;\n let extensionMatch;\n // If a full URL is given, start at the basename. Otherwise, start at zero.\n let extensionMatchIndex = Math.max(0, fileName.lastIndexOf('/'), fileName.lastIndexOf('\\\\'));\n // Grab expanded file extensions, from longest to shortest.\n while (!extensionMatch && extensionMatchIndex > -1) {\n extensionMatchIndex++;\n extensionMatchIndex = fileName.indexOf('.', extensionMatchIndex);\n extensionPartial = fileName.substr(extensionMatchIndex).toLowerCase();\n extensionMatch = extensionMap[extensionPartial];\n }\n // Return the first match, if one was found. Otherwise, return undefined.\n return extensionMatch ? [extensionPartial, extensionMatch] : undefined;\n}\n\nexport function isPathImport(spec: string): boolean {\n return spec[0] === '.' || spec[0] === '/';\n}\n\nexport function isRemoteUrl(val: string): boolean {\n return val.startsWith('//') || !!url.parse(val).protocol?.startsWith('http');\n}\n\nexport function isImportOfPackage(importUrl: string, packageName: string) {\n return packageName === importUrl || importUrl.startsWith(packageName + '/');\n}\n\n/**\n * Sanitizes npm packages that end in .js (e.g `tippy.js` -> `tippyjs`).\n * This is necessary because Snowpack can’t create both a file and directory\n * that end in .js.\n */\nexport function sanitizePackageName(filepath: string): string {\n const dirs = filepath.split('/');\n const file = dirs.pop() as string;\n return [...dirs.map((path) => path.replace(/\\.js$/i, 'js')), file].join('/');\n}\n\n// Source Map spec v3: https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.lmz475t4mvbx\n\n/** CSS sourceMappingURL */\nexport function cssSourceMappingURL(code: string, sourceMappingURL: string) {\n return code + `/*# sourceMappingURL=${sourceMappingURL} */`;\n}\n\n/** JS sourceMappingURL */\nexport function jsSourceMappingURL(code: string, sourceMappingURL: string) {\n return code.replace(/\\n*$/, '') + `\\n//# sourceMappingURL=${sourceMappingURL}\\n`; // strip ending lines & append source map (with linebreaks for safety)\n}\n\n/** URL relative */\nexport function relativeURL(path1: string, path2: string): string {\n let url = path.relative(path1, path2).replace(/\\\\/g, '/');\n if (!url.startsWith('./') && !url.startsWith('../')) {\n url = './' + url;\n }\n return url;\n}\n\nconst CLOSING_HEAD_TAG = /<\\s*\\/\\s*head\\s*>/gi;\n\n/** Append HTML before closing tag */\nexport function appendHtmlToHead(doc: string, htmlToAdd: string) {\n const closingHeadMatch = doc.match(CLOSING_HEAD_TAG);\n // if no tag found, throw an error (we can’t load your app properly)\n if (!closingHeadMatch) {\n throw new Error(`No tag found in HTML (this is needed to optimize your app):\\n${doc}`);\n }\n // if multiple tags found, also freak out\n if (closingHeadMatch.length > 1) {\n throw new Error(`Multiple tags found in HTML (perhaps commented out?):\\n${doc}`);\n }\n return doc.replace(closingHeadMatch[0], htmlToAdd + closingHeadMatch[0]);\n}\n\nexport function isJavaScript(pathname: string): boolean {\n const ext = path.extname(pathname).toLowerCase();\n return ext === '.js' || ext === '.mjs' || ext === '.cjs';\n}\n\nexport function getExtension(str: string) {\n return path.extname(str).toLowerCase();\n}\n\nexport function hasExtension(str: string, ext: string) {\n return new RegExp(`\\\\${ext}$`, 'i').test(str);\n}\n\nexport function replaceExtension(fileName: string, oldExt: string, newExt: string): string {\n const extToReplace = new RegExp(`\\\\${oldExt}$`, 'i');\n return fileName.replace(extToReplace, newExt);\n}\n\nexport function addExtension(fileName: string, newExt: string): string {\n return fileName + newExt;\n}\n\nexport function removeExtension(fileName: string, oldExt: string): string {\n return replaceExtension(fileName, oldExt, '');\n}\n\n/** Add / to beginning of string (but don’t double-up) */\nexport function addLeadingSlash(path: string) {\n return path.replace(/^\\/?/, '/');\n}\n\n/** Add / to the end of string (but don’t double-up) */\nexport function addTrailingSlash(path: string) {\n return path.replace(/\\/?$/, '/');\n}\n\n/** Remove \\ and / from beginning of string */\nexport function removeLeadingSlash(path: string) {\n return path.replace(/^[/\\\\]+/, '');\n}\n\n/** Remove \\ and / from end of string */\nexport function removeTrailingSlash(path: string) {\n return path.replace(/[/\\\\]+$/, '');\n}\n\n/** It's `Array.splice`, but for Strings! */\nexport function spliceString(source: string, withSlice: string, start: number, end: number) {\n return source.slice(0, start) + (withSlice || '') + source.slice(end);\n}\n\nexport const HMR_CLIENT_CODE = fs.readFileSync(\n path.resolve(__dirname, '../../assets/hmr-client.js'),\n 'utf8',\n);\nexport const HMR_OVERLAY_CODE = fs.readFileSync(\n path.resolve(__dirname, '../../assets/hmr-error-overlay.js'),\n 'utf8',\n);\nexport const INIT_TEMPLATE_FILE = fs.readFileSync(\n path.resolve(__dirname, '../../assets/snowpack-init-file.js'),\n 'utf8',\n);\n" }, { "path": "snowpack/tsconfig.cjs.json", "content": "{\n \"extends\": \"./tsconfig.json\",\n \"compilerOptions\": {\n \"declaration\": true,\n \"module\": \"CommonJS\",\n \"outDir\": \"lib/cjs\"\n }\n}\n" }, { "path": "snowpack/tsconfig.json", "content": "{\n \"include\": [\"src\", \"assets/require-or-import.ts\"],\n \"exclude\": [\"lib\"],\n \"compilerOptions\": {\n \"outDir\": \"lib/esm\",\n \"module\": \"ESNext\",\n \"target\": \"es2018\",\n \"moduleResolution\": \"node\",\n \"declaration\": true,\n \"esModuleInterop\": true,\n \"strict\": true,\n \"sourceMap\": false,\n \"noImplicitAny\": false,\n \"noUnusedLocals\": true,\n \"noUnusedParameters\": true,\n \"skipLibCheck\": true\n }\n}\n" }, { "path": "test/build/config-loading-esm-package/config-loading-esm-package.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {setupBuildTest} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'TEST_BUILD_OUT');\n\n// Skip tests on node@10.x (expected to fail)\ndescribe = process.version.startsWith('v10') ? describe.skip : describe;\n\ndescribe('config-loading: detects snowpack.config.js inside of \"type\": \"module\" package', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n\n it('picks up on configured buildOptions.out', () => {\n const distJSLoc = path.join(cwd, 'src', 'index.js');\n expect(fs.existsSync(distJSLoc)).toBe(true); // JS file exists\n\n const snowpackMetaLoc = path.join(cwd, '_snowpack', 'env.js');\n expect(fs.existsSync(snowpackMetaLoc)).toBe(true); // snowpack meta exists\n });\n});\n" }, { "path": "test/build/config-loading-esm-package/package.json", "content": "{\n \"private\": true,\n \"version\": \"0.1.0\",\n \"type\": \"module\",\n \"name\": \"@snowpack/test-config-loading-esm-package\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"dependencies\": {\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/config-loading-esm-package/snowpack.config.js", "content": "export default {\n buildOptions: {\n out: 'TEST_BUILD_OUT',\n },\n};\n" }, { "path": "test/build/config-loading-esm-package/src/index.js", "content": "console.log(import.meta.env);\n" }, { "path": "test/build/config-loading-mjs/config-loading-mjs.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {setupBuildTest} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'TEST_BUILD_OUT');\n\n// Skip tests on node@10.x (expected to fail)\ndescribe = process.version.startsWith('v10') ? describe.skip : describe;\n\ndescribe('config-loading: detects snowpack.config.mjs', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n\n it('picks up on configured buildOptions.out', () => {\n const distJSLoc = path.join(cwd, 'src', 'index.js');\n expect(fs.existsSync(distJSLoc)).toBe(true); // JS file exists\n\n const snowpackMetaLoc = path.join(cwd, '_snowpack', 'env.js');\n expect(fs.existsSync(snowpackMetaLoc)).toBe(true); // snowpack meta exists\n });\n});\n" }, { "path": "test/build/config-loading-mjs/package.json", "content": "{\n \"private\": true,\n \"version\": \"0.1.0\",\n \"name\": \"@snowpack/test-config-loading-mjs\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"dependencies\": {\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/config-loading-mjs/snowpack.config.mjs", "content": "export default {\n buildOptions: {\n \"out\": \"TEST_BUILD_OUT\"\n }\n}\n" }, { "path": "test/build/config-loading-mjs/src/index.js", "content": "console.log(import.meta.env);\n" }, { "path": "test/build/config-path/config-path.test.js", "content": "const path = require('path');\nconst {setupBuildTest, readFiles} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\nlet files = {};\n\ndescribe('snowpack build --config path', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n\n files = readFiles(cwd);\n });\n\n it('loads correctly', () => {\n expect(files['/index.js']).toBeTruthy();\n });\n});\n" }, { "path": "test/build/config-path/index.js", "content": "export default function () {}\n" }, { "path": "test/build/config-path/my-config-file.js", "content": "module.exports = {};\n" }, { "path": "test/build/config-path/package.json", "content": "{\n \"name\": \"@snowpackjs/test-config-path\",\n \"description\": \"Passing --config\",\n \"version\": \"1.0.0\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"testbuild\": \"snowpack build --config my-config-file.js\"\n }\n}\n" }, { "path": "test/build/entrypoint-ids/entrypoint-ids.test.js", "content": "const os = require('os');\nconst path = require('path');\nconst {setupBuildTest, readFiles} = require('../../test-utils');\n\nconst IMPORTS = ['ansi-styles', 'chalk'];\nconst cwd = path.join(__dirname, 'build');\nlet files = {};\n\ndescribe('core: pkg resolution', () => {\n beforeAll(() => {\n const capitalize = os.platform() === 'win32'; // for Windows, we capitalize this one directory to see if Snowpack can still resolve\n setupBuildTest(capitalize ? __dirname.toUpperCase() : __dirname);\n files = readFiles(cwd);\n });\n\n it('resolves pkg without case-sensitivity', () => {\n IMPORTS.forEach((i) => {\n expect(files['/_dist_/index.js']).toEqual(\n expect.stringContaining(`import '../_snowpack/pkg/${i}.js';`),\n );\n });\n });\n});\n" }, { "path": "test/build/entrypoint-ids/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.0\",\n \"name\": \"@snowpack/test-entrypoint-ids\",\n \"description\": \"Tests that a non-canonical cwd works on case-insensitive file systems\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"snowpack\": {\n \"mount\": {\n \"./src\": \"/_dist_\"\n }\n },\n \"dependencies\": {\n \"chalk\": \"4.1.0\",\n \"ansi-styles\": \"*\"\n },\n \"devDependencies\": {\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/entrypoint-ids/src/index.js", "content": "import 'chalk';\nimport 'ansi-styles';\n" }, { "path": "test/build/import-assets/import-assets.test.js", "content": "const path = require('path');\nconst {setupBuildTest, readFiles} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\nlet files = {};\n\ndescribe('import resource', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n files = readFiles(cwd);\n });\n\n describe('css', () => {\n it('proxy is created', () => {\n expect(files['/_dist_/styles.css.proxy.js']).toEqual(\n expect.stringContaining(`font-family: fantasy;`),\n );\n });\n\n it('proxy is resolved in JS', () => {\n expect(files['/_dist_/index.js']).toEqual(\n expect.stringContaining(`import './styles.css.proxy.js';`),\n );\n });\n });\n\n describe('image', () => {\n it('proxy is resolved in JS', () => {\n expect(files['/_dist_/index.js']).toEqual(\n expect.stringContaining(`import './logo.png.proxy.js';`),\n );\n });\n });\n\n describe('os compat', () => {\n // note: this test isn‘t aware of OS; it’s just something to run in multiple environments\n it('there are no backslashes anywhere in Windows', () => {\n expect(files['/_dist_/index.js']).not.toEqual(expect.stringContaining(`\\\\`));\n });\n });\n});\n" }, { "path": "test/build/import-assets/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.1\",\n \"name\": \"@snowpack/test-import-css\",\n \"description\": \"A test to make sure that URLs for resources don’t have backslashes on Windows\",\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"testbuild\": \"snowpack build\"\n },\n \"devDependencies\": {\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/import-assets/snowpack.config.json", "content": "{\n \"mount\": {\n \"./src\": \"/_dist_\"\n }\n}\n" }, { "path": "test/build/import-assets/src/index.js", "content": "import './styles.css';\nimport './logo.png';\n\nconsole.log('loaded');\n" }, { "path": "test/build/import-assets/src/styles.css", "content": "body {\n font-family: fantasy;\n}\n" }, { "path": "test/build/package-bootstrap/package-bootstrap.test.js", "content": "const path = require('path');\nconst {setupBuildTest, readFiles} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\nlet files = {};\n\ndescribe('package: bootstrap', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n\n files = readFiles(cwd);\n });\n\n it('resolves JS', () => {\n expect(files['/_dist_/index.js']).toEqual(\n expect.stringContaining(\n `import '../_snowpack/pkg/bootstrap/dist/css/bootstrap.min.css.proxy.js';`,\n ),\n );\n });\n});\n" }, { "path": "test/build/package-bootstrap/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.1\",\n \"name\": \"@snowpack/test-package-bootstrap\",\n \"description\": \"Tests that CSS proxy files are properly imported from _snowpack/pkg\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"snowpack\": {\n \"mount\": {\n \"./src\": \"/_dist_\"\n }\n },\n \"dependencies\": {\n \"bootstrap\": \"^4.5.2\"\n },\n \"devDependencies\": {\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/package-bootstrap/src/index.js", "content": "import 'bootstrap/dist/css/bootstrap.min.css';\n\nconsole.log('CSS added to page!');\n" }, { "path": "test/build/package-bootstrap/src/styles.css", "content": "@import \"bootstrap/dist/css/bootstrap.min.css\";" }, { "path": "test/build/package-workspace/package-workspace.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {setupBuildTest} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\n\ndescribe('test workspace linked packages', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n\n it('builds source files as expected', () => {\n const jsLoc = path.join(cwd, '_dist_', 'index.svelte.js');\n expect(fs.existsSync(jsLoc)).toBe(true); // file exists\n expect(fs.readFileSync(jsLoc, 'utf-8')).toContain(\n `../_snowpack/link/test-workspace-component/SvelteComponent.svelte.js`,\n ); // file has expected imports\n expect(fs.readFileSync(jsLoc, 'utf-8')).toContain(\n `../_snowpack/link/test-workspace-component/works-without-extension.js`,\n ); // file has expected imports\n });\n\n it('builds workspace package files as expected', () => {\n expect(\n fs.existsSync(\n path.join(\n cwd,\n '_snowpack',\n 'link',\n 'test-workspace-component',\n 'SvelteComponent.svelte.js',\n ),\n ),\n ).toBe(true); // import exists\n expect(\n fs.existsSync(\n path.join(\n cwd,\n '_snowpack',\n 'link',\n 'test-workspace-component',\n 'SvelteComponent.svelte.css.proxy.js',\n ),\n ),\n ).toBe(true); // import exists\n });\n});\n" }, { "path": "test/build/package-workspace/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.1\",\n \"name\": \"@snowpack/test-package-workspace\",\n \"description\": \"A test to make sure linked packages are supported\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"devDependencies\": {\n \"snowpack\": \"^3.8.8\"\n },\n \"dependencies\": {\n \"test-workspace-component\": \"^1.0.0\"\n }\n}\n" }, { "path": "test/build/package-workspace/snowpack.config.js", "content": "/** @type {import(\"snowpack\").SnowpackUserConfig } */\nmodule.exports = {\n workspaceRoot: '../',\n buildOptions: {\n out: './build',\n },\n mount: {\n src: '/_dist_',\n },\n plugins: [['@snowpack/plugin-svelte']],\n};\n" }, { "path": "test/build/package-workspace/src/index.html", "content": "\n\n \n \n \n \n Snowpack App\n \n \n \n \n \n\n" }, { "path": "test/build/package-workspace/src/index.svelte", "content": "\n\n\n\n" }, { "path": "test/build/plugin-build-script/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.1\",\n \"name\": \"@snowpack/test-plugin-build-script\",\n \"description\": \"A test to make sure @snowpack/plugin-build-script works\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"devDependencies\": {\n \"@babel/cli\": \"^7.10.5\",\n \"@snowpack/plugin-build-script\": \"^2.0.0\",\n \"snowpack\": \"^3.8.8\"\n },\n \"dependencies\": {\n \"@babel/preset-typescript\": \"^7.13.0\"\n }\n}\n" }, { "path": "test/build/plugin-build-script/plugin-build-script.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {setupBuildTest} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\n\ndescribe('@snowpack/plugin-build-script', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n\n it('runs Babel on TS', () => {\n const jsLoc = path.join(cwd, '_dist_', 'index.js');\n expect(fs.existsSync(jsLoc)).toBe(true); // file exists\n expect(fs.readFileSync(jsLoc, 'utf-8')).toBeTruthy(); // file has content\n });\n\n it('doesn’t leave TS in build', () => {\n const tsLoc = path.join(cwd, '_dist_', 'index.ts');\n expect(fs.existsSync(tsLoc)).not.toBe(true); // file doesn’t exist\n });\n});\n" }, { "path": "test/build/plugin-build-script/snowpack.config.js", "content": "module.exports = {\n mount: {\n src: '/_dist_',\n },\n plugins: [\n [\n '@snowpack/plugin-build-script',\n {\n input: ['.ts'],\n output: ['.js'],\n cmd: 'babel --filename $FILE --presets @babel/preset-typescript',\n },\n ],\n ],\n};\n" }, { "path": "test/build/plugin-build-script/src/index.ts", "content": "type stringType = string;\nconst msg: stringType = 'I’m a TypeScript file';\nconsole.log(msg);\n" }, { "path": "test/build/plugin-hook-optimize/custom-optimize-plugin.js", "content": "const fs = require('fs').promises;\nconst path = require('path');\n\nmodule.exports = function () {\n return {\n optimize: async ({buildDirectory}) => {\n await fs.writeFile(path.join(buildDirectory, 'artifact.txt'), 'TEST: Directory optimized!');\n },\n };\n};\n" }, { "path": "test/build/plugin-hook-optimize/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.1\",\n \"name\": \"@snowpack/test-plugin-hook-optimize\",\n \"description\": \"A test to make sure that the plugin optimize() hook is working as expected\",\n \"scripts\": {\n \"start\": \"snowpack dev\",\n \"testbuild\": \"snowpack build\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-optimize\": \"^0.2.0\",\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/plugin-hook-optimize/plugin-hook-optimize.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst glob = require('glob');\nconst {setupBuildTest} = require('../../test-utils');\n\ndescribe('plugin API: optimize()', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n\n it('generates artifact.txt', () => {\n // test 1: artifact.txt doesn’t exist in src\n const files = glob.sync(path.join(__dirname, 'src'), {nodir: true});\n expect(files.join(',')).not.toEqual(expect.stringContaining('artifact.txt')); // note: this is a simple check if `artifact.txt` occurs in any part of a filename here\n\n // test 2: artifact.txt is generated by optimize() plugin hook\n const artifactLoc = path.join(__dirname, 'build', 'artifact.txt');\n expect(fs.existsSync(artifactLoc)).toBe(true);\n });\n});\n" }, { "path": "test/build/plugin-hook-optimize/snowpack.config.json", "content": "{\n \"mount\": {\n \"./src\": \"/_dist_\"\n },\n \"plugins\": [\"./custom-optimize-plugin.js\"]\n}\n" }, { "path": "test/build/plugin-hook-optimize/src/index.js", "content": "import './styles.css';\nimport './logo.png';\nimport iconComponent from './icon.svg';\n\nconsole.log('loaded');\n" }, { "path": "test/build/plugin-hook-optimize/src/styles.css", "content": "body {\n font-family: fantasy;\n}\n" }, { "path": "test/build/plugin-run-script/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.1\",\n \"name\": \"@snowpack/test-plugin-run-script\",\n \"description\": \"A test to make sure @snowpack/plugin-run-script works\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-run-script\": \"^2.0.0\",\n \"sass\": \"^1.26.10\",\n \"snowpack\": \"^3.8.8\"\n }\n}\n" }, { "path": "test/build/plugin-run-script/plugin-run-script.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {setupBuildTest} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\n\ndescribe('@snowpack/plugin-run-script', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n\n it('generates .scss -> .css', () => {\n const css = path.join(cwd, 'css', 'index.css');\n expect(fs.existsSync(css)).toBe(true); // file exists\n expect(fs.readFileSync(css, 'utf-8')).toBeTruthy(); // file has content\n });\n});\n" }, { "path": "test/build/plugin-run-script/public/css/index.css", "content": "body {\n font-family: \"fantasy\";\n}\n" }, { "path": "test/build/plugin-run-script/snowpack.config.js", "content": "module.exports = {\n mount: {\n public: '/',\n },\n plugins: [\n [\n '@snowpack/plugin-run-script',\n {\n cmd: 'sass src/css:public/css --no-source-map',\n },\n ],\n ],\n};\n" }, { "path": "test/build/plugin-run-script/src/css/index.scss", "content": "$body-font: \"fantasy\";\n\nbody {\n font-family: $body-font;\n}\n" }, { "path": "test/build/prepare-external-package/package.json", "content": "{\n \"private\": true,\n \"version\": \"1.0.0\",\n \"name\": \"@snowpack/test-prepare-external-package\",\n \"description\": \"Test for packageOptions.external as it applies to prepare.\",\n \"scripts\": {\n \"testbuild\": \"snowpack prepare\"\n },\n \"snowpack\": {\n \"mount\": {\n \"./src\": \"/_dist_\"\n },\n \"packageOptions\": {\n \"external\": [\n \"fs\",\n \"vue/types\"\n ],\n \"source\": \"local\"\n }\n },\n \"devDependencies\": {\n \"snowpack\": \"^3.8.8\"\n },\n \"dependencies\": {\n \"array-flatten\": \"^3.0.0\"\n }\n}\n" }, { "path": "test/build/prepare-external-package/prepare-external-package.test.js", "content": "const fs = require('fs');\nconst path = require('path');\nconst {setupBuildTest} = require('../../test-utils');\n\ndescribe('prepare: packageOptions.external', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n });\n it('prepare external package', () => {\n expect(\n fs.existsSync(path.join(__dirname, 'node_modules/.cache/snowpack/build/array-flatten@3.0.0')),\n ).toEqual(true);\n expect(fs.existsSync(path.join(__dirname, 'node_modules/.cache/snowpack/build/fs'))).toEqual(\n false,\n );\n expect(\n fs.existsSync(path.join(__dirname, 'node_modules/.cache/snowpack/build/vue/types')),\n ).toEqual(false);\n });\n});\n" }, { "path": "test/build/prepare-external-package/src/index.js", "content": "import 'fs';\nimport 'array-flatten';\nimport 'vue/types';\n" }, { "path": "test/build/react-lazy-bundle/package.json", "content": "{\n \"name\": \"@snowpackjs/test-react-lazy\",\n \"description\": \"Tests React Lazy component resolution\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"testbuild\": \"snowpack build\"\n },\n \"dependencies\": {\n \"react\": \"^17.0.2\",\n \"react-dom\": \"^17.0.2\",\n \"react-router\": \"^5.2.0\",\n \"react-router-dom\": \"^5.2.0\"\n },\n \"devDependencies\": {\n \"@snowpack/plugin-react-refresh\": \"^2.5.0\",\n \"@snowpack/plugin-sass\": \"^1.4.0\",\n \"snowpack\": \"^3.3.2\"\n }\n}\n" }, { "path": "test/build/react-lazy-bundle/public/index.html", "content": "\n\n \n \n React Lazy Test\n \n \n
\n \n \n\n" }, { "path": "test/build/react-lazy-bundle/react-lazy.test.js", "content": "const path = require('path');\nconst {setupBuildTest, readFiles} = require('../../test-utils');\n\nconst cwd = path.join(__dirname, 'build');\nlet files = {};\n\ndescribe('package: bootstrap', () => {\n beforeAll(() => {\n setupBuildTest(__dirname);\n\n files = readFiles(cwd);\n });\n\n it('transforms relative URLs correctly', () => {\n // The original bug was that when setting bundle: true, URLs were incorrectly transformed.\n // This tests that `//dist/components//Articles.js` doesn’t happen anymore.\n\n expect(files['/dist/index.js']).toEqual(\n expect.stringContaining(`lazy(()=>import(\"./components/Articles.js\")`),\n );\n });\n});\n" }, { "path": "test/build/react-lazy-bundle/snowpack.config.js", "content": "module.exports = {\n mount: {\n public: {url: '/', static: true, resolve: false},\n src: {url: '/dist'},\n },\n optimize: {\n bundle: true,\n minify: true,\n sourcemap: true,\n splitting: true,\n treeshake: true,\n target: 'safari11',\n },\n plugins: ['@snowpack/plugin-sass', '@snowpack/plugin-react-refresh'],\n};\n" }, { "path": "test/build/react-lazy-bundle/src/components/App.jsx", "content": "import React from 'react';\n\nfunction App({children}) {\n return
{children}
;\n}\nexport default App;\n" }, { "path": "test/build/react-lazy-bundle/src/components/Articles.jsx", "content": "import React from 'react';\n\nfunction Articles() {\n return

Articles

;\n}\n\nexport default Articles;\n" }, { "path": "test/build/react-lazy-bundle/src/index.jsx", "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport {BrowserRouter as Router, Route, Switch} from 'react-router-dom';\nimport App from './components/App';\n\nconst Articles = React.lazy(() => import('./components/Articles'));\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n ,\n document.querySelector('#app'),\n);\n" }, { "path": "test/build/test-workspace-component/Layout.ts", "content": "export const bob = 42;\n" }, { "path": "test/build/test-workspace-component/README.md", "content": "# test-workspace-component\n\nThis is a test component for the workspace that lets us test symlink support. It is private, not published, and should not ever be needed outside of testing." }, { "path": "test/build/test-workspace-component/SvelteComponent.svelte", "content": "\n\n\n\n\n
\n Hello! This is a test component!\n
\n" }, { "path": "test/build/test-workspace-component/index.mjs", "content": "export * from './Layout'\n\nexport function testComponent() {\n return 42;\n}" }, { "path": "test/build/test-workspace-component/package.json", "content": "{\n \"name\": \"test-workspace-component\",\n \"private\": true,\n \"version\": \"1.0.0\",\n \"license\": \"MIT\",\n \"main\": \"index.mjs\",\n \"dependencies\": {\n \"canvas-confetti\": \"^1.2.0\"\n }\n}\n" }, { "path": "test/build/test-workspace-component/works-without-extension.ts", "content": "export function testFn() {\n return 42 as number;\n}\n" }, { "path": "test/create-snowpack-app/__snapshots__/create-snowpack-app.test.js.snap", "content": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`create-snowpack-app app-template-11ty > build: _snowpack/pkg/canvas-confetti.js 1`] = `\n\"var module = {};\n(function main(global, module2, isWorker, workerSize) {\n var canUseWorker = !!(global.Worker && global.Blob && global.Promise && global.OffscreenCanvas && global.OffscreenCanvasRenderingContext2D && global.HTMLCanvasElement && global.HTMLCanvasElement.prototype.transferControlToOffscreen && global.URL && global.URL.createObjectURL);\n function noop() {\n }\n function promise(func) {\n var ModulePromise = module2.exports.Promise;\n var Prom = ModulePromise !== void 0 ? ModulePromise : global.Promise;\n if (typeof Prom === \\\\\"function\\\\\") {\n return new Prom(func);\n }\n func(noop, noop);\n return null;\n }\n var raf = function() {\n var TIME = Math.floor(1e3 / 60);\n var frame, cancel;\n var frames = {};\n var lastFrameTime = 0;\n if (typeof requestAnimationFrame === \\\\\"function\\\\\" && typeof cancelAnimationFrame === \\\\\"function\\\\\") {\n frame = function(cb) {\n var id = Math.random();\n frames[id] = requestAnimationFrame(function onFrame(time) {\n if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {\n lastFrameTime = time;\n delete frames[id];\n cb();\n } else {\n frames[id] = requestAnimationFrame(onFrame);\n }\n });\n return id;\n };\n cancel = function(id) {\n if (frames[id]) {\n cancelAnimationFrame(frames[id]);\n }\n };\n } else {\n frame = function(cb) {\n return setTimeout(cb, TIME);\n };\n cancel = function(timer) {\n return clearTimeout(timer);\n };\n }\n return {frame, cancel};\n }();\n var getWorker = function() {\n var worker;\n var prom;\n var resolves = {};\n function decorate(worker2) {\n function execute(options, callback) {\n worker2.postMessage({options: options || {}, callback});\n }\n worker2.init = function initWorker(canvas) {\n var offscreen = canvas.transferControlToOffscreen();\n worker2.postMessage({canvas: offscreen}, [offscreen]);\n };\n worker2.fire = function fireWorker(options, size, done) {\n if (prom) {\n execute(options, null);\n return prom;\n }\n var id = Math.random().toString(36).slice(2);\n prom = promise(function(resolve) {\n function workerDone(msg) {\n if (msg.data.callback !== id) {\n return;\n }\n delete resolves[id];\n worker2.removeEventListener(\\\\\"message\\\\\", workerDone);\n prom = null;\n done();\n resolve();\n }\n worker2.addEventListener(\\\\\"message\\\\\", workerDone);\n execute(options, id);\n resolves[id] = workerDone.bind(null, {data: {callback: id}});\n });\n return prom;\n };\n worker2.reset = function resetWorker() {\n worker2.postMessage({reset: true});\n for (var id in resolves) {\n resolves[id]();\n delete resolves[id];\n }\n };\n }\n return function() {\n if (worker) {\n return worker;\n }\n if (!isWorker && canUseWorker) {\n var code = [\n \\\\\"var CONFETTI, SIZE = {}, module = {};\\\\\",\n \\\\\"(\\\\\" + main.toString() + \\\\\")(this, module, true, SIZE);\\\\\",\n \\\\\"onmessage = function(msg) {\\\\\",\n \\\\\" if (msg.data.options) {\\\\\",\n \\\\\" CONFETTI(msg.data.options).then(function () {\\\\\",\n \\\\\" if (msg.data.callback) {\\\\\",\n \\\\\" postMessage({ callback: msg.data.callback });\\\\\",\n \\\\\" }\\\\\",\n \\\\\" });\\\\\",\n \\\\\" } else if (msg.data.reset) {\\\\\",\n \\\\\" CONFETTI.reset();\\\\\",\n \\\\\" } else if (msg.data.resize) {\\\\\",\n \\\\\" SIZE.width = msg.data.resize.width;\\\\\",\n \\\\\" SIZE.height = msg.data.resize.height;\\\\\",\n \\\\\" } else if (msg.data.canvas) {\\\\\",\n \\\\\" SIZE.width = msg.data.canvas.width;\\\\\",\n \\\\\" SIZE.height = msg.data.canvas.height;\\\\\",\n \\\\\" CONFETTI = module.exports.create(msg.data.canvas);\\\\\",\n \\\\\" }\\\\\",\n \\\\\"}\\\\\"\n ].join(\\\\\"\\\\\");\n try {\n worker = new Worker(URL.createObjectURL(new Blob([code])));\n } catch (e) {\n typeof console !== void 0 && typeof console.warn === \\\\\"function\\\\\" ? console.warn(\\\\\"🎊 Could not load worker\\\\\", e) : null;\n return null;\n }\n decorate(worker);\n }\n return worker;\n };\n }();\n var defaults = {\n particleCount: 50,\n angle: 90,\n spread: 45,\n startVelocity: 45,\n decay: 0.9,\n gravity: 1,\n drift: 0,\n ticks: 200,\n x: 0.5,\n y: 0.5,\n shapes: [\\\\\"square\\\\\", \\\\\"circle\\\\\"],\n zIndex: 100,\n colors: [\n \\\\\"#26ccff\\\\\",\n \\\\\"#a25afd\\\\\",\n \\\\\"#ff5e7e\\\\\",\n \\\\\"#88ff5a\\\\\",\n \\\\\"#fcff42\\\\\",\n \\\\\"#ffa62d\\\\\",\n \\\\\"#ff36ff\\\\\"\n ],\n disableForReducedMotion: false,\n scalar: 1\n };\n function convert(val, transform) {\n return transform ? transform(val) : val;\n }\n function isOk(val) {\n return !(val === null || val === void 0);\n }\n function prop(options, name, transform) {\n return convert(options && isOk(options[name]) ? options[name] : defaults[name], transform);\n }\n function onlyPositiveInt(number) {\n return number < 0 ? 0 : Math.floor(number);\n }\n function randomInt(min, max) {\n return Math.floor(Math.random() * (max - min)) + min;\n }\n function toDecimal(str) {\n return parseInt(str, 16);\n }\n function colorsToRgb(colors) {\n return colors.map(hexToRgb);\n }\n function hexToRgb(str) {\n var val = String(str).replace(/[^0-9a-f]/gi, \\\\\"\\\\\");\n if (val.length < 6) {\n val = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];\n }\n return {\n r: toDecimal(val.substring(0, 2)),\n g: toDecimal(val.substring(2, 4)),\n b: toDecimal(val.substring(4, 6))\n };\n }\n function getOrigin(options) {\n var origin = prop(options, \\\\\"origin\\\\\", Object);\n origin.x = prop(origin, \\\\\"x\\\\\", Number);\n origin.y = prop(origin, \\\\\"y\\\\\", Number);\n return origin;\n }\n function setCanvasWindowSize(canvas) {\n canvas.width = document.documentElement.clientWidth;\n canvas.height = document.documentElement.clientHeight;\n }\n function setCanvasRectSize(canvas) {\n var rect = canvas.getBoundingClientRect();\n canvas.width = rect.width;\n canvas.height = rect.height;\n }\n function getCanvas(zIndex) {\n var canvas = document.createElement(\\\\\"canvas\\\\\");\n canvas.style.position = \\\\\"fixed\\\\\";\n canvas.style.top = \\\\\"0px\\\\\";\n canvas.style.left = \\\\\"0px\\\\\";\n canvas.style.pointerEvents = \\\\\"none\\\\\";\n canvas.style.zIndex = zIndex;\n return canvas;\n }\n function ellipse(context, x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {\n context.save();\n context.translate(x, y);\n context.rotate(rotation);\n context.scale(radiusX, radiusY);\n context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);\n context.restore();\n }\n function randomPhysics(opts) {\n var radAngle = opts.angle * (Math.PI / 180);\n var radSpread = opts.spread * (Math.PI / 180);\n return {\n x: opts.x,\n y: opts.y,\n wobble: Math.random() * 10,\n velocity: opts.startVelocity * 0.5 + Math.random() * opts.startVelocity,\n angle2D: -radAngle + (0.5 * radSpread - Math.random() * radSpread),\n tiltAngle: Math.random() * Math.PI,\n color: opts.color,\n shape: opts.shape,\n tick: 0,\n totalTicks: opts.ticks,\n decay: opts.decay,\n drift: opts.drift,\n random: Math.random() + 5,\n tiltSin: 0,\n tiltCos: 0,\n wobbleX: 0,\n wobbleY: 0,\n gravity: opts.gravity * 3,\n ovalScalar: 0.6,\n scalar: opts.scalar\n };\n }\n function updateFetti(context, fetti) {\n fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift;\n fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity;\n fetti.wobble += 0.1;\n fetti.velocity *= fetti.decay;\n fetti.tiltAngle += 0.1;\n fetti.tiltSin = Math.sin(fetti.tiltAngle);\n fetti.tiltCos = Math.cos(fetti.tiltAngle);\n fetti.random = Math.random() + 5;\n fetti.wobbleX = fetti.x + 10 * fetti.scalar * Math.cos(fetti.wobble);\n fetti.wobbleY = fetti.y + 10 * fetti.scalar * Math.sin(fetti.wobble);\n var progress = fetti.tick++ / fetti.totalTicks;\n var x1 = fetti.x + fetti.random * fetti.tiltCos;\n var y1 = fetti.y + fetti.random * fetti.tiltSin;\n var x2 = fetti.wobbleX + fetti.random * fetti.tiltCos;\n var y2 = fetti.wobbleY + fetti.random * fetti.tiltSin;\n context.fillStyle = \\\\\"rgba(\\\\\" + fetti.color.r + \\\\\", \\\\\" + fetti.color.g + \\\\\", \\\\\" + fetti.color.b + \\\\\", \\\\\" + (1 - progress) + \\\\\")\\\\\";\n context.beginPath();\n if (fetti.shape === \\\\\"circle\\\\\") {\n context.ellipse ? context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI) : ellipse(context, fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);\n } else {\n context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));\n context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));\n context.lineTo(Math.floor(x2), Math.floor(y2));\n context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));\n }\n context.closePath();\n context.fill();\n return fetti.tick < fetti.totalTicks;\n }\n function animate(canvas, fettis, resizer, size, done) {\n var animatingFettis = fettis.slice();\n var context = canvas.getContext(\\\\\"2d\\\\\");\n var animationFrame;\n var destroy;\n var prom = promise(function(resolve) {\n function onDone() {\n animationFrame = destroy = null;\n context.clearRect(0, 0, size.width, size.height);\n done();\n resolve();\n }\n function update() {\n if (isWorker && !(size.width === workerSize.width && size.height === workerSize.height)) {\n size.width = canvas.width = workerSize.width;\n size.height = canvas.height = workerSize.height;\n }\n if (!size.width && !size.height) {\n resizer(canvas);\n size.width = canvas.width;\n size.height = canvas.height;\n }\n context.clearRect(0, 0, size.width, size.height);\n animatingFettis = animatingFettis.filter(function(fetti) {\n return updateFetti(context, fetti);\n });\n if (animatingFettis.length) {\n animationFrame = raf.frame(update);\n } else {\n onDone();\n }\n }\n animationFrame = raf.frame(update);\n destroy = onDone;\n });\n return {\n addFettis: function(fettis2) {\n animatingFettis = animatingFettis.concat(fettis2);\n return prom;\n },\n canvas,\n promise: prom,\n reset: function() {\n if (animationFrame) {\n raf.cancel(animationFrame);\n }\n if (destroy) {\n destroy();\n }\n }\n };\n }\n function confettiCannon(canvas, globalOpts) {\n var isLibCanvas = !canvas;\n var allowResize = !!prop(globalOpts || {}, \\\\\"resize\\\\\");\n var globalDisableForReducedMotion = prop(globalOpts, \\\\\"disableForReducedMotion\\\\\", Boolean);\n var shouldUseWorker = canUseWorker && !!prop(globalOpts || {}, \\\\\"useWorker\\\\\");\n var worker = shouldUseWorker ? getWorker() : null;\n var resizer = isLibCanvas ? setCanvasWindowSize : setCanvasRectSize;\n var initialized = canvas && worker ? !!canvas.__confetti_initialized : false;\n var preferLessMotion = typeof matchMedia === \\\\\"function\\\\\" && matchMedia(\\\\\"(prefers-reduced-motion)\\\\\").matches;\n var animationObj;\n function fireLocal(options, size, done) {\n var particleCount = prop(options, \\\\\"particleCount\\\\\", onlyPositiveInt);\n var angle = prop(options, \\\\\"angle\\\\\", Number);\n var spread = prop(options, \\\\\"spread\\\\\", Number);\n var startVelocity = prop(options, \\\\\"startVelocity\\\\\", Number);\n var decay = prop(options, \\\\\"decay\\\\\", Number);\n var gravity = prop(options, \\\\\"gravity\\\\\", Number);\n var drift = prop(options, \\\\\"drift\\\\\", Number);\n var colors = prop(options, \\\\\"colors\\\\\", colorsToRgb);\n var ticks = prop(options, \\\\\"ticks\\\\\", Number);\n var shapes = prop(options, \\\\\"shapes\\\\\");\n var scalar = prop(options, \\\\\"scalar\\\\\");\n var origin = getOrigin(options);\n var temp = particleCount;\n var fettis = [];\n var startX = canvas.width * origin.x;\n var startY = canvas.height * origin.y;\n while (temp--) {\n fettis.push(randomPhysics({\n x: startX,\n y: startY,\n angle,\n spread,\n startVelocity,\n color: colors[temp % colors.length],\n shape: shapes[randomInt(0, shapes.length)],\n ticks,\n decay,\n gravity,\n drift,\n scalar\n }));\n }\n if (animationObj) {\n return animationObj.addFettis(fettis);\n }\n animationObj = animate(canvas, fettis, resizer, size, done);\n return animationObj.promise;\n }\n function fire(options) {\n var disableForReducedMotion = globalDisableForReducedMotion || prop(options, \\\\\"disableForReducedMotion\\\\\", Boolean);\n var zIndex = prop(options, \\\\\"zIndex\\\\\", Number);\n if (disableForReducedMotion && preferLessMotion) {\n return promise(function(resolve) {\n resolve();\n });\n }\n if (isLibCanvas && animationObj) {\n canvas = animationObj.canvas;\n } else if (isLibCanvas && !canvas) {\n canvas = getCanvas(zIndex);\n document.body.appendChild(canvas);\n }\n if (allowResize && !initialized) {\n resizer(canvas);\n }\n var size = {\n width: canvas.width,\n height: canvas.height\n };\n if (worker && !initialized) {\n worker.init(canvas);\n }\n initialized = true;\n if (worker) {\n canvas.__confetti_initialized = true;\n }\n function onResize() {\n if (worker) {\n var obj = {\n getBoundingClientRect: function() {\n if (!isLibCanvas) {\n return canvas.getBoundingClientRect();\n }\n }\n };\n resizer(obj);\n worker.postMessage({\n resize: {\n width: obj.width,\n height: obj.height\n }\n });\n return;\n }\n size.width = size.height = null;\n }\n function done() {\n animationObj = null;\n if (allowResize) {\n global.removeEventListener(\\\\\"resize\\\\\", onResize);\n }\n if (isLibCanvas && canvas) {\n document.body.removeChild(canvas);\n canvas = null;\n initialized = false;\n }\n }\n if (allowResize) {\n global.addEventListener(\\\\\"resize\\\\\", onResize, false);\n }\n if (worker) {\n return worker.fire(options, size, done);\n }\n return fireLocal(options, size, done);\n }\n fire.reset = function() {\n if (worker) {\n worker.reset();\n }\n if (animationObj) {\n animationObj.reset();\n }\n };\n return fire;\n }\n module2.exports = confettiCannon(null, {useWorker: true, resize: true});\n module2.exports.create = confettiCannon;\n})(function() {\n if (typeof window !== \\\\\"undefined\\\\\") {\n return window;\n }\n if (typeof self !== \\\\\"undefined\\\\\") {\n return self;\n }\n return this || {};\n}(), module, false);\nvar __pika_web_default_export_for_treeshaking__ = module.exports;\nvar create = module.exports.create;\nexport default __pika_web_default_export_for_treeshaking__;\"\n`;\n\nexports[`create-snowpack-app app-template-11ty > build: _snowpack/pkg/import-map.json 1`] = `\n\"{\n \\\\\"imports\\\\\": {\n \\\\\"canvas-confetti\\\\\": \\\\\"./canvas-XXXXXXXX.js\\\\\"\n }\n}\"\n`;\n\nexports[`create-snowpack-app app-template-11ty > build: about/index.html 1`] = `\n\"\n\n \n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n \n \n \n \n \n
\n

About

\n

11ty, powered by Snowpack.

\n
\n

Back to Home

\n \n\"\n`;\n\nexports[`create-snowpack-app app-template-11ty > build: allFiles 1`] = `\nArray [\n \"_snowpack/pkg/canvas-confetti.js\",\n \"_snowpack/pkg/import-map.json\",\n \"about/index.html\",\n \"dist/index.js\",\n \"index.html\",\n \"static/favicon.png\",\n \"static/index.css\",\n \"static/logo.svg\",\n]\n`;\n\nexports[`create-snowpack-app app-template-11ty > build: dist/index.js 1`] = `\n\"/**\n * This file is just a silly example to show everything working in the browser.\n * When you're ready to start on your site, clear the file. Happy hacking!\n **/\nimport confetti from '../_snowpack/pkg/canvas-XXXXXXXX.js';\nconfetti.create(document.getElementById('canvas'), {\n resize: true,\n useWorker: true,\n})({ particleCount: 200, spread: 200 });\"\n`;\n\nexports[`create-snowpack-app app-template-11ty > build: index.html 1`] = `\n\"\n\n \n \n \n \n \n \n Snowpack App\n \n \n
\n \n \n \n \n \n \n \n \n \n
\n\n\nAbout Page\n \n\"\n`;\n\nexports[`create-snowpack-app app-template-11ty > build: static/index.css 1`] = `\n\"body {\n background: #222;\n color: #eee;\n font-family: Arial, Helvetica, sans-serif;\n text-align: center;\n}\na {\n color: #aaa;\n}\n.banner {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.banner img,\n.banner svg {\n display: block;\n padding: 1.5rem;\n}\n#canvas {\n display: block;\n margin: 0rem auto;\n width: 720px;\n height: 420px;\n}\"\n`;\n\nexports[`create-snowpack-app app-template-blank > build: allFiles 1`] = `\nArray [\n \"dist/index.css\",\n \"dist/index.js\",\n \"favicon.ico\",\n \"index.html\",\n \"logo.svg\",\n \"robots.txt\",\n]\n`;\n\nexports[`create-snowpack-app app-template-blank > build: dist/index.css 1`] = `\n\"body {\n font-size: calc(10px + 2vmin);\n font-family: Arial, Helvetica, sans-serif;\n}\n#img {\n display: block;\n margin: auto;\n height: 128px;\n width: 128px;\n padding: 2rem;\n}\np {\n display: block;\n margin: 1rem auto;\n text-align: center;\n}\n#counter {\n background-color: rgb(46, 94, 130);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n}\na {\n color: rgb(46, 94, 130);\n}\"\n`;\n\nexports[`create-snowpack-app app-template-blank > build: dist/index.js 1`] = `\n\"const counter = document.querySelector('#counter');\nlet seconds = 0;\nsetInterval(() => {\n seconds += 1;\n counter.textContent = seconds;\n}, 1000);\"\n`;\n\nexports[`create-snowpack-app app-template-blank > build: index.html 1`] = `\n\"\n\n \n \n \n \n \n \n \n Snowpack App\n \n \n \n

Page has been open for 0 seconds.

\n

\n \n Learn web development\n \n

\n \n \n \n\"\n`;\n\nexports[`create-snowpack-app app-template-blank-typescript > build: allFiles 1`] = `\nArray [\n \"dist/index.css\",\n \"dist/index.js\",\n \"favicon.ico\",\n \"index.html\",\n \"logo.svg\",\n \"robots.txt\",\n]\n`;\n\nexports[`create-snowpack-app app-template-blank-typescript > build: dist/index.css 1`] = `\n\"body {\n font-size: calc(10px + 2vmin);\n font-family: Arial, Helvetica, sans-serif;\n}\n#img {\n display: block;\n margin: auto;\n height: 128px;\n width: 128px;\n padding: 2rem;\n}\np {\n display: block;\n margin: 1rem auto;\n text-align: center;\n}\n#counter {\n background-color: rgb(46, 94, 130);\n color: white;\n padding: 4px 8px;\n border-radius: 4px;\n}\na {\n color: rgb(46, 94, 130);\n}\"\n`;\n\nexports[`create-snowpack-app app-template-blank-typescript > build: dist/index.js 1`] = `\n\"const counter = document.querySelector(\\\\\"#counter\\\\\");\nlet seconds = 0;\nsetInterval(() => {\n seconds += 1;\n counter.textContent = seconds.toString();\n}, 1e3);\nexport {};\"\n`;\n\nexports[`create-snowpack-app app-template-blank-typescript > build: index.html 1`] = `\n\"\n\n \n \n \n \n \n \n \n Snowpack App\n \n \n \n

Page has been open for 0 seconds.

\n

\n \n Learn web development\n \n

\n \n \n \n\"\n`;\n\nexports[`create-snowpack-app app-template-lit-element > build: _snowpack/pkg/import-map.json 1`] = `\n\"{\n \\\\\"imports\\\\\": {\n \\\\\"lit-element\\\\\": \\\\\"./lit-element.js\\\\\"\n }\n}\"\n`;\n\nexports[`create-snowpack-app app-template-lit-element > build: _snowpack/pkg/lit-element.js 1`] = `\n\"/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n/**\n * True if the custom elements polyfill is in use.\n */\nconst isCEPolyfill = typeof window !== 'undefined' && window.customElements != null && window.customElements.polyfillWrapFlushCallback !== undefined;\n/**\n * Removes nodes, starting from \\`start\\` (inclusive) to \\`end\\` (exclusive), from\n * \\`container\\`.\n */\nconst removeNodes = (container, start, end = null) => {\n while (start !== end) {\n const n = start.nextSibling;\n container.removeChild(start);\n start = n;\n }\n};\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n/**\n * An expression marker with embedded unique key to avoid collision with\n * possible text in templates.\n */\nconst marker = \\`{{lit-\\${String(Math.random()).slice(2)}}}\\`;\n/**\n * An expression marker used text-positions, multi-binding attributes, and\n * attributes with markup-like text values.\n */\nconst nodeMarker = \\`\\`;\nconst markerRegex = new RegExp(\\`\\${marker}|\\${nodeMarker}\\`);\n/**\n * Suffix appended to all bound attribute names.\n */\nconst boundAttributeSuffix = '$lit$';\n/**\n * An updatable Template that tracks the location of dynamic parts.\n */\nclass Template {\n constructor(result, element) {\n this.parts = [];\n this.element = element;\n const nodesToRemove = [];\n const stack = []; // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null\n const walker = document.createTreeWalker(element.content, 133\n , null, false); // Keeps track of the last index associated with a part. We try to delete\n // unnecessary nodes, but we never want to associate two different parts\n // to the same index. They must have a constant node between.\n let lastPartIndex = 0;\n let index = -1;\n let partIndex = 0;\n const {\n strings,\n values: {\n length\n }\n } = result;\n while (partIndex < length) {\n const node = walker.nextNode();\n if (node === null) {\n // We've exhausted the content inside a nested template element.\n // Because we still have parts (the outer for-loop), we know:\n // - There is a template in the stack\n // - The walker will find a nextNode outside the template\n walker.currentNode = stack.pop();\n continue;\n }\n index++;\n if (node.nodeType === 1\n ) {\n if (node.hasAttributes()) {\n const attributes = node.attributes;\n const {\n length\n } = attributes; // Per\n // https://developer.mozilla.org/en-US/docs/Web/API/NamedNodeMap,\n // attributes are not guaranteed to be returned in document order.\n // In particular, Edge/IE can return them out of order, so we cannot\n // assume a correspondence between part index and attribute index.\n let count = 0;\n for (let i = 0; i < length; i++) {\n if (endsWith(attributes[i].name, boundAttributeSuffix)) {\n count++;\n }\n }\n while (count-- > 0) {\n // Get the template literal section leading up to the first\n // expression in this attribute\n const stringForPart = strings[partIndex]; // Find the attribute name\n const name = lastAttributeNameRegex.exec(stringForPart)[2]; // Find the corresponding attribute\n // All bound attributes have had a suffix added in\n // TemplateResult#getHTML to opt out of special attribute\n // handling. To look up the attribute value we also need to add\n // the suffix.\n const attributeLookupName = name.toLowerCase() + boundAttributeSuffix;\n const attributeValue = node.getAttribute(attributeLookupName);\n node.removeAttribute(attributeLookupName);\n const statics = attributeValue.split(markerRegex);\n this.parts.push({\n type: 'attribute',\n index,\n name,\n strings: statics\n });\n partIndex += statics.length - 1;\n }\n }\n if (node.tagName === 'TEMPLATE') {\n stack.push(node);\n walker.currentNode = node.content;\n }\n } else if (node.nodeType === 3\n ) {\n const data = node.data;\n if (data.indexOf(marker) >= 0) {\n const parent = node.parentNode;\n const strings = data.split(markerRegex);\n const lastIndex = strings.length - 1; // Generate a new text node for each literal section\n // These nodes are also used as the markers for node parts\n for (let i = 0; i < lastIndex; i++) {\n let insert;\n let s = strings[i];\n if (s === '') {\n insert = createMarker();\n } else {\n const match = lastAttributeNameRegex.exec(s);\n if (match !== null && endsWith(match[2], boundAttributeSuffix)) {\n s = s.slice(0, match.index) + match[1] + match[2].slice(0, -boundAttributeSuffix.length) + match[3];\n }\n insert = document.createTextNode(s);\n }\n parent.insertBefore(insert, node);\n this.parts.push({\n type: 'node',\n index: ++index\n });\n } // If there's no text, we must insert a comment to mark our place.\n // Else, we can trust it will stick around after cloning.\n if (strings[lastIndex] === '') {\n parent.insertBefore(createMarker(), node);\n nodesToRemove.push(node);\n } else {\n node.data = strings[lastIndex];\n } // We have a part for each match found\n partIndex += lastIndex;\n }\n } else if (node.nodeType === 8\n ) {\n if (node.data === marker) {\n const parent = node.parentNode; // Add a new marker node to be the startNode of the Part if any of\n // the following are true:\n // * We don't have a previousSibling\n // * The previousSibling is already the start of a previous part\n if (node.previousSibling === null || index === lastPartIndex) {\n index++;\n parent.insertBefore(createMarker(), node);\n }\n lastPartIndex = index;\n this.parts.push({\n type: 'node',\n index\n }); // If we don't have a nextSibling, keep this node so we have an end.\n // Else, we can remove it to save future costs.\n if (node.nextSibling === null) {\n node.data = '';\n } else {\n nodesToRemove.push(node);\n index--;\n }\n partIndex++;\n } else {\n let i = -1;\n while ((i = node.data.indexOf(marker, i + 1)) !== -1) {\n // Comment node has a binding marker inside, make an inactive part\n // The binding won't work, but subsequent bindings will\n // TODO (justinfagnani): consider whether it's even worth it to\n // make bindings in comments work\n this.parts.push({\n type: 'node',\n index: -1\n });\n partIndex++;\n }\n }\n }\n } // Remove text binding nodes after the walk to not disturb the TreeWalker\n for (const n of nodesToRemove) {\n n.parentNode.removeChild(n);\n }\n }\n}\nconst endsWith = (str, suffix) => {\n const index = str.length - suffix.length;\n return index >= 0 && str.slice(index) === suffix;\n};\nconst isTemplatePartActive = part => part.index !== -1; // Allows \\`document.createComment('')\\` to be renamed for a\n// small manual size-savings.\nconst createMarker = () => document.createComment('');\n/**\n * This regex extracts the attribute name preceding an attribute-position\n * expression. It does this by matching the syntax allowed for attributes\n * against the string literal directly preceding the expression, assuming that\n * the expression is in an attribute-value position.\n *\n * See attributes in the HTML spec:\n * https://www.w3.org/TR/html5/syntax.html#elements-attributes\n *\n * \\\\\" \\\\\\\\x09\\\\\\\\x0a\\\\\\\\x0c\\\\\\\\x0d\\\\\" are HTML space characters:\n * https://www.w3.org/TR/html5/infrastructure.html#space-characters\n *\n * \\\\\"\\\\\\\\0-\\\\\\\\x1F\\\\\\\\x7F-\\\\\\\\x9F\\\\\" are Unicode control characters, which includes every\n * space character except \\\\\" \\\\\".\n *\n * So an attribute is:\n * * The name: any character except a control character, space character, ('),\n * (\\\\\"), \\\\\">\\\\\", \\\\\"=\\\\\", or \\\\\"/\\\\\"\n * * Followed by zero or more space characters\n * * Followed by \\\\\"=\\\\\"\n * * Followed by zero or more space characters\n * * Followed by:\n * * Any character except space, ('), (\\\\\"), \\\\\"<\\\\\", \\\\\">\\\\\", \\\\\"=\\\\\", (\\`), or\n * * (\\\\\") then any non-(\\\\\"), or\n * * (') then any non-(')\n */\nconst lastAttributeNameRegex = // eslint-disable-next-line no-control-regex\n/([ \\\\\\\\x09\\\\\\\\x0a\\\\\\\\x0c\\\\\\\\x0d])([^\\\\\\\\0-\\\\\\\\x1F\\\\\\\\x7F-\\\\\\\\x9F \\\\\"'>=/]+)([ \\\\\\\\x09\\\\\\\\x0a\\\\\\\\x0c\\\\\\\\x0d]*=[ \\\\\\\\x09\\\\\\\\x0a\\\\\\\\x0c\\\\\\\\x0d]*(?:[^ \\\\\\\\x09\\\\\\\\x0a\\\\\\\\x0c\\\\\\\\x0d\\\\\"'\\`<>=]*|\\\\\"[^\\\\\"]*|'[^']*))$/;\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\nconst walkerNodeFilter = 133\n;\n/**\n * Removes the list of nodes from a Template safely. In addition to removing\n * nodes from the Template, the Template part indices are updated to match\n * the mutated Template DOM.\n *\n * As the template is walked the removal state is tracked and\n * part indices are adjusted as needed.\n *\n * div\n * div#1 (remove) <-- start removing (removing node is div#1)\n * div\n * div#2 (remove) <-- continue removing (removing node is still div#1)\n * div\n * div <-- stop removing since previous sibling is the removing node (div#1,\n * removed 4 nodes)\n */\nfunction removeNodesFromTemplate(template, nodesToRemove) {\n const {\n element: {\n content\n },\n parts\n } = template;\n const walker = document.createTreeWalker(content, walkerNodeFilter, null, false);\n let partIndex = nextActiveIndexInTemplateParts(parts);\n let part = parts[partIndex];\n let nodeIndex = -1;\n let removeCount = 0;\n const nodesToRemoveInTemplate = [];\n let currentRemovingNode = null;\n while (walker.nextNode()) {\n nodeIndex++;\n const node = walker.currentNode; // End removal if stepped past the removing node\n if (node.previousSibling === currentRemovingNode) {\n currentRemovingNode = null;\n } // A node to remove was found in the template\n if (nodesToRemove.has(node)) {\n nodesToRemoveInTemplate.push(node); // Track node we're removing\n if (currentRemovingNode === null) {\n currentRemovingNode = node;\n }\n } // When removing, increment count by which to adjust subsequent part indices\n if (currentRemovingNode !== null) {\n removeCount++;\n }\n while (part !== undefined && part.index === nodeIndex) {\n // If part is in a removed node deactivate it by setting index to -1 or\n // adjust the index as needed.\n part.index = currentRemovingNode !== null ? -1 : part.index - removeCount; // go to the next active part.\n partIndex = nextActiveIndexInTemplateParts(parts, partIndex);\n part = parts[partIndex];\n }\n }\n nodesToRemoveInTemplate.forEach(n => n.parentNode.removeChild(n));\n}\nconst countNodes = node => {\n let count = node.nodeType === 11\n ? 0 : 1;\n const walker = document.createTreeWalker(node, walkerNodeFilter, null, false);\n while (walker.nextNode()) {\n count++;\n }\n return count;\n};\nconst nextActiveIndexInTemplateParts = (parts, startIndex = -1) => {\n for (let i = startIndex + 1; i < parts.length; i++) {\n const part = parts[i];\n if (isTemplatePartActive(part)) {\n return i;\n }\n }\n return -1;\n};\n/**\n * Inserts the given node into the Template, optionally before the given\n * refNode. In addition to inserting the node into the Template, the Template\n * part indices are updated to match the mutated Template DOM.\n */\nfunction insertNodeIntoTemplate(template, node, refNode = null) {\n const {\n element: {\n content\n },\n parts\n } = template; // If there's no refNode, then put node at end of template.\n // No part indices need to be shifted in this case.\n if (refNode === null || refNode === undefined) {\n content.appendChild(node);\n return;\n }\n const walker = document.createTreeWalker(content, walkerNodeFilter, null, false);\n let partIndex = nextActiveIndexInTemplateParts(parts);\n let insertCount = 0;\n let walkerIndex = -1;\n while (walker.nextNode()) {\n walkerIndex++;\n const walkerNode = walker.currentNode;\n if (walkerNode === refNode) {\n insertCount = countNodes(node);\n refNode.parentNode.insertBefore(node, refNode);\n }\n while (partIndex !== -1 && parts[partIndex].index === walkerIndex) {\n // If we've inserted the node, simply adjust all subsequent parts\n if (insertCount > 0) {\n while (partIndex !== -1) {\n parts[partIndex].index += insertCount;\n partIndex = nextActiveIndexInTemplateParts(parts, partIndex);\n }\n return;\n }\n partIndex = nextActiveIndexInTemplateParts(parts, partIndex);\n }\n }\n}\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\nconst directives = new WeakMap();\nconst isDirective = o => {\n return typeof o === 'function' && directives.has(o);\n};\n/**\n * @license\n * Copyright (c) 2018 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n/**\n * A sentinel value that signals that a value was handled by a directive and\n * should not be written to the DOM.\n */\nconst noChange = {};\n/**\n * A sentinel value that signals a NodePart to fully clear its content.\n */\nconst nothing = {};\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n/**\n * An instance of a \\`Template\\` that can be attached to the DOM and updated\n * with new values.\n */\nclass TemplateInstance {\n constructor(template, processor, options) {\n this.__parts = [];\n this.template = template;\n this.processor = processor;\n this.options = options;\n }\n update(values) {\n let i = 0;\n for (const part of this.__parts) {\n if (part !== undefined) {\n part.setValue(values[i]);\n }\n i++;\n }\n for (const part of this.__parts) {\n if (part !== undefined) {\n part.commit();\n }\n }\n }\n _clone() {\n // There are a number of steps in the lifecycle of a template instance's\n // DOM fragment:\n // 1. Clone - create the instance fragment\n // 2. Adopt - adopt into the main document\n // 3. Process - find part markers and create parts\n // 4. Upgrade - upgrade custom elements\n // 5. Update - set node, attribute, property, etc., values\n // 6. Connect - connect to the document. Optional and outside of this\n // method.\n //\n // We have a few constraints on the ordering of these steps:\n // * We need to upgrade before updating, so that property values will pass\n // through any property setters.\n // * We would like to process before upgrading so that we're sure that the\n // cloned fragment is inert and not disturbed by self-modifying DOM.\n // * We want custom elements to upgrade even in disconnected fragments.\n //\n // Given these constraints, with full custom elements support we would\n // prefer the order: Clone, Process, Adopt, Upgrade, Update, Connect\n //\n // But Safari does not implement CustomElementRegistry#upgrade, so we\n // can not implement that order and still have upgrade-before-update and\n // upgrade disconnected fragments. So we instead sacrifice the\n // process-before-upgrade constraint, since in Custom Elements v1 elements\n // must not modify their light DOM in the constructor. We still have issues\n // when co-existing with CEv0 elements like Polymer 1, and with polyfills\n // that don't strictly adhere to the no-modification rule because shadow\n // DOM, which may be created in the constructor, is emulated by being placed\n // in the light DOM.\n //\n // The resulting order is on native is: Clone, Adopt, Upgrade, Process,\n // Update, Connect. document.importNode() performs Clone, Adopt, and Upgrade\n // in one step.\n //\n // The Custom Elements v1 polyfill supports upgrade(), so the order when\n // polyfilled is the more ideal: Clone, Process, Adopt, Upgrade, Update,\n // Connect.\n const fragment = isCEPolyfill ? this.template.element.content.cloneNode(true) : document.importNode(this.template.element.content, true);\n const stack = [];\n const parts = this.template.parts; // Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null\n const walker = document.createTreeWalker(fragment, 133\n , null, false);\n let partIndex = 0;\n let nodeIndex = 0;\n let part;\n let node = walker.nextNode(); // Loop through all the nodes and parts of a template\n while (partIndex < parts.length) {\n part = parts[partIndex];\n if (!isTemplatePartActive(part)) {\n this.__parts.push(undefined);\n partIndex++;\n continue;\n } // Progress the tree walker until we find our next part's node.\n // Note that multiple parts may share the same node (attribute parts\n // on a single element), so this loop may not run at all.\n while (nodeIndex < part.index) {\n nodeIndex++;\n if (node.nodeName === 'TEMPLATE') {\n stack.push(node);\n walker.currentNode = node.content;\n }\n if ((node = walker.nextNode()) === null) {\n // We've exhausted the content inside a nested template element.\n // Because we still have parts (the outer for-loop), we know:\n // - There is a template in the stack\n // - The walker will find a nextNode outside the template\n walker.currentNode = stack.pop();\n node = walker.nextNode();\n }\n } // We've arrived at our part's node.\n if (part.type === 'node') {\n const part = this.processor.handleTextExpression(this.options);\n part.insertAfterNode(node.previousSibling);\n this.__parts.push(part);\n } else {\n this.__parts.push(...this.processor.handleAttributeExpressions(node, part.name, part.strings, this.options));\n }\n partIndex++;\n }\n if (isCEPolyfill) {\n document.adoptNode(fragment);\n customElements.upgrade(fragment);\n }\n return fragment;\n }\n}\n/**\n * @license\n * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.\n * This code may only be used under the BSD style license found at\n * http://polymer.github.io/LICENSE.txt\n * The complete set of authors may be found at\n * http://polymer.github.io/AUTHORS.txt\n * The complete set of contributors may be found at\n * http://polymer.github.io/CONTRIBUTORS.txt\n * Code distributed by Google as part of the polymer project is also\n * subject to an additional IP rights grant found at\n * http://polymer.github.io/PATENTS.txt\n */\n/**\n * Our TrustedTypePolicy for HTML which is declared using the html template\n * tag function.\n *\n * That HTML is a developer-authored constant, and is parsed with innerHTML\n * before any untrusted expressions have been mixed in. Therefor it is\n * considered safe by construction.\n */\nconst policy = window.trustedTypes && trustedTypes.createPolicy('lit-html', {\n createHTML: s => s\n});\nconst commentMarker = \\` \\${marker} \\`;\n/**\n * The return type of \\`html\\`, which holds a Template and the values from\n * interpolated expressions.\n */\nclass TemplateResult {\n constructor(strings, values, type, processor) {\n this.strings = strings;\n this.values = values;\n this.type = type;\n this.processor = processor;\n }\n /**\n * Returns a string of HTML used to create a \\`