{"_id":"@aki77/vite-plugin-preview","_rev":"4-30967ae8d69ea60f6560f4953688541e","name":"@aki77/vite-plugin-preview","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@aki77/vite-plugin-preview","version":"0.1.0","main":"dist/plugin.js","types":"dist/plugin.d.ts","scripts":{"build":"yarn build:css && yarn build:svelte && tsc -m commonjs","build:css":"windicss src/App.svelte --preflight -to assets/windi.css","build:svelte":"yarn vite build"},"dependencies":{"sass":"^1.42.1"},"devDependencies":{"@sveltejs/vite-plugin-svelte":"^1.0.0-next.24","@types/node":"^14","@types/react":"^17.0.24","@types/react-dom":"^17.0.9","react":"^17.0.2","react-dom":"^17.0.2","svelte":"^3.43.0","svelte-preprocess":"^4.9.5","typescript":"^4.4.3","vite":"^2.5.10","vue-template-compiler":"^2.6.14","windicss":"^3.1.7"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","vue":"^2.6.0 || ^3.2.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"vue":{"optional":true}},"gitHead":"81cbaff869c24a77387d37741b68b0359a3ec9fe","description":"![demo](https://i.gyazo.com/c19f905288bde120e192b137a4768747.png)","_id":"@aki77/vite-plugin-preview@0.1.0","_nodeVersion":"14.17.2","_npmVersion":"6.14.13","dist":{"integrity":"sha512-sX5GFnyTI+fArulE3q5PmzaPmV3eQZYLoF4KloV/vfqTb0hx9oKaIwJgnGqdKcW+jeUmmtHT3y1BC93jQuxDlQ==","shasum":"d2001de70f2483d8ecaf0af83c1dc1eb547ea745","tarball":"https://registry.npmjs.org/@aki77/vite-plugin-preview/-/vite-plugin-preview-0.1.0.tgz","fileCount":12,"unpackedSize":28125,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7YcNpxkFZGwL3eIPTRdDtIjBY0r1DYtIRNKcz55yTEAiBGZ/hnT15bvx78zUPmfZaU9OVGmVqLq6ChSXQ0aL0fKw=="}]},"_npmUser":{"name":"aki77","email":"lala.akira+npm@gmail.com"},"directories":{},"maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-preview_0.1.0_1632644527168_0.9945245032990437"},"_hasShrinkwrap":false},"0.1.1":{"name":"@aki77/vite-plugin-preview","version":"0.1.1","main":"dist/plugin.js","types":"dist/plugin.d.ts","scripts":{"build":"yarn build:css && yarn build:svelte && tsc -m commonjs","build:css":"windicss src/App.svelte --preflight -to assets/windi.css","build:svelte":"yarn vite build"},"dependencies":{"sass":"^1.42.1"},"devDependencies":{"@sveltejs/vite-plugin-svelte":"^1.0.0-next.24","@types/node":"^14","@types/react":"^17.0.24","@types/react-dom":"^17.0.9","react":"^17.0.2","react-dom":"^17.0.2","svelte":"^3.43.0","svelte-preprocess":"^4.9.5","typescript":"^4.4.3","vite":"^2.5.10","vue-template-compiler":"^2.6.14","windicss":"^3.1.7"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","vue":"^2.6.0 || ^3.2.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"vue":{"optional":true}},"gitHead":"6a4b20c8755afd11ba8b92e1e348cc5a19347394","description":"![demo](https://i.gyazo.com/c19f905288bde120e192b137a4768747.png)","_id":"@aki77/vite-plugin-preview@0.1.1","_nodeVersion":"14.17.2","_npmVersion":"6.14.13","dist":{"integrity":"sha512-molZqxUhVs5uWcnhF7PO5/rqZMnI/40JtAWHMYbTSGzeKYr3d0Zc5E8VUUV/HQGpQy1HY3Yy5TkRghJXoKUtSQ==","shasum":"76135681bf9debed8b527b459cb3c4b1b605f6a5","tarball":"https://registry.npmjs.org/@aki77/vite-plugin-preview/-/vite-plugin-preview-0.1.1.tgz","fileCount":12,"unpackedSize":29181,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5EVKf61tNbKE1dJhKZZ+rOtCUJ9Y83I0lpePGibYkYQIhANOpLD3J8s/zPHhlkTAgBDgKorQqjPPtG66tO+uGbc/d"}]},"_npmUser":{"name":"aki77","email":"lala.akira+npm@gmail.com"},"directories":{},"maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-preview_0.1.1_1632698229280_0.8394260714594077"},"_hasShrinkwrap":false},"0.1.2":{"name":"@aki77/vite-plugin-preview","version":"0.1.2","description":"Get previews of your components","main":"dist/plugin.js","types":"dist/plugin.d.ts","scripts":{"build":"yarn build:css && yarn build:svelte && tsc -m commonjs","build:css":"windicss src/App.svelte --preflight -to assets/windi.css","build:svelte":"yarn vite build"},"dependencies":{"sass":"^1.42.1"},"devDependencies":{"@sveltejs/vite-plugin-svelte":"^1.0.0-next.24","@types/node":"^14","@types/react":"^17.0.24","@types/react-dom":"^17.0.9","react":"^17.0.2","react-dom":"^17.0.2","svelte":"^3.43.0","svelte-preprocess":"^4.9.5","typescript":"^4.4.3","vite":"^2.5.10","vue-template-compiler":"^2.6.14","windicss":"^3.1.7"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","vue":"^2.6.0 || ^3.2.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"vue":{"optional":true}},"gitHead":"febd21f8bdc0a0e40014325ac04b9bbeb01f5abe","_id":"@aki77/vite-plugin-preview@0.1.2","_nodeVersion":"14.17.2","_npmVersion":"6.14.13","dist":{"integrity":"sha512-IcB/exDYVxKe8nIwjME7nSNn5md1eU1pc+0qy5g8pddgrOodCjy+mije0DkE7y9CiVD9Vi6BR5jcOihUaYbwyw==","shasum":"3546277f5e7721e8c88da3d94bb00bc9742afc1e","tarball":"https://registry.npmjs.org/@aki77/vite-plugin-preview/-/vite-plugin-preview-0.1.2.tgz","fileCount":12,"unpackedSize":28870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhkelaVyBx0q+snV/FvvUWsABm5biXetRXO6q78fpNVAIhANF0ptt6AHSK+AJUlFoVffWmqYo5nF6HtWc8llYFzLZy"}]},"_npmUser":{"name":"aki77","email":"lala.akira+npm@gmail.com"},"directories":{},"maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-preview_0.1.2_1633127512676_0.2377496489986073"},"_hasShrinkwrap":false},"0.2.0":{"name":"@aki77/vite-plugin-preview","version":"0.2.0","description":"Get previews of your components","main":"dist/plugin.js","types":"dist/plugin.d.ts","scripts":{"build":"yarn build:css && yarn build:svelte && tsc -m commonjs","build:css":"windicss src/App.svelte --preflight -to assets/windi.css","build:svelte":"yarn vite build"},"dependencies":{"sass":"^1.42.1"},"devDependencies":{"@sveltejs/vite-plugin-svelte":"^1.0.0-next.24","@types/node":"^14","@types/react":"^17.0.24","@types/react-dom":"^17.0.9","react":"^17.0.2","react-dom":"^17.0.2","svelte":"^3.43.0","svelte-preprocess":"^4.9.5","typescript":"^4.4.3","vite":"^2.5.10","vue-template-compiler":"^2.6.14","windicss":"^3.1.7"},"peerDependencies":{"react":"^17.0.2","react-dom":"^17.0.2","vue":"^2.6.0 || ^3.2.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true},"vue":{"optional":true}},"gitHead":"dfc397cde7f606cc41f511df4aa9ef77bdb9422e","_id":"@aki77/vite-plugin-preview@0.2.0","_nodeVersion":"14.17.2","_npmVersion":"6.14.13","dist":{"integrity":"sha512-+OkTjCFPXYdaZk58Ilt0xd4zu3oyF2Y/7eTRWghKFRbKt14H87fo9QtQw8AWGYWLDJAcYRv5zaYM3J0Ikj/VjA==","shasum":"5b6bf2f34fed457d630a865469f4337100ebbb52","tarball":"https://registry.npmjs.org/@aki77/vite-plugin-preview/-/vite-plugin-preview-0.2.0.tgz","fileCount":13,"unpackedSize":30160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhltZCCRA9TVsSAnZWagAA+TAP/jK6cyP2AKPCvZennGOG\nxiym2oNpXcLsRz5WJ+HOCqp/tVi9ZHZyjD6+PVpKcV1ni13f/4N0LYcqRhli\nax341Roza5Kc0sr7xvX3hv3ITNU/0hRfjNV+7LgmcwzU0TPiFXeNO0ENaDBQ\nT2GHIyjpCaCZ6TyaNQrutkogaCaPj2YXXPTUgoEeHGAngD4VaOzVDdaTuGd8\neUzT+sds3EYO+7keF6CJ8u7GMNLf2Ae8fyz88UqZObA1qtpLxF++vxWmFmip\nZDp+r28l0FrPttoCMeWnYzNQOABKfM2ozAipNskL9cUIvmA2J+RxTraQXpsM\npkkckb7tcfrgIkR657+u6wja5JwH1mhmKUfIPStRgA9ceflbkobVHVfJDN63\niyxjv2iFwslmh3qYXGlrEM1pCmnUOtu6m1GsbTLo91e+wB5lwvDdKr4n2tM7\nl6gGAyJle07uVYpznvVWSbpVeAGRZpNQQlb27IPa3BTy5LMeg4J/1FbR4WZy\n6ek5spbEc8tN5pARLaaJZ2aZCc7Xw5s6FeJnc1WH+xg87v6elLmAEmt2ZmeD\nuPZBh1iYbuhpB0sJLmOBDTlqeHKZuQgK1TiGokAoS01kHb9luLAM/Dy1K6RP\ndMa3G9QNqXrqFmrmJThcdjKllK32sK0cSm8tSAZBPRO+DsJI8BidUQmjka+8\nW742\r\n=L3N3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkX3/dDQP7BXxFzTR+qAAuz14gWbO3LHl+I5lecddIfgIhAMZyJMx1btMzWELJYCevaOUHwNhEW+TQgfG8cJSG0Onu"}]},"_npmUser":{"name":"aki77","email":"lala.akira+npm@gmail.com"},"directories":{},"maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-preview_0.2.0_1637275202236_0.40994644664213964"},"_hasShrinkwrap":false}},"time":{"created":"2021-09-26T08:22:07.133Z","0.1.0":"2021-09-26T08:22:07.585Z","modified":"2022-04-04T12:29:16.876Z","0.1.1":"2021-09-26T23:17:09.627Z","0.1.2":"2021-10-01T22:31:53.055Z","0.2.0":"2021-11-18T22:40:02.489Z"},"maintainers":[{"name":"aki77","email":"lala.akira+npm@gmail.com"}],"description":"Get previews of your components","readme":"# vite-plugin-preview\n\n![demo](https://i.gyazo.com/c19f905288bde120e192b137a4768747.png)\n\n## Installation\n\n```\nyarn add -D @aki77/vite-plugin-preview\n```\n\n```typescript\n// vite.config.ts\nimport { PreviewPlugin } from '@aki77/vite-plugin-preview'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [PreviewPlugin(/*options*/)],\n})\n```\n\n## Usage\n\n```\nyarn vite --open /__preview\n```\n\n## Options Examples\n\n### Chakra UI + Next.js\n\n```typescript\n// vite.config.ts\nimport path from 'path'\nimport { PreviewPlugin } from '@aki77/vite-plugin-preview'\nimport { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\n\nexport default defineConfig({\n  resolve: {\n    alias: [\n      {\n        find: '@/',\n        replacement: `${path.resolve(__dirname, 'src')}/`,\n      },\n    ],\n  },\n  define: {\n    'process.env': {},\n  },\n  plugins: [\n    react(),\n    PreviewPlugin({\n      pattern: './src/**/*.preview.tsx',\n      wrapper: path.resolve(__dirname, '__preview__/Wrapper.tsx'),\n      framework: 'react',\n    }),\n  ],\n})\n```\n\n```typescript\n// __preview__/Wrapper.tsx\nimport { Center, ChakraProvider } from '@chakra-ui/react'\nimport React, { ReactNode, VFC } from 'react'\nimport { chakraTheme } from '../src/chakraTheme'\n\ntype WrapperProps = {\n  children: ReactNode\n}\n\nconst Wrapper: VFC<WrapperProps> = ({ children }) => {\n  return (\n    <ChakraProvider theme={chakraTheme}>\n      <Center p=\"4\">\n        {children}\n      </Center>\n    </ChakraProvider>\n  )\n}\n\nexport default Wrapper\n```\n\n### Vue3\n\n```typescript\n//vite.config.ts\nimport path from 'path'\nimport { PreviewPlugin } from '@aki77/vite-plugin-preview'\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\nexport default defineConfig({\n  resolve: {\n    alias: [\n      {\n        find: '@/',\n        replacement: `${path.resolve(__dirname, 'src')}/`,\n      },\n    ],\n  },\n  plugins: [\n    PreviewPlugin({\n      pattern: './src/**/*.preview.vue',\n      head: '@/previews/head',\n      wrapper: '@/previews/Wrapper.vue',\n      framework: 'vue',\n    }),\n    vue(),\n  ],\n})\n```\n\n```typescript\n// src/previews/head.ts\nimport '@/stylesheets/main.scss'\n```\n\n```vue\n// src/previews/Wrapper.vue\n<template>\n  <div class=\"p-4\">\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nexport default defineComponent({})\n</script>\n```\n\n\n### Vue2\n\n```typescript\n//vite.config.ts\nimport path from 'path'\nimport { PreviewPlugin } from '@aki77/vite-plugin-preview'\nimport { defineConfig } from 'vite'\nimport { createVuePlugin } from 'vite-plugin-vue2'\n\nexport default defineConfig({\n  resolve: {\n    alias: [\n      {\n        find: '@/',\n        replacement: `${path.resolve(__dirname, 'src')}/`,\n      },\n    ],\n  },\n  plugins: [\n    PreviewPlugin({\n      pattern: './src/**/*.preview.vue',\n      head: '@/previews/head',\n      wrapper: '@/previews/Wrapper.vue',\n      framework: 'vue2',\n    }),\n    createVuePlugin(),\n  ],\n})\n```\n\n```typescript\n// src/previews/head.ts\nimport VueCompositionApi from '@vue/composition-api'\nimport Vue from 'vue'\n\nimport '@/stylesheets/main.scss'\n\nVue.use(VueCompositionApi)\n```\n\n```vue\n// src/previews/Wrapper.vue\n<template>\n  <div class=\"p-4\">\n    <slot></slot>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from '@vue/composition-api'\n\nexport default defineComponent({})\n</script>\n```\n","readmeFilename":"README.md"}