Add renderVoyager into standalone. Deprecate init. (#316)

Author: IvanGoncharov

README.md

@@ -42,26 +42,18 @@ module system it is exported as `GraphQLVoyager` global variable.
 - `hideSettings` [`boolean`, default `false`] - hide settings panel
 - `hideVoyagerLogo` [`boolean`, default `true`] - hide voyager logo
 
-### `init` function
-
-The signature of the `init` function:
-
-```js
-(hostElement: HTMLElement, options: object) => void
-```
-
-- `hostElement` - parent element
-- `options` - is the JS object with [properties](#properties) of `Voyager` component
-
 ## Using pre-bundled version
 
 You can get GraphQL Voyager bundle from the following places:
 
 - [![jsDelivr](https://data.jsdelivr.com/v1/package/npm/graphql-voyager/badge)](https://www.jsdelivr.com/package/npm/graphql-voyager)
-  - some exact version - https://cdn.jsdelivr.net/npm/graphql-voyager@1.2/dist/voyager.standalone.js
+  - some exact version - https://cdn.jsdelivr.net/npm/graphql-voyager@1.3/dist/voyager.standalone.js
   - latest version - https://cdn.jsdelivr.net/npm/graphql-voyager/dist/voyager.standalone.js
 - from `dist` folder of the npm package `graphql-voyager`
 
+**Note: `voyager.standalone.js` is bundled with react, so you just need to call
+`renderVoyager` function that's it.**
+
 ### [HTML example](./example/cdn)
 
 ## Using as a dependency

demo/index.ts

@@ -1,7 +1,4 @@
-import * as React from 'react';
-import * as ReactDOMClient from 'react-dom/client';
-
-import { Voyager, voyagerIntrospectionQuery } from '../src';
+import { renderVoyager, voyagerIntrospectionQuery } from '../src/standalone';
 
 async function fetchPreset(name: string) {
   const response = await fetch(`./presets/${name}_introspection.json`);
@@ -32,16 +29,12 @@ Promise.all([
   const introspection =
     url != null ? fetchIntrospection(url, withCredentials) : defaultPreset;
 
-  const rootElement = document.getElementById('root');
-  const reactRoot = ReactDOMClient.createRoot(rootElement);
-  reactRoot.render(
-    React.createElement(Voyager, {
-      introspection,
-      introspectionPresets: PRESETS,
-      allowToChangeSchema: true,
-      hideVoyagerLogo: false,
-    }),
-  );
+  renderVoyager(document.getElementById('root'), {
+    introspection,
+    introspectionPresets: PRESETS,
+    allowToChangeSchema: true,
+    hideVoyagerLogo: false,
+  });
 });
 
 async function fetchIntrospection(url: string, withCredentials: string) {

src/index.tsx

@@ -2,11 +2,14 @@ import * as ReactDOM from 'react-dom';
 
 import { Voyager, VoyagerProps } from './components';
 
+// FIXME: remove in next breaking version
+/** @deprecated please use renderVoyagerPage **/
 export function init(element: HTMLElement, options: VoyagerProps) {
   ReactDOM.render(<Voyager {...options} />, element);
 }
 
-export { Voyager } from './components';
+export { Voyager, type VoyagerProps } from './components';
+
 // FIXME: remove in next breaking version
 export { Voyager as GraphQLVoyager };
 

src/standalone.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import * as ReactDOMClient from 'react-dom/client';
+
+import { Voyager, type VoyagerProps } from './index';
+
+export function renderVoyager(rootElement: HTMLElement, props: VoyagerProps) {
+  const reactRoot = ReactDOMClient.createRoot(rootElement);
+  reactRoot.render(React.createElement(Voyager, props));
+}
+
+export * from './index';

webpack.config.ts

@@ -20,6 +20,7 @@ export default function buildWebpackConfig(env: Env): webpack.Configuration {
   if (env.lib === true) {
     return {
       ...baseConfig,
+      entry: './src/index.tsx',
       externals: NodeExternals(),
       output: {
         ...baseConfig.output,
@@ -31,6 +32,7 @@ export default function buildWebpackConfig(env: Env): webpack.Configuration {
   if (env.standalone === true) {
     return {
       ...baseConfig,
+      entry: './src/standalone.ts',
       optimization: { minimize: true },
       externals: undefined,
       output: {
@@ -44,6 +46,7 @@ export default function buildWebpackConfig(env: Env): webpack.Configuration {
   if (env.min === true) {
     return {
       ...baseConfig,
+      entry: './src/index.tsx',
       optimization: { minimize: true },
       externals: {
         react: {
@@ -76,7 +79,6 @@ const baseConfig: webpack.Configuration = {
     extensions: ['.ts', '.tsx', '.mjs', '.js', '.json', '.css', '.svg'],
     alias: { '../../worker': '../../worker-dist' },
   },
-  entry: './src/index.tsx',
   output: {
     path: path.resolve(__dirname, 'dist'),
     sourceMapFilename: '[file].map',