first commit

Author: tipiirai

.gitignore

@@ -0,0 +1,4 @@
+.DS_Store
+pnpm-lock.yaml
+node_modules
+dist

CONTRIBUTING.md

@@ -0,0 +1,51 @@
+
+
+# Contributing to Nue
+Nues's codebase has two distinct parts:
+
+* The reactive client is under [src](src) directory
+* Server parts are under [ssr](ssr) directory (SSR: "Server Side Rendering")
+
+[Bun](//bun.sh) is the preferred test and development environment because it's noticeably faster than Node or Deno.
+
+
+## Best practises
+
+1. If you are adding a new feature, please add a test. If you are fixing a bug, please add a test that fails before your fix and passes after your fix.
+
+2. Nue is a minimalistic project. The goal is to stay lean in all areas of development. Keep things simple and depend on as little dependencies as possible.
+
+3. JavaScript is preferred over TypeScript because of minimalism, dynamic typing and it's standards-based. TypeScript should be used if there is a clear use case or a problem it solves.
+
+4. New features add complexity. They must always be discussed before implemented.
+
+### Running server test
+Nue uses [Bun](//bun.sh) for running tests:
+
+1. Go to root directory: `cd nuejs`
+2. Run `bun test`
+
+
+### Running client tests
+
+1. Go to root directory: `cd nuejs`
+2. Start a web server, for example: `python -m SimpleHTTPServer`
+2. Open a test page. Either [basics][basics] or [loops][loops]
+
+[basics]: http://localhost:8000/test/client/basics.html
+[loops]: http://localhost:8000/test/client/loops.html
+
+
+## FAQ
+
+### Why not the `===` operator? [equality]
+Strict typing is rarely needed in dynamically typed languages. Loose typing (`==`) is usually enough.
+
+
+### Why not semicolons or double quotes?
+Semicolons are optional and double is literally 2x. Less is more.
+
+### Why not TypeScript?
+This is answered on our [general FAQ page](//nuejs.org/faq/#ts)
+
+

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2023-present, Tero Piirainen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,133 @@
+
+
+![Nue logo](https://nuejs.org/global/logo/logo.png)
+
+
+[Documentation](//nuejs.org/docs/nuejs/) •
+[Backstory](//nuejs.org/backstory/) •
+[Ecosystem](//nuejs.org/ecosystem/)
+
+
+# What is Nue?
+
+Nue JS is an exceptionally small (2.3kb minzipped) JavaScript library for building web interfaces. It is the core of the upcoming [Nue ecosystem](//nuejs.org/ecosystem/). It’s like **Vue.js, React.js**, or **Svelte** but there are no hooks, effects, props, portals, watchers, provides, injects, suspension, or other internal abstractions on your way. Learn the basics of HTML, CSS, and JavaScript and you are good to go.
+
+Maybe the biggest benefit is that you need less code to do the same thing:
+
+![The amount of code required to build a basic listbox UI component](https://nuejs.org/docs/img/react-listbox-big.jpg)
+
+
+
+It's not unusual to see 10x differences in the amount of code you need to write. For example, a listbox component written with Nue is around [ten times smaller](//nuejs.org/compare/component) than the [React version](https://headlessui.com/react/listbox) from the Headless UI project.
+
+
+## "It's just HTML"
+Nue uses an HTML-based template syntax:
+
+``` html
+<div @name="media-object" class="{ type }">
+  <img src="{ img }">
+  <aside>
+    <h3>{ title }</h3>
+    <p :if="desc">{ desc }</h3>
+    <slot/>
+  </aside>
+</div>
+```
+
+While React and JXS claim to be "Just JavaScript", Nue can be thought of as "Just HTML". Nue is perfect for [UX developers][divide] focusing on interaction design, accessibility, and user experience.
+
+
+## Built to scale
+Tree reasons why Nue scales extremely well:
+
+1. [Separation of concerns](//nuejs.org//why/#soc), easy-to-understand code is easier to scale than "spaghetti code"
+
+1. [Minimalism](//nuejs.org/why/#minimalism), a hundred lines of code is easier to scale than a thousand lines of code
+
+1. **Separation of talent**, when UX developers focus on the [front of the frontend][back] and JS/TS developers focus on the back of the frontend your team skills are optimally aligned:
+
+![The best results are gained when UX developers and JavaScript developers work together without overlaps](https://nuejs.org/docs/img/ux-developer-big.png)
+
+
+### Decoupled styling
+Nue does not promote the use of Scoped CSS, style attribute, Tailwind, or other CSS-in-JS gymnastics:
+
+1. **More reusable code**: When styling is not hardcoded to the component, the same component can look different depending on the page or context.
+
+1. **No spaghetti code**: pure HTML or pure CSS is easier to read than mixed spaghetti code
+
+1. **Faster page loads**: With decoupled styling it's easier to extract primary CSS from the secondary and keep your HTML page under the critical [14kb limit][fourteen].
+
+Learn more about [styling](//nuejs.org/docs/styling-components)
+
+
+## Reactive and isomorphic
+Nue has a rich component model and it allows you to create all kinds of applications using different kinds of components:
+
+1. [Server components](//nuejs.org/docs/server-components) are rendered on the server. They help you build content-focused websites that load faster without JavaScript and are crawlable by search engines.
+
+2. [Reactive components](//nuejs.org/docs/reactive-components) are rendered on the client. They help you build dynamic islands or single-page applications.
+
+3. [Hybrid components](//nuejs.org/docs/isomorphic-components#hybrid) are partly rendered on the server side, and partly on the client side. These components help you build reactive, SEO-friendly components like video tags or image galleries.
+
+3. [Universal components](//nuejs.org/docs/isomorphic-components#universal-components) are used identically on both server- and client side.
+
+
+
+## UI library files
+Nue allows you to define multiple components on a single file. This is a great way to group related components together and simplify dependency management.
+
+
+``` html
+<!-- shared variables and methods -->
+<script>
+  import { someMethod } from './util.js'
+</script>
+
+<!-- first component -->
+<article @name="todo">
+  ...
+</article>
+
+<!-- second component -->
+<div @name="todo-item">
+  ...
+</div>
+
+<!-- third component -->
+<time @name="cute-date">
+  ...
+</time>
+```
+
+With library files, your filesystem hierarchy looks cleaner and you need less boilerplate code to tie connected pieces together. They help in packaging libraries for others.
+
+
+## Simpler tooling
+Nue JS comes with a simple `render` function for server-side rendering and a `compile` function to generate components for the browser. You don't need complex bundlers like Webpack or Vite to take control of your development environment. Just import Nue to your project and you are good to go.
+
+You can of course use a bundler on the business model if your application becomes more complex with tons of dependencies. [Bun](//bun.sh) and [esbuild](//esbuild.github.io/) are great, performant options.
+
+
+## Use cases
+Nue JS is a versatile tool that supports both server- and client-side rendering and helps you build both content-focused websites and reactive single-page applications.
+
+1. **UI library development** Create reusable components for reactive frontends or server-generated content.
+
+2. **Progressive enhancement** Nue JS is a perfect micro library to enhance your content-focused website with dynamic components or "islands"
+
+3. **Static website generators** Just import it into your project and you are ready to render. No bundlers are needed.
+
+4. **Single-page applications** Build simpler and more scalable apps together with an upcoming *Nue MVC*- project.
+
+5. **Templating** Nue is a generic tool to generate your websites and HTML emails.
+
+
+[fourteen]: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work#tcp_slow_start_14kb_rule
+
+[divide]: https://css-tricks.com/the-great-divide/
+
+[back]: https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/
+
+

package.json

@@ -0,0 +1,17 @@
+{
+	"name": "nuejs",
+	"type": "module",
+	"main": "ssr/index.js",
+	"version": "0.1.0",
+
+	"scripts": {
+		"test": "cd test && bun test",
+		"minify": "bun scripts/minify.js",
+		"compile": "cd test && bun compile.js"
+	},
+
+	"dependencies": {
+		"htmlparser2": "^9.0.0"
+	}
+
+}

scripts/minify.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+/*
+  Minifies source files into a single executable: dist/nue.js
+*/
+
+import { promises as fs } from 'node:fs'
+import { join } from 'node:path'
+
+
+try {
+  let Bundler = process.isBun ? Bun : await import('esbuild')
+
+  // recursive forces creation
+  await fs.mkdir('dist', { recursive: true })
+
+  // minify (with Bun or esbuild)
+  await Bundler.build({
+    entryPoints: [join('src', 'nue.js')],
+    outdir: 'dist',
+    format: 'esm',
+    minify: true,
+    bundle: true,
+  })
+
+  console.log('Minified Nue to dist/nue.js with', process.isBun ? 'Bun' : 'ESBuild')
+
+} catch (e) {
+  console.log('No bundler found. Please install Bun or ESbuild')
+
+}

src/for.js

@@ -0,0 +1,121 @@
+
+import createApp from './nue.js'
+
+export default function(opts) {
+  const { root, fn, fns, deps, ctx } = opts
+  var anchor, current, items, $keys, $index, is_object_loop, blocks = []
+
+
+  function createProxy(item) {
+    return new Proxy({}, {
+      get(__, key) {
+        if (is_object_loop) {
+          const i = $keys.indexOf(key)
+          if (i >= 0) return item[i]
+        }
+        return key === $keys ? item :
+          $keys.includes(key) ? item[key] :
+          key == $index ? items.indexOf(item) :
+          ctx[key]
+      }
+    })
+  }
+
+  function mountItem(item, i, arr, first) {
+    const block = createApp({ fns, dom: root.cloneNode(true) }, createProxy(item), deps, ctx)
+
+    blocks[first ? 'unshift' : 'push'](block)
+    block.before(first || anchor)
+
+    // on insert (anomation)
+    ctx.oninsert?.call(ctx, block.$el, item, {
+      index: i,
+      is_repaint: !!arr,
+      is_first: !i,
+      is_last: i == items.length -1,
+      items
+    })
+
+  }
+
+  function repaint() {
+    blocks.forEach(el => el.unmount())
+    blocks = []
+    items.forEach(mountItem)
+  }
+
+  function arrProxy(arr) {
+    const { unshift, splice, push, sort, reverse } = arr
+
+    return Object.assign(arr, {
+
+      // adding
+      push(item) {
+        push.call(items, item)
+        mountItem(item, items.length - 1)
+      },
+
+      unshift(item) {
+        unshift.call(items, item)
+        mountItem(item, 0, null, blocks[0].$el)
+      },
+
+      // sorting
+      sort(fn) {
+        sort.call(items, fn)
+        repaint()
+      },
+
+      reverse() {
+        reverse.call(items)
+        repaint()
+      },
+
+      // removing
+      splice(i, len) {
+        blocks.slice(i, i + len).forEach(el => el.unmount())
+        blocks.splice(i, len)
+        splice.call(items, i, len)
+      },
+
+      shift() { arr.splice(0, 1) },
+
+      pop() { arr.splice(arr.length -1, 1) },
+
+      // handy shortcut for a common operation
+      remove(item) {
+        const i = items.indexOf(item)
+        if (i >= 0) arr.splice(i, 1)
+      }
+    })
+  }
+
+  // update function
+  function update() {
+    var arr
+    [$keys, arr, $index, is_object_loop] = fn(ctx)
+
+    if (items) {
+      // change of current array --> repaint
+      if (arr !== current) {
+        items = arrProxy(arr); repaint(); current = arr
+      }
+      return blocks.forEach(el => el.update())
+    }
+
+    if (arr) {
+      // anchor
+      const p = root.parentElement
+      anchor = new Text('')
+      p.insertBefore(anchor, root)
+
+      p.removeChild(root)
+      items = arrProxy(arr)
+      arr.forEach(mountItem)
+      current = arr
+    }
+  }
+
+  return { update }
+
+}