Features & Fixes: DOM in core, less DOM writes, N Composition, (#450)

* Use N Flow

* test: remove mjs from scripts

* test: rename mjs files to js files for codesandbox compatibility

* test: add js extension to package.json scripts

* test: use `replace` instead of `replaceAll` for Node 14 compatibility

* Update dependencies, include DOM for debugging

* Update how default theme is applied

* Apply default theme after reset

* cleanup & composer update

* Fix expect.js export

* update dependencies, fs import

* Update composition

* Fix composer.inline reference

* Fix issue with inline(css, classNames)

* Update tests, inheritance

* test: log composer to investigate "Can't find variable: inline" bug

* test: only default to composition.type

* Add #450 test

* fix: additive default variants

* fix: theme is object by default

* test: update hash string mechanism to increase chances of unique hashes

* test: and what of component styles? hash them out... all of them...

* test: fix hashes

* Remove unused dom.js

* Update package.json

* Delete deepMerge.js

.bin/build-package.mjs → .bin/build-package.js

@@ -1,8 +1,8 @@
 import esbuild from 'esbuild'
-import fs from './fs.mjs'
+import fs from './internal/fs.js'
 import zlib from 'zlib'
 import { minify } from 'terser'
-import { bold, underline } from './color.mjs'
+import { bold, underline } from './color.js'
 
 const variants = {
 	esm: {

.bin/build-shared.mjs → .bin/build-shared.js

@@ -1,6 +1,6 @@
-import fs from './fs.mjs'
-import { corePackageUrl, reactPackageUrl, rootUrl } from './build-dirs.mjs'
-import { bold, dim, underline } from './color.mjs'
+import fs from './internal/fs.js'
+import { corePackageUrl, reactPackageUrl, rootUrl } from './internal/dirs.js'
+import { bold, dim, underline } from './color.js'
 
 async function buildShared(packageUrl) {
 	const sharedUrl = new URL('shared/', rootUrl)

.bin/build.mjs → .bin/build.js

@@ -1,7 +1,7 @@
-import buildPackage from './build-package.mjs'
-import buildShared from './build-shared.mjs'
-import fs from './fs.mjs'
-import { corePackageUrl, reactPackageUrl } from './build-dirs.mjs'
+import buildPackage from './build-package.js'
+import buildShared from './build-shared.js'
+import fs from './internal/fs.js'
+import { corePackageUrl, reactPackageUrl } from './internal/dirs.js'
 
 async function build() {
 	console.log()

.bin/color.mjs → .bin/color.js

@@ -1,5 +1,5 @@
 export const set = (id) => `\x1b[${id}m`
-export const color = (string, id) => set(id) + string.replaceAll(set(0), set(0) + set(id)) + set(0)
+export const color = (string, id) => set(id) + string.replace(RegExp(set(0).replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), set(0) + set(id)) + set(0)
 
 export const bold = (string) => color(string, 1)
 export const dim = (string) => color(string, 2)

.bin/internal/dirs.js

@@ -0,0 +1,22 @@
+import process from 'node:process'
+
+/** Root directory. */
+export const rootUrl = new URL('../../', import.meta.url)
+
+/** Packages directory. */
+export const packagesUrl = new URL('packages/', rootUrl)
+
+/** Core package directory. */
+export const corePackageUrl = new URL('core/', packagesUrl)
+
+/** Core tests directory. */
+export const coreTestsUrl = new URL('tests/', corePackageUrl)
+
+/** React package directory. */
+export const reactPackageUrl = new URL('react/', packagesUrl)
+
+/** React tests directory. */
+export const reactTestsUrl = new URL('tests/', reactPackageUrl)
+
+/** Current file href. */
+export const argv1Url = new URL(process.argv[1], 'file:').href

.bin/internal/expect.js

@@ -0,0 +1,89 @@
+import { deepEqual as toEqual, equal as toBe, notDeepEqual as toNotEqual, notEqual as toNotBe } from 'node:assert/strict'
+
+export default function expect(actual) {
+	return {
+		/** Tests for strict equality between the actual and expected parameters. */
+		toBe: toBe.bind(this, actual),
+		/** Tests that the actual object is an instance of the expected class. */
+		toBeInstanceOf: toBeInstanceOf.bind(this, actual),
+		/** Tests for deep equality between the actual and expected parameters. */
+		toEqual: toEqual.bind(this, actual),
+		/** Tests that the actual function does throw when it is called. */
+		toThrow: toThrow.bind(this, actual),
+
+		/** Tests for strict inequality between the actual and expected parameters. */
+		toNotBe: toNotBe.bind(this, actual),
+		/** Tests that the actual object is not an instance of the expected class. */
+		toNotBeInstanceOf: toNotBeInstanceOf.bind(this, actual),
+		/** Tests for deep inequality between the actual and expected parameters. */
+		toNotEqual: toNotEqual.bind(this, actual),
+		/** Tests that the actual function does not throw when it is called. */
+		toNotThrow: toNotThrow.bind(this, actual),
+	}
+}
+
+/** Tests that the actual object is an instance of the expected class. */
+function toBeInstanceOf(actual, expected) {
+	if (!(actual instanceof expected)) {
+		throw new AssertionError({
+			message: 'Expected value to be instance:',
+			operator: 'instanceOf',
+			actual,
+			expected,
+			stackStartFn: toBeInstanceOf,
+		})
+	}
+}
+
+/** Tests that the actual object is not an instance of the expected class. */
+function toNotBeInstanceOf(actual, expected) {
+	if (actual instanceof expected) {
+		throw new AssertionError({
+			message: 'Expected value to be instance:',
+			operator: 'instanceOf',
+			actual,
+			expected,
+			stackStartFn: toNotBeInstanceOf,
+		})
+	}
+}
+
+/** Tests that the actual function does throw when it is called. */
+async function toThrow(actualFunction, expected) {
+	let actual = undefined
+
+	try {
+		actual = await actualFunction()
+	} catch (error) {
+		// do nothing and continue
+		return
+	}
+
+	throw new AssertionError({
+		message: 'Expected exception:',
+		operator: 'throws',
+		stackStartFn: toThrow,
+		actual,
+		expected,
+	})
+}
+
+/** Tests that the actual function does not throw when it is called. */
+async function toNotThrow(actualFunction, expected) {
+	let actual = undefined
+
+	try {
+		actual = await actualFunction()
+
+		// do nothing and continue
+		return
+	} catch (error) {
+		throw new AssertionError({
+			message: 'Unexpected exception:',
+			operator: 'doesNotThrow',
+			stackStartFn: toThrow,
+			actual,
+			expected,
+		})
+	}
+}

.bin/test-coverage.mjs → .bin/test-coverage.js

@@ -1,8 +1,8 @@
 import cp from 'child_process'
 import fp from 'path'
-import fs from './fs.mjs'
+import fs from './fs.js'
 import os from 'os'
-import { bold, dim, green, red } from './color.mjs'
+import { bold, dim, green, red } from './color.js'
 
 // Creates a unique temporary directory
 !(async () => {

.bin/test-watch.mjs → .bin/test-watch.js

@@ -7,7 +7,7 @@ nodemon(
 		`--watch packages/core/tests`,
 		`--watch packages/react/src`,
 		`--watch packages/react/tests`,
-		`--exec "clear; ${['node', '.bin/test.mjs'].concat(process.argv.slice(2)).join(' ')}"`,
+		`--exec "clear; ${['node', '.bin/test.js'].concat(process.argv.slice(2)).join(' ')}"`,
 	].join(' '),
 )
 	.on('start', () => {

.bin/test.mjs → .bin/test.js

@@ -1,5 +1,5 @@
-import fs from './fs.mjs'
-import { deepEqual, equal, notDeepEqual, notEqual, AssertionError } from 'assert/strict'
+import fs from './internal/fs.js'
+import expect from './internal/expect.js'
 
 const test = (root) =>
 	Promise.all(
@@ -9,32 +9,7 @@ const test = (root) =>
 			new URL('./packages/react/tests/', root),
 		].map(async (dir) => {
 			// bootstrap the expect api
-			globalThis.expect = (foo) => ({
-				toEqual: (bar) => deepEqual(foo, bar),
-				toBe: (bar) => equal(foo, bar),
-				toBeInstanceOf(bar) {
-					if (!(foo instanceof bar))
-						throw new AssertionError({
-							message: `Expected value to be instance:`,
-							operator: 'instanceOf',
-							actual: foo,
-							expected: bar,
-						})
-				},
-				not: {
-					toEqual: (bar) => notDeepEqual(foo, bar),
-					toBe: (bar) => notEqual(foo, bar),
-					toBeInstanceOf(bar) {
-						if (!(foo instanceof bar))
-							throw new AssertionError({
-								message: `Expected value to not be instance:`,
-								operator: 'notInstanceOf',
-								actual: foo,
-								expected: bar,
-							})
-					},
-				},
-			})
+			globalThis.expect = expect
 
 			// internal strings and symbols used for reporting
 			const passIcon = '\x1b[32m✔\x1b[0m'

package.json

@@ -6,42 +6,41 @@
   "license": "MIT",
   "scripts": {
     "bootstrap": "lerna bootstrap --use-workspaces",
-    "build": "node .bin/build.mjs",
-    "build:watch": "node .bin/build-watch.mjs",
+    "build": "node .bin/build.js",
+    "build:watch": "node .bin/build-watch.js",
     "prerelease": "npm run build && npm run test",
     "release": "lerna publish",
     "release:canary": "npm run prerelease && lerna publish --dist-tag canary",
     "release:pack": "npm run prerelease && lerna exec -- npm pack",
     "postinstall": "run-s bootstrap",
-    "test": "node .bin/test.mjs",
-    "test:coverage": "node .bin/test-coverage.mjs .bin/test.mjs",
-    "test:lint": "node .bin/test-lint.mjs",
-    "test:watch": "node .bin/test-watch.mjs"
+    "test": "node .bin/test.js",
+    "test:coverage": "node .bin/test-coverage.js .bin/test.js",
+    "test:lint": "node .bin/test-lint.js",
+    "test:watch": "node .bin/test-watch.js"
   },
   "workspaces": [
     "packages/*",
     "play"
   ],
   "dependencies": {
-    "@types/react": "17.0.2",
+    "@types/react": "17.0.3",
     "@types/react-dom": "17.0.1",
     "@types/react-test-renderer": "17.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.15.1",
-    "@typescript-eslint/parser": "^4.15.1",
-    "baretest": "2.0.0",
-    "esbuild": "0.8.46",
-    "eslint": "^7.20.0",
-    "lerna": "3.22.1",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
+    "esbuild": "0.8.57",
+    "eslint": "^7.21.0",
+    "lerna": "4.0.0",
+    "linkedom": "^0.5.5",
     "magic-string": "0.25.7",
     "merge-source-map": "1.1.0",
-    "microbundle": "0.13.0",
     "nodemon": "2.0.7",
     "npm-run-all": "4.1.5",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-test-renderer": "17.0.1",
     "terser": "5.6.0",
-    "typescript": "4.1.5"
+    "typescript": "4.2.3"
   },
   "browserslist": [
     "last 1 chrome versions",
@@ -50,6 +49,14 @@
     "maintained node versions"
   ],
   "eslintConfig": {
+    "env": {
+      "browser": true,
+      "es6": true,
+      "node": true
+    },
+    "extends": [
+      "plugin:@typescript-eslint/recommended"
+    ],
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
       "ecmaVersion": 2020,
@@ -63,9 +70,6 @@
         "version": "detect"
       }
     },
-    "extends": [
-      "plugin:@typescript-eslint/recommended"
-    ],
     "rules": {
       "@typescript-eslint/ban-types": [
         "error",

packages/core/src/Object.js

@@ -1,5 +1,13 @@
-export default Object
+import { toPrimitive } from './Symbol.js'
 
 export const { assign, create, defineProperties, getOwnPropertyDescriptors } = Object
 
-export const define = (target, append) => defineProperties(target, getOwnPropertyDescriptors(append))
+export const createComponent = (base, prop, props) =>
+	assign(defineProperties(base, getOwnPropertyDescriptors(props)), {
+		[toPrimitive]() {
+			return base[prop]
+		},
+		toString() {
+			return base[prop]
+		},
+	})

packages/core/src/Reflect.js

@@ -0,0 +1 @@
+export const { ownKeys } = Reflect

packages/core/src/StringArray.js

@@ -0,0 +1,15 @@
+import { toPrimitive } from './Symbol.js'
+
+export default class StringArray extends Array {
+	toString() {
+		return this.join('')
+	}
+
+	get hasChanged() {
+		const cssText = String(this)
+
+		return () => cssText !== String(this)
+	}
+}
+
+StringArray.prototype[toPrimitive] = StringArray.prototype.toString

packages/core/src/StringSet.js

@@ -0,0 +1,16 @@
+import { toPrimitive } from './Symbol.js'
+import { from } from './Array.js'
+
+export default class StringSet extends Set {
+	toString() {
+		return from(this).join('')
+	}
+
+	get hasChanged() {
+		const { size } = this
+
+		return () => size < this.size
+	}
+}
+
+StringSet.prototype[toPrimitive] = StringSet.prototype.toString

packages/core/src/Symbol.js

@@ -0,0 +1,3 @@
+export const { toPrimitive } = Symbol
+
+export const $$composers = Symbol.for('sxs.composers')