@miqro/jsx v0.0.8

@miqro/jsx

very experimental module re-implementing a very small faction of react hooks api just for fun.

setup

first setup typescript to use JSX factory editing tsconfig.json and setting jsx, jsxFactory and jsxFragmentFactory to react, JSX.createElement and JSX.Fragment.

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "JSX.createElement",
    "jsxFragmentFactory": "JSX.Fragment",
    ...
  },
  ...
}

you also need to import JSX in your .tsx files like this.

import JSX from "@miqro/jsx";

function SomeComponent() {
  return <p>Hello</p>;
}

implemented hooks

useState

import JSX, { useState } from "@miqro/jsx";

function SomeComponent() {
  const [count, setCount] = useState(0);

  if(count < 10) {
    setCount(count + 1);
  }

  return <p>{count}</p>;
}

useEffect

import JSX, { useEffect, useState } from "@miqro/jsx";

function SomeComponent() {
  const [count, setCount] = useState(0);

  useEffect()=>{
    const timeout = setTimeout(()=>{
      setCount(count + 1);
    }, 1000);
    return () => {
      clearTimeout(timeout);
    }
  }, [count]);

  return <p>{count}</p>;
}

useContext

import JSX, { createContext, useContext } from "@miqro/jsx";

const context = createContext();

function ParentComponent() {
  return <context.provider value={true}>
    <SomeComponent />
  </context.provider>
}

function SomeComponent() {
  const value = useContext(context);

  return <p>{value}</p>;
}

useQuery

import JSX, { useQuery } from "@miqro/jsx";

function SomeComponent() {
  const [offset, setOffset] = useQuery("offset", 0);

  return <p>{offset}</p>;
}

usePathname

import JSX, { usePathname } from "@miqro/jsx";

function SomeComponent() {
  const pathname = usePathname();

  return <p>{pathname}</p>;
}

runtimes

to support server side and browser rendering you need to specify the runtime needed or implement your own.

import { runtime } from "@miqro/jsx-node";
import { createContainer, createElement } from "@miqro/jsx";
import AppComponent from "./app.js";

const root = runtime.createElement("div");
const container = createContainer(runtime, root);
container.render(createElement(AppComponent));

browser

to use in the browser install @miqro/jsx-dom module and use the createDOMContainer function to create a container.

first install the dom runtime.

npm install @miqro/jsx-dom

import { createDOMContainer } from "@miqro/jsx-dom";
import { createElement } from "@miqro/jsx";
import AppComponent from "./app.js";

window.onload = function() {
  const root = document.getElementById("root");
  const container = createDOMContainer(root);
  container.render(createElement(AppComponent));
  //container.disconnect();
}

on Node.js

to use in Node.js server side install @miqro/jsx-node module and use the createNodeContainer function to create a container.

first install the Node.js runtime.

npm install @miqro/jsx-node

import { createNodeContainer, runtime } from "@miqro/jsx-node";
import { createElement } from "@miqro/jsx";
import AppComponent from "./app.js";

const root = runtime.createElement("div");
const container = createNodeContainer(root);
container.render(createElement(AppComponent));

console.log(root.toString()); // prints rendered html

//container.disconnect();

SSR ( Server Side Rendering )

first install the Node.js runtime.

npm install @miqro/jsx-node

import { createServer } from "http";
import { SSRApp } from "@miqro/jsx-node";

const ssrApp = SSRApp({
  appPath: "./build/app.js"
});

createServer(ssrApp.serverOptions, ssrApp.listener).listen(8080, (err) => {
  if (err) {
    console.err(err);
    process.exit(1);
  } else {
    console.log("listening");
  }
});

by default SSRApp changes the default runtime options to disable effects, events, ref listeners and refresh conditions.

to enable this features to need to pass the clientRuntimeOptions and serverRuntimeOptions options like this.

import { createServer } from "http";
import { SSRApp } from "@miqro/jsx-node";

const ssrApp = SSRApp({
  appPath: "./build/app.js",
  // this execute options will apply on rendering on the server
  serverRuntimeOptions: {
    disableEffects: true,
    disableEvents: true,
    disableRefListener: true,
    disableRefresh: true
  },
  // this execute options will apply on rendering on the client
  clientRuntimeOptions: {
    disableEffects: false,
    disableEvents: false,
    disableRefListener: false,
    disableRefresh: false
  }
});

Component Options

shadowInit

by default all components are rendered inside a bashadowRoot with mode: "closed".

to change this behavior set the bashadowInit attribute of the component's function.

import JSX from "@miqro/jsx";

function Component {

}
Component.shadowInit = false; // to disable the use of ShadowRoot
/*
// to set custom ShadowInit options
Component.shadowInit = {
  mode: "open"
}; 
*/

asFragment

by default all components are rendered inside an HTMLElement, this is due to support bashadowRoot usage and other uses.

to change this behavior set the asFragment attribute of the component's function. the default value is false.

import JSX from "@miqro/jsx";

function Component {

}
Component.asFragment = true;

set default options

import JSX, { setDefaultOptions } from "@miqro/jsx";

// only one call to this method is allowed and only if no Component has been rendered, so place it earliest in your code.
setDefaultOptions({
  asFragment: true, // defaults to false
  shadowInit: false // defaults to { mode: "closed" }
});

function Component {

}

debug log

to enable debug loging into the runtime's console call the enableDebugLog at earliest in the execution.

import { enableDebugLog } from "@miqro/jsx";

enableDebugLog();

escape hatches

to access the underlying HTMLElement rendering the component use useElement().

useElement

import JSX, { useElement } from "@miqro/jsx";

function Component {
  const element = useElement();
}

useRef

to access the underlying reference node of something rendered use useRef().

import JSX, { useEffect, useRef } from "@miqro/jsx";

function Component {
  const ref = useRef(null);

  useEffect(()=>{
    if(ref.current) {
      ref.current.textContent = "Another Text";
    }
  }, [ref.current]);

  return <>
    <p ref={ref}>Some text </p>
  <>
}

useRefresh

import JSX, { useRefresh } from "@miqro/jsx";

function Component {
  const refresh = useRefresh();

  // to force a re-render with the same props and children
  // refresh();
}

useRuntime

import JSX, { useRuntime } from "@miqro/jsx";

function Component {
  const runtime = useRuntime();

  console.log(runtime.name);

  return <p>Hello</p>
}