npm - @wrnrlr/prelude - Versions diffs - 0.0.1 → 0.1.2 - Mend

@wrnrlr/prelude 0.0.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/.github/workflows/publish.yml +46 -5
package/deno.json +18 -9
package/package.json +4 -6
package/readme.md +163 -41
package/src/constants.ts +2 -1
package/src/{controlflow.js → controlflow.ts} +63 -50
package/src/hyperscript.ts +7 -6
package/src/mod.ts +19 -17
package/src/reactive.ts +42 -14
package/src/resource.js +184 -0
package/src/router.js +65 -0
package/src/runtime.ts +9 -8
package/test/hyperscript.js +2 -2
package/test/reactive.js +12 -4
package/www/assets/css/presets.css +504 -0
package/www/assets/css/style.css +90 -0
package/www/assets/fonts/fab.ttf +0 -0
package/www/assets/fonts/fab.woff2 +0 -0
package/www/assets/fonts/far.ttf +0 -0
package/www/assets/fonts/far.woff2 +0 -0
package/www/assets/fonts/fas.ttf +0 -0
package/www/assets/fonts/fas.woff2 +0 -0
package/www/index.html +211 -0
package/www/playground.html +183 -0
package/www/public/example/admin.html +88 -0
package/{example → www/public/example}/counter.html +1 -1
package/{example → www/public/example}/greeting.html +1 -1
package/{example → www/public/example}/show.html +1 -1
package/{example → www/public/example}/todo.html +1 -1
package/www/public/logo.svg +16 -0
package/www/typedoc.json +13 -0
package/www/vite.config.js +106 -0
package/example/paint.html +0 -22
package/index.html +0 -230
package/presets.css +0 -284
package/public/logo.svg +0 -5
package/test/runtime.js +0 -7
package/typedoc.jsonc +0 -31
/package/{public → www/public}/banner.svg +0 -0

package/www/index.html ADDED Viewed

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<head>
+<title>Prelude</title>
+<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
+<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
+<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-EPMJYD1EK8"></script>
+<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-EPMJYD1EK8');</script>
+</head>
+<nav class="flex p-2 justify-between">
+  <div class="flex items-center gap-3">
+    <svg viewBox="0 0 709 709" style="width: 50px; --color:var(--neutral-900)"><use xlink:href="./logo.svg#loop"></use></svg>
+    <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 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>
+<main>
+<section class="flex column items-center py-8">
+  <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>
+    <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>
+    </div>
+  </div>
+</section>
+<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>
+  <div class="flex items-center content-center gap-8">
+    <pre><code class="language-js">import {h, signal, render} from 'prelude'
+function Counter() {
+  const n = signal(1)
+  const onClick = e => n(i => i+1)
+  return h('button', {onClick}, n)
+}
+render(Counter, window.counter)</code></pre>
+    <div class="card">
+        <div class="title center">Counter</div>
+        <div class="flex justify-center content-center flex-wrap content" id="counter"></div>
+    </div>
+  </div>
+  <div class="flex column gap-4 items-start text-xl pl-10">
+    <p>Create a reactive value with <code class="language-js">const n = signal(1)</code>.</p>
+    <p>Define an event handler that increments the signal <code class="language-js">n(i=>i+1)</code>.</p>
+    <p>The function returned from <code class="language-js">h(...)</code> will render a HTML button <br>
+        that handles <code class="language-js">onclick</code> events and displays the counter value.</p>
+    <p>Prelude has fine-grained reactivity and will only update<br>those parts of the DOM that needs to be changed.</p>
+  </div>
+</section>
+<section class="flex column items-center py-8">
+    <p class="center text-2xl">Try in your Browser</p>
+    <div class="flex items-center gap-4 pt-6">
+      <a class="px-3 py-2 rounded-md bg-green-600 text-xl text-white font-weight-500 text-shadow-green shadow" href="/prelude/playground">Open Playground</a>
+    </div>
+</section>
+<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://jsr.io/@wrnrlr/prelude">JSR</a>
+  </div>
+  <div class="flex column justify-center gap-3">
+    <a href="https://x.com/wrnrlr">Twitter</a>
+    <a href="https://discord.gg/N3gPZnhdKV">Discord</a>
+  </div>
+  <div class="flex column-reverse center grow">Some rights reserved &copy; 2024</div>
+  <svg viewBox="0 0 709 709" style="width: 100px; --color:var(--neutral-700)"><use xlink:href="./logo.svg#loop"></use></svg>
+</footer>
+</main>
+<style>
+@import url('./assets/css/style.css');
+html {
+  font-size: 20px;
+  /* font-family: "Noto Sans Warang Citi", sans-serif; */
+  font-weight: 400;
+  font-style: normal;
+  margin: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--neutral-900);
+}
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  flex-grow: 2;
+  width: 100%;
+  height: 100%;
+}
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+/* a:visited { color: inherit; } */
+section {
+}
+section:nth-child(1) { background-color: var(--neutral-100); }
+/* section:nth-child(even) { background-color: var(--neutral-100); } */
+/* section:nth-child(odd) { background-color: var(--neutral-200); } */
+section > .wrapper { width: 700px }
+section > .wide.wrapper { width: 900px }
+.button.playground {
+    color: var(--neutral-50);
+    background-color: var(--green-600);
+    text-shadow: 0px 0px 3px var(--emrald-800);
+    cursor: pointer;
+}
+#playground {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    background-color: var(--neutral-50);
+}
+#playground.playing {
+    display: flex;
+}
+.prelude {
+  color: var(--neutral-700);
+  font-weight: norma;
+}
+.button {
+  /* padding: 0.75rem 1rem; */
+  /* border-radius: 0.5rem; */
+  /* background-color: var(--neutral-200); */
+  /* font-weight: 600; */
+}
+#counter > button {
+    color: var(--neutral-50);
+    font-weight: 800;
+    padding: 1rem 1.5rem;
+    border: 1px solid var(--blue-600);
+    border-radius: 0.5rem;
+    background-color: var(--blue-600);
+    height: fit-content;
+    min-width: 4.2rem;
+    text-align: center;
+    text-shadow: 0px 0px 3px var(--blue-800);
+}
+#counter > button:hover {
+    background-color: var(--blue-500);
+}
+.card {
+  width: 20rem;
+  display: flex;
+  flex-direction: column;
+}
+.card > .title {
+  font-weight: bold;
+  color: var(--gray-700);
+  padding: 0.5em;
+  background-color: var(--gray-300);
+  border-radius: 0.5em 0.5em 0 0;
+}
+.card > .content {
+  height: 220px;
+  background-color: var(--gray-200);
+}
+a.card {
+  text-decoration: none;
+}
+.w-half { width: 50% }
+.CodeMirror { height: 100%; }
+</style>
+<script type="module">
+import {h, signal, render} from '../src/mod.ts'
+function Counter() {
+  const n = signal(1)
+  const onClick = e => n(i => i+1)
+  return h('button', {onClick}, n)
+}
+render(Counter, window.counter)
+</script>

package/www/playground.html ADDED Viewed

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<head>
+<title>Prelude</title>
+<link href="https://unpkg.com/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
+<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>
+<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-EPMJYD1EK8"></script>
+<script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-EPMJYD1EK8');</script>
+</head>
+<script type="module">
+import {h, signal, effect, untrack, resource, render, onMount, Show, List, Router} from '../src/mod.ts'
+import {EditorView, basicSetup} from "codemirror"
+import {html} from "@codemirror/lang-html"
+const playing = signal(true)
+const examples = [
+  {name:'counter',title:'Counter'},
+  {name:'todo',title:'Todo'},
+  // {name:'admin',title:'Admin'}
+]
+function Editor(props) {
+  const theme = EditorView.baseTheme({
+    '&.cm-editor': {height: '100%', backgroundColor:'var(--stone-100)'},
+    '&.cm-editor.cm-focused': {outline: 'none'},
+    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground': { backgroundColor: 'var(--pink-200)'},
+    '&.cm-scroller': {overflow: 'auto'},
+    '&.cm-gutter': {backgroundColor:'var(--stone-200)'},
+    '&.cm-content': {height: "100%", backgroundColor:'var(--stone-100)'},
+  })
+  const ref = parent => {
+    let updateListener = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        console.log('doc change')
+        props.setValue(update.state.doc.toString())
+        // props.value(update.state.doc.toString())
+      }
+    });
+    let editor = new EditorView({
+      doc:'', parent,
+      extensions: [theme, basicSetup, html(), updateListener]
+    })
+    effect(()=>{
+      // console.log('loading', props.value.loading);
+      if (props.value.loading) return
+      const insert = props.value()
+      // console.log('set content',insert);
+      editor.dispatch({changes: {from: 0, to: editor.state.doc.length, insert}})
+    })
+  }
+  return h('.p-1.w-half.h-full.bg-stone-200',{ref,style:'position:relative'})
+}
+function Preview(props) {
+  return h('iframe.w-half.bg-stone-200', {srcdoc:props.value})
+}
+function TopMenu(props) {
+  return h('.flex.items-center.p-1.gap-2.bg-neutral-100',[
+    h('.button.rounded.text-xl.bg-neutral-100.p-1', {onClick:e=>(props.show(b=>!b))},
+      h('i.icon.menu')),
+    h('input.grow', {value:props.file, readonly:true}),
+    // h('.flex.px-2.py-1.rounded.text-md.bg-gray-300.font-weight-500.text-neutral-700.gap-2.shadow',
+    //   [h('i.icon.plus.text-md'),'New']),
+    // h('.flex.px-2.py-1.rounded.text-md.bg-gray-300.font-weight-500.text-neutral-700.gap-2.shadow',
+    //   [h('i.icon.clone.text-md'),'Clone']),
+    h('a.px-3.py-1.rounded-full.text-md.bg-blue-500.text-white.shadow', {href:'/prelude'},
+      h('i.icon.info.text-shadow-black'))])
+}
+function SideMenu(props) {
+  return h('.sidemenu.flex.column.px-2.py-2.gap-4.bg-stone-300',[
+    h('.flex.justify-around', [
+      h(PreludeLogo)
+    ]),
+    h('.flex.column.gap-2', [
+      h(SrcMenu,{name:'example',title:'Example',file:()=>props.file,items:()=>()=>examples,src:()=>props.src}),
+      // h(SrcMenu,{name:'local',title:'Local Storage',file:()=>props.file,items:()=>props.local,src:()=>props.src})
+    ])
+  ])
+}
+function SrcMenu(props) {
+  effect(()=>console.log(props.src()===props.name))
+  return h('.flex.column.gap-1',[
+    h('button.flex.font-weight-600', {onClick:e=>props.src(props.name)}, props.title),
+    h(Show, {when:()=>props.src()===props.name},
+      h('.flex.column.gap-1.pl-2',
+        h(List, {each:()=>props.items}, (value,i) =>
+          h('button.flex', {onClick:e=>props.file(value().name)}, h('',()=>value().title))
+        )
+      )
+    )])
+}
+function Playground() {
+  const show = signal(true)
+  const src = signal('example')
+  const file = signal('counter')
+  const local = signal(examples)
+  const content = signal('')
+  const exs = ()=>examples
+  const doodle = resource(()=>({src:src(),file:file()}), async r => {
+    console.log('change resource',r)
+    if (r.src==='example') {
+      console.log('fetch',r.file)
+      const resp = await fetch('/prelude/example/' + r.file + '.html')
+      const text = await resp.text()
+      // console.log(text)
+      return text
+      // content(html)
+    } else {
+      console.log('local')
+    }
+  })
+  const setContent = s => {
+    console.log('set content')
+    content(s)
+  }
+  return h('.flex.w-full.h-full',{style:'background-color:var(--neutral-100)'},[
+    h(Show, {when:show}, h(SideMenu, {show:()=>show, src:()=>src, file:()=>file, local:()=>local})),
+    h('.flex.column.grow.items-stretch', [
+      h(TopMenu, {playing:()=>playing, show:()=>show, file:()=>file}),
+      h(Show, {when:()=>!doodle.loading, fallback: 'Loading...'},
+        h('.flex', {style:'overflow:auto;height:100%'}, [
+          h(Editor, {value:()=>doodle, setValue:setContent, src:()=>src, file:()=>file}),
+          h(Preview, {value:()=>content})
+        ]))
+    ])
+  ])
+}
+render(Playground, document.body)
+function PreludeLogo() {
+  return h('svg', {viewBox:'0 0 709 709',style:'width: 50px; --color:var(--neutral-700)'},
+    h('use', {'xlink:href':'./logo.svg#loop'}))
+}
+</script>
+<style>
+@import url('./assets/css/style.css');
+html {
+  font-size: 20px;
+  /* font-family: "Noto Sans Warang Citi", sans-serif; */
+  font-weight: 400;
+  font-style: normal;
+  margin: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--neutral-900);
+}
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  flex-grow: 2;
+  width: 100%;
+  height: 100%;
+}
+.prelude {
+  color: var(--neutral-700);
+  font-weight: normal;
+}
+.sidemenu {
+  min-width: max-content;
+}
+.button {
+}
+.button:hover {
+    background-color:var(--neutral-300)
+}
+</style>

package/www/public/example/admin.html ADDED Viewed

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<title>Admin</title>
+<script type="module">
+import {h,signal,effect,render,resource,memo,Router,List,Show} from '/prelude/bundle.js'
+function makeApi(base,method='GET') {
+  return async (s='') => await (await fetch('https://dummyjson.com/'+base+s,{method})).json()
+}
+const getPosts = makeApi('posts')
+function ResourceList(props) {
+  const when = () => !props.result.loading,
+    list = () => props.result()?.[props.key];
+  return h(Show,{when,fallback:()=>'loading...'},
+    h('ul', h(List, {each:()=>list}, props.children)))
+}
+function PostItem(props) {
+  const item = () => props.children(),
+        href = () => '#post/' + item().id
+  return h('li',h('a',{href},()=>item().title))
+}
+function Posts(props) {
+  const result = resource(async ()=>getPosts())
+  return [
+    h('h1','Posts'),
+    h(ResourceList, {key:'posts',result:()=>result}, (v,i) => h(PostItem,v))
+  ]
+}
+function UserItem(props) {
+  const item = () => props.children()
+  return h('li',()=>item().name)
+}
+function Users(props) {
+  const result = resource(async ()=>getPosts())
+  return [
+    h('h1','Users'),
+    h(ResourceList, {key:'users',result:()=>result}, (v,i) => h(UserItem,v))
+  ]
+}
+function Post(props) {
+  return h('h1','Post #123')
+}
+function App(props) {
+  return [
+    h('nav',[
+      h('a',{href:'/example/admin.html#'},'Posts'),
+      h('a',{href:'/example/admin.html#user'},'Users')
+    ]),
+    h(Router,[
+      {path:'/', component:Posts},
+      {path:'/user', component:Users},
+      {path:'/post/:id', component:Post}
+    ])
+  ]
+}
+render(App, document.body)
+</script>
+<style>
+nav {
+    display: flex;
+    gap: 1rem;
+}
+ul {
+    display: flex;
+    flex-direction: column;
+    padding:0;
+    gap: 0.5rem;
+}
+li {
+  list-style: none;
+}
+</style>

package/{example → www/public/example}/counter.html RENAMED Viewed

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

package/{example → www/public/example}/greeting.html RENAMED Viewed

@@ -3,7 +3,7 @@
 <script type="module">
-import {h,signal,effect,render} from '../src/mod.ts'
+import {h,signal,effect,render} from '/prelude/bundle.js'
 function Input(props) {
   const onInput = e => props.value(e.target.value)

package/{example → www/public/example}/show.html RENAMED Viewed

@@ -3,7 +3,7 @@
 <script type="module">
-import {h,signal,render,Show} from '../src/mod.ts'
+import {h,signal,render,Show} from '/prelude/bundle.js'
 function App(props) {
   const toggle = signal(true)

package/{example → www/public/example}/todo.html RENAMED Viewed

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

package/www/public/logo.svg ADDED Viewed

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg
+  id="loop"
+  width="709"
+  height="709"
+  viewBox="0 0 709 709"
+  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path
+      id="Rectangle"
+      style="stroke:var(--color,#444444); stroke-width:var(--width,40)"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M 76 617 L 631 617 L 631 94 C 631 94 26 450 358 450 C 682 450 76 94 76 94 L 76 617 Z"
+    />
+</svg>

package/www/typedoc.json ADDED Viewed

@@ -0,0 +1,13 @@
+{
+  "name": "prelude",
+  "out":"./docs/",
+  "compilerOptions": {
+    "strict": false,
+    "allowJs": true,
+    "checkJs": false,
+    "noImplicitThis": false,
+    "allowImportingTsExtensions": true,
+    "downlevelIteration": true
+  },
+  "entryPoints": ["../src/mod.ts"]
+}

package/www/vite.config.js ADDED Viewed

@@ -0,0 +1,106 @@
+import * as path from '@std/path'
+import * as fs from '@std/fs'
+import {defineConfig} from 'vite'
+import * as esbuild from 'esbuild'
+import { Application, TSConfigReader, TypeDocReader } from 'typedoc'
+export default defineConfig(({ command, mode }) => {
+  const root = path.join(__dirname, '')
+  const define = {}
+  let build
+  const optimizeDeps = {
+    // exclude: ['dist/','public/'],
+  }
+  const assetsInclude = [
+    // 'public/example/**'
+  ]
+  const input = {
+    'index': path.join(root, 'index.html'),
+    'playground': path.join(root, 'playground.html'),
+  }
+  // const docs = path.join(root, 'distdocs/index.html')
+  // if (fs.existsSync(docs)) input.docs = docs
+  // console.log('docs',input.docs)
+  build = {
+    lib: {
+      entry: path.join(root, '../src/mod.ts'),
+      formats: ['es'],
+      name: 'mod',
+      fileName: (name) => 'prelude.js'
+    },
+    rollupOptions: {
+      input,
+      exports: 'named',
+      output: {
+        manualChunks(id) {
+          // if (id.endsWith('src/mod.ts')) return 'prelude'
+        }
+      }
+    }
+  }
+  return {
+    root,
+    define,
+    build,
+    optimizeDeps,
+    assetsInclude,
+    base: '/prelude',
+    plugins: [
+      esbuildPlugin(), typedocPlugin()
+    ]
+  }
+})
+function esbuildPlugin() {
+  let ctx
+  return {
+    name: 'typedoc-plugin',
+    async buildStart() {
+      const entry = path.join(__dirname, '../src/mod.ts')
+      const options = {
+        entryPoints: [entry],
+        outfile: path.join(__dirname, './public/bundle.js'),
+        bundle: true,
+        format:'esm',
+        // minify: true,
+        // sourcemap: true,
+        target: ["es2020"],
+      }
+      ctx = await  esbuild.context(options)
+      await ctx.watch()
+    },
+    async buildEnd() {
+      await ctx.dispose()
+    }
+  }
+}
+function typedocPlugin() {
+  let _config
+  return {
+    name: 'typedoc-plugin',
+    apply: 'build',
+    configResolved(config) { _config = config },
+    async writeBundle() {
+      const name = path.join(__dirname, 'typedoc.json')
+      const config = JSON.parse(await Deno.readTextFile(name))
+      config.hostedBaseUrl = 'https://wrnrlr.github.io/prelude/docs'
+      config.useHostedBaseUrlForAbsoluteLinks = true
+      config.out = path.join(__dirname, './dist/docs')
+      config.entryPoints = [path.join(__dirname, '../src/mod.ts')]
+      const app = await Application.bootstrap(config)
+      if (!app) Deno.exit()
+      const project = await app.convert()
+      if (!project) Deno.exit()
+      try {
+        await app.generateDocs(project, config.out)
+      } catch (e) {
+        console.error(e)
+      }
+    }
+  }
+}

package/example/paint.html DELETED Viewed

@@ -1,22 +0,0 @@
-<!DOCTYPE html>
-<title>Counter</title>
-<script type="module">
-import {h,signal,render,Canvas,Stroke,Line} from '../src/mod.ts'
-function App() {
-  const count = signal(1)
-  return h(Canvas, h(Line, [0, 0, 200, 200]))
-}
-render(App, document.body)
-</script>
-<style>
-body {
-    width:100%; height:100%;
-    background-color: grey;
-}
-</style>