{"_id":"@donghaiorz/vite-test-library","_rev":"1-64b8262dd961a93b675e9389007456c8","name":"@donghaiorz/vite-test-library","dist-tags":{"latest":"0.2.2"},"versions":{"0.2.1":{"name":"@donghaiorz/vite-test-library","version":"0.2.1","main":"./dist/vite-test-library.umd.js","module":"./dist/vite-test-library.es.js","style":"./dist/style.css","sideEffects":false,"scripts":{"test":"mocha --recursive","dev":"vite","build":"vite build","lint":"eslint --ignore-path .gitignore --ext .js,.vue .","fix":"npm run lint -- --fix","lint-staged":"lint-staged","yesno":"node -e \"const yesno = require('yesno'); yesno({ question: 'Are you sure you want to continue?' }).then(ok => process.exit(ok ? 0 : 1));\"","release":"test $(git rev-parse --abbrev-ref HEAD) = dev && git pull && npm test && npm run build && npm version $SEMVER && npm run --silent yesno && (git push && git checkout main && git merge dev && git push --follow-tags && git checkout dev) || (git tag -d $(git describe --tags) && git reset --hard HEAD~1)","release:patch":"SEMVER=patch npm run release","release:minor":"SEMVER=minor npm run release","release:major":"SEMVER=major npm run release"},"lint-staged":{"**/*.{js,vue}":["eslint --fix"]},"pre-commit":["lint-staged","test"],"dependencies":{"jskos-tools":"^1.0.17","vue":"^3.1.4"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.5","@vue/compiler-sfc":"^3.1.4","eslint":"^7.30.0","eslint-config-gbv":"^1.0.3","eslint-plugin-vue":"^7.13.0","lint-staged":"^11.0.1","mocha":"^9.0.2","mocha-eslint":"^7.0.0","pre-commit":"^1.2.2","vite":"^2.4.2","yesno":"^0.3.1"},"author":{"name":"Stefan Peters","email":"stefandesu@exo.pm","url":"https://exo.pm"},"license":"MIT","description":"Just testing stuff with Vite.","_id":"@donghaiorz/vite-test-library@0.2.1","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-bEyglo20CZTxAiCE5qdB8uAfOxROUUELPSFJP8rvE3Au0hrfBOJ8cBkgHdttmQVhrTRRu3nWJOPO78DOokDDFw==","shasum":"737ef1203602e2df44c6233d3692db3552334df5","tarball":"https://registry.npmjs.org/@donghaiorz/vite-test-library/-/vite-test-library-0.2.1.tgz","fileCount":11,"unpackedSize":16131,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+5oph9GwSdUCJd3sBjUHA9N5O5XiTswmJ/kaH3NU6xAIhALU+x9b9X3MUt5FITvOcYAidyMnWCx6DbLeHkFYFmPOo"}]},"_npmUser":{"name":"donghaiorz","email":"123131683@qq.com"},"directories":{},"maintainers":[{"name":"donghaiorz","email":"123131683@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-test-library_0.2.1_1713162560031_0.22981434971753378"},"_hasShrinkwrap":false},"0.2.2":{"name":"@donghaiorz/vite-test-library","version":"0.2.2","main":"./dist/vite-test-library.umd.js","module":"./dist/vite-test-library.es.js","style":"./dist/style.css","sideEffects":false,"scripts":{"test":"mocha --recursive","dev":"vite","build":"vite build","lint":"eslint --ignore-path .gitignore --ext .js,.vue .","fix":"npm run lint -- --fix","lint-staged":"lint-staged","yesno":"node -e \"const yesno = require('yesno'); yesno({ question: 'Are you sure you want to continue?' }).then(ok => process.exit(ok ? 0 : 1));\"","release":"test $(git rev-parse --abbrev-ref HEAD) = dev && git pull && npm test && npm run build && npm version $SEMVER && npm run --silent yesno && (git push && git checkout main && git merge dev && git push --follow-tags && git checkout dev) || (git tag -d $(git describe --tags) && git reset --hard HEAD~1)","release:patch":"SEMVER=patch npm run release","release:minor":"SEMVER=minor npm run release","release:major":"SEMVER=major npm run release"},"lint-staged":{"**/*.{js,vue}":["eslint --fix"]},"pre-commit":["lint-staged","test"],"dependencies":{"jskos-tools":"^1.0.17","vue":"3.3.0"},"devDependencies":{"@vitejs/plugin-vue":"^1.2.5","@vue/compiler-sfc":"^3.1.4","eslint":"^7.30.0","eslint-config-gbv":"^1.0.3","eslint-plugin-vue":"^7.13.0","lint-staged":"^11.0.1","mocha":"^9.0.2","mocha-eslint":"^7.0.0","pre-commit":"^1.2.2","vite":"^2.4.2","yesno":"^0.3.1"},"author":{"name":"Stefan Peters","email":"stefandesu@exo.pm","url":"https://exo.pm"},"license":"MIT","description":"Just testing stuff with Vite.","_id":"@donghaiorz/vite-test-library@0.2.2","_nodeVersion":"14.21.3","_npmVersion":"6.14.18","dist":{"integrity":"sha512-p0wK485VbzFlg2sCi1kD0J+ymzgiCzmCDR0RuGP3zYdwj+dfrhwGsLlG1gQh9UDMW56qO+W6wHvkPrxA3kJH7w==","shasum":"a7a89d6c8438694df8e438478437035db70c3e6d","tarball":"https://registry.npmjs.org/@donghaiorz/vite-test-library/-/vite-test-library-0.2.2.tgz","fileCount":11,"unpackedSize":16195,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGsStWcPnA17Rmb4aBl9plXnIosUaYehnLOOly2B/L8QIgXXbBY/Yvv4tfOv9r+2rSKDHoIcJE8nNdDlX3SZ6T8lc="}]},"_npmUser":{"name":"donghaiorz","email":"123131683@qq.com"},"directories":{},"maintainers":[{"name":"donghaiorz","email":"123131683@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-test-library_0.2.2_1713164093005_0.07370454512410451"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-15T06:29:19.886Z","0.2.1":"2024-04-15T06:29:20.175Z","modified":"2024-04-15T06:54:53.364Z","0.2.2":"2024-04-15T06:54:53.198Z"},"maintainers":[{"name":"donghaiorz","email":"123131683@qq.com"}],"description":"Just testing stuff with Vite.","author":{"name":"Stefan Peters","email":"stefandesu@exo.pm","url":"https://exo.pm"},"license":"MIT","readme":"# vite-test-library\n[![Test and build](https://github.com/stefandesu/vite-test-library/actions/workflows/test-and-build.yml/badge.svg)](https://github.com/stefandesu/vite-test-library/actions/workflows/test-and-build.yml)\n[![GitHub package version](https://img.shields.io/github/package-json/v/stefandesu/vite-test-library.svg?label=version)](https://github.com/stefandesu/vite-test-library)\n[![NPM package name](https://img.shields.io/badge/npm-@stefandesu/vite--test--library-blue.svg)](https://www.npmjs.com/package/@stefandesu/vite-test-library)\n[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg)](https://github.com/RichardLitt/standard-readme)\n\n> Using [Vite](https://vitejs.dev) for creating Vue 3 component libraries.\n\n## Table of Contents <!-- omit in toc -->\n- [Background](#background)\n- [To-Dos for adjusting to your project](#to-dos-for-adjusting-to-your-project)\n- [Development](#development)\n- [Using the library](#using-the-library)\n  - [Node](#node)\n  - [Browser](#browser)\n- [Note about external dependencies](#note-about-external-dependencies)\n- [Notes about building a Vue 3 application with Vite](#notes-about-building-a-vue-3-application-with-vite)\n  - [Legacy browser support](#legacy-browser-support)\n  - [Base path](#base-path)\n  - [Defining environment variables](#defining-environment-variables)\n- [Publish](#publish)\n- [License](#license)\n\n## Background\nWe need to create some Vue 3 component libraries and I wanted to use Vite for this since it offers a great developer experience. A fast hot-reloading dev server as well as fast builds are already included, making it the obvious choice. However, creating a component library with it wasn't as easy as I had hoped. I had trouble in particular with it being tree-shakable. I'm still not sure whether I'm doing things correctly, but they seem to be working as expected.\n\nSome requirements:\n- Use Vite for development and builds.\n- Offer browser builds.\n- Allow it to be tree-shakable when used as a dependency in another project. (This means that only the code that is really used is going to be included in a build.)\n- Add other developer tools that we are using (ESLint via [eslint-config-gbv](https://github.com/gbv/eslint-config-gbv), testing, etc.).\n\nTo-dos:\n- [x] Add pre-commit rules\n- [ ] Add testing\n  - See [here](https://v3.vuejs.org/guide/testing.html#introduction) for Vue-specific testing\n- [x] Add dev branch and adjust release script accordingly\n- [ ] Extend README\n- [x] Add GitHub workflows for tests, building, and releases (GitHub + npm)\n- [ ] Consider adding JSDoc for documentation\n- [ ] Consider adding [TypeScript declaration files](https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) (we might be able to generate these from JSDoc tags after we added them)\n- [ ] Figure out why built library does not work in https://observablehq.com\n\n## To-Dos for adjusting to your project\n- Copy this repo: `npx degit https://github.com/stefandesu/vite-test-library.git your-library-name`\n- Update GitHub release workflow: `sed -i '' 's/vite-test-library/your-library-name/g' .github/workflows/release.yml`\n- Update package.json:\n  - `sed -i '' 's/vite-test-library/your-library-name/g' package.json`\n  - Also adjust name (namespace), version, author, description\n- Adjust package name in `vite.config.js`\n- Adjust README\n  - Badges\n  - ...\n- Adjust license if necessary\n- Create Git repository: `git init -b main`\n- Add remote and push repo to GitHub\n  - ...\n- Add `NPM_TOKEN` secret to GitHub project (Settings - Secrets - New repository secrets)\n- Create a dev branch and push it to GitHub:\n  - `git checkout -b dev`\n  - `git push -u origin dev`\n- ...\n\n## Development\n```bash\ngit clone https://github.com/stefandesu/vite-test-library.git\ncd vite-test-library\nnpm install\nnpm run dev # for Vite dev server\nnpm run build # for Vite build\n```\n\n## Using the library\n\n### Node\n\n1\\. Add the library to your Vue project:\n```bash\nnpm install @stefandesu/vite-test-library\n```\n\n2a. Add all components globally (in `src/main.js` for your project):\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nimport * as ViteTestLibrary from \"@stefandesu/vite-test-library\"\napp.use(ViteTestLibrary)\n\n// Import stylesheet\nimport \"@stefandesu/vite-test-library/dist/style.css\"\n\napp.mount('#app')\n```\n\n2b. Add individual components globally (tree-shakable):\n```js\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\nimport { Bold } from \"@stefandesu/vite-test-library\"\napp.use(Bold)\n\n// Import stylesheet\nimport \"@stefandesu/vite-test-library/dist/style.css\"\n\napp.mount('#app')\n```\n\n2c. Add individual components where needed (e.g. in some SFC, tree-shakable):\n```js\nimport { defineComponent } from \"vue\"\nimport { Bold } from \"@stefandesu/vite-test-library\"\n// Import stylesheet\nimport \"@stefandesu/vite-test-library/dist/style.css\"\n\nexport default defineComponent({\n  // ...\n  components: {\n    Bold,\n  },\n  // ...\n})\n```\n\n### Browser\nThe library can be used in the browser, for example via jsDelivr.\n\n[![](https://data.jsdelivr.com/v1/package/npm/@stefandesu/vite-test-library/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@stefandesu/vite-test-library)\n\nFully working HTML example:\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vue App</title>\n    <!-- Our library's stylesheet here (adjust version if necessary) -->\n    <link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@stefandesu/vite-test-library@0.2/dist/style.css\">\n  </head>\n  <body>\n    <div id=\"app\">\n      <Bold>\n        Test bold\n      </Bold>\n      <Italic>\n        Test italic\n      </Italic>\n    </div>\n    <!-- Vue 3 production build -->\n    <script src=\"https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js\"></script>\n    <!-- Our library (adjust version if necessary) -->\n    <script src=\"https://cdn.jsdelivr.net/npm/@stefandesu/vite-test-library@0.2/dist/vite-test-library.umd.min.js\"></script>\n    <script>\n      // Here, we are creating an empty Vue app and include the library as a plugin.\n      Vue.createApp({}).use(ViteTestLibrary).mount(\"#app\")\n    </script>\n  </body>\n</html>\n```\n\n## Note about external dependencies\nAs an example, a component `ItemName` was added to this repository that depends on [jskos-tools](https://github.com/gbv/jskos-tools). However, jskos-tools is not part of the build, which means that it must be installed via npm or included via the `<script>` tag.\n\nThe nice thing about this is that if that particular component is not used or needed, it is not necessary to install/include jskos-tools.\n\n## Notes about building a Vue 3 application with Vite\n\n### Legacy browser support\nBy default, [only modern browsers are supported by Vite's builds](https://vitejs.dev/guide/build.html#browser-compatibility). In most cases, legacy browsers (which does **not** mean IE11, but rather older versions of Firefox and Chrome) should be supported as well. It is recommended to use [@vitejs/plugin-legacy](https://github.com/vitejs/vite/tree/main/packages/plugin-legacy) for this.\n\n### Base path\nIn many cases, applications will not be hosted under the root base path (`/`). In those cases, it is necessary to define the `base` option in `vite.config.js`, or provide it as an argument for the build command. See also: [Vite Docs: Public Base Path](https://vitejs.dev/guide/build.html#public-base-path)\n\n### Defining environment variables\nSome packages use the `process.browser` variable to determine whether the code is run in the browser or in Node.js. Vite's build does not define this variable by default. If necessary, it can be defined in `vite.config.js` like this:\n\n```js\nexport default defineConfig({\n  // ...\n  define: {\n    \"process.browser\": true,\n  },\n})\n```\n\nFor a detailed example that also includes other `process.env` variables, see [the `vite.config.js` in coli-ana](https://github.com/gbv/coli-ana/blob/main/vite.config.js).\n\n## Publish\nPlease work on the `dev` branch during development (or better yet, develop in a feature branch and merge into `dev` when ready).\n\nWhen a new release is ready (i.e. the features are finished, merged into `dev`, and all tests succeed), run the included release script (replace \"patch\" with \"minor\" or \"major\" if necessary):\n\n```bash\nnpm run release:patch\n```\n\nThis will:\n- Check that we are on `dev`\n- Run tests and build to make sure everything works\n- Make sure `dev` is up-to-date\n- Run `npm version patch` (or \"minor\"/\"major\")\n- Push changes to `dev`\n- Switch to `main`\n- Merge changes from `dev`\n- Push `main` with tags\n- Switch back to `dev`\n\nAfter running this, GitHub Actions will **automatically publish the new version to npm**. It will also create a new GitHub Release draft. Please **edit and publish the release draft manually**.\n\n## License\nMIT Copyright (c) 2021 Stefan です\n","readmeFilename":"README.md"}