Skip to content

Commit

Permalink
docs: update live demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@kt3k
kt3k committed Jun 18, 2024
1 parent efede40 commit ddf9784
Show file tree
Hide file tree
Showing 7 changed files with 74 additions and 62 deletions.
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<img src="https://raw.githubusercontent.com/kt3k/cell/main/cell-logo.svg" width="70" alt="capsule" />
<img src="https://kt3k.github.io/cell/cell-logo.svg" width="70" alt="cell" />

# Cell v0.1.4

Expand Down Expand Up @@ -59,11 +59,11 @@ Vanilla js (ES Module):

```html
<script type="module">
import { register } from "https://TBD";
import { register } from "https://kt3k.github.io/cell/dist.min.js";
function Mirroring({ on, query }: Context) {
on.input = () => {
query(".src").textContent = query(".dest").value;
query(".dest").textContent = query(".src").value;
};
}
Expand Down
2 changes: 1 addition & 1 deletion deno.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"size": "deno run --allow-read https://deno.land/x/[email protected]/cli.ts --include-original docs/dist.min.js",
"twd": "deno run -A --allow-read=. --allow-write=style.css --allow-net=deno.land,esm.sh,cdn.esm.sh https://deno.land/x/[email protected]/cli.ts -o style.css index.html",
"twd-w": "deno task twd -- -w",
"start": "deno run --allow-read=. --allow-net=0.0.0.0:8000 deploy.ts"
"start": "deno run --allow-sys --allow-read=. --allow-net=0.0.0.0:8000 jsr:@std/http/file-server docs --port 8000"
},
"imports": {
"@std/assert": "jsr:@std/assert@^0.226.0"
Expand Down
0 cell-logo.svg → docs/cell-logo.svg
View file
File renamed without changes
2 changes: 2 additions & 0 deletions docs/dist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,7 @@ function addEventListener(name, el, type, handler, selector) {
`Event handler must be a function, ${typeof handler} (${handler}) is given`
);
const listener = (e) => {
console.log("hi", e);
if (!selector || [].some.call(
el.querySelectorAll(selector),
(node) => node === e.target || node.contains(e.target)
Expand All @@ -177,6 +178,7 @@ function addEventListener(name, el, type, handler, selector) {
el.addEventListener(`__unmount__:${name}`, () => {
el.removeEventListener(type, listener);
}, { once: true });
console.log(`addEventListener(${type})`, handler);
el.addEventListener(type, listener);
}
function mount(name, el) {
Expand Down
2 changes: 1 addition & 1 deletion docs/dist.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

124 changes: 67 additions & 57 deletions index.html → docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/svg" href="capsule-logo.svg" />
<link rel="icon" type="image/svg" href="cell-logo.svg" />
<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://packup.deno.dev/monaco-editor/min/vs/editor/editor.main.css" />
<title>Capsule | Event-driven DOM programming in a new style</title>
<title>Cell | Event-driven DOM programming in a new style</title>
<meta name="description" content="📦 Zero-config web application packager for Deno 🦕">
</head>

<main class="max-w-screen-lg px-2 m-auto">
<a href="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/capsidjs/capsule">
<a href="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/kt3k/cell">
<h1 class="text-2xl font-semibold mt-20 flex items-center gap-2">
<img class="w-7 h-7" src="capsule-logo.svg" />
Capsule examples
<img class="w-7 h-7" src="cell-logo.svg" />
Cell examples
</h1>
</a>
<p class="text-gray-700 mt-4">
This page shows the examples of
<a href="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/capsidjs/capsule" class="bg-blue-50 text-blue-800 underline font-medium rounded border px-1 py-0.5">capsule</a>
<a href="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/kt3k/cell" class="bg-blue-50 text-blue-800 underline font-medium rounded border px-1 py-0.5">cell</a>
frontend library.</p>
<section class="example mt-10">
<h2 class="text-lg font-medium">Mirroring example</h2>
<p class="text-gray-700 mt-1">The example of mirroring the input value to another dom.</p>
<h3 class="mt-10">JS</h3>
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">const { on } = component("mirroring");
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">function Mirroring({ on, query }) {
on.input = () => {
query(".dest").textContent = query(".src").value;
};
}

on.input = ({ query }) => {
query(".dest").textContent = query(".src").value;
};</pre>
register(Mirroring, "js-mirroring");</pre>
<h3 class="mt-10">HTML</h3>
<pre class="html-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2"></pre>
<template>
<div class="mirroring">
<input class="src border" />
<div class="js-mirroring">
<input class="src border" placeholder="Type something" />
<p class="dest"></p>
</div>
</template>
Expand All @@ -42,18 +44,18 @@ <h3 class="mt-10">Result</h3>
<hr class="my-10 -mx-2 lg:mx-2" />

<section class="example">
<h2 class="text-lg font-medium">Mount hook example</h2>
<p>When you assign a function to "on.__mount__", it's called when the component is mounted.</p>
<h2 class="text-lg font-medium">Returning HTML from component</h2>
<p>If you return string from your component function, that string becomes the body your mounted element.</p>
<h3 class="mt-10">JS</h3>
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">const { on } = component("hello");
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">function Hello({ el }) {
return `Hello, I'm ${el.textContent}! 👋`;
};

on.__mount__ = ({ el }) => {
el.textContent = `Hello, I'm ${el.textContent}! 👋`;
};</pre>
register(Hello, "js-hello");</pre>
<h3 class="mt-10">HTML</h3>
<pre class="html-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2"></pre>
<template>
<div class="hello">John Doe</div>
<div class="js-hello">John Doe</div>
</template>
<h3 class="mt-10">Result</h3>
<div class="result border rounded-lg p-5 mt-5"></div>
Expand All @@ -64,32 +66,32 @@ <h3 class="mt-10">Result</h3>
<section class="example">
<h2 class="text-lg font-medium">Pubsub example</h2>
<p>
<a href="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/capsidjs/capsule" class="bg-blue-50 text-blue-800 underline font-medium rounded border px-1 py-0.5">capsule</a>
<a href="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/kt3k/cell" class="bg-blue-50 text-blue-800 underline font-medium rounded border px-1 py-0.5">cell</a>
supports pubsub pattern with "pub" and "sub" methods.
</p>
<h3 class="mt-10">JS</h3>
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">const EVENT = "my-event";

{
const { on } = component("pub-element");

on.click = ({ pub }) => {
function PubComponent({ on, pub }) {
on.click = () => {
pub(EVENT, { hello: "clicked!" });
};
}

{
const { on, sub } = component("sub-element");

function SubComponent({ el, on, sub }) {
sub(EVENT);

on[EVENT] = ({ e, el }) => {
on[EVENT] = (e) => {
el.textContent += " " + e.detail.hello;
};
}</pre>
}

register(PubComponent, "js-pub-component");
register(SubComponent, "js-sub-component");</pre>
<template>
<button class="pub-element">publisher (click here)</button>
<div class="sub-element">subscriber</div>
<button class="js-pub-component border">publisher (click here)</button>
<hr class="my-10" />
<div class="js-sub-component border">subscriber</div>
</template>
<h3 class="mt-10">HTML</h3>
<pre class="html-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2"></pre>
Expand All @@ -102,12 +104,12 @@ <h3 class="mt-10">Result</h3>
<section class="example">
<h2 class="text-lg font-medium">Event delegation example</h2>
<p>
Capsule supports
Cell supports
<a href="https://www.geeksforgeeks.org/event-delegation-in-javascript/" class="bg-purple-50 text-purple-800 underline font-medium rounded border px-1 py-0.5">Event delegation</a>
pattern.
</p>
<template>
<div class="delegation-example">
<div class="js-delegation">
<button class="btn border rounded p-2 m-2">btn</button>
<p>
The event handler is bound to wrapper div (.delegation-example), but the handler is
Expand All @@ -118,12 +120,13 @@ <h2 class="text-lg font-medium">Event delegation example</h2>
</div>
</template>
<h3 class="mt-10">JS</h3>
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">const { on } = component("delegation-example");
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">function Delegation({ on, query }) {
on(".btn").click = () => {
query(".result").textContent += " .btn clicked!";
};
}

on(".btn").click = ({ query }) => {
query(".result").textContent += " .btn clicked!";
};
</pre>
register(Delegation, "js-delegation");</pre>
<h3 class="mt-10">HTML</h3>
<pre class="html-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2"></pre>
<h3 class="mt-10">Result</h3>
Expand All @@ -136,17 +139,19 @@ <h3 class="mt-10">Result</h3>
<h2 class="text-lg font-medium">Outside event example</h2>
<p>
When you're creating floating UI patterns such as tooltips or modal dialogs, you often need to handle the events "outside" of the target dom.
Capsule supports this pattern with "on.outside[eventName]".
Cell supports this pattern with "on.outside[eventName]".
</p>
<template>
<div class="outside-example">click outside of this area.</div>
<div class="js-outside-example border">click outside of this area.</div>
</template>
<h3 class="mt-10">JS</h3>
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">const { on } = component("outside-example");
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">function OutsideComponent({ el, on }) {
on.outside.click = () => {
el.textContent += " outside clicked!";
}
}

on.outside.click = ({ el }) => {
el.textContent += " outside clicked!";
}</pre>
register(OutsideComponent, "js-outside-example");</pre>
<h3 class="mt-10">HTML</h3>
<pre class="html-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2"></pre>
<h3 class="mt-10">Result</h3>
Expand All @@ -159,28 +164,30 @@ <h3 class="mt-10">Result</h3>
<h2 class="text-lg font-medium">Prevent default example</h2>
<p>If you need to preventDefault or stopPropagation, you can access it via '.e' prop.</p>
<template>
<a href="https://google.com" class="prevent-example underline">Link</a>
<a href="https://google.com" class="js-prevent-default-example underline">Link</a>
</template>
<h3 class="mt-10">JS</h3>
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">const { on } = component("prevent-example");
<pre class="js-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2">function PreventDefaultComponent({ on }) {
on.click = (e) => {
e.preventDefault();
alert("A link is clicked, but the page doesn't move to the target url because the default behavior is prevented ;)");
};
}

on.click = ({ e }) => {
e.preventDefault();
alert("A link is clicked, but the page doesn't move to the target url because the default behavior is prevented ;)");
};</pre>
register(PreventDefaultComponent, "js-prevent-default-example");</pre>
<h3 class="mt-10">HTML</h3>
<pre class="html-source overflow-x-scroll lg:rounded-lg shadow-lg bg-gray-800 text-gray-100 p-5 mt-5 -mx-2"></pre>
<h3 class="mt-10">Result</h3>
<div class="result border rounded-lg p-5 mt-5"></div>
</section>
<p class="mt-10">
More details about capsule library is available in
<a class="underline" href="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/capsidjs/capsule">the github repository</a>.
More details about cell library is available in
<a class="underline" href="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/kt3k/cell">the github repository</a>.
</p>
</main>
<footer class="mt-10 py-10 flex items-center justify-center gap-2">
<img class="w-7 h-7" src="capsule-logo.svg" />
<a class="font-medium" href="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/capsidjs/capsule">Capsule</span>
<img class="w-7 h-7" src="cell-logo.svg" />
<a class="font-medium" href="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/kt3k/cell">Cell</span>
</footer>
<script>
var require = { paths: { vs: 'https://packup.deno.dev/monaco-editor/min/vs' } };
Expand All @@ -192,8 +199,9 @@ <h3 class="mt-10">Result</h3>
});
</script>
<script type="module">
import { component } from "./dist.js";
component("example").on.__mount__ = ({ el, query }) => {
import { register } from "./dist.min.js";

function ExampleComponent({ el, query }) {
const result = query(".result");
result.appendChild(query("template").content.cloneNode(true));
query(".html-source").textContent = result.innerHTML.trim();
Expand All @@ -205,5 +213,7 @@ <h3 class="mt-10">Result</h3>
}
monaco.editor.colorizeElement(query(".html-source"), { mimeType: "text/html", theme: "vs-dark" });
monaco.editor.colorizeElement(query(".js-source"), { mimeType: "text/javascript", theme: "vs-dark" });
};
}

register(ExampleComponent, "example");
</script>
0 style.css → docs/style.css
View file
File renamed without changes.

0 comments on commit ddf9784

Please sign in to comment.