Note: There is an official example with-nanostores that lets two islands communicate via nanostores.
Caution: At this point it is unclear whether this technique interferes with the islands autonomous hydration process. On the surface this seems to work but it's not clear what potential drawbacks there may be.
The experiment was performed on a "Starter Kit" installation with a Preact renderer.
| <!doctype html> | |
| <html lang="eng"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>useInitializer</title> | |
| </head> | |
| <body> | |
| <script type="module"> | |
| import { html, render, useState } from '//unpkg.com/htm/preact/standalone.mjs'; |
| /* | |
| **Very Rough** approximation of | |
| fizzbuzz :: Int → String | |
| fizzbuzz n = (test 3 "fizz" ◦ test 5 "buzz") id (show n) | |
| where | |
| test d s x | n ‘mod‘ d ≡ 0 = const (s ++ x "") | |
| | otherwise = x | |
| test :: Int → String → (String → String) → String → String |
| <!doctype html> | |
| <html lang="eng"> | |
| <!-- | |
| Originally: | |
| https://elixirforum.com/t/passing-json-between-simple-reactjs-and-phoenix-elixir/19799/6 | |
| See also: | |
| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Embedding_data_in_HTML | |
| --> | |
| <head> |
| // file: /src/index.js | |
| import fastify from 'fastify'; | |
| import marko from 'marko'; | |
| import pointOfView from 'point-of-view'; | |
| const app = fastify({ | |
| logger: true | |
| }); | |
| app.register(pointOfView, { |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- | |
| "A progressive disclosure component" | |
| https://piccalil.li/tutorial/a-progressive-disclosure-component | |
| with regular-elements | |
| https://github.com/WebReflection/regular-elements | |
| instead of a web component | |
| --> | |
| <head> |
| <!DOCTYPE html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>itertools.permutations in vanilla JavaScript</title> | |
| </head> | |
| <body> | |
| <p>Check Developer Tools Console (Chrome) or Web Developer Web Console (Firefox) </p> |
| <!doctype html> | |
| <html lang="eng"> | |
| <!-- | |
| --> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Transform Benchmark</title> | |
| <style> | |
| p { | |
| font: 1.25em monospace; |
| <!doctype html> | |
| <html lang="eng"> | |
| <!-- | |
| Based on: Getting Your Head Around Vue.js Scoped Slots - Anthony Gore | |
| https://vuejsdevelopers.com/2017/10/02/vue-js-scoped-slots/ | |
| https://codepen.io/anthonygore/pen/zExPZX | |
| --> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>"Slots" in Preact using children prop</title> |
| window._log('ECMAScript 2015 - with classes but no modules'); |