Thomas Reggi's Profile Image

@thomasreggi 🌸

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

October 20, 2022 (Syndicated From

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

@server-onload-file ./example.ts


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


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, {}</h1>;


@svelte-component HelloWorld

	let name = 'world';

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


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");


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">

@route /

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


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


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


import self from 'self-service'
export default (
  <!DOCTYPE html>
view raw hosted with ❤ by GitHub