Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
solid-js - npm Package Compare versions
Comparing version 0.4.5 to 0.5.0-beta.1
| # 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. | ||
| - Reorganized dependencies work. | ||
| ## 0.4.2 - 2019-03-18 | ||
@@ -4,0 +8,0 @@ - Add fallbacks for control flow |
@@ -1,2 +0,2 @@ | ||
| import { createRuntime, createHyperScript } from 'dom-expressions'; | ||
| import { createRuntime } from 'dom-expressions'; | ||
| import S from 's-js'; | ||
@@ -51,4 +51,2 @@ | ||
| const h = createHyperScript(r); | ||
| export { h, r, selectEach, selectWhen }; | ||
| export { r, selectEach, selectWhen }; |
@@ -57,7 +57,4 @@ 'use strict'; | ||
| const h = domExpressions.createHyperScript(r); | ||
| exports.h = h; | ||
| exports.r = r; | ||
| exports.selectEach = selectEach; | ||
| exports.selectWhen = selectWhen; |
| { | ||
| "name": "solid-js", | ||
| "description": "A declarative JavaScript library for building user interfaces.", | ||
| "version": "0.4.5", | ||
| "version": "0.5.0-beta.1", | ||
| "author": "Ryan Carniato", | ||
@@ -20,3 +20,3 @@ "license": "MIT", | ||
| "dependencies": { | ||
| "dom-expressions": "~0.6.0", | ||
| "dom-expressions": "~0.7.1", | ||
| "s-js": "~0.4.9" | ||
@@ -27,5 +27,5 @@ }, | ||
| "jest": "~24.7.1", | ||
| "rollup": "^1.9.0", | ||
| "rollup": "^1.10.0", | ||
| "rollup-plugin-node-resolve": "^4.1.0" | ||
| } | ||
| } |
@@ -9,2 +9,3 @@ ## <img src="assets/logo.png" alt="drawing" width="500"/><br> The Deceptively Simple User Interface Library | ||
|  | ||
| [](https://spectrum.chat/solid-js) | ||
@@ -50,2 +51,4 @@ Solid is yet another declarative Javascript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile it's templates down to real DOM nodes and wrap updates in fine grained computations. This way when your state updates only the code that depends on it runs. | ||
| 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 | ||
@@ -117,6 +120,4 @@ | ||
| 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 `{( )}`. | ||
| 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 `{( )}`. | ||
| 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. | ||
| To get setup add this babel plugin config to your .babelrc, webpack, or rollup config: | ||
@@ -134,8 +135,10 @@ | ||
| 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. | ||
@@ -231,3 +234,3 @@ ## Components | ||
| * [Signals](../master/documentation/signals.md) | ||
| * [Rendering](../master/documentation/rendering.md) | ||
| * [JSX Rendering](../master/documentation/rendering.md) | ||
| * [API](../master/documentation/api.md) | ||
@@ -264,12 +267,13 @@ | ||
| ## Articles | ||
| ## Past Articles | ||
| * [Solid — The Best JavaScript UI Library You’ve Never Heard Of](https://levelup.gitconnected.com/solid-the-best-javascript-ui-library-youve-never-heard-of-297b22848ac1?source=friends_link&sk=d61fc9352b4a98c6c9f5f6bd2077a722) | ||
| * [What Every JavaScript Framework Could Learn from React](https://medium.com/@ryansolid/what-every-javascript-framework-could-learn-from-react-1e2bbd9feb09?source=friends_link&sk=75b3f6f90eecc7d210814baa2d5ab52c) The lessons Solid learned from React. | ||
| * [React Hooks: Has React Jumped the Shark?](https://medium.com/js-dojo/react-hooks-has-react-jumped-the-shark-c8cf04e246cf?source=friends_link&sk=a5017cca813ea970b480cc44afb32034) Comparison of React Hooks to Solid. | ||
| * [How I wrote the Fastest JavaScript UI Framework](https://medium.com/@ryansolid/how-i-wrote-the-fastest-javascript-ui-framework-37525b42d6c9?source=friends_link&sk=8eb9387a535a306d1eb96f7ce88c4db5) The key to Solid's performance. | ||
| * [Part 5: JS Frameworks in 2019](https://medium.com/@ryansolid/b-y-o-f-part-5-js-frameworks-in-2019-deb9c4d3e74) | ||
| * [Part 4: Rendering the DOM](https://medium.com/@ryansolid/b-y-o-f-part-4-rendering-the-dom-753657689647) | ||
| * [Part 3: Change Management in JavaScript Frameworks](https://medium.com/@ryansolid/b-y-o-f-part-3-change-management-in-javascript-frameworks-6af6e436f63c) | ||
| * [Part 2: Web Components as Containers](https://medium.com/@ryansolid/b-y-o-f-part-2-web-components-as-containers-85e04a7d96e9) | ||
| * [Part 1: Writing a JS Framework in 2018](https://medium.com/@ryansolid/b-y-o-f-part-1-writing-a-js-framework-in-2018-b02a41026929) | ||
| * [Part 2: Web Components as Containers](https://medium.com/@ryansolid/b-y-o-f-part-2-web-components-as-containers-85e04a7d96e9) | ||
| * [Part 3: Change Management in JavaScript Frameworks](https://medium.com/@ryansolid/b-y-o-f-part-3-change-management-in-javascript-frameworks-6af6e436f63c) | ||
| * [Part 4: Rendering the DOM](https://medium.com/@ryansolid/b-y-o-f-part-4-rendering-the-dom-753657689647) | ||
| * [Part 5: JS Frameworks in 2019](https://medium.com/@ryansolid/b-y-o-f-part-5-js-frameworks-in-2019-deb9c4d3e74) | ||
| * [How I wrote the Fastest JavaScript UI Framework](https://medium.com/@ryansolid/how-i-wrote-the-fastest-javascript-ui-framework-37525b42d6c9?source=friends_link&sk=8eb9387a535a306d1eb96f7ce88c4db5) The key to Solid's performance. | ||
| * [React Hooks: Has React Jumped the Shark?](https://medium.com/js-dojo/react-hooks-has-react-jumped-the-shark-c8cf04e246cf?source=friends_link&sk=a5017cca813ea970b480cc44afb32034) Comparison of React Hooks to Solid. | ||
| * [What Every JavaScript Framework Could Learn from React](https://medium.com/@ryansolid/what-every-javascript-framework-could-learn-from-react-1e2bbd9feb09?source=friends_link&sk=75b3f6f90eecc7d210814baa2d5ab52c) The lessons Solid learned from React. | ||
@@ -276,0 +280,0 @@ ## Status |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by1.47%
277
Worsened metrics
- Total package byte prevSize
- decreased by-75.14%
42118
- Number of package files
- decreased by-25%
15
- Lines of code
- decreased by-49.52%
635
Dependency changes
+ Addeddom-expressions@0.7.10(transitive)
- Removeddom-expressions@0.6.0(transitive)
Updateddom-expressions@~0.7.1