Proposal Code Syntax for Client + Server Code Using Markdown Code Blocks

@framework astro-node, vite-preact, deno-fresh

@server-onload-file ./example.ts

@server-onload

console.log('hello world from server on load')

@client-onload

console.log('hello world from client on load')

@client-import hello-world

export function helloWorld () => {
  console.log('from the client')
}

@react-component #client #server Welcome

export default function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

@script-src

https://cdn.tailwindcss.com

@svelte-component HelloWorld

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

@web-component

class HelloWorld extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<h1>Hello world</h1>`;
  }
}
customElements.define('hello-world', HelloWorld);

@fresh-route /api/hello

import { HandlerContext, Handlers } from "$fresh/server.ts";

export const handler: Handlers = {
  GET(_req: Request, _ctx: HandlerContext) {
    return new Response("Hello World");
  },
};

@preact-component

import self from 'self-service'
// this value is simply a string like <hello-world/>
// but the call here tells the compiler that hello-world
// is used and to include it's source for this page render
const HelloWorld = self.webComponents('hello-world')

export default function Welcome() {
  return <h1>Hello, {HelloWorld()}</h1>;
}

@route /

import self from 'self-service'
export default self.preactComponents('Welcome')

@html-template tailwind-example #tailwind

<h1 class="text-3xl font-bold underline">
  {self.child}
</h1>

@route /

import self from 'self-service'
export default self.html('Welcome')

@deno-preact-server-render

/** @jsx h */
import { Fragment, h } from "https://esm.sh/preact@10.10.0";
import selfService from "self_service_deno"
const main = () => {
  <Fragment>
    <script dangerouslySetInnerHTML={{__html: selfService.clientImports('helloClient').clientCall}} />
    <div onclick={selfService.clientImports('helloClient').globalStringCall}>home</div>
  </Fragment>
}
export default main

@main-html

<!DOCTYPE html>
  <html>
    <head>
      <slot id="head">
    </head>
  <body>
    <slot id="main">
  </body>
</html>

@main-preact

import self from 'self-service'
export default (
  <!DOCTYPE html>
    <html>
      <head>
        {self.head}
      </head>
    <body>
      {self.main}
    </body>
  </html>
)