remove all runtime usages of NPM

With recent changes to the custom component interface, it's now
possible to remove all runtime reliance on NPM. Doing so has many
virtuous knock-on effects:

1. Removal of large chunks of code
2. Greatly simplifies how users dynamically experiment with React
   component libraries, because their usage no longer requires a
   build step. Instead they can be loaded in the browser from a
   CDN that distributes ESM modules.
3. The built-in client code needs to make fewer assumption about
   where static resources are located, and as a result, it's
   also easier to coordinate the server and client code.
4. Alternate client implementations benefit from this simplicity.
   Now, it's possible to install idom-client-react normally and
   write a loadImportSource() function that looks for route
   serving the contents of IDOM_WEB_MODULES_DIR.

This change includes large breaking changes:

- The CLI is being removed as it won't be needed any longer
- The idom.client is being removed in favor of a stripped down
  idom.web module
- The IDOM_CLIENT_BUILD_DIR config option will no longer exist and
  a new IDOM_WEB_MODULES_DIR which only contains dynamically
  linked web modules. While this new directory's location is
  configurable, it is meant to be transient and should not be
  re-used across sessions.

The new idom.web module takes a simpler approach to constructing
import sources and expands upon the logic for resolving imports
by allowing exports from URLs to be discovered too. Now, that
IDOM isn't using NPM to dynamically install component libraries
idom.web instead creates JS modules from template files and links
them into IDOM_WEB_MODULES_DIR. These templates ultimately direct
the browser to load the desired library from a CDN.

Author: rmorshea

MANIFEST.in

@@ -1,6 +1,4 @@
 recursive-include src/idom *
-recursive-exclude src/idom/client/app/node_modules *
-recursive-exclude src/idom/client/app/web_modules *
-recursive-exclude src/idom/client/build *
+recursive-exclude src/idom/client/node_modules *
 include requirements/prod.txt
 include requirements/extras.txt

docs/Dockerfile

@@ -28,9 +28,6 @@ ADD README.md ./
 
 RUN pip install -e .[all]
 
-ENV IDOM_DEBUG_MODE=1
-ENV IDOM_CLIENT_BUILD_DIR=./build
-
 RUN python -m idom install htm victory semantic-ui-react @material-ui/core
 
 # Build the Docs
@@ -44,4 +41,5 @@ RUN sphinx-build -b html docs/source docs/build
 # Define Entrypoint
 # -----------------
 ENV PORT 5000
+ENV IDOM_DEBUG_MODE=1
 CMD python docs/main.py

docs/source/examples/material_ui_button_no_action.py

@@ -1,12 +1,11 @@
 import idom
 
 
-material_ui = idom.install("@material-ui/core", fallback="loading...")
+mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
+Button = idom.web.export(mui, "Button")
 
 idom.run(
     idom.component(
-        lambda: material_ui.Button(
-            {"color": "primary", "variant": "contained"}, "Hello World!"
-        )
+        lambda: Button({"color": "primary", "variant": "contained"}, "Hello World!")
     )
 )

docs/source/examples/material_ui_button_on_click.py

@@ -3,15 +3,16 @@
 import idom
 
 
-material_ui = idom.install("@material-ui/core", fallback="loading...")
+mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
+Button = idom.web.export(mui, "Button")
 
 
 @idom.component
 def ViewButtonEvents():
     event, set_event = idom.hooks.use_state(None)
 
     return idom.html.div(
-        material_ui.Button(
+        Button(
             {
                 "color": "primary",
                 "variant": "contained",

docs/source/examples/material_ui_slider.py

@@ -3,15 +3,16 @@
 import idom
 
 
-material_ui = idom.install("@material-ui/core", fallback="loading...")
+mui = idom.web.module_from_template("react", "@material-ui/core", fallback="⌛")
+Slider = idom.web.export(mui, "Slider")
 
 
 @idom.component
 def ViewSliderEvents():
     (event, value), set_data = idom.hooks.use_state((None, 50))
 
     return idom.html.div(
-        material_ui.Slider(
+        Slider(
             {
                 "color": "primary" if value < 50 else "secondary",
                 "step": 10,

docs/source/examples/super_simple_chart.py

@@ -1,15 +1,16 @@
 from pathlib import Path
 
 import idom
+from idom.config import IDOM_WED_MODULES_DIR
 
 
-path_to_source_file = Path(__file__).parent / "super_simple_chart.js"
-ssc = idom.Module("super-simple-chart", source_file=path_to_source_file)
-
+file = Path(__file__).parent / "super_simple_chart.js"
+ssc = idom.web.module_from_file("super-simple-chart", file, fallback="⌛")
+SuperSimpleChart = idom.web.export(ssc, "SuperSimpleChart")
 
 idom.run(
     idom.component(
-        lambda: ssc.SuperSimpleChart(
+        lambda: SuperSimpleChart(
             {
                 "data": [
                     {"x": 1, "y": 2},

docs/source/examples/victory_chart.py

@@ -1,6 +1,8 @@
 import idom
 
 
-victory = idom.install("victory", fallback="loading...")
+victory = idom.web.module_from_template("react", "victory", fallback="⌛")
+VictoryBar = idom.web.export(victory, "VictoryBar")
+
 bar_style = {"parent": {"width": "500px"}, "data": {"fill": "royalblue"}}
-idom.run(idom.component(lambda: victory.VictoryBar({"style": bar_style})))
+idom.run(idom.component(lambda: VictoryBar({"style": bar_style})))

docs/source/installation.rst

@@ -55,97 +55,5 @@ table below:
     *   - ``flask``
         - `Flask <https://palletsprojects.com/p/flask/>`__ as a :ref:`Layout Server`
 
-    *   - ``dialect``
-        - :ref:`Python Language Extension` for writing JSX-like syntax
-
     *   - ``all``
         - All the features listed above (not usually needed)
-
-
-Python Language Extension
--------------------------
-
-IDOM includes an import-time transpiler for writing JSX-like syntax in a ``.py`` file!
-
-.. code-block:: python
-
-    # dialect=html
-    from idom import html
-
-    message = "hello world!"
-    attrs = {"height": "10px", "width": "10px"}
-    model = html(f"<div ...{attrs}><p>{message}</p></div>")
-
-    assert model == {
-        "tagName": "div",
-        "attributes": {"height": "10px", "width": "10px"},
-        "children": [{"tagName": "p", "children": ["hello world!"]}],
-    }
-
-With Jupyter and IPython support:
-
-.. code-block:: python
-
-    %%dialect html
-    from idom import html
-    assert html(f"<div/>") == {"tagName": "div"}
-
-That you can install with ``pip``:
-
-.. code-block::
-
-    pip install idom[dialect]
-
-
-Usage
-.....
-
-1. Import ``idom`` in your application's ``entrypoint.py``
-
-2. Import ``your_module.py`` with a ``# dialect=html`` header comment.
-
-3. Inside ``your_module.py`` import ``html`` from ``idom``
-
-4. Run ``python entrypoint.py`` from your console.
-
-So here's the files you should have set up:
-
-.. code-block:: text
-
-    project
-    |-  entrypoint.py
-    |-  your_module.py
-
-The contents of ``entrypoint.py`` should contain:
-
-.. code-block::
-
-    import idom  # this needs to be first!
-    import your_module
-
-While ``your_module.py`` should contain the following:
-
-.. code-block::
-
-    # dialect=html
-    from idom import html
-    assert html(f"<div/>") == {"tagName": "div"}
-
-And that's it!
-
-
-How It Works
-............
-
-Once ``idom`` has been imported at your application's entrypoint, any following modules
-imported with a ``# dialect=html`` header comment get transpiled just before they're
-executed. This is accomplished by using Pyalect_ to hook a transpiler into Pythons
-import system. The :class:`~idom.dialect.HtmlDialectTranspiler` implements Pyalect_'s
-:class:`~pyalect.dialect.Transpiler` interface using some tooling from htm.py_.
-
-
-.. Links
-.. =====
-
-.. _Pyalect: https://pyalect.readthedocs.io/en/latest/
-.. _htm.py: https://github.com/jviide/htm.py

noxfile.py

@@ -205,7 +205,3 @@ def install_idom_dev(session: Session, extras: str = "stable") -> None:
         session.install("-e", f".[{extras}]")
     else:
         session.posargs.remove("--no-install")
-    if "--no-restore" not in session.posargs:
-        session.run("idom", "restore")
-    else:
-        session.posargs.remove("--no-restore")

requirements/check-types.txt

@@ -3,3 +3,4 @@ types-click
 types-tornado
 types-pkg-resources
 types-flask
+types-requests

requirements/pkg-deps.txt

@@ -1,10 +1,6 @@
 typing-extensions >=3.7.4
 mypy-extensions >=0.4.3
 anyio >=3.0
-async_exit_stack >=1.0.1; python_version<"3.7"
 jsonpatch >=1.26
-typer >=0.3.2
-click-spinner >=0.1.10
 fastjsonschema >=2.14.5
-rich >=9.13.0
-appdirs >=1.4.4
+requests >=2.0

requirements/pkg-extras.txt

@@ -19,8 +19,3 @@ selenium
 
 # extra=matplotlib
 matplotlib
-
-# extra=dialect
-htm
-pyalect
-tagged

setup.py

@@ -63,16 +63,6 @@ def list2cmdline(cmd_list):
 }
 
 
-# -----------------------------------------------------------------------------
-# CLI Entrypoints
-# -----------------------------------------------------------------------------
-
-
-package["entry_points"] = {
-    "console_scripts": ["idom = idom.__main__:main"],
-}
-
-
 # -----------------------------------------------------------------------------
 # Requirements
 # -----------------------------------------------------------------------------
@@ -129,7 +119,7 @@ class Command(cls):
         def run(self):
             log.info("Installing Javascript...")
             try:
-                js_dir = str(package_dir / "client" / "app")
+                js_dir = str(package_dir / "client")
                 npm = shutil.which("npm")  # this is required on windows
                 if npm is None:
                     raise RuntimeError("NPM is not installed.")

src/idom/__init__.py

@@ -10,8 +10,7 @@
 
 __author__ = "idom-team"
 
-from . import config, log
-from .client.module import Import, Module, install
+from . import config, log, web
 from .core import hooks
 from .core.component import Component, component
 from .core.events import Events, event
@@ -23,21 +22,6 @@
 from .widgets.utils import hotswap, multiview
 
 
-# try to automatically setup the dialect's import hook
-try:
-    import htm
-    import pyalect
-    import tagged
-except ImportError:  # pragma: no cover
-    pass
-else:
-    from . import dialect
-
-    del pyalect
-    del tagged
-    del htm
-
-
 __all__ = [
     "run",
     "component",
@@ -51,8 +35,6 @@
     "server",
     "Ref",
     "vdom",
-    "Module",
-    "Import",
     "hotswap",
     "multiview",
     "html_to_vdom",
@@ -62,4 +44,5 @@
     "install",
     "log",
     "config",
+    "web",
 ]

src/idom/__main__.py

@@ -8,16 +8,12 @@
 import os
 from logging import getLogger
 from typing import Any, Callable, Generic, TypeVar, cast
-from weakref import WeakSet
 
 
 _O = TypeVar("_O")
 logger = getLogger(__name__)
 
 
-ALL_OPTIONS: WeakSet[Option[Any]] = WeakSet()
-
-
 class Option(Generic[_O]):
     """An option that can be set using an environment variable of the same name"""
 
@@ -35,7 +31,6 @@ def __init__(
         if name in os.environ:
             self._current = validator(os.environ[name])
         logger.debug(f"{self._name}={self.current}")
-        ALL_OPTIONS.add(self)
 
     @property
     def name(self) -> str: