@overlastic/react 0.4.8

package/dist/index.js

@@ -0,0 +1,212 @@
+// src/composable/usePrograms.ts
+import { delay, noop as noop2 } from "@overlastic/core";
+import { useContext, useEffect } from "react";
+
+// src/internal/contexts.tsx
+import { noop } from "@overlastic/core";
+import { createContext } from "react";
+var ScriptsContext = createContext({
+  reject: noop,
+  resolve: noop,
+  setVisible: noop,
+  vanish: noop,
+  visible: false,
+  in_dec: true
+});
+var InstancesContext = createContext({});
+InstancesContext.displayName = "OverlayInstancesContext";
+ScriptsContext.displayName = "OverlayScriptsContext";
+
+// src/internal/utils.ts
+function defineAnonymousComponent(component) {
+  return { "--": component }["--"];
+}
+
+// src/composable/usePrograms.ts
+function usePrograms(options = {}) {
+  const { immediate = true, duration = 0, automatic = true } = options;
+  const context = useContext(ScriptsContext);
+  const dec = Reflect.get(context, "in_dec");
+  const overlay = dec ? useDeclarative(options) : context;
+  const { setVisible, vanish, deferred } = overlay;
+  async function destroy() {
+    setVisible(false);
+    await delay(duration);
+    vanish == null ? void 0 : vanish();
+    return Promise.resolve();
+  }
+  useMount(() => immediate && setVisible(true));
+  useMount(() => {
+    if (!dec && automatic)
+      deferred == null ? void 0 : deferred.then(destroy).catch(destroy);
+  });
+  return overlay;
+}
+function useDeclarative(options = {}) {
+  const { props = {}, model = "visible", events = {} } = options;
+  const { reject = "onReject", resolve = "onResolve" } = events;
+  const _reject = (value) => {
+    var _a;
+    (_a = props[reject]) == null ? void 0 : _a.call(props, value);
+  };
+  const _resolve = (value) => {
+    var _a;
+    (_a = props[resolve]) == null ? void 0 : _a.call(props, value);
+  };
+  return {
+    reject: _reject,
+    resolve: _resolve,
+    visible: props[model],
+    vanish: noop2,
+    setVisible: noop2,
+    deferred: void 0
+  };
+}
+function useMount(callback = noop2) {
+  useEffect(() => callback(), []);
+}
+
+// src/composable/useScripts.ts
+import { useState } from "react";
+function useScripts(options) {
+  const { reject: _reject } = options.deferred || {};
+  const { vanish: _vanish } = options;
+  const [visible, setVisible] = useState(false);
+  function vanish() {
+    _vanish == null ? void 0 : _vanish();
+    _reject == null ? void 0 : _reject();
+  }
+  return {
+    resolve: options.deferred.resolve,
+    reject: options.deferred.reject,
+    deferred: options.deferred,
+    setVisible,
+    visible,
+    vanish
+  };
+}
+
+// src/composable/useOverlay.tsx
+import { createConstructor } from "@overlastic/core";
+import { useContext as useContext2 } from "react";
+import { pascalCase } from "pascal-case";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var { define } = createConstructor((Instance, props, options) => {
+  const { container, id, deferred, render, vanish: _vanish } = options;
+  const InstanceWithProvider = defineAnonymousComponent(() => {
+    const content = /* @__PURE__ */ jsx(
+      ScriptsContext.Provider,
+      {
+        value: useScripts({ deferred, vanish }),
+        ...{ id: pascalCase(id) },
+        children: /* @__PURE__ */ jsx(Instance, { ...props })
+      }
+    );
+    return createPortal(content, container);
+  });
+  function vanish() {
+    _vanish(InstanceWithProvider);
+    container.remove();
+  }
+  render(InstanceWithProvider, props);
+});
+function useOverlay(Instance) {
+  const { render, vanish } = useContext2(InstancesContext);
+  return define(Instance, { render, vanish });
+}
+
+// src/composable/useOverlayHolder.tsx
+import { createDeferred, defineName } from "@overlastic/core";
+import { pascalCase as pascalCase2 } from "pascal-case";
+import { useRef, useState as useState2 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function useOverlayHolder(Component, options = {}) {
+  const { callback, scripts, props, refresh } = useRefreshMetadata();
+  const name = defineName(options.id, options.autoIncrement);
+  function render() {
+    const root = options.root || (typeof document !== "undefined" ? document.body : void 0);
+    const content = /* @__PURE__ */ jsxs("div", { id: name, children: [
+      " ",
+      /* @__PURE__ */ jsx2(Component, { ...props }),
+      " "
+    ] });
+    return options.root !== false && root ? createPortal2(content, root) : content;
+  }
+  const holder = /* @__PURE__ */ jsx2(
+    ScriptsContext.Provider,
+    {
+      value: scripts,
+      ...{ id: pascalCase2(name) },
+      children: refresh ? render() : null
+    }
+  );
+  return [holder, callback];
+}
+function useRefreshMetadata() {
+  const [props, setProps] = useState2();
+  const [refresh, setRefresh] = useState2(false);
+  const [visible, setVisible] = useState2(false);
+  const deferred = useRef({});
+  const scripts = {
+    deferred: deferred.current,
+    resolve: deferred.current.resolve,
+    reject: deferred.current.reject,
+    vanish,
+    visible,
+    setVisible
+  };
+  function vanish() {
+    var _a;
+    setRefresh(false);
+    setProps({});
+    (_a = scripts.reject) == null ? void 0 : _a.call(scripts);
+  }
+  async function callback(props2) {
+    deferred.current = createDeferred();
+    setProps(props2);
+    setRefresh(true);
+    return deferred.current;
+  }
+  return { callback, scripts, props, refresh };
+}
+
+// src/define/constructor.tsx
+import { createConstructor as createConstructor2 } from "@overlastic/core";
+import { createRoot } from "react-dom/client";
+import { pascalCase as pascalCase3 } from "pascal-case";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var constructor = createConstructor2((Instance, props, options) => {
+  const { container, id, deferred } = options;
+  const root = createRoot(container);
+  const Provider = defineAnonymousComponent(() => {
+    return /* @__PURE__ */ jsx3(
+      ScriptsContext.Provider,
+      {
+        value: useScripts({ deferred, vanish }),
+        ...{ id: pascalCase3(id) },
+        children: /* @__PURE__ */ jsx3(Instance, { ...props })
+      }
+    );
+  });
+  function vanish() {
+    const handle = requestAnimationFrame(() => {
+      root.unmount();
+      container.remove();
+      cancelAnimationFrame(handle);
+    });
+  }
+  root.render(/* @__PURE__ */ jsx3(Provider, {}));
+});
+
+// src/define/index.ts
+var defineOverlay = constructor.define;
+var renderOverlay = constructor.render;
+export {
+  defineOverlay,
+  renderOverlay,
+  useOverlay,
+  useOverlayHolder,
+  usePrograms
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@overlastic/react",
+  "type": "module",
+  "version": "0.4.8",
+  "license": "MIT",
+  "homepage": "https://github.com/hairyf/overlastic#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hairyf/overlastic.git"
+  },
+  "bugs": {
+    "url": "https://github.com/hairyf/overlastic/issues"
+  },
+  "keywords": [
+    "unified",
+    "overlay",
+    "react"
+  ],
+  "main": "./dist/index.cjs",
+  "publishConfig": {
+    "jsdelivr": "./dist/index.global.js",
+    "linkDirectory": false
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "pascal-case": "3.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@overlastic/core": "^0.4.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts",
+    "lint": "eslint ."
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "types": "./dist/index.d.ts"
+}