docs: code examples from codesandbox (#106)

hybridsjs · Jun 1, 2020 · 9d2933a · 9d2933a
1 parent b19fa44
commit 9d2933a
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,9 @@ export const SimpleCounter = {
 define('simple-counter', SimpleCounter);
 ```
 
-👆 [Click and play on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-simple-counter?file=simple-counter.js)
+> Click and play with `<simple-counter>` example:
+>
+> [![Edit <simple-counter> web component built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/simple-counter-web-component-built-with-hybrids-library-co2ow?file=/src/SimpleCounter.js)
 
 Finally, use your custom element in HTML:
 
@@ -133,17 +135,17 @@ The hybrids documentation is available at [hybrids.js.org](https://hybrids.js.or
 ### Videos
 
 * [Taste the Future with Functional Web Components](https://youtu.be/WZ1MEHuxHGg) *(EN, ConFrontJS Conference)*
-* [Hybrids - Web Components with Simple and Functional API](https://youtu.be/ni0d34Yrugk) *(PL, WarsawJS Meetup #46)*
+* [Hybrids - Web Components with Simple and Functional API](https://youtu.be/ni0d34Yrugk) *(PL, WarsawJS Meetup #46)
 
 ## Live Examples
 
-- [&lt;simple-counter&gt;](https://stackblitz.com/edit/hybrids-simple-counter?file=simple-counter.js) - a button with counter controlled by own state
-- [&lt;redux-counter&gt;](https://stackblitz.com/edit/hybrids-redux-counter?file=redux-counter.js) - Redux library for state management
-- [&lt;react-counter&gt;](https://stackblitz.com/edit/hybrids-react-counter?file=react-counter.js) - render factory and [React](https://reactjs.org/) library for rendering in shadow DOM
-- [&lt;lit-counter&gt;](https://stackblitz.com/edit/hybrids-lit-html-counter?file=lit-counter.js) - render factory and [lit-html](https://lit-html.polymer-project.org/) for rendering in shadow DOM
-- [&lt;app-todos&gt;](https://stackblitz.com/edit/hybrids-parent-factory?file=index.js) - todo list using parent factory for state management
-- [&lt;tab-group&gt;](https://stackblitz.com/edit/hybrids-children-factory?file=index.js) - switching tabs using children factory
-- [&lt;async-user&gt;](https://stackblitz.com/edit/hybrids-async-user?file=async-user.js) - async data in the template
+* [&lt;simple-counter&gt;](https://codesandbox.io/s/simple-counter-web-component-built-with-hybrids-library-co2ow?file=/src/SimpleCounter.js) - a button with counter controlled by own state
+* [&lt;redux-counter&gt;](https://codesandbox.io/s/redux-counter-web-component-built-with-hybrids-library-jrqzp?file=/src/ReduxCounter.js) - Redux library for state management
+* [&lt;react-counter&gt;](https://codesandbox.io/s/react-counter-web-component-built-with-hybrids-library-u0g8k?file=/src/ReactCounter.jsx) - render factory and [React](https://reactjs.org/) library for rendering in shadow DOM
+* [&lt;lit-counter&gt;](https://codesandbox.io/s/lit-counter-web-component-built-with-hybrids-library-qoqb5?file=/src/LitCounter.js) - render factory and [lit-html](https://lit-html.polymer-project.org/) for rendering in shadow DOM
+* [&lt;app-todos&gt;](https://codesandbox.io/s/app-todos-web-components-built-with-hybrids-library-behpb?file=/src/index.js) - todo list using parent factory for state management
+* [&lt;tab-group&gt;](https://codesandbox.io/s/tab-group-web-component-built-with-hybrids-library-e2t3e?file=/src/index.js) - switching tabs using children factory
+* [&lt;async-user&gt;](https://codesandbox.io/s/async-user-web-component-built-with-hybrids-library-fhx3j?file=/src/AsyncUser.js) - async data in the template
 
 ## Browser Support
 

diff --git a/docs/built-in-factories/parent-children.md b/docs/built-in-factories/parent-children.md
@@ -42,7 +42,9 @@ const MyElement = {
 </app-store>
 ```
 
-👆 [Click and play with parent factory on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-parent-factory?file=index.js)
+> Click and play with parent factory example, which creates shared state between components:
+>
+> [![Edit <app-todos> web components built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/app-todos-web-components-built-with-hybrids-library-behpb?file=/src/index.js)
 
 ## Children
 
@@ -86,7 +88,9 @@ const TabGroup = {
 </tab-group>
 ```
 
-👆 [Click and play with children factory on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-children-factory?file=index.js)
+> Click and play with above children factory example:
+>
+> [![Edit <tab-group> web component built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/tab-group-web-component-built-with-hybrids-library-e2t3e?file=/src/index.js)
 
 ## Complex Conditions
 

diff --git a/docs/built-in-factories/render.md b/docs/built-in-factories/render.md
@@ -27,13 +27,17 @@ export const MyElement = {
 
 Render factory creates and updates the DOM structure of your custom element. It works out of the box with built-in [template engine](../template-engine/introduction.md), but the passed `fn` function may use any external UI library that renders DOM.
 
-👆 [Click and play with `render` factory using  `React` library on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-react-counter?file=react-counter.js)
+> Click and play with render factory example using [React](http://reactjs.org/) library:
+>
+> [![Edit <react-counter> web component built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-counter-web-component-built-with-hybrids-library-u0g8k?file=/src/ReactCounter.jsx)
 
 Render factory trigger the update of the DOM by the `observe` method of the descriptor. It means that an update is scheduled with the internal queue and executed in the next animation frame. The passed `fn` is always called for the first time and when related properties change.
 
 If you use render factory for wrapping other UI libraries, remember to access required properties from the `host` synchronously in the body of `fn` function (only then cache mechanism can save dependencies for the update). Otherwise, your function might be called only once.
 
-👆 [Click and play with `render` factory using  `lit-html` library on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-lit-html-counter?file=lit-counter.js)
+> Click and play with render factory using [lit-html](https://lit-html.polymer-project.org/) library:
+>
+> [![Edit <lit-counter> web component built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lit-counter-web-component-built-with-hybrids-library-qoqb5?file=/src/LitCounter.js)
 
 ## Translation
 

diff --git a/docs/core-concepts/descriptors.md b/docs/core-concepts/descriptors.md
@@ -174,7 +174,9 @@ const MyElement = {
 };
 ```
 
-👆 [Click and play with `redux` integration on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-redux-counter?file=redux-counter.js)
+> Click and play with [redux](redux.js.org) library integration example:
+>
+> [![Edit <redux-counter> web component built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/redux-counter-web-component-built-with-hybrids-library-jrqzp?file=/src/ReduxCounter.js)
 
 In the above example, a cached value of `name` property invalidates if `reduxStore` changes. However, the `get` method is called if you access the property.
 

diff --git a/docs/template-engine/iteration.md b/docs/template-engine/iteration.md
@@ -12,7 +12,9 @@ html`
 `;
 ```
 
-👆 [Click and play with todo list on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-children-factory?file=index.js)
+> Click and play with todo list example:
+>
+> [![Edit <app-todos> web components built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/app-todos-web-components-built-with-hybrids-library-behpb?file=/src/index.js)
 
 ## Keys
 

diff --git a/docs/template-engine/promises.md b/docs/template-engine/promises.md
@@ -28,4 +28,6 @@ html`
 `
 ```
 
-👆 [Click and play with &lt;async-user&gt; custom element on ⚡StackBlitz](https://stackblitz.com/edit/hybrids-async-user?file=async-user.js)
+> Click and play with web component example connected to external API:
+>
+> [![Edit <async-user> web component built with hybrids library](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/async-user-web-component-built-with-hybrids-library-fhx3j?file=/src/AsyncUser.js)