@blinkorb/rcx 0.0.0 → 0.0.1

package/.eslintrc.json

@@ -1,286 +0,0 @@
-{
-  "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

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

package/.github/CODEOWNERS

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

package/.github/workflows/ci.yml

@@ -1,19 +0,0 @@
-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

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

package/.prettierignore

@@ -1,28 +0,0 @@
-/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

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

package/demo/index.html

@@ -1,29 +0,0 @@
-<!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

@@ -1,316 +0,0 @@
-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);

package/demo/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "sourceMap": true,
-    "paths": {
-      "@blinkorb/rcx": ["../src/index.ts"],
-      "@blinkorb/rcx/canvas": ["../src/components/canvas/index.ts"],
-      "@blinkorb/rcx/*": ["../src/*"]
-    }
-  },
-  "include": ["./*", "../src/*"]
-}