@wrnrlr/prelude 0.1.6 → 0.1.8

package/deno.json

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

package/package.json

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

package/readme.md

@@ -181,6 +181,27 @@ h(Router,[
 ])
 ```
 
+## Developer Information
+
+Only Deno is required to run the development server.
+
+Install Dependencies
+```sh
+deno install
+```
+
+Start Development server
+
+```sh
+deno task dev
+```
+
+Run tests
+
+```sh
+deno task test
+```
+
 ## Learn More
 
 * [API Reference]()

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,onCleanup} from './reactive.ts'
+export {signal,effect,untrack,batch,memo,root,wrap,fuse,onMount,onCleanup} from './reactive.ts'
 export {nbsp} from './constants.ts'
 export {Show,List} from './controlflow.ts'
 export {runtime, type Runtime} from './runtime.ts'
@@ -12,7 +12,7 @@ export {resource,makeAbortable,abortable} from './resource.js'
 // export {Input,Table} from './components.js'
 // export * from './canvas.js'
 
-const r:Runtime|undefined = /*#__PURE__*/ (typeof window === 'object') ? runtime(window as any) : undefined
+const r:Runtime = /*#__PURE__*/ (typeof window === 'object') ? runtime(window as any) : undefined as any
 
 /** h
 @example Element with a single child
@@ -29,7 +29,7 @@ h(Input,{onInput:e => {}})
 ```
 @group Hyperscript
 */
-const h:HyperScript|undefined = /*#__PURE__*/ r ? hyperscript(r) : undefined
+const h:HyperScript = /*#__PURE__*/ r ? hyperscript(r) : undefined
 
 const render = /*#__PURE__*/ r?.render
 

package/src/reactive.ts

@@ -213,6 +213,14 @@ export function signal<T>(value:T, options?:Options<T>): Getter<T> & Setter<T> {
   return f as unknown as Getter<T> & Setter<T>
 }
 
+export function fuse<T>(getter:Getter<T>, setter:Setter<T>):Getter<T> & Setter<T> {
+  return (...args:T[]) => {
+    if (args.length) return setter(args[0]) as T
+    else return getter()
+  }
+}
+
+
 /**
 @group Reactive Primitive
 */

package/src/ui/accordion.ts

@@ -0,0 +1,8 @@
+import {h} from './h.ts'
+
+export type AccordionProps = {
+}
+
+export function Accordion(props:AccordionProps):undefined|any {
+  return h('.accordion', {},'')
+}

package/src/ui/button.ts

@@ -0,0 +1,9 @@
+import {h} from './h.ts'
+
+export type ButtonProps = {
+  children?: any[]
+}
+
+export function Button(props:AccordionProps) {
+  return h('button', {type: 'button'}, props.children)
+}

package/src/ui/canvas.ts

@@ -0,0 +1,8 @@
+import {h} from './h.ts'
+
+export type CanvasProps = {
+}
+
+export function Canvas(props:CanvasProps) {
+  return h('canvas')
+}

package/src/ui/date.ts

@@ -0,0 +1,8 @@
+import {h} from './h.ts'
+
+export type DateInputProps = {
+}
+
+export function DateInput(props:DateInputProps) {
+  return h('input', {type: 'date'})
+}

package/src/ui/dialog.ts

@@ -0,0 +1,12 @@
+import { effect } from '../reactive.ts'
+import { h } from './h.ts'
+
+export function Dialog(props) {
+  return h('dialog', {
+    ref(r) {
+      r.addEventListener('cancel', ()=>props.show(false))
+      const show = props.modal ? ()=>r.showModal() : ()=>r.show()
+      effect(() => props.show() ? show() : r.close())
+    },
+  }, props.children)
+}

package/src/ui/filter.ts

@@ -0,0 +1,8 @@
+import {h} from './h.ts'
+
+export type FilterProps = {
+}
+
+export function Filter(props:FilterProps) {
+  return h('.filter')
+}

package/src/ui/form.ts

@@ -0,0 +1,7 @@
+import {h} from './h.ts'
+
+export type FormProps = {}
+
+export function Form(props:FormProps) {
+  return h('form', props)
+}

package/src/ui/h.ts

@@ -0,0 +1,48 @@
+import {runtime,type Runtime} from '../runtime.ts'
+import {hyperscript,type HyperScript} from '../hyperscript.ts'
+
+let _fontMetricsCtx:undefined|CanvasRenderingContext2D
+
+export function fontMetrics(font:string, text:string) {
+  if (!_fontMetricsCtx) _fontMetricsCtx = document.createElement('canvas').getContext('2d')
+  _fontMetricsCtx!.font = font;
+  return _fontMetricsCtx!.measureText(text)
+}
+
+export function renderEffect(fn:any):any {
+  return requestAnimationFrame(()=>effect(fn))
+}
+
+const r:Runtime|undefined = /*#__PURE__*/ (typeof window === 'object') ? runtime(window as any) : undefined
+
+/** h
+@example Element with a single child
+```js
+h('h1','Hello World!')
+```
+@example Element with multiple children
+```js
+h('p',['Hello ',h('em','World!')])
+```
+@example Component with event handler
+```js
+h(Input,{onInput:e => {}})
+```
+@group Hyperscript
+*/
+const h:HyperScript|undefined = /*#__PURE__*/ r ? hyperscript(r) : undefined
+
+const render = /*#__PURE__*/ r?.render
+
+// import {signal,wrap} from './reactive.ts'
+
+// /**
+// @group Utils
+// */
+// export function $(a:any,b:any):any {
+//   const t = typeof a
+//   if (t==='function') return wrap(a,b)
+//   else return signal(a,b)
+// }
+
+export {h,render}

package/src/ui/image.ts

@@ -0,0 +1,5 @@
+import {h} from './h.ts'
+
+export function Img(props:ImgProps) {
+  return h('img', props)
+}

package/src/ui/input.ts

@@ -0,0 +1,49 @@
+import {h,fontMetrics,renderEffect} from './h.ts'
+import {type Getter, type Setter} from '../reactive.ts'
+
+export type InputProps = {
+  ref?: (r:HTMLElement)=>void,
+  id?: string,
+  autocomplete?: 'on'|'off',
+  autosize?: (r:HTMLElement, props:any)=>(r:HTMLElement)=>void,
+  class?: string,
+  disabled?: boolean,
+  name?: string,
+  placeholder?: string,
+  onInput?: (e:Event) => void,
+  value: (Getter<string>&Setter<string>)|(Getter<number>&Setter<number>),
+  style?: string,
+  type?: string,
+}
+
+export function Input(props: InputProps): any {
+  props.onInput = props.onInput || ((e:Event) => props.value(e?.target?.value))
+  props.autocomplete = props.autocomplete || 'off'
+  if (props.autosize) props.ref = (r)=>props.autosize(r,props)
+  return h('input', props)
+}
+
+const autosize = (r:HTMLElement, props:any) => {
+  const style = window.getComputedStyle(r)
+  renderEffect(() => {
+    const font = style.getPropertyValue('font')
+    const metrics = fontMetrics(font, props.value().toString())
+    r.style.width = metrics.width + 'px'
+  })
+}
+
+Input.prototype.autosize = autosize
+
+// return h('input', {
+//   ref,
+//   id: props.id,
+//   autocomplete: props.autocomplete || 'off',
+//   class: props.class,
+//   disabled: props.disabled,
+//   onInput: (e:Event) => props.value(e?.target?.value),
+//   name: props.name,
+//   placeholder: props.placeholder,
+//   type: props.type,
+//   style: props.style,
+//   value: props.value,
+// })

package/src/ui/mod.ts

@@ -0,0 +1,12 @@
+export {Accordion, type AccordionProps} from './accordion.ts'
+export {Button, type ButtonProps} from './button.ts'
+export {Canvas} from './canvas.ts'
+export {DateInput} from './date.ts'
+export {Input, type InputProps} from './input.ts'
+export {Form} from './form.ts'
+export {Tab} from './tab.ts'
+export {Filter, type FilterProps} from './filter.ts'
+export {Multiselect, type MultiselectProps} from './multiselect.ts'
+export {Select, type SelectProps} from './select.ts'
+export {Table, type TableProps} from './table.ts'
+export {Upload} from './upload.ts'

package/src/ui/multiselect.ts

@@ -0,0 +1,42 @@
+import {h} from './h.ts'
+import {signal} from "../reactive.ts"
+import {Dialog} from './dialog.ts'
+import {Button} from './button.ts'
+
+export type MultiselectProps = {
+  key: string | ((item:unknown)=>string),
+  label: string | ((item:unknown)=>string),
+  options: string[] | (()=>string[]),
+  disabled: boolean | (()=>boolean),
+  value: string[] | ((value:string[])=>void),
+}
+
+export function Multiselect(props:MultiselectProps) {
+  const showDialog = signal(true)
+  const key = props.key || (f => f)
+  const label = props.label || (f => f)
+  const add = item => props.value([...props.value(), key(item)])
+  const remove = i => _ => props.value(items=>items.toSpliced(i,1))
+  const options = () => (props.options.call ? props.options() : props.options).filter(e=>!props.value().includes(e))
+  const value = (...args:any[]) => (!args.length) ? props.value() : (show(false), add(key(args[0])))
+  const disabled = () => ((props?.disabled?.call ? props.disabled() : props.disabled))
+
+  return h('span.multiselect', [
+    h(List, {each:()=>value}, (e,i) => h('span', [
+      h(Button, {disabled}, ()=>label(e())),
+      h(Button, {disabled, onClick:remove(i())})
+    ])),
+    h('span', {style:'position:relative'}, [
+      h(Button, {
+        onClick: _ => showDialog(b=>!b),
+        class: () => showDialog() ? 'minus' : 'add',
+        disabled: () => disabled() || !options().length,
+      }, '+'),
+      h(Dialog, {show:()=>showDialog}, h(Options, {
+        options: () => options,
+        value: () => value,
+        label
+      }))
+    ])
+  ])
+}

package/src/ui/option.ts

@@ -0,0 +1 @@
+import {h} from './h.ts'

package/src/ui/select.ts

@@ -0,0 +1,28 @@
+import {signal} from '../reactive.ts'
+import { h } from './h.ts'
+import {Dialog} from './dialog.ts'
+import {Button} from './button.ts'
+
+export type SelectProps = {
+  label?: (value:any)=>string,
+  key?: (value:any)=>string,
+  options: any[] | (()=>any[]),
+}
+
+export function Select(props:SelectProps) {
+  const show = signal(false)
+  const label = props.label || (f => f)
+  const key = props.key || (f => f)
+  const placeholder = h('span.placeholder', props.placeholder)
+  const display = () => props?.value?.() ? label(props.value()) : placeholder
+  const value = (...args) => (!args.length) ? props.value() : (show(false), props.value(key(args[0])))
+
+  return h('span.select', {id: props.id, class:props.class, style:'position:relative'}, [
+    h(Button, {onClick:_ => show(b=>!b)}, display),
+    h(Dialog, {show:()=>show}, h(Options, {
+      options: props.options,
+      value: ()=>value,
+      label
+    }))
+  ])
+}

package/src/ui/tab.ts

@@ -0,0 +1,7 @@
+export type TabProps = {
+
+}
+
+export function Tab(props: TabProps) {
+
+}

package/src/ui/table.ts

@@ -0,0 +1,9 @@
+export type TableProps = {
+}
+
+export function Table(props:TableProps) {
+  return h('table',[
+    h('thead',[]),
+    h('tbody',[])
+  ])
+}

package/src/ui/upload.ts

@@ -0,0 +1,7 @@
+import {h} from './h.ts'
+
+export type UploadProps = {}
+
+export function Upload(props:UploadProps) {
+  return h('input', props)
+}

package/test/reactive.js

@@ -1,7 +1,7 @@
 import {assertEquals,assert} from '@std/assert'
 import {describe,it} from '@std/testing/bdd'
 
-import {signal,effect,untrack,batch,memo,context,useContext,root,wrap} from '../src/reactive.ts'
+import {signal,effect,untrack,batch,memo,context,useContext,root,wrap,fuse} from '../src/reactive.ts'
 
 describe('signal', () => {
   const a = signal(1)
@@ -13,6 +13,17 @@ describe('signal', () => {
   assertEquals(a(null),null)
 })
 
+describe('fuse', () => {
+  const n = signal(1)
+  const odd = signal(false)
+  const c = fuse(n, i => (odd(i%2===0), n(i)))
+  assertEquals(c(),1)
+  assertEquals(c(2),2)
+  assertEquals(odd(),true)
+  assertEquals(c(i=>i+1),3)
+  assertEquals(odd(),false)
+})
+
 describe('signal with equals option', () => {
   const n = signal(0,{equals:false})
   let m = 0

package/www/index.html

@@ -14,8 +14,8 @@
     <span class="prelude text-xl">Prelude</span>
   </div>
   <div class="flex items-center gap-5">
-    <a href="/prelude/docs/index.html">Get Started</a>
-    <a href="/prelude/docs/modules.html">API</a>
+    <a href="/prelude/docs/index.html">Documentation</a>
+    <a href="https://github.com/wrnrlr/prelude">Source</a>
     <a class="px-3 py-2 rounded-md bg-green-600 text-white font-weight-500 text-shadow-green shadow" href="/prelude/playground">Playground</a>
   </div>
 </nav>
@@ -25,7 +25,7 @@
   <svg class="py-8" viewBox="0 0 709 709" style="width:300px;--color:var(--neutral-700)"><use xlink:href="./logo.svg#loop"></use></svg>
   <div class="flex column center items-center gap-6">
     <span class="prelude text-6xl">Prelude</span>
-    <span class="text-3xl">A signal-based web library that lets you <br> develop in a familiar functional style</span>
+    <span class="text-3xl">A signal-based UI library that lets you <br> develop in a familiar functional style</span>
     <div class="flex gap-4">
       <a class="px-3 py-2 rounded-md bg-neutral-200 text-xl font-weight-500" href="/prelude/docs/index.html">Get Started</a>
       <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 shadow" href="/prelude/playground">Open Playground</a>
@@ -46,7 +46,7 @@ function Counter() {
   return h('button', {onClick}, n)
 }
 
-render(Counter, window.counter)</code></pre>
+render(Counter, document.body)</code></pre>
     <div class="card">
         <div class="title center">Counter</div>
         <div class="flex justify-center content-center flex-wrap content" id="counter"></div>

package/www/playground.html

@@ -18,6 +18,7 @@ const playing = signal(true)
 const examples = [
   {name:'counter',title:'Counter'},
   {name:'todo',title:'Todo App'},
+  {name:'select',title:'Select'},
   // {name:'admin',title:'Admin'}
 ]
 
@@ -98,7 +99,7 @@ function SrcMenu(props) {
 function Playground() {
   const show = signal(true)
   const src = signal('example')
-  const file = signal('counter')
+  const file = signal('select')
   const local = signal(examples)
   const content = signal('')
   const exs = ()=>examples

package/www/public/example/select.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Select</title>
+
+<script type="module">
+
+import {h,signal,render,memo,List} from 'https://esm.sh/@wrnrlr/prelude'
+
+function Select(props) {
+  const state = memo(() => ({
+    options: props.options(),
+    index: signal(-1)
+  }))
+  return [
+    ()=>state().index,
+    h(List, {each:()=>state().options}, (o,i) =>
+      h('button', {onClick:e=>{state().index(i())}}, o))
+  ]
+}
+
+function App() {
+  const options = signal(['apple', 'banana', 'cherry'])
+  return h(Select, {options:()=>options})
+}
+
+render(App, document.body)
+
+</script>

package/www/ui.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<title>Demo</title>
+
+<script src="./accordion.ts"></script>
+<script src="./button.ts"></script>
+<script src="./canvas.ts"></script>
+<script src="./date.ts"></script>
+<script src="./editable.ts"></script>
+<script src="./filter.ts"></script>
+<script src="./multiselect.ts"></script>
+<script src="./select.ts"></script>
+<script src="./table.ts"></script>
+
+<body>
+<h1>UI</h1>
+<div id="example"></div>
+</body>
+
+<script type="module">
+function App() {}
+
+function AccordionExample() {
+  return h('#accordion', h(Accordion))
+}
+function ButtonExample() {
+  return h('#button', h(Button))
+}
+function CanvasExample() {
+  return h('#canvas', h(Canvas))
+}
+function DateInputExample() {
+  return h('#date', h(DateInput))
+}
+function EditableExample() {
+  return h('#editable', h(Editbale))
+}
+function FilterExample() {
+  return h('#filter', h(Filter))
+}
+function MultiselectExample() {
+  return h('#multiselect', h(Multiselect))
+}
+function SelectExample() {
+  return h('#select', h(Select))
+}
+function TableExample() {
+  return h('#table', h(Table))
+}
+</script>

package/src/canvas.js

@@ -1,114 +0,0 @@
-import {signal,effect,memo,context,useContext, onMount} from './reactive.ts'
-import {$RUNTIME} from './runtime.ts'
-import {h} from './mod.ts'
-
-function CanvasRuntime() {
-  let render,insert,spread,assign,element,text,isChild
-  return {render,insert,spread,assign,element,text,isChild}
-}
-
-const CountCtx = context()
-
-const useCount = () => useContext(CountCtx)
-
- function CountProvider(props) {
-  const count = signal(0)
-  return h(CountCtx, {value:[count]}, props.children)
-}
-
-const Ctx = context()
-const useCanvas = () => useContext(Ctx)
-
-function Canvas(props) {
-  const canvas = signal()
-  const ctx = signal()
-  effect(() => ctx(canvas()?.getContext('2d')))
-  return h(Ctx, {value:[canvas,ctx]},
-    h('canvas', {ref:canvas}, props.children))
-}
-
-function toCanvas(fn) {
-  // fn[$RUNTIME] = CanvasRuntime
-  return fn
-}
-
-const Path = context()
-const usePath = () => useContext(Path)
-
-const Stroke = props => {
-  const ref = signal()
-  const [_,ctx] = useCanvas()
-  const path = signal(null)
-  let children
-  onMount(()=>path(new Path2D()))
-  effect(()=>console.log('Stroke',ref))
-  effect(() => {
-    if (!children) {
-      children = signal()
-    }
-    const kids = children()
-    if (kids) return
-  })
-  return h(Path, {ref, value:[path]}, props?.children)
-}
-
-const Fill = toCanvas(() => {
-  const ctx = useCanvas()
-})
-
-const Line = props => {
-  let value, path, path2d
-  // if (props.value) value = memo(() => [l.x0, l.y0, l.x1, l.y1])
-  if (props.children) value = props.children.call ? props.children : () => props.children
-  if (props.fill || props.stroke) {
-    path2d = new Path2D()
-    // ctx =
-  }
-  if (!value) value = props.value
-  let ctx = path2d ?? usePath()
-  if (!path2d&&ctx) { path = ctx[0] }
-  let render = path2d ?
-    () => {
-      path2d.moveTo(v[0],v[1])
-      path2d.lineTo(v[2],v[3])
-    } : () => {
-      const p = path()
-      p.moveTo(v[0],v[1])
-      p.lineTo(v[2],v[3])
-    }
-  // effect(()=>console.log('Line',path(), value()))
-  // effect(()=>{path().lineTo(...value())})
-  return ops => {
-    console.log('render line')
-    // ops.push()
-    return {
-      shape() {return path2d},
-      render,
-      hit() {},
-      size() {},
-    }
-  }
-}
-
-const Quadratic = toCanvas(q => {
-  const path = usePath()
-  return () => path.quadraticCurveTo(q.x0,q.y0,q.x1,q.y1,q.x2,q.y2)
-})
-
-const Bezier = toCanvas(b => {
-  const path = usePath()
-  return () => path.bezierCurveTo(b.x0,b.y0,b.x1,b.y1,b.x2,b.y2,b.x3,b.y3)
-})
-
-const Arc = toCanvas(a => {
-  const path = usePath()
-  return () => path.arc(a.x, a.y, a.radius, a.startAngle, a.endAngle, a.counterclockwise)
-})
-
-export const Group = {}
-export const Pattern = {}
-export const Text = {}
-export const Rectangle = {}
-export const Image = {}
-
-export {CanvasRuntime,Canvas,Stroke,Fill,Line,Quadratic,Bezier,Arc}