Merge pull request #130 from ryansolid/next

Revamp Reactive System and update to DOM Expressions

Author: ryansolid

CHANGELOG.md

@@ -1,4 +1,22 @@
 # Changelog
+## 0.17.0 - 2020-03-??
+A lot of consolidation in preparation for release candidate
+* Big refactor of core reactive system and render list reconciler
+  * Significantly smaller reducing core by atleast 3kb minified
+* Better handling of nested reactive nodes in Fragments
+* Update SSR mechanisms, added progressive event hydration, created repo for SSR environment (`solid-ssr`)
+* `@once` compiler hint to statically bind values
+* Better wrapping hueristics for booleans and ternaries in JSX
+
+Breaking Changes
+* Removed `transform` prop from control flow. Idiomatic approach is to make a HOC for transformations of this nature.
+* Removed selectWhen/selectEach control flow transforms.
+* Changed event system
+  * `on____` prop to stop differentiating on case. Super confusing.Instead will try to delegate unless unable. Made TypeScript all CamelCase (although technically both forms behave identically)
+  * Removed `model` event delegation approach. Instead to create bound event use array: `onClick={[handler, row.id]}`. Inspired by Inferno's `linkEvent` helper.
+  * Renamed `events` prop to `on` prop
+  * Added `onCapture` prop for capture events
+
 ## 0.16.0 - 2020-01-14
 Big changes to experimental features:
 * New resource API `createResource` and `createResourceState` to replace `loadResource`. These are built to prioritize read capabilities and simplify implementation.

README.md

@@ -139,7 +139,7 @@ The easiest way to get setup is add `babel-preset-solid` to your .babelrc, or ba
 
 Remember even though the syntax is almost identical, there are significant differences between how Solid's JSX works and a library like React. Refer to [JSX Rendering](../master/documentation/rendering.md) for more information.
 
-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).
+Alternatively in non-compiled environments you can use Tagged Template Literals [Lit DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/master/packages/lit-dom-expressions) or even HyperScript with [Hyper DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/master/packages/hyper-dom-expressions).
 
 For convenience Solid exports interfaces to runtimes for these as:
 
@@ -196,11 +196,11 @@ Remember you still need to install the library separately for these to work.
   Functional Reactive Programming extensions to Solid.js.
 - [DOM Expressions](https://github.com/ryansolid/dom-expressions)
   The renderer behind Solid.js that enables lightning fast fine grained performance.
-- [Babel Plugin JSX DOM Expressions](https://github.com/ryansolid/babel-plugin-jsx-dom-expressions)
+- [Babel Plugin JSX DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/master/packages/babel-plugin-jsx-dom-expressions)
   Babel plugin that converts JSX to DOM Expressions.
-- [Lit DOM Expressions](https://github.com/ryansolid/lit-dom-expressions)
+- [Lit DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/master/packages/lit-dom-expressions)
   Tagged Template Literal API for DOM Expressions.
-- [Hyper DOM Expressions](https://github.com/ryansolid/hyper-dom-expressions)
+- [Hyper DOM Expressions](https://github.com/ryansolid/dom-expressions/tree/master/packages/hyper-dom-expressions)
   HyperScript API for DOM Expressions.
 - [Solid Hot Loader](https://github.com/ryansolid/solid-hot-loader)
   Webpack Loader for HMR for Solid Components.

documentation/api.md

@@ -36,7 +36,7 @@ Creates a new resource signal that can hold a async resource. Resources when rea
 
 Creates a new Resource State object. Similar to normal state except each immediate property is a resource.
 
-### `onCleanup((final: boolean) => <code>)`
+### `onCleanup(() => <code>)`
 
 Registers a cleanup methodthat executes on disposal or recalculation of the current context.
 

documentation/rendering.md

@@ -8,7 +8,7 @@ Rendering involves precompilation of JSX templates into optimized native js code
 
 This approach both is more performant and produces less code then creating each element one by one with document.createElement.
 
-More documentation is available at: [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/babel-plugin-jsx-dom-expressions)
+More documentation is available at: [babel-plugin-jsx-dom-expressions](https://github.com/ryansolid/dom-expressions/tree/master/packages/babel-plugin-jsx-dom-expressions)
 
 ### Note on attribute binding order
 
@@ -32,9 +32,25 @@ render(() => <App />, document.getElementById("main"));
 
 ## Events
 
-on**\_** properties get added (addEventListener) as event handlers on the element. Camel Case events will be delegated by default and the second argument will be the model property or (nearest parent's). Use all lowercase for directly bound native events.
+`on_____` handlers are event handlers expecting a function. The compiler will delegate events where possible (Events that can be composed and bubble) else it will fall back to Level 1 spec "on**\_**" events.
 
-If you need to use non-lowercase or hyphenated event names use the events binding.
+If you wish to bind a value to your delegated event pass an array handler instead and the second argument will be passed to your event handler as the first argument (the event will be second). This can improve performance in large lists.
+
+```jsx
+function handler(itemId, e) {/*...*/}
+
+<ul>
+  <For each={state.list}>{item => <li onClick={[handler, item.id]} />}</For>
+</ul>
+```
+
+This delegation solution works with Web Components and the Shadow DOM as well if the events are composed. That limits the list to custom events and most UA UI events like onClick, onKeyUp, onKeyDown, onDblClick, onInput, onMouseDown, onMouseUp, etc..
+
+To allow for casing to work all custom events should follow the all lowercase convention of native events. If you want to use different event convention (or use Level 3 Events "addEventListener") use the "on" or "onCapture" binding.
+
+```jsx
+<div on={{ "Weird-Event": e => alert(e.detail) }} />
+```
 
 ## Control Flow
 
@@ -123,45 +139,53 @@ _Note these are designed to handle more complex scenarios like Component inserti
 Refs come in 2 flavours. `ref` which directly assigns the value, and `forwardRef` which calls a callback `(ref) => void` with the reference. To support forwarded properties on spreads, both `ref` and `forwardRef` are called as functions.
 
 ### `ref`
+
 ```jsx
 function MyComp() {
   let myDiv;
   setTimeout(() => console.log(myDiv.clientWidth));
-  return <div ref={myDiv} />
+  return <div ref={myDiv} />;
 }
 ```
+
 On a native intrinsic element as the element executes the provided variable will be assigned. This form usually is used in combination with `setTimeout` (same timing as React's `useEffect`) or `afterEffects`(same timing as React's `useLayoutEffect`) to do work after the component has mounted. Like do a DOM measurement or attach DOM plugins etc...
 
 When applied to a Component it acts similarly but also passes a prop in that is a function that is expected to be called with a ref to forward the ref (more on this in the next section):
+
 ```jsx
 function App() {
   let myDiv;
   setTimeout(() => console.log(myDiv.clientWidth));
-  return <MyComp ref={myDiv} />
+  return <MyComp ref={myDiv} />;
 }
 ```
 
 ### `forwardRef`
+
 This form expects a function like React's callback refs. Original use case is like described above:
+
 ```jsx
 function MyComp(props) {
-  return <div forwardRef={props.ref} />
+  return <div forwardRef={props.ref} />;
 }
 
 function App() {
   let myDiv;
   setTimeout(() => console.log(myDiv.clientWidth));
-  return <MyComp ref={myDiv} />
+  return <MyComp ref={myDiv} />;
 }
 ```
+
 You can also apply `forwardRef` on a Component:
+
 ```jsx
 function App() {
-  return <MyComp forwardRef={ref => console.log(ref.clientWidth)} />
+  return <MyComp forwardRef={ref => console.log(ref.clientWidth)} />;
 }
 ```
+
 This just passes the function through as `props.ref` again and work similar to the example above except it would run synchronously during render. You can use this to chain as many `forwardRef` up a Component chain as you wish.
 
 ## Server Side Rendering (Experimental)
 
-See [solid-ssr](https://github.com/ryansolid/solid/blob/master/packages/solid-ssr)
+See [solid-ssr](https://github.com/ryansolid/solid/blob/master/packages/solid-ssr)

lerna.json

@@ -2,5 +2,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.16.14"
+  "version": "0.17.0-beta.3"
 }