├── .gitignore
├── LICENSE
├── README.md
├── demo
├── .gitignore
├── index.html
├── package.json
├── src
│ └── my-component.webc
└── vite.config.mjs
├── package.json
├── plugin
├── LICENSE
├── README.md
├── index.mjs
└── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
└── turbo.json
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 | .pnp
6 | .pnp.js
7 |
8 | # testing
9 | coverage
10 |
11 | # next.js
12 | .next/
13 | out/
14 | build
15 |
16 | # misc
17 | .DS_Store
18 | *.pem
19 |
20 | # debug
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | .pnpm-debug.log*
25 |
26 | # local env files
27 | .env.local
28 | .env.development.local
29 | .env.test.local
30 | .env.production.local
31 |
32 | # turbo
33 | .turbo
34 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | plugin/LICENSE
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | plugin/README.md
--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite App
8 |
13 |
14 |
15 | Hello
16 |
17 |
18 |
19 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-plugin-webc-demo",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "vite build",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "open-props": "1.4.16"
13 | },
14 | "devDependencies": {
15 | "postcss": "^8.4.18",
16 | "postcss-preset-env": "^7.8.2",
17 | "vite": "^3.1.0",
18 | "vite-plugin-webc": "*"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/demo/src/my-component.webc:
--------------------------------------------------------------------------------
1 | hello world
2 |
3 |
22 |
23 |
26 |
--------------------------------------------------------------------------------
/demo/vite.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import VitePluginWebc from 'vite-plugin-webc';
3 | import postcssPresetEnv from 'postcss-preset-env';
4 |
5 | export default defineConfig({
6 | plugins: [VitePluginWebc()],
7 | css: {
8 | postcss: {
9 | plugins: [postcssPresetEnv({ features: { 'nesting-rules': true } })],
10 | },
11 | },
12 | });
13 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vite-plugin-webc-monorepo",
3 | "version": "0.0.0",
4 | "private": true,
5 | "workspaces": [
6 | "demo",
7 | "plugin"
8 | ],
9 | "scripts": {
10 | "build": "turbo run build",
11 | "preview": "turbo run preview",
12 | "dev": "turbo run dev --parallel"
13 | },
14 | "devDependencies": {
15 | "turbo": "latest"
16 | },
17 | "engines": {
18 | "node": ">=16.0.0"
19 | },
20 | "dependencies": {},
21 | "packageManager": "pnpm@7.11.0"
22 | }
23 |
--------------------------------------------------------------------------------
/plugin/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Mayank
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/plugin/README.md:
--------------------------------------------------------------------------------
1 | # vite-plugin-webc
2 |
3 | A vite plugin for [WebC](https://github.com/11ty/webc).
4 |
5 | 1. Install webc and the plugin:
6 |
7 | ```shell
8 | npm i -D vite-plugin-webc @11ty/webc
9 | ```
10 |
11 | 2. Add the plugin to the vite config:
12 |
13 | ```js
14 | import { defineConfig } from 'vite';
15 | import VitePluginWebc from 'vite-plugin-webc';
16 |
17 | export default defineConfig({
18 | plugins: [VitePluginWebc()],
19 | });
20 | ```
21 |
22 | 3. Define your .webc files anywhere in the `src/` directory and start using them in your html!
23 |
--------------------------------------------------------------------------------
/plugin/index.mjs:
--------------------------------------------------------------------------------
1 | import { WebC } from '@11ty/webc';
2 |
3 | /** @returns {import('vite').Plugin} */
4 | export default function VitePluginWebc() {
5 | const virtualCssId = 'virtual:webc-generated.css';
6 | const virtualJsId = 'virtual:webc-generated.js';
7 |
8 | let externalCss = '';
9 | let externalJs = '';
10 |
11 | return {
12 | name: 'vite-plugin-webc',
13 | enforce: 'pre',
14 | transformIndexHtml: {
15 | enforce: 'pre',
16 | transform: async (code, { server }) => {
17 | // HACK: exit early in prod build, but need a more reliable way
18 | if (!server) return code;
19 |
20 | const webc = new WebC();
21 | webc.setContent(code);
22 | webc.defineComponents('src/**/*.webc');
23 | const { html, components } = await webc.compile();
24 |
25 | return {
26 | html,
27 | // HACK: importing all components so that vite knows to reload the page when they change
28 | tags: [
29 | {
30 | tag: 'script',
31 | attrs: { type: 'module' },
32 | children: components.map((c) => `import '${c}?url';`).join('\n'),
33 | injectTo: 'body',
34 | },
35 | ],
36 | };
37 | },
38 | },
39 | async transform(code, id, options) {
40 | // HACK: exit early in dev server, but need a more reliable way
41 | const isDev = options?.hasOwnProperty('ssr');
42 | if (isDev) return;
43 |
44 | if (!id.endsWith('.html')) return;
45 |
46 | const webc = new WebC();
47 | webc.setBundlerMode(true);
48 |
49 | // HACK: prevent webc from processing unrelated styles and scripts
50 | const _code = code
51 | .replaceAll(' decodeURI(_js)).join('\n');
64 |
65 | html = html.replace(
66 | ' ',
67 | // Vite will automatically externalize these virtual imports into real files
68 | `