@wrnrlr/prelude 0.1.2 → 0.1.4

package/deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "exports": "./src/mod.ts",
   "compilerOptions": {
     "strict": false,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wrnrlr/prelude",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": "Werner Laurensse",
   "description": "A signal based frontend library with fine-grained reactivity",
   "main": "./src/mod.ts",

package/src/controlflow.ts

@@ -81,7 +81,7 @@ export function List<T>(props:ListProps<T>) {
   }
   const mapper = indexes ? mapperWithIndexes : mapperWithoutIndexes
   return memo(() => {
-    const newItems = list.call ? list() : []
+    const newItems = list.call ? list() : list
     // (newItems)[$TRACK]; // top level tracking
     return untrack(() => {
       const temp = new Array(newItems.length) // new mapped array

package/src/hyperscript.ts

@@ -126,15 +126,17 @@ export function hyperscript(r:Runtime, patch?:any):HyperScript {
       if (tag.id) e.setAttribute('id',tag.id)
       if (tag.classes?.length) {
         const cd = Object.getOwnPropertyDescriptor(props2,'class') ?? ({value:'',writable:true,enumerable:true} as any);
-        (props2 as any).class = (!cd.value.call) ?
-          [...tag.classes,...cd.value.split(' ')].filter(c=>c).join(' ') :
-          () => [...tag.classes,...cd.value().split(' ')].filter(c=>c).join(' ')
+        if (cd.value) {
+          (props2 as any).class = (cd.value?.call) ?
+            () => [...tag.classes,...cd.value().split(' ')].filter(c=>c).join(' ') :
+            [...tag.classes,...cd.value.split(' ')].filter(c=>c).join(' ')
+        }
       }
       if (patch) patch(props2)
       let dynamic = false
       const d = Object.getOwnPropertyDescriptors(props2)
       for (const k in d) {
-        if (k !== "ref" && !k.startsWith('on') && d[k].value?.call) {
+        if (k !== 'ref' && !k.startsWith('on') && d[k].value?.call) {
           dynamicProperty(props2 as any, k)
           dynamic = true
         } else if (d[k].get) dynamic = true

package/src/mod.ts

@@ -1,6 +1,6 @@
 // @ts-nocheck:
 export type {Getter,Setter,Fn,EqualsFn,ErrorFn,RootFn,UpdateFn} from './reactive.ts'
-export {signal,effect,untrack,batch,memo,root,wrap,onMount} from './reactive.ts'
+export {signal,effect,untrack,batch,memo,root,wrap,onMount,onCleanup} from './reactive.ts'
 export {nbsp} from './constants.ts'
 export {Show,List} from './controlflow.ts'
 export {runtime, type Runtime} from './runtime.ts'

package/src/reactive.ts

@@ -327,10 +327,21 @@ export function onMount(fn: () => void) {
   effect(() => untrack(fn));
 }
 
+/** Runs an effect `fn` once before the reactive scope is disposed */
 export function onCleanup(fn: Fn):void {
   OBSERVER?.cleanups.push(fn)
 }
 
+
+/**
+@internal
+@experimental
+*/
+export function autoclean(fn: Fn):Fn {
+  const cleanup = untrack(fn)
+  if (cleanup) OBSERVER?.cleanups.push(fn)
+}
+
 export function onError(fn: ErrorFn):void {
   if ( !OBSERVER ) return
   OBSERVER.contexts[SYMBOL_ERRORS] ||= []

package/www/assets/css/style.css

@@ -5,7 +5,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./assets/fonts/far.woff2") format("woff2"), url("./assets/fonts/far.ttf") format("truetype");
+  src: url("/fonts/far.woff2") format("woff2"), url("/fonts/far.ttf") format("truetype");
 }
 
 @font-face {
@@ -13,7 +13,7 @@
   font-style: normal;
   font-weight: 900;
   font-display: block;
-  src: url("./assets/fonts/fas.woff2") format("woff2"), url("./assets/fonts/fas.ttf") format("truetype");
+  src: url("/fonts/fas.woff2") format("woff2"), url("/fonts/fas.ttf") format("truetype");
 };
 
 @font-face {
@@ -21,7 +21,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("./assets/fonts/fab.woff2") format("woff2"), url("./assets/fonts/fab.ttf") format("truetype");
+  src: url("/fonts/fab.woff2") format("woff2"), url("/fonts/fab.ttf") format("truetype");
 }
 
 .icon {display:flex; display:inline-block}

package/www/demo.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>Demo</title>
+
+<script type="module">
+
+import {h,signal,effect,batch,wrap,render,onMount,List} from '../src/mod.ts'
+
+function Test(props) {
+  return h('h1.red', {class:'yellow'}, 'Hello')
+}
+
+function App() {
+  const fruits = ['apple', 'banana', 'cherry']
+  return h(List, {each:fruits}, f => f)
+}
+
+render(Test, document.body)
+
+</script>
+
+<style>
+.red {
+    background-color: red;
+}
+.yellow {
+    color:yellow;
+}
+</style>

package/www/index.html

@@ -36,7 +36,7 @@
 <section class="flex column items-center py-8 gap-8">
   <h1 class="center text-5xl">Just write JavaScript!</h1>
   <p class="center text-2xl">Instead of JSX, Prelude uses HyperScript,<br>
-      a DSL that lets you defined components in JavaScript.</p>
+      a DSL that lets you define components in JavaScript.</p>
   <div class="flex items-center content-center gap-8">
     <pre><code class="language-js">import {h, signal, render} from 'prelude'
 
@@ -70,7 +70,7 @@ render(Counter, window.counter)</code></pre>
 
 <footer class="flex px-2 py-2 gap-8" style="background-color: var(--neutral-100);">
   <div class="flex column justify-center gap-3">
-    <a href="https://npm.com/@wrnrlr/prelude">NPM</a>
+    <a href="https://www.npmjs.com/package/@wrnrlr/prelude">NPM</a>
     <a href="https://jsr.io/@wrnrlr/prelude">JSR</a>
   </div>
   <div class="flex column justify-center gap-3">

package/www/playground.html

@@ -17,7 +17,7 @@ import {html} from "@codemirror/lang-html"
 const playing = signal(true)
 const examples = [
   {name:'counter',title:'Counter'},
-  {name:'todo',title:'Todo'},
+  {name:'todo',title:'Todo App'},
   // {name:'admin',title:'Admin'}
 ]
 

package/www/public/example/counter.html

@@ -3,7 +3,7 @@
 
 <script type="module">
 
-import {h,signal,render} from '/prelude/bundle.js'
+import {h,signal,render} from 'https://esm.sh/@wrnrlr/prelude'
 
 function Input(props) {
   const onInput = e => props.value(parseInt(e.target.value))

package/www/public/example/todo.html

@@ -3,7 +3,7 @@
 
 <script type="module">
 
-import {h,signal,effect,batch,wrap,render,List} from '/prelude/bundle.js'
+import {h,signal,effect,batch,wrap,render,List} from 'https://esm.sh/@wrnrlr/prelude'
 
 const data = [
   {description:'Buy groceries',done:false},