diff --git a/CHANGELOG.md b/CHANGELOG.md index 79ff3d9e7..14ddda1f4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,12 @@ # Changelog +## 0.10.0 - 2019-08-11 +v0.10.0 makes significant changes to the reactive system. Key updates: +* Fixed synchronicity on all hooks/control flows. +* Adds the ability to use comparators on `createMemo`. +* Fixes bugs with nested control flows. +* Fixes bugs with Suspense. +* Update Suspense `delayMs` to `maxDuration` to match React. (Usage of `maxDuration` still experimental) + ## 0.9.0 - 2019-07-20 v0.9.0 makes signifigant changes to underlying reconciler. * New Control Flow diff --git a/README.md b/README.md index 75aec2267..fd3b4ac55 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Solid is yet another declarative Javascript library for creating user interfaces * Declarative data * Simple composable primitives without the hidden rules. * Function Components with no need for lifecycle methods or specialized configuration objects. -* Less than 10% slower vs optimized painfully imperative vanilla DOM code. See Solid on [JS Framework Benchmark](https://github.com/krausest/js-framework-benchmark). +* Almost indistinguishable performance vs optimized painfully imperative vanilla DOM code. See Solid on [JS Framework Benchmark](https://github.com/krausest/js-framework-benchmark). * Supports modern features like JSX Fragments, Context, Portals, Suspense, and Asynchronous Rendering. * Webcomponent friendly * Implicit event delegation with Shadow DOM Retargeting @@ -119,7 +119,7 @@ onCleanup(() => unsubscribe()); 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 `{( )}`. -> Prettier and some compile to JS libraries like CoffeeScript will strip Parenthesis causing issues with Solid's JSX. So unfortunately they are incompatible at this time. +> Prettier and some compile to JS libraries like CoffeeScript will strip Parenthesis causing issues with Solid's JSX. So unfortunately they are incompatible at this time. Use `// prettier-ignore` at the top of your JSX to have Prettier not format your JSX. The easiest way to get setup is add `babel-preset-solid` to your .babelrc, or babel config for webpack, or rollup: @@ -206,6 +206,7 @@ React Hooks API to use Solid.js paradigm in your existing React apps. ## Articles +* [How we wrote the Fastest JavaScript UI Frameworks](https://medium.com/@ryansolid/how-we-wrote-the-fastest-javascript-ui-frameworks-a96f2636431e) * [Finding Fine Grained Reactive Programming](https://levelup.gitconnected.com/finding-fine-grained-reactive-programming-89741994ddee?source=friends_link&sk=31c66a70c1dce7dd5f3f4229423ad127) Introduction to the inner workings of Solid's Reactive system. * [The Real Cost of UI Components](https://medium.com/better-programming/the-real-cost-of-ui-components-6d2da4aba205?source=friends_link&sk=a412aa18825c8424870d72a556db2169) Comparison of the cost of Components in different UI Libraries. * [The Fastest Way to Render the DOM](https://medium.com/@ryansolid/the-fastest-way-to-render-the-dom-e3b226b15ca3?source=friends_link&sk=5ae1688dde789e46cecf5c976e708da5) Comparison of all Solid Renderers against the Fastest Libraries in the World. diff --git a/documentation/rendering.md b/documentation/rendering.md index 9d001cf9d..099e4bc4f 100644 --- a/documentation/rendering.md +++ b/documentation/rendering.md @@ -80,5 +80,5 @@ const [state, setState] = createState({ ## Refs -Refs come in 2 flavours. Ref which directly assigns the value, and forwardRef which calls a callback `(ref) => void` with the reference. +Refs come in 2 flavours. `ref` which directly assigns the value, and `forwardRef` which calls a callback `(ref) => void` with the reference. diff --git a/package-lock.json b/package-lock.json index 97bd895a5..0e824cab7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "solid-js", - "version": "0.10.0-beta.0", + "version": "0.10.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1784,9 +1784,9 @@ "dev": true }, "coveralls": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/coveralls/-/coveralls-3.0.5.tgz", - "integrity": "sha512-/KD7PGfZv/tjKB6LoW97jzIgFqem0Tu9tZL9/iwBnBd8zkIZp7vT1ZSHNvnr0GSQMV/LTMxUstWg8WcDDUVQKg==", + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/coveralls/-/coveralls-3.0.6.tgz", + "integrity": "sha512-Pgh4v3gCI4T/9VijVrm8Ym5v0OgjvGLKj3zTUwkvsCiwqae/p6VLzpsFNjQS2i6ewV7ef+DjFJ5TSKxYt/mCrA==", "dev": true, "requires": { "growl": "~> 1.10.0", diff --git a/package.json b/package.json index abaae0f24..d7f819475 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "solid-js", "description": "A declarative JavaScript library for building user interfaces.", - "version": "0.10.0-beta.0", + "version": "0.10.0", "author": "Ryan Carniato", "license": "MIT", "repository": { @@ -26,7 +26,7 @@ "@babel/preset-env": "7.5.5", "@babel/preset-typescript": "^7.3.3", "babel-plugin-jsx-dom-expressions": "~0.11.2", - "coveralls": "^3.0.5", + "coveralls": "^3.0.6", "ncp": "2.0.0", "dom-expressions": "0.11.1", "hyper-dom-expressions": "~0.11.1", diff --git a/src/dom/index.ts b/src/dom/index.ts index e2c30bb79..f796ff6e1 100644 --- a/src/dom/index.ts +++ b/src/dom/index.ts @@ -87,14 +87,14 @@ export function Match(props: MatchProps) { } export function Suspense(props: { - delayMs?: number; + maxDuration?: number; fallback: any; children: any; }) { return createComponent( SuspenseContext.Provider, { - value: props.delayMs, + value: props.maxDuration, children: () => { let dispose: () => void; const c = useContext(SuspenseContext), diff --git a/src/suspense.ts b/src/suspense.ts index 05cb28160..3f664900f 100644 --- a/src/suspense.ts +++ b/src/suspense.ts @@ -10,7 +10,7 @@ import { import { createState, Wrapped } from "./state"; // Suspense Context -export const SuspenseContext = createContext((delayMs: number = 0) => { +export const SuspenseContext = createContext((maxDuration: number = 0) => { let counter = 0, t: NodeJS.Timeout, suspended = false; @@ -19,7 +19,7 @@ export const SuspenseContext = createContext((delayMs: number = 0) => { increment: () => { if (++counter === 1) { if (!store.initializing) { - t = setTimeout(() => ((suspended = true), next()), delayMs); + t = setTimeout(() => ((suspended = true), next()), maxDuration); } else suspended = true; } }, diff --git a/test/dom/suspense.spec.jsx b/test/dom/suspense.spec.jsx index b7994b11a..70badf75c 100644 --- a/test/dom/suspense.spec.jsx +++ b/test/dom/suspense.spec.jsx @@ -11,7 +11,7 @@ describe('Testing a context suspend control flow', () => { return props.greeting; }, Component = () => - +