@wrnrlr/prelude 0.1.7 → 0.1.8

package/deno.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnrlr/prelude",
-  "version": "0.1.7",
+  "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.7",
+  "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

@@ -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/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/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>