Labeled Statements

[ije]

Alef Component use the Labeled Statement to specify some features.

Side Effects

$: () => {
  console.log('mounted')
  return () => console.log('unmounted')
}

Styles

style: `
  p {
    font-style: normal;
  }
`
$style: `
  p {
    font-size: ${fontSize}px;
  }
`

Env Lables

$_DEV: () => {
  console.log('development mode')
}

let version: Record<string, string> = {}
$_DENO: version = Deno.version
$_NODE: version = process.versions

[shadowtime2000]

I don't think it would be a good idea to have a standard $ssr label, leaving SSR up to the framework may be a better idea for more customization for the framework authors.

[ije]

@shadowtime2000 yeah you are right, it maybe too much. or we can allow customized labels that can be invoked in frameworks:

// App.alef

$deno: version = Deno.version
$node: version = process.versions

// renderer.ts

import { renderToString } from "https://deno.land/x/alef/ssr.ts"
import App from "./App.output.js"

renderToString(App, {
  allowedLabels: typeof Deno !== "undefined" ? ['deno'] : ['node']
})

[ije]

or use $_ label prefix to specify different rendering env:

// App.alef

let isDev = false

$_dev: isDev = true
$_deno: version = Deno.version
$_node: version = process.versions
$_browser: version = parseVersion(navigator.userAgent)

// renderer.ts

import { renderToString } from "https://deno.land/x/alef/ssr.ts"
import App from "./App.output.js"

renderToString(App, {
  isDev: true,
  env: typeof Deno !== "undefined" ? 'deno' : typeof process !== "undefined" ? 'node' : 'browser'
})

[ije]

i'm thinking it could be better to use types statement for Memo:

const double: Memo<number> = 2 *n

since in typescript you need to declear the memo variable before $: labe:

let double: number
$: double = 2 *n

[ije]

or even no Memo<T> when it has compute expr with state variables as constant:

let n: number = 1

const double: number = 2 * n // memo