Fix imports of @bokeh/bokehjs (#23)

Author: ianthomas23

ci/typescript/create_vanilla_webpack.sh

@@ -97,51 +97,23 @@ rm temp.json
 # 9. Add BokehJS dependency
 npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz
 
-# 10. tsconfig.json needs workaround for @bokehjs paths
-cat > temp.json << EOF
-{
-  "compilerOptions": {
-    "paths": {
-      "@bokehjs/*": ["./node_modules/@bokeh/bokehjs/build/js/lib/*"]
-    }
-  }
-}
-EOF
-npx json-merger --output tsconfig.json --pretty tsconfig.json temp.json
-rm temp.json
-
-# 11. webpack.config.ts needs workaround to resolve @bokehjs alias
-# TODO: use proper ts parser to parse, add new code, write back out
-head -13 webpack.config.ts > temp.ts
-cat >> temp.ts << EOF
-  resolve: {
-    alias: {
-      "@bokehjs": path.resolve(__dirname, "node_modules/@bokeh/bokehjs/build/js/lib/")
-    }
-  },
-EOF
-tail -9 webpack.config.ts >> temp.ts
-mv temp.ts webpack.config.ts
-
-# 12. Replace src/index.ts with code to create BokehJS plot
+# 10. Replace src/index.ts with code to create BokehJS plot
 cat > src/index.ts << EOF
-import { Column, ColumnDataSource, version } from "@bokehjs/bokeh";
-import { figure, show } from "@bokehjs/api/plotting";
-import { Button } from "@bokehjs/models/widgets";
+import * as Bokeh from "@bokeh/bokehjs";
 
-console.info("BokehJS version:", version);
+console.info("BokehJS version:", Bokeh.version);
 
 function create_bokehjs_plot(target_id: string) {
-  const source = new ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
+  const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
 
-  const plot = figure({
+  const plot = Bokeh.Plotting.figure({
     title: "Example BokehJS plot", height: 500, width: 500,
     x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
   });
 
   plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
 
-  const button = new Button({label: "Click me to add a point", button_type: "primary"});
+  const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
   function button_callback() {
     const data = source.data as any;
     data.x.push(Math.random());
@@ -151,14 +123,14 @@ function create_bokehjs_plot(target_id: string) {
   }
   button.on_click(button_callback);
 
-  const column = new Column({children: [plot, button], sizing_mode: "stretch_width"});
-  show(column, target_id);
+  const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
+  Bokeh.Plotting.show(column, target_id);
 }
 
 create_bokehjs_plot("#target");
 EOF
 
-# 13. Rebuild and serve
+# 11. Rebuild and serve
 npm install
 npm run build
 #npm run serve

typescript/vanilla_webpack/README.md

@@ -103,48 +103,24 @@
     npm install ../../../../bokeh-bokehjs-3.7.0-dev.5.tgz
     ```
 
-10. `tsconfig.json` needs workaround for `@bokehjs` paths, added to the `compilerOptions` section:
-
-    ```json
-    "compilerOptions": {
-      "paths": {
-        "@bokehjs/*": ["./node_modules/@bokeh/bokehjs/build/js/lib/*"]
-      }
-    }
-    ```
-
-11. `webpack.config.ts` needs workaround to resolve `@bokehjs` alias also, added to the top-level of the `config`:
-
-    ```typescript
-    const config: webpack.Configuration = {
-      resolve: {
-        alias: {
-          "@bokehjs": path.resolve(__dirname, "node_modules/@bokeh/bokehjs/build/js/lib/")
-        }
-      },
-    }
-    ````
-
-12. Remove contents of `src/index.ts` and replace with code to create BokehJS plot:
+10. Remove contents of `src/index.ts` and replace with code to create BokehJS plot:
 
     ```typescript
-    import { Column, ColumnDataSource, version } from "@bokehjs/bokeh";
-    import { figure, show } from "@bokehjs/api/plotting";
-    import { Button } from "@bokehjs/models/widgets";
+    import * as Bokeh from "@bokeh/bokehjs";
 
-    console.info("BokehJS version:", version);
+    console.info("BokehJS version:", Bokeh.version);
 
     function create_bokehjs_plot(target_id: string) {
-      const source = new ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
+      const source = new Bokeh.ColumnDataSource({data: { x: [0.1, 0.9], y: [0.1, 0.9], size: [40, 10] }});
 
-      const plot = figure({
+      const plot = Bokeh.Plotting.figure({
         title: "Example BokehJS plot", height: 500, width: 500,
         x_range: [0, 1], y_range: [0, 1], sizing_mode: "stretch_width",
       });
 
       plot.scatter({ field: "x" }, { field: "y" }, {source, size: { field: "size" }});
 
-      const button = new Button({label: "Click me to add a point", button_type: "primary"});
+      const button = new Bokeh.Widgets.Button({label: "Click me to add a point", button_type: "primary"});
       function button_callback() {
         const data = source.data as any;
         data.x.push(Math.random());
@@ -154,14 +130,14 @@
       }
       button.on_click(button_callback);
 
-      const column = new Column({children: [plot, button], sizing_mode: "stretch_width"});
-      show(column, target_id);
+      const column = new Bokeh.Column({children: [plot, button], sizing_mode: "stretch_width"});
+      Bokeh.Plotting.show(column, target_id);
     }
 
     create_bokehjs_plot("#target");
     ```
 
-13. Rebuild and serve
+11. Rebuild and serve
 
     ```bash
     npm install