How do I make a standalone Glimmer html page?

Questions
1

I am playing at the moment with AI artifacts and wanted to see if there is a simple way to make a standalone page that renders a gjs component.

For example in the react world something like this will work:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>React Hello World with JSX</title>
    <style>
        .hello-world {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
            color: #333;
        }

        .hello-world h1 {
            font-size: 2.5em;
            color: #2196F3;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <!-- React Dependencies -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!-- Application Code -->
    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById('root'));

        function HelloWorld() {
            return (
                <div className="hello-world">
                    <h1>Hello, World!</h1>
                    <p>Welcome to React!</p>
                </div>
            );
        }

        root.render(<HelloWorld />);
    </script>
</body>
</html>

What is the equivalent with a gjs component.

I totally get this is an edge case and that I should be using build tools, but is there a way to do this in a standalone way. (this is only for prototyping)

Ideally all the script refs are on unpkg already… cause that will play nicer with a CSP.

2

once this PR lands: Initial implementation of renderComponent by wycats · Pull Request #20781 · emberjs/ember.js · GitHub

you’ll be able to do something similar.

However, note that your sample code will still require transpilation as your HTML has JSX, and JSX isn’t valid JS – I guess tho that babel handles this somehow with that type=“text/babel”.

after Initial implementation of renderComponent by wycats · Pull Request #20781 · emberjs/ember.js · GitHub, your demo could look something like, you’d use real ESM instead of fake script types to render code – something like this:

<script type="importmap">
  "imports": {
    "@ember/-internals/": "https://esm.sh/*ember-source/dist/packages/@ember/-internals/",
    "@ember/template-compilation": "https://esm.sh/*ember-source/dist/packages/@ember/template-compilation"
    // etc
  }
</script>
<script type="module">
  import { renderComponent } from '@ember/-internals/glimmer/lib/renderer'; // not final place
  import { template } from '@ember/template-compilation'; // runtime compiler -- optimized further when you have a build step
  import Application from '@ember/application';
  import Registry from '@ember/-internals/container/lib/registry';

  const HelloWorld = template(`
      <div class="hello-world">
        <h1>Hello, World!</h1>
        <p>Welcome to Ember!</p>
      </div>
   `);

  function buildOwner() {
    // idk how much of this is needed
    let registry = new Registry();
    let owner = {
      __registry__: registry,
      __container__: null,
    });
  
    let container = registry.container({ owner: owner });
    owner.__container__ = container;
    return owner;
  }

  const root = document.getElementById('root');
  const owner = buildOwner();

  renderComponent(HelloWorld, { 
    owner, // allow injection and all that 
    env: {
      document: document,
      into: root,
      // probably default?, 
      isInteractive: true,
    } 
  })

</script>

this is just spit-ballin what I’m seeing in the PR – and we want the ergonomics of this to be much nicer. Like, we need a better way for folks to get their first / top-level owner.

2 Likes
3

I wander then if to “simulate” gjs I should just regex out the <template> tag and then use this engine to run it, make a hodge podge parser.

My use case is to do stuff like this, but for Ember gjs: Modern React Time Range Picker Component - AI Conversation - Sam Saffron's Blog

The component change though looks enough to power a persona here, we can load it up with a lot of knowledge about imports and examples of components.

4

We already have this:

would that work for your needs?

I wander then if to “simulate” gjs I should just regex out the <template> tag and then use this engine to run it, make a hodge podge parser.

what are you wanting to do?

We also already have a way to runtime compile this stuff with all of babel using the same code/libraries that powers

See here:

1 Like
5

yes this is very much in line with what I want, are these libs on jsdelivr or some other big public CDN.

A big thing I want to avoid is needing to redistribute the libs.

Is the system prompt for ember assistant available somewhere public?

End result will be something like “ember assistant” except that you get to interact with the artifact live and right away and get to use any LLM you want, we run a few here.

6

It is not possible to run ember today from just a CDN. you’d need to wait for some more runtime stuff to land.

cc @wycats <3

Is the system prompt for ember assistant available somewhere public?

not really, it’s a couple MB, but I generate documents for it via:

except that you get to interact with the artifact live and right away and get to use any LLM you want

why does this require you forgo build tools?

1 Like
7

It is not a strong requirement, but the way I have discourse-ai set up our artifact system is incredibly lightweight for people that use it. When I share an artifact like this one for example, I don’t need to worry about cost to me… all I pay is rendering of a tiny HTML page, the rest is being footed by cloudflare and other big web benefactors.

If I were to introduce build tools and so on into the stack it would complicate stuff… that said, if the payloads can remain small enough I could swing something as long as the fat dependencies like ember/etc remain off site.

We already run V8 and have access to ember-cli from Discourse so maybe if it was structured as:

  • big ember dep off site
  • tiny compiled component embedded into html

It could work, for sure.

1 Like