diff --git a/demo/lit/.gitignore b/demo/lit/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/demo/lit/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/demo/lit/.storybook/main.ts b/demo/lit/.storybook/main.ts new file mode 100644 index 0000000..65eef53 --- /dev/null +++ b/demo/lit/.storybook/main.ts @@ -0,0 +1,27 @@ +import type { StorybookConfig } from "@storybook/web-components-vite"; +import { mergeConfig } from "vite"; + +import autoStoryGenerator from "@takuma-ru/auto-story-generator"; + +const config: StorybookConfig = { + stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], + addons: ["@storybook/addon-links", "@storybook/addon-essentials"], + framework: { + name: "@storybook/web-components-vite", + options: {}, + }, + docs: { + autodocs: "tag", + }, + viteFinal: (config) => { + return mergeConfig(config, { + plugins: [ + autoStoryGenerator.vite({ + preset: "lit", + imports: ["**/src/components/**/*.ce.ts"], + }), + ], + }); + }, +}; +export default config; diff --git a/demo/lit/.storybook/preview.ts b/demo/lit/.storybook/preview.ts new file mode 100644 index 0000000..cce8b59 --- /dev/null +++ b/demo/lit/.storybook/preview.ts @@ -0,0 +1,15 @@ +import type { Preview } from "@storybook/web-components"; + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview; diff --git a/demo/lit/index.html b/demo/lit/index.html new file mode 100644 index 0000000..283e961 --- /dev/null +++ b/demo/lit/index.html @@ -0,0 +1,16 @@ + + + + + + + Vite + Lit + TS + + + + + +

Vite + Lit

+ + + diff --git a/demo/lit/package.json b/demo/lit/package.json new file mode 100644 index 0000000..e02996f --- /dev/null +++ b/demo/lit/package.json @@ -0,0 +1,29 @@ +{ + "name": "lit", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "sb:dev": "storybook dev -p 6006 --no-open", + "sb:build": "storybook build" + }, + "dependencies": { + "@takuma-ru/auto-story-generator": "workspace:^", + "lit": "^3.1.0" + }, + "devDependencies": { + "@storybook/addon-essentials": "^7.6.12", + "@storybook/addon-links": "^7.6.12", + "@storybook/blocks": "^7.6.12", + "@storybook/web-components": "^7.6.12", + "@storybook/web-components-vite": "^7.6.12", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "storybook": "^7.6.12", + "typescript": "^5.2.2", + "vite": "^5.0.8" + } +} diff --git a/demo/lit/public/vite.svg b/demo/lit/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/demo/lit/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/demo/lit/src/assets/lit.svg b/demo/lit/src/assets/lit.svg new file mode 100644 index 0000000..4a9c1fe --- /dev/null +++ b/demo/lit/src/assets/lit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/demo/lit/src/components/ce-test-a/ce-test-a.ce.ts b/demo/lit/src/components/ce-test-a/ce-test-a.ce.ts new file mode 100644 index 0000000..98554d9 --- /dev/null +++ b/demo/lit/src/components/ce-test-a/ce-test-a.ce.ts @@ -0,0 +1,16 @@ +import { LitElement, html } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +export type CeTestAProps = { + propA: string; +}; + +@customElement("vum-button") +export class CeTestA extends LitElement { + @property({ attribute: "prop-a", type: String }) + propA: CeTestAProps["propA"] = "default value"; + + render() { + return html`
${this.propA}
`; + } +} diff --git a/demo/lit/src/components/ce-test-a/ce-test-a.stories.ts b/demo/lit/src/components/ce-test-a/ce-test-a.stories.ts new file mode 100644 index 0000000..fe6dc93 --- /dev/null +++ b/demo/lit/src/components/ce-test-a/ce-test-a.stories.ts @@ -0,0 +1,23 @@ +import { html } from "lit"; + +import type { Meta, StoryObj } from "@storybook/web-components"; + +import { CeTestA, CeTestAProps } from "../ce-test-a/ce-test-a.ce"; + +const meta: Meta = { + title: "components/ce-test-a", + tags: ["autodocs"], + render: (args) => { + new CeTestA(); + + return html`ce-test-a`; + }, + args: { propA: undefined }, + argTypes: { propA: { control: "text" } }, +}; + +export default meta; + +export type CeTestAStory = StoryObj; + +export const Primary: CeTestAStory = {}; diff --git a/demo/lit/src/components/ce-test-b/ce-test-b.ce.ts b/demo/lit/src/components/ce-test-b/ce-test-b.ce.ts new file mode 100644 index 0000000..e69de29 diff --git a/demo/lit/src/index.css b/demo/lit/src/index.css new file mode 100644 index 0000000..a86963e --- /dev/null +++ b/demo/lit/src/index.css @@ -0,0 +1,38 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } +} diff --git a/demo/lit/src/my-element.ts b/demo/lit/src/my-element.ts new file mode 100644 index 0000000..88b188f --- /dev/null +++ b/demo/lit/src/my-element.ts @@ -0,0 +1,127 @@ +import { LitElement, css, html } from 'lit' +import { customElement, property } from 'lit/decorators.js' +import litLogo from './assets/lit.svg' +import viteLogo from '/vite.svg' + +/** + * An example element. + * + * @slot - This element has a slot + * @csspart button - The button + */ +@customElement('my-element') +export class MyElement extends LitElement { + /** + * Copy for the read the docs hint. + */ + @property() + docsHint = 'Click on the Vite and Lit logos to learn more' + + /** + * The number of times the button has been clicked. + */ + @property({ type: Number }) + count = 0 + + render() { + return html` +
+ + + + + + +
+ +
+ +
+

${this.docsHint}

+ ` + } + + private _onClick() { + this.count++ + } + + static styles = css` + :host { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; + } + + .logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; + } + .logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); + } + .logo.lit:hover { + filter: drop-shadow(0 0 2em #325cffaa); + } + + .card { + padding: 2em; + } + + .read-the-docs { + color: #888; + } + + ::slotted(h1) { + font-size: 3.2em; + line-height: 1.1; + } + + a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; + } + a:hover { + color: #535bf2; + } + + button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; + } + button:hover { + border-color: #646cff; + } + button:focus, + button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; + } + + @media (prefers-color-scheme: light) { + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } + } + ` +} + +declare global { + interface HTMLElementTagNameMap { + 'my-element': MyElement + } +} diff --git a/demo/lit/src/vite-env.d.ts b/demo/lit/src/vite-env.d.ts new file mode 100644 index 0000000..11f02fe --- /dev/null +++ b/demo/lit/src/vite-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/demo/lit/tsconfig.json b/demo/lit/tsconfig.json new file mode 100644 index 0000000..69e31ac --- /dev/null +++ b/demo/lit/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "experimentalDecorators": true, + "useDefineForClassFields": false, + "module": "ESNext", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "skipLibCheck": true, + + /* Bundler mode */ + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": ["src"] +} diff --git a/package.json b/package.json index 1f92e94..29fc946 100644 --- a/package.json +++ b/package.json @@ -6,10 +6,11 @@ "asg": "pnpm -F \"@takuma-ru/auto-story-generator\"", "doc": "pnpm -F \"docs\"", "d:react": "pnpm -F \"react\"", - "d:next": "pnpm -F \"next\"" + "d:next": "pnpm -F \"next\"", + "d:lit": "pnpm -F \"lit\"" }, "author": "takuma-ru (https://github.com/takuma-ru/)", - "license": "MIT", + "license": "ISC", "packageManager": "pnpm@8.14.1", "engines": { "npm": "use pnpm please!", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9e5bdc6..771d1cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,46 @@ importers: .: {} + demo/lit: + dependencies: + '@takuma-ru/auto-story-generator': + specifier: workspace:^ + version: link:../../packages/auto-story-generator + lit: + specifier: ^3.1.0 + version: 3.1.2 + devDependencies: + '@storybook/addon-essentials': + specifier: ^7.6.12 + version: 7.6.12(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-links': + specifier: ^7.6.12 + version: 7.6.12(react@18.2.0) + '@storybook/blocks': + specifier: ^7.6.12 + version: 7.6.12(@types/react-dom@18.2.18)(@types/react@18.2.48)(react-dom@18.2.0)(react@18.2.0) + '@storybook/web-components': + specifier: ^7.6.12 + version: 7.6.12(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0) + '@storybook/web-components-vite': + specifier: ^7.6.12 + version: 7.6.12(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12) + react: + specifier: ^18.2.0 + version: 18.2.0 + react-dom: + specifier: ^18.2.0 + version: 18.2.0(react@18.2.0) + storybook: + specifier: ^7.6.12 + version: 7.6.12 + typescript: + specifier: ^5.2.2 + version: 5.3.3 + vite: + specifier: ^5.0.8 + version: 5.0.12 + demo/next: dependencies: next: @@ -2413,6 +2453,14 @@ packages: resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} dev: true + /@lit-labs/ssr-dom-shim@1.2.0: + resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==} + + /@lit/reactive-element@2.0.4: + resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==} + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.0 + /@mdx-js/react@2.3.0(react@18.2.0): resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==} peerDependencies: @@ -3718,6 +3766,44 @@ packages: - supports-color dev: true + /@storybook/builder-vite@7.6.12(typescript@5.3.3)(vite@5.0.12): + resolution: {integrity: sha512-VJIn+XYVVhdJHHMEtYDnEyQQU4fRupugSFpP9XLYTRYgXPN9PSVey4vI/IyuHcHYINPba39UY2+8PW+5NgShxQ==} + peerDependencies: + '@preact/preset-vite': '*' + typescript: '>= 4.3.x' + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 + vite-plugin-glimmerx: '*' + peerDependenciesMeta: + '@preact/preset-vite': + optional: true + typescript: + optional: true + vite-plugin-glimmerx: + optional: true + dependencies: + '@storybook/channels': 7.6.12 + '@storybook/client-logger': 7.6.12 + '@storybook/core-common': 7.6.12 + '@storybook/csf-plugin': 7.6.12 + '@storybook/node-logger': 7.6.12 + '@storybook/preview': 7.6.12 + '@storybook/preview-api': 7.6.12 + '@storybook/types': 7.6.12 + '@types/find-cache-dir': 3.2.1 + browser-assert: 1.2.1 + es-module-lexer: 0.9.3 + express: 4.18.2 + find-cache-dir: 3.3.2 + fs-extra: 11.2.0 + magic-string: 0.30.5 + rollup: 3.29.4 + typescript: 5.3.3 + vite: 5.0.12 + transitivePeerDependencies: + - encoding + - supports-color + dev: true + /@storybook/builder-vite@7.6.9(typescript@5.3.3)(vite@5.0.11): resolution: {integrity: sha512-fiUYd/r+gYWsIwAtOLMyFq4yxmnyCEmyXyPeIKiPR+r76IDJu+12s7CvEXc0jKjHg+KwHWXZT8C9kROU0ivgDA==} peerDependencies: @@ -4902,6 +4988,52 @@ packages: file-system-cache: 2.3.0 dev: true + /@storybook/web-components-vite@7.6.12(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@5.0.12): + resolution: {integrity: sha512-kXDIYYBnbvMWXLOIDebqbxgr0GcNrE4Dd8P3UFgKXS5B298vAm5y/FRfTTcldYKoKFed5O3BksgTJT1AQV67Qg==} + engines: {node: ^14.18 || >=16} + dependencies: + '@storybook/builder-vite': 7.6.12(typescript@5.3.3)(vite@5.0.12) + '@storybook/core-server': 7.6.12 + '@storybook/node-logger': 7.6.12 + '@storybook/web-components': 7.6.12(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0) + magic-string: 0.30.5 + transitivePeerDependencies: + - '@preact/preset-vite' + - bufferutil + - encoding + - lit + - react + - react-dom + - supports-color + - typescript + - utf-8-validate + - vite + - vite-plugin-glimmerx + dev: true + + /@storybook/web-components@7.6.12(lit@3.1.2)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-kPGLXk8iu71XdInOCPeCpZE4uUJYWBveHfSuBYzuJrrR0UPVbpIHGSH/a3CcixSX/01NLPrZ2stc1dfB/hJr6A==} + engines: {node: '>=16.0.0'} + peerDependencies: + lit: ^2.0.0 || ^3.0.0 + dependencies: + '@storybook/client-logger': 7.6.12 + '@storybook/core-client': 7.6.12 + '@storybook/docs-tools': 7.6.12 + '@storybook/global': 5.0.0 + '@storybook/manager-api': 7.6.12(react-dom@18.2.0)(react@18.2.0) + '@storybook/preview-api': 7.6.12 + '@storybook/types': 7.6.12 + lit: 3.1.2 + tiny-invariant: 1.3.1 + ts-dedent: 2.2.0 + transitivePeerDependencies: + - encoding + - react + - react-dom + - supports-color + dev: true + /@swc/core-darwin-arm64@1.3.107: resolution: {integrity: sha512-47tD/5vSXWxPd0j/ZllyQUg4bqalbQTsmqSw0J4dDdS82MWqCAwUErUrAZPRjBkjNQ6Kmrf5rpCWaGTtPw+ngw==} engines: {node: '>=10'} @@ -5382,6 +5514,9 @@ packages: '@types/node': 20.11.5 dev: true + /@types/trusted-types@2.0.7: + resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} + /@types/unist@2.0.10: resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} dev: true @@ -9588,6 +9723,25 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true + /lit-element@4.0.4: + resolution: {integrity: sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==} + dependencies: + '@lit-labs/ssr-dom-shim': 1.2.0 + '@lit/reactive-element': 2.0.4 + lit-html: 3.1.2 + + /lit-html@3.1.2: + resolution: {integrity: sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==} + dependencies: + '@types/trusted-types': 2.0.7 + + /lit@3.1.2: + resolution: {integrity: sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==} + dependencies: + '@lit/reactive-element': 2.0.4 + lit-element: 4.0.4 + lit-html: 3.1.2 + /load-tsconfig@0.2.5: resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}