Switched from Lit to Stencil

.gitignore

@@ -1,8 +1,12 @@
 node_modules/
+.stencil/
 custom-elements.json
 # Only generated for size check
 my-element.bundled.js
 .turbo
-storybook-static
 .DS_Store
 .env
+
+dist/
+loader/
+storybook-static/

.prettierrc.json

@@ -2,5 +2,5 @@
   "htmlWhitespaceSensitivity": "ignore",
   "semi": false,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "trailingComma": "all"
 }

.storybook/main.js

@@ -1,9 +1,31 @@
-/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+import { join, dirname } from 'path'
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')))
+}
+
+/** @type { import('@storybook/html-vite').StorybookConfig } */
 const config = {
-  framework: { name: '@storybook/web-components-vite' },
-  stories: ['../{src,docs}/**/*.mdx', '../{src,docs}/**/*.stories.js'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  docs: { autodocs: true },
+  stories: [
+    '../{src,docs}/**/*.mdx',
+    '../{src,docs}/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/html-vite'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
 }
 
 export default config

.storybook/preview.js

@@ -1,13 +1,11 @@
-import { setCustomElementsManifest } from '@storybook/web-components'
-import { html } from 'lit'
-import { styleMap } from 'lit/directives/style-map.js'
-import customElementsManifest from '../custom-elements.json'
+import { defineCustomElements } from '../loader'
+import { html } from '../src/utils/html'
 import '../src/theme.css'
 import '../src/theme-typography.css'
 import '../src/styles.css'
 import './preview.css'
 
-setCustomElementsManifest(customElementsManifest)
+defineCustomElements()
 
 const defaultStyles = {
   padding: 'var(--spacing-xl)',
@@ -18,9 +16,16 @@ const preview = {
   decorators: [
     (story, { parameters }) => {
       const { styles = defaultStyles } = parameters
+      console.log({ styles })
+      const style = Object.entries(styles)
+        .map(
+          ([key, value]) => console.log({ key, value }) || `${key}: ${value}`,
+        )
+        .join('; ')
+      console.log({ style })
 
       return html`
-        <div style=${styleMap(styles)}>${story()}</div>
+        <div style="${style}">${story()}</div>
       `
     },
   ],

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## v2.0.0 (January 7, 2024)
+
+- BREAKING: Switched from Lit to Stencil
+- BREAKING: Switched all components to use light DOM, except `<slate-link>`
+- BREAKING: Removed `<slate-badge>` component
+- BREAKING: Removed `<slate-link-block>` component
+- Added `<slate-tag>` component
+
 ## v1.1.1 (December 3, 2023)
 
 - Reduced width of `<slate-app-nav-content>` a bit