Skip to content
/ ljdj Public

Explorations of notebooks with jsx. These demos do not work without having built deno manually.

Notifications You must be signed in to change notification settings

luke-john/ljdj

Repository files navigation

Note

This is provided as an example

Warning

This relies on changes to support JSX in the deno repl that have not yet landed see denoland/deno#20695 for details.

Demo Jupyter JSX (experimental - relies on unreleased deno features)

Gif showing jupyter with jsx being rendered and interacted with

Basic usage

import React from "npm:react";
import { djSSR } from "https://raw.githubusercontent.com/luke-john/ljdj/master/main.ts";
const fruits = ["apple", "banana", "carrot"];

djSSR(
  <ul>
    {fruits.map((fruit, i) => (
      <li key={i} style={fruit === "apple" ? { color: "red" } : {}}>{fruit}</li>
    ))}
  </ul>,
);

SPA mode

SPA mode allows slightly richer experiences, where it transfers the source and some data into the html.

Basic usage

import React from "npm:react";
import { djSPA } from "https://raw.githubusercontent.com/luke-john/ljdj/master/main.tsx";
const fruits = ["apple", "banana", "carrot"];

djSPA(
  // These are serialized and deserialized using JSON.stringify
  { fruits },
  // This function is transferred via calling .toString on it.
  (transferProps) => (
    <ul>
      {fruits.map((fruit, i) => (
        <li key={i} style={fruit === "apple" ? { color: "red" } : {}}>
          {fruit}
        </li>
      ))}
    </ul>
  ),
);

Using react hooks

The SPA which receives the transferred source and props, puts React in scope when calling the transferred source. This means you can use useState and other hooks.

import React from "npm:react";
import { djSPA } from "https://raw.githubusercontent.com/luke-john/ljdj/master/main.tsx";
const fruits = ["apple", "banana", "carrot"];

djSPA(
  { fruits },
  (transferProps) => {
    // React is available inside the transferred source allowing use of react hooks.
    const [counter, setCounter] = React.useState(1);

    return (
      <div>
        <p>counters: {counter}</p>
        <button
          onClick={() => {
            setCounter(counter + 1);
          }}
        >
          increase fruits to show
        </button>

        <ul>
          {transferProps.fruits.slice(0, counter).map((fruit, i) => (
            <li key={i} style={fruit === "apple" ? { color: "red" } : {}}>
              {fruit}
            </li>
          ))}
        </ul>
      </div>
    );
  },
);

About

Explorations of notebooks with jsx. These demos do not work without having built deno manually.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published