cem-plugin-better-lit-types - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "cem-plugin-better-lit-types",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "Updates CEM definitions with Typescript Schema",
@@ -28,9 +28,10 @@ "main": "plugin.js",
     "typescript": "^4.9.4",
-    "typescript-json-schema": "^0.55.0"
+    "typescript-json-schema": "^0.55.0",
+    "lit": "^2.6.1",
+    "@open-wc/lit-helpers": "0.5.1"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.6.8",
-    "lit": "^2.6.1",
     "lit-html": "^2.6.1"
   }
 }

README.md

@@ -40,3 +40,3 @@
 import customElements from '../custom-elements.json'
-import { createArgsExtractor } from 'cem-plugin-better-lit-types/storybook'
+import { createArgsExtractor, createLitRenderer } from 'cem-plugin-better-lit-types/storybook'
 ```
@@ -51,2 +51,10 @@
 }
+
+/**
+ * Custom renderer made specially for LitComponents  
+ */
+export const render = createLitRenderer({
+  wrapSlots: true, // Wraps a non-default slot in `<span slot="name">`
+  joinArray: true  // Converts array to a comma-separated string
+})
 ```
@@ -53,0 +61,0 @@ <br /><br /><br />

storybook.js

@@ -0,1 +1,4 @@
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { spread as _spread } from '@open-wc/lit-helpers'
+
 export const getDeclaration = (customElements, tagName) => {
@@ -95,2 +98,45 @@ let _declaration
 
+const getPrefix = (element) => {
+  switch (typeof element){
+    case 'boolean':
+      return '?'
+    case 'object':
+      return '.'
+    default:
+      return ''
+  }
+}
+
+export const spread = (args, { joinArrays }) => {
+  return _spread(Object.keys(args).reduce((acc, key) => {
+    const element = args[key]
+    const isArray = Array.isArray(element)
+    const prefix = !joinArrays && isArray ? '' : getPrefix(element)
+    acc[prefix + key] = !joinArrays && isArray ? element.join(',') : element
+    return acc
+  }, {}))
+}
+
+const getAttrsAndSlots = (props, types, { wrapSlots }) => {
+  let slots = ''
+  const attributes = {}
+  Object.keys(props).forEach(key => {
+    if (!props[key]) return
+    if (types[key]?.table?.category === 'slots') {
+     slots += !wrapSlots || key === 'slot'
+        ? props[key]
+        : `<span slot="${key}">${props[key]}</span>`
+    } else {
+      attributes[key] = props[key]
+    }
+  })
+  return [attributes, slots]
+}
+
+export const createLitRenderer = (settings = {}) = (props, options) => {
+  const tag = unsafeStatic(options.component)
+  const [attributes, slots] = getAttrsAndSlots(props, options.argTypes, settings)
+  return html`<${tag} ${spread(attributes, settings)}>${unsafeStatic(slots)}</${tag}>`
+}
+
 export const createArgsExtractor = manifest => componentName => {
@@ -97,0 +143,0 @@ const declaration = getDeclaration(manifest, componentName)

No alert changes

Improved metrics

Total package byte prevSize

38193

increased by5.69%

Dev dependency count

2

decreased by-33.33%

Lines of code

287

increased by16.67%

Number of lines in readme file

78

increased by11.43%

Worsened metrics

Dependency count

4

increased by100%

No dependency changes