@kanaries/graphic-walker 0.3.8 → 0.3.9

package/dist/index.d.ts

@@ -4,5 +4,7 @@ import "./empty_sheet.css";
 export declare const ShadowDomContext: React.Context<{
     root: ShadowRoot | null;
 }>;
+export type { IGWProps };
+export { embedGraphicWalker } from './vanilla';
 export declare const GraphicWalker: React.FC<IGWProps>;
 export { default as PureRenderer } from './renderer/pureRenderer';

package/dist/main.d.ts

@@ -1 +1 @@
-import './index.css';
+export {};

package/dist/style.css

@@ -0,0 +1 @@
+html{margin:0;padding:0;background-color:#fff}@media (prefers-color-scheme: dark){html{background-color:#18181b}}body{margin:0;padding:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

package/dist/vanilla.d.ts

@@ -0,0 +1,3 @@
+import './index.css';
+import { IGWProps } from './App';
+export declare function embedGraphicWalker(dom: HTMLElement | null, props?: IGWProps | undefined): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -36,6 +36,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
+    "@kanaries/graphic-walker": "0.3.9",
     "@kanaries/react-beautiful-dnd": "0.0.1",
     "@kanaries/web-data-loader": "^0.1.7",
     "autoprefixer": "^10.3.5",

package/src/index.tsx

@@ -12,6 +12,8 @@ import tailwindStyle from "tailwindcss/tailwind.css?inline";
 import style from "./index.css?inline";
 
 export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
+export type { IGWProps }
+export { embedGraphicWalker } from './vanilla';
 
 export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
     const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);

package/src/main.tsx

@@ -1,30 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { GraphicWalker } from './index';
-
 import { inject } from '@vercel/analytics';
-import './index.css';
+import { embedGraphicWalker } from './vanilla';
 
 if (!import.meta.env.DEV) {
     inject();
 }
 
-// Example: Detect if Concurrent Mode is available
-const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
-
-// Use the new ReactDOM.createRoot API if available, otherwise fall back to the old ReactDOM.render API
-if (isConcurrentModeAvailable) {
-    if (import.meta.env.DEV) {
-        console.warn('React 18+ detected, remove strict mode if you meet drag and drop issue. more info at https://docs.kanaries.net/graphic-walker/faq/graphic-walker-react-18')
-    }
-    // @ts-ignore
-    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-    root.render(<GraphicWalker themeKey="g2" />);
-} else {
-    ReactDOM.render(
-        <React.StrictMode>
-            <GraphicWalker themeKey="g2" />
-        </React.StrictMode>,
-        document.getElementById('root') as HTMLElement
-    );
-}
+embedGraphicWalker(document.getElementById('root') as HTMLElement)

package/src/vanilla.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphicWalker } from './index';
+
+import './index.css';
+import { IGWProps } from './App';
+
+export function embedGraphicWalker (dom: HTMLElement | null, props: IGWProps | undefined = {}) {
+    if (!dom) {
+        throw("DOM element not found.")
+    }
+    // Example: Detect if Concurrent Mode is available
+    const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
+
+    // Use the new ReactDOM.createRoot API if available, otherwise fall back to the old ReactDOM.render API
+    if (isConcurrentModeAvailable) {
+        if (import.meta.env.DEV) {
+            console.warn('React 18+ detected, remove strict mode if you meet drag and drop issue. more info at https://docs.kanaries.net/graphic-walker/faq/graphic-walker-react-18')
+        }
+        // @ts-ignore
+        const root = ReactDOM.createRoot(dom as HTMLElement);
+        root.render(<GraphicWalker themeKey="g2" {...props} />);
+    } else {
+        ReactDOM.render(
+            <React.StrictMode>
+                <GraphicWalker themeKey="g2" {...props} />
+            </React.StrictMode>,
+            dom as HTMLElement
+        );
+    }
+}