docs update : Installation copy-assets script

apps/docs-core/react-lite.md

@@ -27,4 +27,7 @@ In the example above with `publicPath="/thebe"`, the script tags would be pointi
 Your build system should be updated to copy the bundles into place appropraitely.
 
 **Note:** currently `thebe-react` is configured to always load the `pyodide` and other base wheels from CDN, so there is no need to deploy those.
+
+**Note:** There's a utility script for copying the required files named `copy-thebe-assets`
+In the above example you would just need to run `npx copy-thebe-assets public/thebe`
 ```

packages/core/README.md

@@ -20,6 +20,13 @@ Install the library from npm:
   npm install thebe-core
 ```
 
+Thebe is loaded asynchronously so you need to copy the build artifacts into your project static directory (e.g. `public` in `react`) you can do that using:
+`npx copy-thebe-assets <output_dir>`
+
+e.g:
+```
+copy-thebe-assets public/thebe
+```
 ## Typescript
 
 Follow the Getting started from Typescript section of the docs

packages/core/bin/copy-thebe-assets.cjs

@@ -0,0 +1,67 @@
+#!/usr/bin/node
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+if (process.argv.length < 3) {
+  console.error('Usage: node copyThebeAssets.cjs <output_dir>');
+  process.exit(1);
+}
+
+const outputDir = process.argv[2];
+
+if (!fs.existsSync(outputDir)) {
+  console.log(`Output directory ${outputDir} does not exist, creating...`);
+  fs.mkdirSync(outputDir, { recursive: true });
+}
+
+console.log('Copying thebe assets...');
+
+try {
+  require.resolve('thebe-core');
+} catch (err) {
+  console.error('thebe-core not found, please run `npm install` in the theme directory.');
+  process.exit(1);
+}
+
+let usingThebeLite = false
+try {
+  require.resolve('thebe-lite');
+  usingThebeLite = true
+} catch (err) {
+  console.error('thebe-lite not found, please run `npm install` in the theme directory.');
+}
+
+let assets = [];
+
+const pathToThebeCoreLibFolder = path.resolve(
+  path.dirname(require.resolve('thebe-core')),
+  '..',
+  'lib',
+);
+const thebeCoreFiles = glob.sync(path.join(pathToThebeCoreLibFolder, '*.js'));
+
+assets = [
+  ...thebeCoreFiles,
+  path.join(pathToThebeCoreLibFolder, 'thebe-core.css'),
+];
+
+if (usingThebeLite) {
+  const pathToThebeLite = path.dirname(require.resolve('thebe-lite'));
+  const thebeLiteFiles = glob.sync(path.join(pathToThebeLite, '*.js'));
+
+  assets = [...assets, ...thebeLiteFiles]
+}
+
+console.log('Found thebe assets:');
+console.log(assets);
+console.log(`Copying assets to ${outputDir} now...`);
+
+for (const asset of assets) {
+  const basename = path.basename(asset);
+  const dest = path.join(outputDir, basename);
+  fs.copyFileSync(asset, dest);
+  console.log(`Copied ${basename} to ${dest}`);
+}
+
+console.log('Done.');

packages/core/package.json

@@ -107,5 +107,8 @@
   },
   "nohoist": [
     "requirejs"
-  ]
+  ],
+  "bin": {
+    "copy-thebe-assets": "./bin/copy-thebe-assets.cjs"
+  }
 }

packages/lite/README.md

@@ -16,6 +16,16 @@ To use JupyterLite with `thebe`, load this module on your page using a script ta
 `thebe` will then feature detect the library and use the module when appropriate option is set.
 
 **Note:** at the moment, in order for `thebe-lite` to work, the entire package must be available at at the root of the host domain as `pyolite` currently requires wheels to be available at `/build/pypi`.
+## with `npm`
+First install the package:
+
+`npm i thebe-core thebe-lite`
+
+Thebe is loaded asynchronously so you need to copy the build artifacts into your project static directory (e.g. `public` in `react`) you can do that using:
+`npx copy-thebe-assets <output_dir>`
+
+e.g:
+`npx copy-thebe-assets public/thebe`
 
 ## Interface