@3sln/deck 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3sln/deck",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A Vite plugin for building scalable, zero-config, Markdown-based component playgrounds and documentation sites.",
   "type": "module",
   "author": "Ray Stubbs",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@3sln/bones": "^0.0.4",
-    "@3sln/dodo": "^0.0.5",
+    "@3sln/dodo": "^0.0.7",
     "@3sln/ngin": "^0.0.1",
     "fs-extra": "^11.3.2",
     "glob": "^10.3.10",

package/src/deck-demo.js

@@ -8,6 +8,33 @@ import {stylesheet as highlightStylesheet, highlight} from './highlight.js';
 
 const {reconcile, h, div, button, pre, code, span, label, input, p} = dodo;
 
+function getLanguageFromPath(path) {
+  if (!path) return 'plaintext';
+  const extension = path.split('.').pop().toLowerCase();
+  switch (extension) {
+    case 'js':
+    case 'mjs':
+      return 'javascript';
+    case 'cljs':
+    case 'clj':
+    case 'cljd':
+      return 'clojure';
+    case 'css':
+      return 'css';
+    case 'html':
+    case 'xml':
+      return 'xml';
+    case 'md':
+      return 'markdown';
+    case 'json':
+      return 'json';
+    case 'sh':
+      return 'bash';
+    default:
+      return 'plaintext';
+  }
+}
+
 const {ObservableSubject, watch, zip, map, dedup} = reactiveFactory({dodo});
 const {withContainerSize} = resizeFactory({dodo});
 
@@ -35,16 +62,9 @@ const propertiesStyle = css`
     gap: 1em;
     margin-bottom: 0.75em;
     width: 250px;
-  }
-  .property-label {
-    flex: 1;
-    text-align: right;
-    font-size: 0.9em;
     color: var(--text-color);
-    opacity: 0.8;
   }
   .property-item input {
-    flex: 2;
     flex-grow: 0;
   }
   input[type='text'] {
@@ -117,21 +137,25 @@ function propertyControl(engine, name) {
           return input({type: 'range', min: options.min, max: options.max, value}).on({
             input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.valueAsNumber)),
           });
-        case 'text':
-          return input({type: 'text', value}).on({
-            input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.value)),
+        case 'checkbox':
+          return input({type: 'checkbox', checked: value}).on({
+            input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.checked)),
           });
         default:
-          return span('Unknown property type');
+          return input({type: options?.type ?? 'text', value}).on({
+            input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.value)),
+          });
       }
     });
-    return div({className: 'property-item'}, label({className: 'property-label'}, name), control);
+    return label({className: 'property-item'}, name, control);
   });
 }
 
 function createEngine(src, canonicalSrc) {
   const abortController = new AbortController();
   const sourceCode$ = new ObservableSubject('Loading...');
+  const textSrc = canonicalSrc || src;
+  const lang = getLanguageFromPath(textSrc);
 
   const demoState = new DemoState({
     activePanelIds: {},
@@ -160,7 +184,7 @@ function createEngine(src, canonicalSrc) {
         reconcile(container, [
           watch(sourceCode$, text =>
             pre(
-              code({className: 'language-javascript'}, text).on({
+              code({className: `language-${lang}`}, text).on({
                 $update: el => {
                   delete el.dataset.highlighted;
                   highlight(el);
@@ -179,6 +203,8 @@ function createEngine(src, canonicalSrc) {
       return;
     }
 
+    propertyPanelCreated = true;
+
     engine.dispatch(
       new CreateOrUpdatePanel({
         name: propsPanelName,
@@ -788,16 +814,22 @@ class DeckDemo extends HTMLElement {
               .key(p.name)
               .opaque()
               .on({
-                $attach: el => {
+                $update: el => {
+                  if (p.render === el._renderer) {
+                    return;
+                  }
+
+                  el._aborter?.abort();
+
                   const div = document.createElement('div');
                   const shadow = div.attachShadow({mode: 'open'});
                   const aborter = new AbortController();
 
-                  el.appendChild(div);
+                  el.replaceChildren(div);
                   el._aborter = aborter;
-                },
-                $update: el => {
-                  p.render(el.firstChild.shadowRoot, el._aborter.signal);
+                  el._renderer = p.render;
+
+                  p.render(shadow, aborter.signal);
                 },
                 $detach: el => {
                   el._aborter?.abort();

package/src/highlight.js

@@ -3,6 +3,7 @@ import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
 import clojure from 'highlight.js/lib/languages/clojure';
 import css from 'highlight.js/lib/languages/css';
+import json from 'highlight.js/lib/languages/json';
 import githubStyle from 'highlight.js/styles/github.css?inline';
 import githubDarkStyle from 'highlight.js/styles/github-dark.css?inline';
 import {css as createSheet} from '@3sln/bones/style';
@@ -11,6 +12,7 @@ hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml); // For HTML
 hljs.registerLanguage('css', css);
 hljs.registerLanguage('clojure', clojure);
+hljs.registerLanguage('json', json);
 
 export const stylesheet = createSheet`
   /* Light Theme */

package/src/main.js

@@ -321,7 +321,6 @@ export async function renderDeck({target, initialCardsData, pinnedCardPaths}) {
 
   const syncNav = () => {
     const {q, c} = history.getQueryParams();
-    console.log('q', q);
     engine.dispatch(new SelectCard(c));
     engine.dispatch(new SetSearchQuery(q));
   };