Welcome to OOHTML Discussions! #1

ox-harris · 2021-02-10T10:49:06Z

ox-harris
Feb 10, 2021
Maintainer

👋 Welcome!

We’re using Discussions as a place to connect with other members of our community. We hope that you:

Ask questions you’re wondering about.
Share ideas.
Engage with other community members.
Welcome others and are open-minded. Remember that this is a community we
build together 💪.

To get started, comment below with an introduction of yourself and tell us about what you do with this community.

OliverBrotchie · 2021-06-22T01:55:19Z

OliverBrotchie
Jun 22, 2021

Hey @ox-harris, I am going to be writing a compiler for OOHTML in rust. I was wondering, is there a way to take HTML as input to a template?? Eg:

<head>
    <template name="title-module">
        <export name="title>
            <nav>
                 <arg name="foo"/>
            </nav>
        </export>
    </template>
</head>
<body>
    <import name="title" template="title-module">
        <arg name="foo">
            <h1>This is a title!!<h1>
        </arg>
    </import>
</body>

Which would output as:

<body>
    <nav>
         <h1>This is a title!!</h1>
    </nav>
</body>

This would be a huge improvement for noScript users!

6 replies

OliverBrotchie Jun 22, 2021

@ox-harris Good to hear it! I have created a basic repository over at OliverBrotchie/mosaic.

ox-harris Jun 22, 2021
Maintainer Author

Great I'll be following.

ox-harris Aug 13, 2021
Maintainer Author

Hi @OliverBrotchie , I hope it's all coming up well.

I wanted to share that we now have an official page for recommending tooling for OOHTML. Page: https://webqit.io/tooling/oohtml/docs/resources/ecosystem. I'll be more than glad to add a rust compiler for OOHTML.

OliverBrotchie Aug 31, 2021

Dear @ox-harris, apologies for not getting back to you! I have been quite busy with other projects and haven't had time to work on this yet, but I will let you know if I make any progress.

ox-harris Sep 17, 2021
Maintainer Author

No problem @OliverBrotchie. Anticipating when you will be freer.

ox-harris · 2021-06-22T12:01:30Z

ox-harris
Jun 22, 2021
Maintainer Author

Indeed! And thanks for the good thinking!

OOHTML would let you do this. And here is how it goes (from OOHTML v1.7.5):

To receive an element as an arg...

Instead of using some <arg /> element as you have in the code:

<head>

    <template name="title-module">
        <export name="title">
            <nav>
                 <arg name="foo"/>
            </nav>
        </export>
    </template>

</head>

we would use a regular <import></import> element:

<head>

    <template name="title-module">
        <export name="title">
            <nav>
                 <import name="foo"></import>
            </nav>
        </export>
    </template>

</head>

The idea is that the host <export></export> element will automatically inherit content from whatever the slot it is eventually resolved into in the main document, in this case, the title slot. Now, the <import></import> element would be scoped to the host <export></export> element to import the inherited content.

We use the tilde character "~" to resolve imports from their host <export></export> element:

<head>

    <template name="title-module">
        <export name="title">
            <nav>
                 <import name="foo" template="~"></import>
            </nav>
        </export>
    </template>

</head>

The last part is to properly construct the content that is to be inherited at resolve-time...

To put content up for inheritance...

Instead of using some <arg /> element as you have in the code:

<body>

    <import name="title" template="title-module">
        <arg name="foo">
            <h1>This is a title!!<h1>
        </arg>
    </import>

</body>

we would use a regular <export></export> element:

<body>

    <import name="title" template="title-module">
        <export name="foo">
            <h1>This is a title!!<h1>
        </export>
    </import>

</body>

Hope that looks good!

It might also be good to see how this looks in the alternative import/export syntax that uses the exportgroup attribute instead of an <export></export> element:

a

<head>

    <template name="title-module">
        <nav exportgroup="title">
             <import name="foo" template="~"></import>
        </nav>
    </template>

</head>

b

<body>

    <import name="title" template="title-module">
        <h1 exportgroup="foo">This is a title!!<h1>
    </import>

</body>

And that's it! Fewer elements up there!

And talking about less code, the idea of default import/export in OOHTML could further simplify things as it lets us do without import and export IDs.

Below we omit the foo import and export ID:

a

<head>

    <template name="title-module">
        <nav exportgroup="title">
             <import template="~"></import>
        </nav>
    </template>

</head>

b

<body>

    <import name="title" template="title-module">
        <h1>This is a title!!<h1>
    </import>

</body>

Then, if we were to have to structure the inherited content in some special way, we could use the template element:

a

<head>

    <template name="title-module">
        <nav exportgroup="title">
             <import template="~/nested"></import>
        </nav>
    </template>

</head>

b

<body>

    <import name="title" template="title-module">
        <h1>This is a title!!<h1>
        <template name="nested">
            <h2>This is nested title</h2>
        </template>
    </import>

</body>

Note that<template></template> elements within <import></import> elements do not appear in the global module namespace.

2 replies

OliverBrotchie Jun 22, 2021

@ox-harris Oh wow that's a perfect solution! My only worry is that it might not be entirely intuitive behaviour to developers. But I'm sure with some good documentation on the logic behind import/export with examples, people will understand it well enough.

ox-harris Jun 22, 2021
Maintainer Author

You are right @OliverBrotchie . We're currently working to come up with better documentation.

OliverBrotchie · 2021-06-22T16:11:41Z

OliverBrotchie
Jun 22, 2021

@ox-harris I have another few of questions.

Question One

How are CSS and JS imports handled? Are they imported inline or is the CSS moved to the head and the JS appended to the body?

Example

Would this:

<!-- template.html -->
<export name="title>
    <style type="text/css">
        h1 {
            color: white;
        }
    </style>
    <h1>This is a title!!</h1>
    <script> console.log("Title module has been imported")</script>
</export>

<!-- import.html -->
<head>
    <template name="title-module" src="/template.html"/>
</head>
<body>
    <import template="title-module" name="title"/>
    <import template="title-module" name="title"/>
</body>

Compile to this:

<head>
    <style type="text/css">
        h1 {
            color: white;
        }
    </style>
</head>
<body>
    <h1>This is a title!!</h1>
    <h1>This is a title!!</h1>
    
    <script> console.log("Title module has been imported")</script>
    <script> console.log("Title module has been imported")</script>
</body>

Or this:

<body>
    <style type="text/css">
        h1 {
            color: white;
        }
    </style>
    <h1>This is a title!!</h1>
    <script> console.log("Title module has been imported")</script>
    <style type="text/css">
        h1 {
            color: white;
        }
    </style>
    <h1>This is a title!!</h1>
    <script> console.log("Title module has been imported")</script>
</body>

Question Two

What is the correct way to import HTML templates from rel?

Should they just be a HTML snippet like this?

<export name="title>
    <style type="text/css">
        h1 {
            color: white;
        }
    </style>
    <h1>This is a title!!</h1>
    <script> console.log("Title module has been imported")</script>
</export>

Or should they be a whole document like this?

<!DOCTYPE html>
<html lang="en">
<head>
    <export name="title>
        <style type="text/css">
            h1 {
                color: white;
            }
        </style>
        <h1>This is a title!!</h1>
        <script> console.log("Title module has been imported")</script>
    </export>
</head>

If you are just supposed to use the former, how should the browser handle tags such as head, body etc in the imports?

Question Three

Would it not be more prudent to use href attribute instead of rel for linking to templates? This would allow the importing of templates cross-origin.

Eg:

 <template name="title-module" href="http://website/some/url/template.html"/>

I believe the rel tag usually defines the type of relationship between a linked resource, not the location of the resource.
Perhaps it could be used to answer the previous question with:

<!-- rel="snippet" for non-well-formed HTML documents -->
<template name="title-module" href="http://website/some/url/template.html" rel="snippet" />

<!-- rel="document" for importing well-formed HTML documents -->
<template name="title-module" href="http://website/some/url/template.html" rel="document" />

3 replies

ox-harris Jun 22, 2021
Maintainer Author

For question one, the latter is the case. <import /> elements are simply replaced by the referenced exports.

For question two, the former is the case. Remote contents are not expected to be fully formed HTML documents. Remote contents with <head /> and <body /> tags would obviously result in a malformed document when placed with the <import /> element. But programatically handling them by accessing the document.templates object would work just fine:

<head>
   <template name="fullDoc" src="/document.html"></template>
   <script>
       let fullDoc = document.templates.fullDoc;
       // Being a remote module, we'd first ensure that content is loaded before accessing them
       fullDoc.addEventListener('load', e => {
           // If we were to access content via the template.content property
           fullDoc.content.children;
       
           // If we were to access exports via the template.exports property
           fullDoc.exports;
       });
   </script>
</head>

For question three, did you mean to say rel or src? What OOHTML uses is actually src.

OliverBrotchie Jun 22, 2021

@ox-harris These answers defiantly make sense, and you are correct, I misread the document on question three haha.

I guess for question one, it would be more performant in most cases to import all the CSS in the head, but that should be left up to the developer.

Thanks for your quick response!

ox-harris Jun 22, 2021
Maintainer Author

@OliverBrotchie I am more than glad at the conversation! Many thanks.

ox-harris · 2021-08-13T09:10:53Z

ox-harris
Aug 13, 2021
Maintainer Author

Pleased to announce our new OOHTML docs: https://webqit.io/tooling/oohtml

2 replies

boticello Dec 5, 2023

This is a beautiful sharpening of HTML. All your design decisions are elegant. I will enjoy using it.

ox-harris Dec 5, 2023
Maintainer Author

Super stoked to hear that @boticello

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Welcome to OOHTML Discussions! #1

{{title}}

Replies: 4 comments 13 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Welcome to OOHTML Discussions! #1

ox-harris Feb 10, 2021 Maintainer

👋 Welcome!

Replies: 4 comments · 13 replies

OliverBrotchie Jun 22, 2021

OliverBrotchie Jun 22, 2021

ox-harris Jun 22, 2021 Maintainer Author

ox-harris Aug 13, 2021 Maintainer Author

OliverBrotchie Aug 31, 2021

ox-harris Sep 17, 2021 Maintainer Author

ox-harris Jun 22, 2021 Maintainer Author

OliverBrotchie Jun 22, 2021

ox-harris Jun 22, 2021 Maintainer Author

OliverBrotchie Jun 22, 2021

Question One

Example

Question Two

Question Three

ox-harris Jun 22, 2021 Maintainer Author

OliverBrotchie Jun 22, 2021

ox-harris Jun 22, 2021 Maintainer Author

ox-harris Aug 13, 2021 Maintainer Author

boticello Dec 5, 2023

ox-harris Dec 5, 2023 Maintainer Author

ox-harris
Feb 10, 2021
Maintainer

Replies: 4 comments 13 replies

OliverBrotchie
Jun 22, 2021

ox-harris Jun 22, 2021
Maintainer Author

ox-harris Aug 13, 2021
Maintainer Author

ox-harris Sep 17, 2021
Maintainer Author

ox-harris
Jun 22, 2021
Maintainer Author

ox-harris Jun 22, 2021
Maintainer Author

OliverBrotchie
Jun 22, 2021

ox-harris Jun 22, 2021
Maintainer Author

ox-harris Jun 22, 2021
Maintainer Author

ox-harris
Aug 13, 2021
Maintainer Author

ox-harris Dec 5, 2023
Maintainer Author