[WICG/webcomponents] Introducing Direct Navigation to Client-Side JavaScript-Generated HTML Documents (Issue #1008)

**Abstract:**

This proposal aims to introduce a new feature that allows developers to create client-side web applications without the need for an HTML wrapper, enabling them to serve JavaScript files directly as web pages. By offering a more portable and encapsulated approach, this feature seeks to streamline web development and enhance the overall developer experience.

**Introduction:**

Modern web development has shifted towards a more JavaScript-centric approach, where developers utilize JavaScript to dynamically generate HTML and CSS content. However, the current state of web browsers necessitates the use of an HTML wrapper to serve JavaScript files, which can be both cumbersome and limiting. To overcome this constraint, we propose a new feature that allows direct navigation to client-side JavaScript-generated HTML documents without the need for an HTML wrapper.

**Advantages:**

1.  **Portability:** The proposed feature would enable developers to create web applications that are platform-independent, allowing them to be served from any web server without the need for server-side configuration or additional URL-rewriting code. This portability extends to scenarios where a single JavaScript file could be shared via email, and recipients could run a fully functional web application by opening it in their browser.
 
2. **Encapsulation:** By eliminating the need for an HTML wrapper, developers can create more self-contained and encapsulated web applications, where all the necessary code resides within a single JavaScript file. This feature aligns with the increasing trend of utilizing template literals and tagged template literals for generating HTML content.

3. **Streamlined Development:** The proposed feature simplifies the development process, as developers can focus on writing JavaScript code without having to manage an HTML wrapper file. This streamlined approach can potentially save time and effort in the development process.

**Example:**

```
function makeDocument() {
  var doc = document.implementation.createHTMLDocument("Document Generated By Client-Side JavaScript");
  doc.documentElement.lang = "en";
  var meta = doc.createElement('meta');
  meta.setAttribute("charset", "UTF-8");
  doc.head.appendChild(meta);

  var title = doc.createElement("title");
  title.textContent = "JavaScript is No Longer a Prisoner of HTML";
  doc.head.appendChild(title);
  
  var p = doc.createElement("p");
  p.textContent = "This is a clickable paragraph.";
  p.addEventListener('click', function(event) { alert("Yes, this click event should work!"); });
  doc.body.appendChild(p);
  return doc;
}
export let clientSideDynamicallyGeneratedHTMLDocument = makeDocument();
```
In this example, the JavaScript file generates an HTMLDocument and exports it. The browser should recognize the exported document and render it as the main content of the web page. This approach eliminates the need for an initial HTML file and allows developers to create web applications using only JavaScript.

**Implementation:**

To implement this feature, we suggest introducing a new mime-type (e.g., "webpage/javascript") and potentially a new file extension (e.g., ".js.webapp") to ensure backward compatibility with existing web content and security assumptions. The browser would recognize this new mime-type and file extension, and treat the JavaScript file as a web page, executing it and generating the HTML content accordingly.

**Conclusion:**

By allowing direct navigation to client-side JavaScript-generated HTML documents, this proposal aims to improve the web development experience by offering portability, encapsulation, and a streamlined development process. With the support of the web development community and browser vendors, this feature has the potential to usher in a new era of JavaScript-centric web development, where developers can focus on writing code without being constrained by the limitations of HTML wrappers.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1008
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1008@github.com>