@blinkorb/rcx 0.0.0

package/.eslintignore

@@ -0,0 +1,4 @@
+/node_modules/*
+/coverage/*
+/build/*
+/dist/*

package/.eslintrc.json

@@ -0,0 +1,286 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["prettier", "simple-import-sort"],
+  "env": {
+    "es6": true,
+    "commonjs": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": 9
+  },
+  "globals": {
+    "window": false,
+    "performance": false,
+    "document": false,
+    "navigator": false,
+    "location": false,
+    "console": false,
+    "setTimeout": false,
+    "clearTimeout": false,
+    "setInterval": false,
+    "clearInterval": false,
+    "alert": false,
+    "requestAnimationFrame": false,
+    "cancelAnimationFrame": false,
+    "localStorage": false,
+    "sessionStorage": false,
+    "FormData": false,
+    "Node": false,
+    "Image": false,
+    "CanvasRenderingContext2D": false
+  },
+  "rules": {
+    "strict": [2, "global"],
+    "no-duplicate-imports": [2, { "includeExports": true }],
+
+    "eqeqeq": 2,
+    "block-scoped-var": 2,
+    "no-constant-condition": 2,
+    "no-console": 2,
+    "no-debugger": 2,
+    "no-lonely-if": 2,
+    "no-lone-blocks": 2,
+    "no-nested-ternary": 2,
+    "no-dupe-keys": 2,
+    "no-extra-boolean-cast": 2,
+    "no-irregular-whitespace": 2,
+    "no-else-return": 2,
+    "no-eval": 2,
+    "no-multi-str": 2,
+    "no-self-compare": 2,
+    "no-useless-call": 2,
+    "no-shadow-restricted-names": 2,
+    "no-shadow": 0,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-unreachable": 2,
+    "no-unused-vars": [2, { "varsIgnorePattern": "^_\\w" }],
+    "no-use-before-define": 2,
+
+    "radix": 2,
+    "curly": 2,
+    "no-fallthrough": 2,
+    "default-case": 2,
+
+    "no-var": 2,
+    "no-unused-expressions": 2,
+    "camelcase": [
+      2,
+      {
+        "properties": "always",
+        "allow": ["^UNSAFE_", "call_id"]
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": 2,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/member-delimiter-style": 0,
+    "@typescript-eslint/type-annotation-spacing": 0,
+    "@typescript-eslint/no-unused-vars": 2,
+    "@typescript-eslint/no-use-before-define": 2,
+    "@typescript-eslint/no-shadow": 2,
+    "no-restricted-globals": [
+      "error",
+      "URL",
+      "history",
+      "dispatchEvent",
+      "require",
+      "postMessage",
+      "blur",
+      "focus",
+      "close",
+      "frames",
+      "self",
+      "parent",
+      "opener",
+      "top",
+      "length",
+      "closed",
+      "location",
+      "origin",
+      "name",
+      "locationbar",
+      "menubar",
+      "personalbar",
+      "scrollbars",
+      "statusbar",
+      "toolbar",
+      "status",
+      "frameElement",
+      "navigator",
+      "customElements",
+      "external",
+      "screen",
+      "innerWidth",
+      "innerHeight",
+      "scrollX",
+      "pageXOffset",
+      "scrollY",
+      "pageYOffset",
+      "screenX",
+      "screenY",
+      "outerWidth",
+      "outerHeight",
+      "devicePixelRatio",
+      "clientInformation",
+      "screenLeft",
+      "screenTop",
+      "defaultStatus",
+      "defaultstatus",
+      "styleMedia",
+      "onanimationend",
+      "onanimationiteration",
+      "onanimationstart",
+      "onsearch",
+      "ontransitionend",
+      "onwebkitanimationend",
+      "onwebkitanimationiteration",
+      "onwebkitanimationstart",
+      "onwebkittransitionend",
+      "isSecureContext",
+      "onabort",
+      "onblur",
+      "oncancel",
+      "oncanplay",
+      "oncanplaythrough",
+      "onchange",
+      "onclick",
+      "onclose",
+      "oncontextmenu",
+      "oncuechange",
+      "ondblclick",
+      "ondrag",
+      "ondragend",
+      "ondragenter",
+      "ondragleave",
+      "ondragover",
+      "ondragstart",
+      "ondrop",
+      "ondurationchange",
+      "onemptied",
+      "onended",
+      "onerror",
+      "onfocus",
+      "oninput",
+      "oninvalid",
+      "onkeydown",
+      "onkeypress",
+      "onkeyup",
+      "onload",
+      "onloadeddata",
+      "onloadedmetadata",
+      "onloadstart",
+      "onmousedown",
+      "onmouseenter",
+      "onmouseleave",
+      "onmousemove",
+      "onmouseout",
+      "onmouseover",
+      "onmouseup",
+      "onmousewheel",
+      "onpause",
+      "onplay",
+      "onplaying",
+      "onprogress",
+      "onratechange",
+      "onreset",
+      "onresize",
+      "onscroll",
+      "onseeked",
+      "onseeking",
+      "onselect",
+      "onstalled",
+      "onsubmit",
+      "onsuspend",
+      "ontimeupdate",
+      "ontoggle",
+      "onvolumechange",
+      "onwaiting",
+      "onwheel",
+      "onauxclick",
+      "ongotpointercapture",
+      "onlostpointercapture",
+      "onpointerdown",
+      "onpointermove",
+      "onpointerup",
+      "onpointercancel",
+      "onpointerover",
+      "onpointerout",
+      "onpointerenter",
+      "onpointerleave",
+      "onafterprint",
+      "onbeforeprint",
+      "onbeforeunload",
+      "onhashchange",
+      "onlanguagechange",
+      "onmessage",
+      "onmessageerror",
+      "onoffline",
+      "ononline",
+      "onpagehide",
+      "onpageshow",
+      "onpopstate",
+      "onrejectionhandled",
+      "onstorage",
+      "onunhandledrejection",
+      "onunload",
+      "performance",
+      "stop",
+      "open",
+      "print",
+      "captureEvents",
+      "releaseEvents",
+      "getComputedStyle",
+      "matchMedia",
+      "moveTo",
+      "moveBy",
+      "resizeTo",
+      "resizeBy",
+      "getSelection",
+      "find",
+      "createImageBitmap",
+      "scroll",
+      "scrollTo",
+      "scrollBy",
+      "onappinstalled",
+      "onbeforeinstallprompt",
+      "crypto",
+      "ondevicemotion",
+      "ondeviceorientation",
+      "ondeviceorientationabsolute",
+      "indexedDB",
+      "webkitStorageInfo",
+      "chrome",
+      "visualViewport",
+      "speechSynthesis",
+      "webkitRequestFileSystem",
+      "webkitResolveLocalFileSystemURL",
+      "openDatabase",
+      "setTimeout",
+      "clearTimeout",
+      "setInterval",
+      "clearInterval",
+      "requestAnimationFrame",
+      "cancelAnimationFrame",
+      "addEventListener",
+      "removeEventListener"
+    ],
+    "simple-import-sort/imports": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {
+        "no-undef": 0,
+        "no-unused-vars": 0,
+        "no-use-before-define": 0
+      }
+    }
+  ]
+}

package/.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

package/.github/CODEOWNERS

@@ -0,0 +1 @@
+* @jakesidsmith

package/.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+on: [pull_request]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/cache@v4
+        with:
+          path: ~/.npm
+          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+      - name: Install dependencies
+        run: npm ci
+      - name: Run tests
+        run: npm test

package/.nvmrc

@@ -0,0 +1 @@
+22.14.0

package/.prettierignore

@@ -0,0 +1,28 @@
+/coverage/*
+/build/*
+/dist/*
+/packages/*/coverage/*
+/packages/*/static/*
+/packages/*/server/*
+/packages/*/build/*
+/packages/*/dist/*
+/.vscode/*
+**/*.txt
+**/*.snap
+*.toml
+*.png
+*.svg
+*.jpg
+*.jpeg
+*.gif
+
+.DS_Store
+.eslintignore
+.prettierignore
+.gitignore
+.gitattributes
+.npmignore
+.nvmrc
+.browserslistrc
+.env
+LICENSE.txt

package/.prettierrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

package/demo/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <title>
+      RCX - Reactive JSX-based library for creating HTML5 canvas applications
+    </title>
+    <style type="text/css">
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      canvas {
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>

package/demo/index.tsx

@@ -0,0 +1,316 @@
+import {
+  ArcTo,
+  Canvas,
+  Circle,
+  Clip,
+  Ellipse,
+  Line,
+  Path,
+  Point,
+  RCXComponent,
+  Rectangle,
+  render,
+  Rotate,
+  Scale,
+  Text,
+  Translate,
+  useCanvasContext,
+  useLinearGradient,
+  useLoop,
+  useOnMount,
+  useRadialGradient,
+  useReactive,
+} from '@blinkorb/rcx';
+
+const RendersChildren: RCXComponent = ({ children }) => children;
+
+const Unmounts: RCXComponent = () => {
+  // eslint-disable-next-line no-console
+  console.log('rendered');
+
+  useOnMount(() => {
+    // eslint-disable-next-line no-console
+    console.log('mounted');
+
+    return () => {
+      // eslint-disable-next-line no-console
+      console.log('unmounted');
+    };
+  });
+
+  return (
+    <Rectangle x={0} y={0} width={10} height={10} style={{ fill: 'black' }} />
+  );
+};
+
+const Gradients: RCXComponent = () => {
+  const stroke = useLinearGradient({
+    startX: 10,
+    startY: 480,
+    endX: 10 + 50,
+    endY: 480 + 50,
+    stops: [
+      {
+        offset: 0,
+        color: '#f00',
+      },
+      {
+        offset: 1,
+        color: '#000',
+      },
+    ],
+  });
+
+  const fill = useRadialGradient({
+    startX: 10 + 25,
+    startY: 480 + 25,
+    startRadius: 0,
+    endX: 10 + 25,
+    endY: 480 + 25,
+    endRadius: 25,
+    stops: [
+      {
+        offset: 0,
+        color: '#000',
+      },
+      {
+        offset: 1,
+        color: 'cyan',
+      },
+    ],
+  });
+
+  return (
+    <Rectangle
+      x={10}
+      y={480}
+      width={50}
+      height={50}
+      style={{ fill, stroke, strokeWidth: 5, strokeCap: 'round' }}
+    />
+  );
+};
+
+const Page: RCXComponent = () => {
+  const canvasContext = useCanvasContext();
+  const getOffset = () => Math.cos(Date.now() * 0.001) * 10;
+  const reactive = useReactive({ isMounted: true, offset: getOffset() });
+
+  useLoop(() => {
+    reactive.offset = getOffset();
+  });
+
+  useOnMount(() => {
+    window.setTimeout(() => {
+      reactive.isMounted = false;
+    }, 1000);
+  });
+
+  return (
+    <>
+      <Rectangle
+        x={canvasContext.width * 0.25}
+        y={canvasContext.height * 0.25 + reactive.offset}
+        width={canvasContext.width * 0.5}
+        height={canvasContext.height * 0.5}
+        style={{ fill: 'red' }}
+      />
+      <Ellipse
+        x={canvasContext.width * 0.5}
+        y={canvasContext.height * 0.5}
+        radiusX={canvasContext.width * 0.2}
+        radiusY={canvasContext.width * 0.1}
+        style={{ fill: 'black' }}
+        rotation={((Date.now() % 5000) / 5000) * Math.PI * 2}
+      />
+      <Circle
+        x={canvasContext.width * 0.5}
+        y={canvasContext.height * 0.5}
+        radius={canvasContext.width * 0.05}
+        endAngle={
+          Math.PI +
+          Math.cos(((Date.now() % 5000) / 5000) * Math.PI * 2) * Math.PI
+        }
+        style={{ fill: 'white' }}
+      >
+        <Point x={canvasContext.width * 0.5} y={canvasContext.height * 0.5} />
+      </Circle>
+      <Line
+        startX={10}
+        startY={10}
+        endX={20}
+        endY={20}
+        style={{ stroke: 'green', strokeWidth: 5, strokeJoin: 'bevel' }}
+      >
+        <Point x={30} y={10} />
+      </Line>
+      <Path
+        points={[
+          [0, 20],
+          [5, 50],
+          [10, 0],
+          [15, 20],
+          [20, 5],
+        ]}
+        style={{ stroke: 'black' }}
+      />
+      <Path style={{ stroke: 'black' }} closePath>
+        <Point x={0} y={50} />
+        <Point x={5} y={55} />
+        <Point x={10} y={50} />
+        <Point x={15} y={55} />
+        <Point x={20} y={50} />
+        <Point x={20} y={75} />
+        <Point x={0} y={75} />
+      </Path>
+      <Path style={{ stroke: 'blue', strokeWidth: 5, strokeCap: 'round' }}>
+        <Point x={200} y={200} />
+        <ArcTo
+          startControlX={200}
+          startControlY={100}
+          endControlX={300}
+          endControlY={100}
+          radius={50}
+        />
+        <Point x={300} y={100} />
+      </Path>
+      <Text x={305} y={102} style={{ fill: 'red', stroke: 'black' }}>
+        The offset is {reactive.offset.toFixed(2)} {[1, 2, 3].map((n) => n)}{' '}
+        <RendersChildren>Children</RendersChildren>
+      </Text>
+      <Translate x={100} y={100}>
+        <Rotate rotation={Math.PI * 0.25}>
+          <Scale scale={0.5}>
+            <Rectangle
+              x={0}
+              y={0}
+              width={100}
+              height={50}
+              style={{ fill: 'cyan' }}
+            />
+          </Scale>
+        </Rotate>
+      </Translate>
+      <Rectangle x={0} y={100} width={50} height={50}>
+        <Clip>
+          <Circle x={25} y={125} radius={30} style={{ fill: '#d5d5d5' }} />
+          <Text x={10} y={125} style={{ fill: 'red' }}>
+            This text is clipped by a rectangle
+          </Text>
+        </Clip>
+      </Rectangle>
+
+      <Line
+        startX={100}
+        endX={100}
+        startY={190}
+        endY={290}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={200} style={{ fill: 'black' }}>
+        Left (default)
+      </Text>
+      <Text x={100} y={220} style={{ fill: 'black', align: 'right' }}>
+        Right
+      </Text>
+      <Text x={100} y={240} style={{ fill: 'black', align: 'center' }}>
+        Center
+      </Text>
+      <Text x={100} y={260} style={{ fill: 'black', align: 'start' }}>
+        Start
+      </Text>
+      <Text x={100} y={280} style={{ fill: 'black', align: 'end' }}>
+        End
+      </Text>
+
+      <Line
+        startX={50}
+        endX={150}
+        startY={300}
+        endY={300}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={300} style={{ fill: 'black', baseline: 'alphabetic' }}>
+        Alphabetic (default)
+      </Text>
+      <Line
+        startX={50}
+        endX={150}
+        startY={320}
+        endY={320}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={320} style={{ fill: 'black', baseline: 'bottom' }}>
+        Bottom
+      </Text>
+      <Line
+        startX={50}
+        endX={150}
+        startY={340}
+        endY={340}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={340} style={{ fill: 'black', baseline: 'hanging' }}>
+        Hanging
+      </Text>
+      <Line
+        startX={50}
+        endX={150}
+        startY={360}
+        endY={360}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={360} style={{ fill: 'black', baseline: 'ideographic' }}>
+        Ideographic
+      </Text>
+      <Line
+        startX={50}
+        endX={150}
+        startY={380}
+        endY={380}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={380} style={{ fill: 'black', baseline: 'middle' }}>
+        Middle
+      </Text>
+      <Line
+        startX={50}
+        endX={150}
+        startY={400}
+        endY={400}
+        style={{ stroke: '#d5d5d5' }}
+      />
+      <Text x={100} y={400} style={{ fill: 'black', baseline: 'top' }}>
+        Top
+      </Text>
+      <Text
+        x={10}
+        y={450}
+        style={{
+          fill: 'black',
+          fontSize: 20,
+          fontFamily: 'serif',
+          fontWeight: 'bold',
+          fontStyle: 'italic',
+          fontVariant: 'small-caps',
+        }}
+      >
+        Styled font
+      </Text>
+      <Gradients />
+      {reactive.isMounted && <Unmounts />}
+    </>
+  );
+};
+
+Page.displayName = 'Page';
+
+const App = () => {
+  return (
+    <Canvas>
+      <Page />
+    </Canvas>
+  );
+};
+
+render(<App />, document.body);