ziex 0.0.1-dev.0 → 0.0.1-dev.1

package/dom.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentMetadata } from "./types";
+/**
+ * Prepare a component for rendering
+ * @param component - The component to prepare
+ * @returns The component, props, and DOM node
+ */
+export declare function prepareComponent(component: ComponentMetadata): Promise<{
+    domNode: HTMLElement;
+    props: any;
+    Component: (props: unknown) => React.ReactElement;
+}>;

package/index.d.ts

@@ -1,8 +1,2 @@
-export declare const components: ComponentMetadata[];
-type ComponentMetadata = {
-    name: string;
-    path: string;
-    id: string;
-    import: () => Promise<(props: unknown) => React.ReactElement>;
-};
-export {};
+export type { ComponentMetadata } from './types';
+export { prepareComponent } from './dom';

package/index.js

@@ -1 +1 @@
-var n="{[ZX_COMPONENTS]s}";export{n as components};
+async function k(y){let x=document.getElementById(y.id);if(!x)throw Error(`Root element ${y.id} not found`);let f=JSON.parse(x.getAttribute("data-props")||"{}"),b=x.getAttribute("data-children")??void 0;if(b)f.dangerouslySetInnerHTML={__html:b};let j=await y.import();return{domNode:x,props:f,Component:j}}export{k as prepareComponent};

package/package.json

@@ -3,7 +3,6 @@
   "description": "ZX is a framework for building web applications with Zig.",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.1-dev.0",
   "homepage": "https://github.com/nurulhudaapon/zx",
   "repository": {
     "type": "git",
@@ -24,5 +23,6 @@
   "author": "Nurul Huda (Apon) <me@nurulhudaapon.com>",
   "license": "MIT",
   "module": "index.js",
-  "types": "index.d.ts"
+  "types": "index.d.ts",
+  "version": "0.0.1-dev.1"
 }

package/types.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The metadata for a component that was used within ZX file
+ */
+export type ComponentMetadata = {
+    /**
+     * The name of the component, this is what name was used in the component declaration
+     * e.g. <CounterComponent />
+     */
+    name: string;
+    /**
+     * The path to the component, this is the path to the component file
+     * e.g. ./components/CounterComponent.tsx
+     */
+    path: string;
+    /**
+     * The id of the component, this is a unique identifier for the component and an additinal index in case the same component is used multiple times
+     * e.g. zx-1234567890 or zx-1234567890-1
+     */
+    id: string;
+    /**
+     * The import function for the component, this is the function that will be used to import the component
+     * e.g. () => import('./components/CounterComponent.tsx')
+     */
+    import: () => Promise<(props: unknown) => React.ReactElement>;
+};