Release 1.0.0 (#17)

* deprecate Helper and effect helper * better handle nested effects * bump paatch * fix for multiple unsubs * only broadcast when state changes * intro rafEffect and make effect async * add action queue to optimize state broadcasting and rendering * handle quick cases when changing current to new nodes * fix format * optimize text node value change to prevent new node creation on value change * remove index.html * move state and effect to own file * remove ActionQueue and support effect value * sync state and no rafEffect * remove testing stuff * render with RAF and remove commented out computed * idem * small performance improvements * introduce ReactiveNode and EffectObject * improve effect to be aware of nesting and cleanup data * introduce Reacytive node and improve reaction based on effect * deprecate attr. prefix, allow syncNodes to handle templates, add onUpdate to template * remove this.#childNodes from html * html to have statis nodes * clean results in reacitve node unmount * no need for parseDynamicRawValue to handle events * simplify parseDynamicRawValue and support a callback * split attribute directive into small functions * deprecate directives * clean moutables on unmount and return temp when render content * remove reliance on child nodes and introduce template markers with simplified syncNodes * prefer previous syncNodes for being faster and more memory efficient * simplified syncNodes * optimize syncNodes to skip unchanged nodes order * improve and. simplify syncnodes introducing DoubleLinkedList * cache template * use fragment for first reactive node render * remove RenderType * optimize syncNodes and repeat util * improve syncNodes to handle new nodes on a empty list better * add ability to SkipRender and update repeat to self contain * deprecate Doc and cache templates * simplify append child logic * move files around and better organize them to proper folders * use Proxy for repeat to remove the caching loop and DoubleLinkedList instead of Set * use DoubleLinkedList instead of Set * use LinkedList in State * only set attribute if different * batch update state * only update when value changes in the effect for setting attribute * improve state batch updates to have a dynamical list to prevent memory leaks * cache template value parts as index Array and simplify attributes handler * cleanup not used code and improve template unmount cleanups * fix event listener not being due to node not found * fix pick not being reactive * make suspense render anything * add a toString method * add internal tracking for parent and children * make the suspense return a function so its called on render instead of on setting up * remove SkipRender and handle cleaning repeat list * add static docs * Create _config.yml. (#20) * Update _config.yml. (#21) * add styling * override theme and style * remove theme in the config * make prettier ignore html in docs * remove node 20 from actions * disable failing test * add jekyll-theme-minimal theme * add landing page theme * remove jekyl stuff * custom md to html system * fix formatting * move and handle assets and stylesheets dir * prepare page layout and assets rendering with page metadata * update landing page content and style * remove extensions * start docs files * fix rendering pages, override link , handle nav item active state, and add additional doc pages * use /documentation instead of document * finalize landing page * collect sitemap and table of content, populate and style documentation page nav and table of content * add all documents files * fix formatting * change main action button accent * update the what is markup doc content * adsd background to docs menu * adjust active menu item style and add whats markup to the menu * fix formatting * installation and get started docs * make text more readable * fix formatting * state store docs * fix formatting * state documentation * effect doc and target offset and style * fix format * remove dynamic value doc * collect level for content * handle sorting menu * fix formatting * render doc * fix formatting * livecycles doc * fix fromatting * values doc * attribute docs and fix for direct values * fix formatting * fix references merging * refs doc * events doc * fix formatting * intro to utilitity doc * element doc and update values and state docs * suspense doc * the when doc * streamline repeat with more data type support and docs * remainder utility docs * intro capabilities doc * fix esm/cjs exports * ssr docs * web component docs * remove node 16 for test * use @beforesemicolon/builder * update @beforesemicolon/builder * include types and update @beforesemicolon/html-parser * update package lock * fix document generation * add form control capability doc * update some style and make the wrapper bigger * make documentations responsive * updtae form control example * extend element with childNodes option * fix client * fix formatting * update package lock * update format * update package lock * update mobile menu styling * update hamburger menu * addd docs next and prev bottom navigation * update mobile menu * grab builder ability to minify * bump version * fix styling * add extra bottom padding for mobile menu * remove docs-src dir * fix repeat not showing empty state * make the state setter return the new value * add router docs * add why description * add router app example * fix edit this doc link * better handler object attributes * fix event listeners being treated as function values * final docs update * update readme * minor adjustment * move capability to the top of the menu
beforesemicolon · Nov 30, 2024 · baa45ff · baa45ff
1 parent 755715a
commit baa45ff
Show file tree

Hide file tree

Showing 237 changed files with 11,580 additions and 12,804 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -12,7 +12,7 @@ jobs:
 
         strategy:
             matrix:
-                node-version: [16.x, 18.x, 20.x]
+                node-version: [18.x, 20.x]
                 # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
         steps:

diff --git a/.gitignore b/.gitignore
@@ -33,5 +33,6 @@ jspm_packages/
 # Output of 'npm pack'
 *.tgz
 
-docs
 dist
+playground.html
+website
diff --git a/.npmignore b/.npmignore
@@ -3,7 +3,7 @@ node_modules
 src
 tsconfig.json
 package-lock.json
-jest.config.js
+jest.config.cjs
 .npmignore
 .gitignore
 *.tgz
@@ -12,11 +12,8 @@ coverage
 playground
 .prettierrc
 .prettierignore
-.eslintrc.js
+.eslintrc.cjs
 .eslintignore
 docs
-docs-src
-scripts
-build-scripts
-.eslintrc.cjs
-jest.config.cjs
+website
+test.common.ts
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
 src/**/*.spec.ts
+docs/**/*.html
diff --git a/README.md b/README.md
@@ -7,70 +7,82 @@ Reactive HTML Templating System
 ![npm](https://img.shields.io/npm/l/%40beforesemicolon%2Fmarkup)
 [![Test](https://github.com/beforesemicolon/html/actions/workflows/test.yml/badge.svg?branch=main)](https://github.com/beforesemicolon/html/actions/workflows/test.yml)
 
-Markup is a plug-and-play template system for those who need the bare minimal yet powerful
-way to build user interface. Its small size and ready-to-go nature makes it perfect for quick prototypes,
-UI components library, browser extensions, and side projects. But make no mistake, it has all the templating
-features for a big project and serves as a perfect start to build any UI framework or library.
+Markup is a JavaScript reactive templating system built to simplify how you build Web user interfaces using web standards with minimal enhancements to the native web APIs as possible.
+
+It consists of 3 main APIs with additional utilities to simplify things even further:
+
+-   `html`: A JavaScript tagged function that allows you to represent the DOM using template literal string;
+-   `state`: A simple state tracking API that allows you to define reactive data as you wish;
+-   `effect`: A straight forward way to define things that need to happen when certain states change;
 
 ### Motivation
 
-Most UI libraries need too much setup and require build with a steep learning curve. If you find a good templating system
-its either not powerful enough or requires extra things to make it work by itself.
+JavaScript, Web Standards and APIs give you everything you need to build any web project you want. What is often painful to deal with is the DOM and reactivity, especially as the project gets bigger or require multiple people collaboration.
 
-This templating system is standalone system. You don't need anything else to start rendering and reacting to changes.
+Markup was created to give you all the reactivity you need while making it simple to define your HTML in JavaScript without introducing a new syntax, or requiring a build, or a big library you need to ship to the client.
 
-It requires **no build**, **its tiny**, and the API is literally **2 main things to learn**, and you are ready to go.
-It is pretty much HTML and Javascript so the learning curve is extremely small.
+From this:
 
-### Example
+```javascript
+let count = 0
 
-Below is a simple todo app and as you can see, its pretty much HTML and Javascript.
+// tedious DOM definition and manipulation
+const p = document.createElement('p')
+p.textContent = `count: ${count}`
 
-```ts
-import { html, state, repeat } from '@beforesemicolon/markup'
+const btn = document.createElement('button')
+btn.type = 'button'
+btn.textContent = 'count up'
 
-interface TodoItem {
-    name: string
-    description: string
-    id: string
-}
+// limiting event driven
+btn.addEventListener('onclick', () => {
+    count += 1
+    p.textContent = `count: ${count}`
+
+    if (count > 10) {
+        alert('You counted passed 10!')
+    }
+})
+
+document.body.append(p, btn)
+```
 
-const [todos, updateTodos] = state<Array<TodoItem>>([])
+To this:
 
-const createTodo = () => {
-    const name = window.prompt('Enter todo name')
-    const description = window.prompt('Enter todo description') ?? ''
+```javascript
+// reactive data
+const [count, updateCount] = state(0)
 
-    if (name) {
-        updateTodos((prev) => [
-            ...prev,
-            { name, description, id: crypto.randomUUID() },
-        ])
+// data driven
+effect(() => {
+    if (count() > 10) {
+        alert('You counted passed 10!')
     }
-}
+})
 
-const deleteTodo = (id) => {
-    updateTodos((prev) => prev.filter((todo) => todo.id !== id))
+const countUp = () => {
+    updateCount((prev) => prev + 1)
 }
 
-const TodoItem = ({ name, description, id }: TodoItem) => html`
-    <div class="todo-item">
-        <h3>${name}</h3>
-        <p>${description}</p>
-        <button type="button" onclick="${() => deleteTodo(id)}">delete</button>
-    </div>
-`
-
-const TodoApp = html`
-    <h2>Todo App</h2>
-    <button type="button" onclick="${createTodo}">add new</button>
-    <div class="todo-list">${repeat(todos, TodoItem)}</div>
-`
-
-TodoApp.render(document.body)
+// reactive DOM/templates
+html`
+    <p>count: ${count}</p>
+    <button type="button" onclick="${countUp}">count up</button>
+`.render(document.body)
 ```
 
-#### More examples
+### How does it work?
+
+Markup uses [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) and [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) to do everything.
+
+-   **Functions**: JavaScript functions are perfect for lazy evaluations which makes it perfect for reactivity. Markup uses functions everywhere, from internals, defining state, effects, utilities, etc.
+-   **Template Literals**: The template literal is used to represent HTML in JavaScript and to avoid to reinvent the wheel. Everything else is enforced by web standards.
+
+Literally everything else is how you know it to be in plain HTML, CSS and JavaScript.
+
+We believe in a simple way to build the web without the jargon of a framework, complex project setups, new syntax, all to spit out HTML, CSS and JavaScript at the end.
+
+#### Examples
 
 This is a simple example of a button, but you can check:
 
@@ -113,7 +125,7 @@ This library requires no build or parsing. The CDN package is one digit killobyt
 <div id="app"></div>
 
 <script>
-    const { html } = BFS.MARKUP
+    const { html, state, effect } = BFS.MARKUP
 
     html`<h1>Hello World</h1>`.render(document.getElementById('app'))
 </script>

diff --git a/build-scripts/build-browser.ts b/build-scripts/build-browser.ts
diff --git a/docs-src/404.page.ts b/docs-src/404.page.ts
diff --git a/docs-src/build.ts b/docs-src/build.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,5 +33,6 @@ jspm_packages/ @@
     # Output of 'npm pack'
     *.tgz
-    docs
     dist
+    playground.html
+    website