Updates to underlying renderer

.npmignore

@@ -2,6 +2,6 @@ assets/
 documentation/
 src/
 rollup.config.js
-dom/src
 test/
+coverage/
 .travis.yml

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.5.0 - 2019-04-14
+- Add support for multiple renderers (JSX, Tagged Template Literals, HyperScript). Added direct imports or 'solid-js/dom' alternatives 'solid-js/html' and 'solid-js/h'.
+- Reorganized dependencies work.
+
 ## 0.4.2 - 2019-03-18
 - Add fallbacks for control flow
 - Add new Portal Control Flow - This allows nodes to be rendered outside of the component tree with support for satelite ShadowRoots.

README.md

@@ -47,6 +47,8 @@ To use Solid with JSX (recommended) run:
 > npm install solid-js babel-plugin-jsx-dom-expressions
 ```
 
+You can also run Solid from the browser directly with your flavor of renderer found in the [Solid Standalone](https://github.com/ryansolid/solid-standalone) package.
+
 ## Solid State
 
 It all starts with State. State objects are immutable so to update you call their companion setter function. Through the use of proxies they give the control of an immutable interface and the performance of a mutable one. Note only Plain Objects and Arrays are deeply wrapped.
@@ -113,9 +115,7 @@ onCleanup(() => unsubscribe());
 
 ## Solid Rendering
 
-To accomplish rendering we use JSX for templating that gets compiled to native DOM element instructions. To do that we take advantage of the [Babel Plugin JSX DOM Expressions](https://github.com/ryansolid/babel-plugin-jsx-dom-expressions) which while converting JSX to DOM element instructions wraps expressions to be wrapped in our computations when indicated by in inner parens `{( )}`.
-
-JSX as a templating language brings a lot of benefits. The just being javascript goes beyond just not needing a DSL, but setting up closure based context instead of creating context objects. This is more transparent and easier to follow and debug.
+Solid's rendering is done by the [DOM Expressions](https://github.com/ryansolid/dom-expressions) library. This library provides a generic optimized runtime for fine grained libraries like Solid with the opportunity to use a number of different Rendering APIs. The best option is to use JSX pre-compilation with [Babel Plugin JSX DOM Expressions](https://github.com/ryansolid/babel-plugin-jsx-dom-expressions) to give the smallest code size, cleanest syntax, and most performant code. The compiler converts JSX to native DOM element instructions and wraps expressions to be wrapped in our computations when indicated by in inner parens `{( )}`.
 
 To get setup add this babel plugin config to your .babelrc, webpack, or rollup config:
 
@@ -129,12 +129,14 @@ And include at the top of your files:
 import { r } from 'solid-js/dom'
 ```
 
-Or, if you prefer you can use HyperScript. It does come at signifigant performance hit, as it doesn't benefit from any of the compile time optimizations that set Solid apart in performance. But it is an option for those who want to avoid Babel or do not wish to use JSX. Even though it is much slower it is still in the performance category of most popular frameworks. There are some minor differences from how you would write typical HyperScript as you need to manually wrap expressions in functions to make them observable. More information available at [Dom Expressions](https://github.com/ryansolid/dom-expressions). Include Solid HyperScript by:
+Alternatively in non-compiled environments you can use Tagged Template Literals [Lit DOM Expressions](https://github.com/ryansolid/lit-dom-expressions) or even HyperScript with [Hyper DOM Expressions](https://github.com/ryansolid/hyper-dom-expressions).
 
+For convenience Solid exports interfaces to runtimes for these as:
 ```js
-import { h } from 'solid-js/dom'
+import { h } from 'solid-js/h';
+import { html } from 'solid-js/html'
 ```
-With HyperScript it is possible to map to element functions or even tagged template literals which offer many different development experiences. See examples below.
+Remember you still need to install the library separately for these to work.
 
 ## Components
 
@@ -225,7 +227,7 @@ I cover this in more detail in my Bring Your Own Framework Blog Series(links bel
 
 * [State](../master/documentation/state.md)
 * [Signals](../master/documentation/signals.md)
-* [Rendering](../master/documentation/rendering.md)
+* [JSX Rendering](../master/documentation/rendering.md)
 * [API](../master/documentation/api.md)
 
 ## Examples

documentation/rendering.md

@@ -1,4 +1,4 @@
-# Rendering
+# JSX Rendering
 
 Rendering involves precompilation of JSX templates into optimized native js code. The JSX code constructs:
 * Template DOM elements which are cloned on each instantiation

h/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "solid-js/h",
+  "main": "../lib/h.js",
+  "module": "../dist/h.js",
+  "sideEffects": false
+}

html/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "solid-js/html",
+  "main": "../lib/html.js",
+  "module": "../dist/html.js",
+  "sideEffects": false
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -17,13 +17,13 @@
     "test": "npm run build && jest --coverage"
   },
   "dependencies": {
-    "dom-expressions": "~0.6.0",
+    "dom-expressions": "~0.7.1",
     "s-js": "~0.4.9"
   },
   "devDependencies": {
     "coveralls": "^3.0.3",
     "jest": "~24.7.1",
-    "rollup": "^1.9.0",
+    "rollup": "^1.10.0",
     "rollup-plugin-node-resolve": "^4.1.0"
   }
 }

rollup.config.js

@@ -14,7 +14,7 @@ export default [{
   external: ['s-js'],
   plugins
 }, {
-  input: 'dom/src/index.js',
+  input: 'src/dom/index.js',
   output: [{
     file: 'lib/dom.js',
     format: 'cjs'
@@ -24,4 +24,26 @@ export default [{
   }],
   external: ['s-js', 'dom-expressions'],
   plugins
+}, {
+  input: 'src/dom/html.js',
+  output: [{
+    file: 'lib/html.js',
+    format: 'cjs'
+  }, {
+    file: 'dist/html.js',
+    format: 'es'
+  }],
+  external: ['solid-js/dom', 'lit-dom-expressions'],
+  plugins
+}, {
+  input: 'src/dom/h.js',
+  output: [{
+    file: 'lib/h.js',
+    format: 'cjs'
+  }, {
+    file: 'dist/h.js',
+    format: 'es'
+  }],
+  external: ['solid-js/dom', 'hyper-dom-expressions'],
+  plugins
 }];

src/dom/h.js

@@ -0,0 +1,5 @@
+import { createHyperScript } from 'hyper-dom-expressions';
+import { r } from 'solid-js/dom';
+export { selectWhen, selectEach } from 'solid-js/dom';
+
+export const h = createHyperScript(r);

src/dom/html.js

@@ -0,0 +1,5 @@
+import { createHTML } from 'lit-dom-expressions';
+import { r } from 'solid-js/dom';
+export { selectWhen, selectEach } from 'solid-js/dom';
+
+export const html = createHTML(r);

dom/src/index.js → src/dom/index.js

@@ -1,4 +1,4 @@
-import { createRuntime, createHyperScript } from 'dom-expressions';
+import { createRuntime } from 'dom-expressions';
 import S from 's-js';
 
 function createHandler(className) {
@@ -46,6 +46,4 @@ export function selectEach(signal, handler) {
     return newElements;
   });
   return (s, e) => (start = s, end = e);
-}
-
-export const h = createHyperScript(r);
+}