no more build config

Author: rmorshea

docs/Dockerfile

@@ -24,7 +24,7 @@ ADD README.md ./
 ADD idom/client/app/favicon.ico ./
 
 RUN pip install -e .[all]
-RUN IDOM_SHOW_SPINNER=false python -m idom install victory semantic-ui-react @material-ui/core
+RUN python -m idom install victory semantic-ui-react @material-ui/core
 
 # Build the Docs
 # --------------

docs/main.py

@@ -11,14 +11,6 @@
 from idom.client.manage import APP_DIR
 from idom.server.sanic import PerClientStateServer
 
-idom_build_config = {
-    "js_dependencies": [
-        "@material-ui/core",
-        "victory",
-        "semantic-ui-react",
-    ]
-}
-
 here = Path(__file__).parent
 
 app = Sanic(__name__)
@@ -75,11 +67,12 @@ def production():
 
 
 def local(path=""):
-    import webbrowser
+    from selenium.webdriver import Chrome
 
     thread = server.daemon("127.0.0.1", 5000)
     path = f"docs/{path}" if path else ""
-    webbrowser.open(f"http://127.0.0.1:5000/{path}")
+    driver = Chrome()
+    driver.get(f"http://127.0.0.1:5000/{path}")
     thread.join()
 
 

docs/source/_exts/widget_example.py

@@ -1,7 +1,8 @@
 from pathlib import Path
 
 from sphinx.application import Sphinx
-from docutils.parsers.rst import Directive, directives
+from sphinx.util.docutils import SphinxDirective
+from docutils.parsers.rst import directives
 from docutils.statemachine import StringList
 
 from sphinx_panels.tabs import TabbedDirective
@@ -10,7 +11,7 @@
 examples = here.parent / "examples"
 
 
-class WidgetExample(Directive):
+class WidgetExample(SphinxDirective):
 
     has_content = False
     required_arguments = 1
@@ -24,7 +25,10 @@ def run(self):
 
         py_ex_path = examples / f"{example_name}.py"
         if not py_ex_path.exists():
-            raise ValueError(f"No example file named {py_ex_path}")
+            src_file, line_num = self.get_source_info()
+            raise ValueError(
+                f"Missing example file named {py_ex_path} referenced by document {src_file}:{line_num}"
+            )
 
         py_code_tab = TabbedDirective(
             "WidgetExample",

docs/source/examples.rst

@@ -71,7 +71,7 @@ Assuming you already installed ``victory`` as in the :ref:`Install Javascript Mo
 
 Click the bars to trigger an event 👇
 
-.. example:: custom_chart
+.. example:: super_simple_chart
 
 
 Material UI Slider

docs/source/examples/custom_chart.js

@@ -1,7 +1,7 @@
 import idom
 
-material_ui = idom.Module("@material-ui/core")
-MaterialButton = material_ui.Import("Button", fallback="loading...")
+material_ui = idom.install("@material-ui/core")
+MaterialButton = material_ui.use("Button", fallback="loading...")
 
 idom.run(
     idom.element(

docs/source/examples/custom_chart.py

@@ -3,8 +3,8 @@
 import idom
 
 
-material_ui = idom.Module("@material-ui/core")
-MaterialButton = material_ui.Import("Button", fallback="loading...")
+material_ui = idom.install("@material-ui/core")
+MaterialButton = material_ui.use("Button", fallback="loading...")
 
 
 @idom.element

docs/source/examples/material_ui_button_no_action.py

@@ -3,8 +3,8 @@
 import idom
 
 
-material_ui = idom.Module("@material-ui/core", fallback="loading...")
-MaterialSlider = material_ui.Import("Slider")
+material_ui = idom.install("@material-ui/core")
+MaterialSlider = material_ui.use("Slider", fallback="loading...")
 
 
 @idom.element

docs/source/examples/material_ui_button_on_click.py

@@ -6,7 +6,7 @@
 from idom.widgets.html import Input
 
 
-VictoryLine = idom.Module("victory").Import("VictoryLine", fallback="loading...")
+VictoryLine = idom.install("victory").use("VictoryLine", fallback="loading...")
 
 
 @idom.element

docs/source/examples/material_ui_slider.py

@@ -0,0 +1,75 @@
+import React from "./react.js";
+import htm from "./htm.js";
+
+const html = htm.bind(React.createElement);
+
+export function SuperSimpleChart(props) {
+  const data = props.data;
+  const lastDataIndex = data.length - 1;
+
+  const options = {
+    height: props.height || 100,
+    width: props.width || 100,
+    color: props.color || "blue",
+    lineWidth: props.lineWidth || 2,
+    axisColor: props.axisColor || "black",
+  };
+
+  const xData = data.map((point) => point.x);
+  const yData = data.map((point) => point.y);
+
+  const domain = {
+    xMin: Math.min(...xData),
+    xMax: Math.max(...xData),
+    yMin: Math.min(...yData),
+    yMax: Math.max(...yData),
+  };
+
+  return html`<svg
+    width="${options.width}px"
+    height="${options.height}px"
+    viewBox="0 0 ${options.width} ${options.height}"
+  >
+    ${makePath(props, domain, data, options)} ${makeAxis(props, options)}
+  </svg>`;
+}
+
+function makePath(props, domain, data, options) {
+  const { xMin, xMax, yMin, yMax } = domain;
+  const { width, height } = options;
+  const getSvgX = (x) => ((x - xMin) / (xMax - xMin)) * width;
+  const getSvgY = (y) => height - ((y - yMin) / (yMax - yMin)) * height;
+
+  let pathD = "M " + getSvgX(data[0].x) + " " + getSvgY(data[0].y) + " ";
+  pathD += data.map((point, i) => {
+    return "L " + getSvgX(point.x) + " " + getSvgY(point.y) + " ";
+  });
+
+  return html`<path
+    d="${pathD}"
+    style=${{
+      stroke: options.color,
+      strokeWidth: options.lineWidth,
+      fill: "none",
+    }}
+  />`;
+}
+
+function makeAxis(props, options) {
+  return html`<g>
+    <line
+      x1="0"
+      y1=${options.height}
+      x2=${options.width}
+      y2=${options.height}
+      style=${{ stroke: options.axisColor, strokeWidth: options.lineWidth * 2 }}
+    />
+    <line
+      x1="0"
+      y1="0"
+      x2="0"
+      y2=${options.height}
+      style=${{ stroke: options.axisColor, strokeWidth: options.lineWidth * 2 }}
+    />
+  </g>`;
+}

docs/source/examples/simple_dashboard.py

@@ -0,0 +1,32 @@
+from pathlib import Path
+
+import idom
+
+
+path_to_source_file = Path(__file__).parent / "super_simple_chart.js"
+super_simple_chart = idom.Module("super-simple-chart", source_file=path_to_source_file)
+SuperSimpleChart = super_simple_chart.use("SuperSimpleChart")
+
+
+idom.run(
+    idom.element(
+        lambda: SuperSimpleChart(
+            {
+                "data": [
+                    {"x": 1, "y": 2},
+                    {"x": 2, "y": 4},
+                    {"x": 3, "y": 7},
+                    {"x": 4, "y": 3},
+                    {"x": 5, "y": 5},
+                    {"x": 6, "y": 9},
+                    {"x": 7, "y": 6},
+                ],
+                "height": 300,
+                "width": 500,
+                "color": "#24909d",
+                "lineWidth": 4,
+                "axisColor": "#bdc3c7",
+            }
+        )
+    )
+)

docs/source/examples/super_simple_chart.js

@@ -1,8 +1,7 @@
 import idom
 
-victory = idom.Module("victory", fallback="loading...")
-
-VictoryBar = victory.Import("VictoryBar")
+victory = idom.install("victory")
+VictoryBar = victory.use("VictoryBar", fallback="loading...")
 
 idom.run(
     idom.element(

docs/source/examples/super_simple_chart.py

@@ -12,7 +12,7 @@ Libraries for defining and controlling interactive webpages with Python
     getting-started
     life-cycle-hooks
     core-concepts
-    custom-javascript
+    javascript-modules
     examples
 
 .. toctree::

docs/source/examples/victory_chart.py

@@ -14,15 +14,6 @@ Installation
 
               pip install idom[stable]
 
-    *   - Javascript Packages
-        - Installing Javascript packages with IDOM requires npm_.
-
-          .. code-block::
-
-              idom install some-js-package
-
-          For more info see the :ref:`Custom Javascript` section.
-
     *   - Extra Features
 
         - To install **specific** features see :ref:`Extra Features`, but to install all of them: