@sidiousvic/phantom
Advanced tools
@sidiousvic/phantom - npm Package Compare versions
Comparing version 2.1.4 to 2.1.5
@@ -12,5 +12,5 @@ # Changelog | ||
| ## [v2.1.4] — 2020.07.21 | ||
| ## [v2.1.5] — 2020.07.21 | ||
| - [x] Updated README. | ||
| - [x] Upgraded documentation | ||
@@ -77,3 +77,3 @@ ## [v2.1.2] — 2020.07.21 | ||
| [unreleased]: https://github.com/sidiousvic/phantom/compare/v2.1.2...HEAD | ||
| [v2.1.4]: https://github.com/sidiousvic/phantom/compare/v2.1.2...v2.1.4 | ||
| [v2.1.5]: https://github.com/sidiousvic/phantom/compare/v2.1.2...v2.1.5 | ||
| [v2.1.2]: https://github.com/sidiousvic/phantom/compare/v2.1.1...v2.1.2 | ||
@@ -80,0 +80,0 @@ [v2.1.1]: https://github.com/sidiousvic/phantom/compare/v2.1.0...v2.1.1 |
| { | ||
| "name": "@sidiousvic/phantom", | ||
| "version": "2.1.4", | ||
| "version": "2.1.5", | ||
| "description": "A state—reactive DOM rendering engine for building UIs. 👻", | ||
@@ -37,3 +37,3 @@ "main": "lib/phantom.js", | ||
| "preversion": "npm test", | ||
| "postversion": "git push origin --all; git push origin --tags", | ||
| "postversion": "git push origin --tags --no-verify", | ||
| "test": "jest && tsc spec/types.test.ts --noEmit", | ||
@@ -40,0 +40,0 @@ "example/pizza": "webpack --config examples/pizza/webpack.config.js && webpack-dev-server --mode development --hot --watch-stdin --config examples/pizza/webpack.config.js", |
145
README.md
@@ -45,9 +45,40 @@ # **Phantom** | ||
| ### 1. Create a Phantom store | ||
| ### 1. Write an entry Phantom component | ||
| In Phantom, components are functions that return HTML template literals. | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| Template strings allow you to inject dynamic data (including other components) via template literal placeholders `${}`. | ||
| ```js | ||
| export default function phantomComponent() { | ||
| const slices | ||
| return ` | ||
| <div id="pizza-box"> | ||
| <h1 id="slices-h1">🍕</h1> | ||
| </div> | ||
| `; | ||
| } | ||
| ``` | ||
| <br> | ||
| | 👻 We recommend the [`leet-html` VSCode extension](https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html) for HTML string highlighting. | | ||
| | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| <br> | ||
| </details> | ||
| ### 2. Create a Phantom store | ||
| Use `createPhantomStore` to produce your store. | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| ```js | ||
@@ -74,34 +105,9 @@ import { createPhantomStore } from "@sidiousvic/phantom"; | ||
| ### 2. Write an entry Phantom component | ||
| ### 3. Initialize Phantom and `appear()` | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| Start the Phantom engine by feeding it a component and a store. | ||
| Phantom components are functions that return HTML template strings. This allows you to inject dynamic data (including other components) via template literal placeholders `${}`. | ||
| ```js | ||
| export default function phantomComponent() { | ||
| const slices | ||
| return ` | ||
| <div id="pizza-box"> | ||
| <h1 id="slices-h1">🍕</h1> | ||
| </div> | ||
| `; | ||
| } | ||
| ``` | ||
| | 👻 We recommend the [`leet-html` VSCode extension](https://marketplace.visualstudio.com/items?itemName=EldarGerfanov.leet-html) for HTML string highlighting. | | ||
| | :------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| </details> | ||
| ### 3. Initialize Phantom and `appear()` | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| Start the Phantom engine by feeding it a component and a store. | ||
| ```js | ||
@@ -117,3 +123,3 @@ import phantom from "@sidiousvic/phantom"; | ||
| Phantom will then expose the `appear` method. 💥 | ||
| Phantom will expose the `appear` method. 💥 | ||
@@ -128,4 +134,6 @@ `appear` will perform the initial DOM render on call, your UI's first _apparition_. 👻 | ||
| Templating is cool and all, but what if we want to inject dynamic data to our components? What if we want our UI to _react_ to data changes? | ||
| Components are cool and all, but what if we want to use dynamic data? | ||
| What if we want our UI to _react_ to data changes? | ||
| Phantom integrates with a Redux—like store to subscribe the DOM to state updates. | ||
@@ -143,3 +151,3 @@ | ||
| const { appear, fire, data } = phantom(phantomComponent, phantomStore); | ||
| const { appear, data, fire } = phantom(phantomComponent, phantomStore); | ||
@@ -149,8 +157,4 @@ appear(); // 3, 2, 1... 🚀 initial render! | ||
| `fire` and `data` are pointers to the phantom store. You're welcome to call them from the store directly. | ||
| `data` and `fire` are pointers to the Phantom store. | ||
| `fire` takes an action and _fires_ it through the store. | ||
| `data` returns the current in—store _data_. | ||
| </details> | ||
@@ -160,2 +164,4 @@ | ||
| `data` returns the current in—store _data_. | ||
| <details> | ||
@@ -165,2 +171,8 @@ <summary><b>Show code ↯</b></summary> | ||
| ```js | ||
| const { slices } = data(); | ||
| ``` | ||
| Data can be passed as arguments to child components. | ||
| ```js | ||
| function phantomComponent() { | ||
@@ -174,9 +186,2 @@ const { slices } = data(); | ||
| </details> | ||
| ### 3. Inject data into your component using template literals. | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| You can use [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) placeholders to inject pieces of state into a component. | ||
@@ -196,3 +201,3 @@ | ||
| ### 4. Subscribe a component to data changes | ||
| ### 3. Use `fire` to dispatch an action and trigger a state update and rerender. | ||
@@ -202,24 +207,2 @@ <details> | ||
| Phantom can perform DOM differentiation and swap only the nodes whose state has updated. To activate this behavior, | ||
| - [x] Include a `data-phantom` attribute with the piece(s) of state that you want to subscribe to. | ||
| - [x] An id attribute. | ||
| ```js | ||
| return `<element data-phantom="${your - data}">${your - data}</element>`; | ||
| ``` | ||
| | ⚠️ If you don't do this, Phantom will repaint the entire DOM tree on data updates 👻 | | ||
| | :------------------------------------------------------------------------------------------ | | ||
| Phantom will look at at both the `data-phantom` and `id` attributes in order to compute if a DOM node has to be repainted. | ||
| </details> | ||
| ### 5. Use `fire` to dispatch an action and trigger a state update and rerender. | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| An action is an object with a `type` key and optional data payload. | ||
@@ -243,2 +226,24 @@ | ||
| ### 4. Subscribe a component to data changes | ||
| <details> | ||
| <summary><b>Show code ↯</b></summary> | ||
| Phantom can perform DOM differentiation and swap only the nodes whose state has updated. To activate this behavior, | ||
| ```js | ||
| return `<element data-phantom="${yourData}">${yourData}</element>`; | ||
| ``` | ||
| - [x] Include a `data-phantom` attribute with the piece(s) of state that you want to subscribe to. | ||
| - [x] An id attribute. | ||
| Phantom will look at at both the `data-phantom` and `id` attributes in order to compute if a DOM node has to be repainted. | ||
| | ⚠️ If you don't do this, Phantom will repaint the entire DOM on data updates. | | ||
| | :----------------------------------------------------------------------------------- | | ||
| </details> | ||
| <br> | ||
@@ -286,3 +291,3 @@ | ||
| When a component's data changes, Phantom will re—render that node in the DOM by diffing its internal **PseudoDOM**, an object representation of the DOM. | ||
| When a component's data changes, Phantom will re—render that node in the DOM by diffing an internal **PhantomDOM**, a map representation of the DOM. | ||
@@ -296,3 +301,3 @@ </details> | ||
| **Yes.** Phantom uses its internal [`phantomExorciser`](./src/exorciser) to sanitize HTML strings before injecting them into the DOM. | ||
| **Yes.** Phantom uses the internal **[PhantomExorciser](./src/exorciser)** to sanitize HTML strings before injecting them into the DOM. | ||
@@ -350,2 +355,4 @@ </details> | ||
| [](https://ko-fi.com/T6T81Y1BK) | ||
| <br> | ||
| <span style="float: right">[](https://ko-fi.com/T6T81Y1BK)</span> |
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 by2.08%
344
Worsened metrics
- Total package byte prevSize
- decreased by-0.13%
96775
No dependency changes