1.5.0 - "Server components"

See https://kaleidawave.github.io/posts/prism-one-point-five

This release adds the ability to render components content on the server using the @RenderFromEndpoint decorator.

Text can now be interpolated alongside elements so the following is now possible:

<template>
    <div>
        {someText}
        <a href="#">Some Link</a>
    </div>
</template>

And for the following:

<div #if="someProp">
    <span>{title}</span>
</div>
<div #else>
    <p>{title}</p>
</div>

The get expression for title is now span.innerText ?? p.innerText . Before it would try and get the first instance and return null if it didn't exist.

Rust SSR methods are greatly improved. Now uses a single buffer, capacity can be set with @WithCapacity decorator and removed unnecessary to_stringing of String types.

New compiler options: noBundle to not concatenate client output and outputTypeScript to output client code with TypeScript syntax.

Lots of internal improvements for compiling components in the browser.

1.4.0

Implemented document title binding:

Pages with the @Title decorator will now see the document title change according to the data. e.g:

<template>...</template>
<script>
    @Page("/p/:postID")
    @Title(postTitle)
    class PostPage extends Component<{postTitle: string}> {}
</script>

Rust functions now borrow by default:

Rust SSR functions data properties are marked to borrow and not consume the data. This fixed a issue around SSR head tags (title+meta).

Support for shadow DOM:

Components marked with @Shadow will now have a shadow DOM rather than a light dom. If you are distributing web components this is recommended to encapsulate internals and to prevent accidental style or JS interference. DSD is also supported through the --declarativeShadowDOM true argument.

<template>
    <h1>Hello {name}</h1>
</template>
<script>
    @Shadow
    class HelloComponent extends Component<{name: string}> {}
</script>
<style>
    h1 { color: green }
</style>

Versioned outputs:

Outputted public files (css and js for now) now contain a unique versioning id in there path. This is useful when doing caching where there may be multiple clients running multiple versions. This is only recommended for applications build under context=client as running a old script with a new SSR markup will break hydration and styling.

New testing server:

Replaced the old temporary ws approach for a inbuilt node server. Should give incredibly quick start up times. Use with --run to run the server and --run open to include opening the browser.

Runtime minifications:

Added a lot more minifications to the runtime JS. This include redoing how events are hydrated and doing binding and unbinding under the same method.

1.3.0

Big update!!!

Added Rust server side rendering compilation

One of the main objectives of Prism is to be able to write isomorphic applications without being restricted to js engine based backends. And that is now starting to be possible today with the introduction of the ability to output native rust functions that will render Prism components.

Using the backendLanguage option set to rust

npm @kaleidawave/[email protected]  --backendLanguage rust

Prism will compile out a function to the serverOutputPath that can be imported and used:

mod templates;
use templates::story_page_prism::{render_story_page_page};

#[get("/s/{id}")]
async fn story_page(path: web::Path<(i32,)>) -> HttpResponse {
    HttpResponse::Ok()
        .content_type("text/html")
        .body(render_story_page_page(...))
}

Language transpliation is impossibly complex and Prism current only transpiles interfaces and imports. For using rust code in place of js logic there is the @useRustStatement decorator thing that can be used in comments and interface members to conditionally use code in rust modules. e.g:

// @useRustStatement #[derive(Clone, Debug, serde::Deserialize)]
export interface IStoryItem {
    id: number,
    @useRustStatement(`#[serde(rename(deserialize = "type"))]`)
    storyType: "job" | "story" | "comment" | "poll" | "pollopt",  
}

Rust compilation is very experimental and is not stable but is a on going effort (#19). For a full working demo of rust compilation in action see: https://github.com/kaleidawave/hackernews-prism

Unsafe html injection (#24)

During templating you can specify for a value to not be escaped using the #html attribute

<template>
    <h1>Raw HTML:</h1>
    <div #html="html"></div>
</template>

<script>
    @Default({html: "<h1>Hello World</h1>"})
    class RawHTMLComponent extends Component<{html: string}> {}
</script>

This will cause the div to have a h1 child rather than a text node. This works for both ssr and csr. Just make sure you know what you are doing as this does not use the standard escape mechanism that prevents against xss attacks.

Recursive components (#21)

Components can now render there own type inside themselves:

<template>
    <h1>Child component</h1>
    <This $data="childData"></This>
</template>

You can use <This> (recommended) or the class name of the component to refer to the current component. Just make sure your data is not cyclic or that there is a exit condition.

And lots of other small fixes

• HTML symbols converted to Unicode strings for csr 0befc69
• Bunch of fixes from 1.2.0 d3b973a (were released in emergency release 1.2.1)
• Lot of internal reworking to ssr process to make open for backend languages other than ts or js
• Minification to router.ts
• Lots of other internal fixes

1.2.0

This release adds no new user oriented features but adds a lot of improvements internally:

• Compiler will detect what parts of runtime library are needed and remove unnecessary parts (Fixes #15 with 92a1fbb). May or may not have pushed Prism output to be the smallest amongst other frameworks.
• Uses WeakMap rather than assigning to existing class instance
• Change how filesystem is accessed to provide support for web
• Bundled files are now compiled into src/bundled-files.ts at source build time
• Renamed some internals
• Supports node 10

1.1.0

Lots of small fixes and improvements:

- Added enum types (through #1, #2, #3, #4)

Enums can now be used in components. There is not a lot of use for JS applications but for TS on the server it may have some uses. Includes transpiling enums to JS and the type resolver recognising the construct. Note that the enums must be declared in a components or in a script in assets as imports and not bundled

<template>
    <h1>Vehicle:</h1>
    <p>{vehicleType}</p>
    <button @click="isVehicleHelicopter">Is vehicle helicopter?</button>
</template>

<script>
    export enum VehicleTypes {
        Car = "car", 
        Truck = "truck", 
        Helicopter = "helicopter"
    }

    class VehicleComponent extends Component<{vehicleType: VehicleTypes}> {
        isVehicleHelicopter() {
            if (this.data.vehicleType === VehicleTypes.Helicopter) {
                alert("Vehicle is helicopter");
            }
        }
    }
</script>

- Added ability for pages to match on multiple URLs during client side routing (#5)

So a page can be severed up under by multiple URLs during client side rendering. e.g. @Page("/url1", "/url2/x"). This allows more flexibility without parameters.

- #for, text nodes and $data are now node null safe:

<template>
    <div #if="someBool">
        <ul #for="const x of someArr"></ul>
        <ComponentOne $data="someObj"></ComponentOne>
        <p>
            {someTxt}
        </p>
    </div>
</template>

Previously these constructs were throwing during updates while they weren't rendered.

- @NoSSRData decorator

Currently experimental decorator which removes the data parameter from the component server render function in favour of default data (@Default({})). Good for if entire page data is dependant on runtime and does need parts to be server side rendered. Currently using as workaround for #13

Other fixes:

• Fixed /p/someX/someY matching on /p/:param1 fa92d11
• Output shell for service worker 4aff4a9
• Comment fragment whitespace issues 7ef5a1c
• Scripts in asset path (and not in bundled folder scripts / styles) are now interpreted and minified according to global settings (service workers) 4aff4a9
• PrefixIncrement ++x and PrefixDecrement --x now render b958035
• Trailing comments in interfaces throw during parsing 9f76e8b

1.0.2

Prism 1.0.2

Initial release after private experimentation. Early release for demonstration of concept. Not for use in production

Install globally with:

npm install -g @kaleidawave/[email protected]

demo: https://github.com/kaleidawave/prism-ssr-demo