feat: enhance ssr

.gitignore

@@ -56,4 +56,3 @@ typings/
 
 # distribution folder
 lib/
-

.nvmrc

@@ -1 +1 @@
-14
+20

Makefile

@@ -4,29 +4,41 @@ help: ## Show this help message
  @echo 'Targets:'
  @egrep '^(.+)\:\ ##\ (.+)' ${MAKEFILE_LIST} | column -t -c 2 -s ':#'
 
-bundle : ## Create production bundle
+bundle: ## Create production bundle
  rm -rf dist || exit $? ; \
  node ./esbuild.js || exit $? ; \
 
-format : ## Enforces a consistent style by parsing your code and re-printing it
- pnpx prettier --write "./src/**/*.js" "./tests/**/*.js" "./examples/**/*.js" ;\
+cp: ## Copy files
+ cp -r index.js examples/h.js || exit $? ; \
+ cp -r document.js examples/document.js || exit $? ; \
+
+format: ## Enforces a consistent style by parsing your code and re-printing it
+ npx prettier --write "./**/*.js" "./tests/**/*.js" "./examples/**/*.js" ;\
 
 jsx: ## Build JSX example
- node -r esm examples/jsx/esbuild-jsx.js || exit $? ;\
+ node examples/jsx/esbuild-jsx.js || exit $? ;\
+
+ssr: ## Run a static page
+ node examples/ssr/counter.js || exit $? ;\
 
-static : ## Run a static page
- node -r esm examples/ssr/counter.js || exit $? ;\
+server: ## Run a dev server
+ make cp || exit $? ; \
+ make ssr || exit $? ; \
+ make jsx || exit $? ; \
+ pnpm --package=github:gc-victor/d-d dlx d-d || exit $? ; \
 
-server : ## Run a dev static server
- pnpm --package=github:gc-victor/d-d dlx d-d
+test: ## Execute tests
+ make test-browser || exit $? ; \
+ make test-ssr || exit $? ; \
 
-test : ## Execute tests
- TEST=true node -r esm tests/index.js || exit $? ;\
+test-browser: ## Execute tests
+ node tests/tests-browser.js || exit $? ;\
 
-test-ssr : ## Execute SSR tests
- node -r esm tests/index.js || exit $? ;\
+test-ssr: ## Execute SSR tests
+ node tests/tests-ssr.js || exit $? ;\
 
-test-watch : test ## Execute tests on watch mode
+test-watch: ## Execute tests on watch mode
+ make test-ssr || exit $? ; \
  npx chokidar-cli "**/*.js" -c "make test" || exit $? ;\
 
 # catch anything and do nothing

README.md

@@ -1,14 +1,13 @@
 # H
 
-H is a micro-library (800 B) to create DOM Trees using HyperScript template.
+H is a micro-library (~1 KB) to create DOM Trees using HyperScript template.
 
 ## Key Features
 
-- Micro-library 800 B
-- No compilation needed
 - Real DOM Tree
 - SSR out of the box
-- Only one dependency for SSR
+- JSX compatible
+- Zero dependencies
 - Small API, not much to learn
 
 ## Let's Play
@@ -136,16 +135,12 @@ const App = () =>
  </div>;
 ```
 
-### Dependencies
+### SSR
 
-The only dependency is [html-element](https://github.com/1N50MN14/html-element) for Server Side Rendering or Static Site Generation.
-
-```console
-npm install html-element
-```
+To use it in SSR, you only need to import the `h/document` module into the main file.
 
 ```javascript
-import 'html-element/global-shim';
+import 'h/document';
 
 // Your code ...
 ```

document.js

@@ -0,0 +1,53 @@
+globalThis.document = {
+ createElement(tagName) {
+ return {
+ tagName,
+ attributes: {},
+ children: [],
+ setAttribute(name, value) {
+ this.attributes[name] = value;
+ },
+ appendChild(child) {
+ this.children.push(child);
+ },
+ get innerHTML() {
+ return this.children.reduce((prev, child) => prev + child.textContent, '');
+ },
+ get outerHTML() {
+ const shelfClosingTags = [
+ 'area',
+ 'base',
+ 'br',
+ 'col',
+ 'embed',
+ 'hr',
+ 'img',
+ 'input',
+ 'link',
+ 'meta',
+ 'param',
+ 'source',
+ 'track',
+ 'wbr',
+ ];
+ const attributes = Object.keys(this.attributes)
+ .map((name) => `${name}="${this.attributes[name]}"`)
+ .join(' ');
+
+ const tagName2 = this.tagName?.toLowerCase() || 'div';
+ const innerHTML = this.innerHTML;
+ return `<${tagName2}${attributes ? ` ${attributes}` : ''}>${innerHTML}${
+ shelfClosingTags.includes(tagName2) ? '' : `</${tagName2}>`
+ }`;
+ },
+ };
+ },
+ createTextNode(text) {
+ return {
+ textContent: text,
+ };
+ },
+ createElementNS(namespaceURI, tagName) {
+ return this.createElement(tagName);
+ },
+};

esbuild.js

@@ -1,5 +1,5 @@
-const { buildSync } = require('esbuild');
-const gzipSize = require('gzip-size');
+import * as esbuild from 'esbuild';
+import { gzipSizeFromFileSync } from 'gzip-size';
 
 [
  {
@@ -17,10 +17,10 @@ const gzipSize = require('gzip-size');
  outdir: 'dist/iife',
  },
 ].forEach((config) => {
- const result = buildSync({
+ const result = esbuild.buildSync({
  bundle: true,
  entryNames: '[dir]/[name]',
- entryPoints: ['src/index.js'],
+ entryPoints: ['index.js'],
  metafile: true,
  minify: true,
  ...config,
@@ -31,12 +31,13 @@ const gzipSize = require('gzip-size');
 
  Object.keys(result.metafile.outputs).forEach((key) => {
  total = total + result.metafile.outputs[key].bytes;
- totalGzip = totalGzip + gzipSize.fileSync(key);
+ totalGzip = totalGzip + gzipSizeFromFileSync(key);
+
  console.log(
  key,
  formatBytes(result.metafile.outputs[key].bytes),
  '- gzip:',
- formatBytes(gzipSize.fileSync(key))
+ formatBytes(gzipSizeFromFileSync(key))
  );
  });
 

examples/.gitignore

@@ -0,0 +1,4 @@
+h.js
+document.js
+index-jsx.js
+index.html