Ogone Versions Save

Advanced Web Composition for Future

0.29.0

3 years ago

ogone-svg-svg (1)-svg (1)

Ogone 0.29.0

I'm glad to announce Ogone 0.29.0, this version will open the world to Ogone because it includes some interesting features and a required HMR system, please note this:

Build and Deploy commands with the cli
re-integration of the built-in HMR
integration of the HSE
Fix of the CSS pre-processor
and some breaking changes

Installation

deno install -Afq --unstable https://deno.land/x/[email protected]/cli/ogone.ts

Features

Time to Build

Ogone will now let you build your application with the new command ogone build basically the usage is ogone build <path to component> <path to dist folder>

Ogone will build the application and copy all the assets into a static folder. you can also import TS/JS modules inside your component using the following syntax:

Screenshot from 2021-04-06 17-30-15

the dist folder will follow this architecture

- dist/
      - app.js
      - index.html
      - style.css
      - static/
            - ...

CSS and JS files are minified by default.

Time to Deploy

Deno Company has recently exposed a new way to deploy Deno application, this a new opportunity for Ogone to deploy front-end applications to the world. same usage for the deploy command: ogone deploy <path to component> <path to dist>

Ogone will add a deploy.ts file (deploy file) which will match with the Cloud flare worker's pattern used by Deno Deploy. After this, just provide to Deno Deploy the url to the deploy file: http://.../<path to dist>/deploy.ts

you can use the command deploy into a Github Action on each new releases, for example.

HMR is coming back to Ogone

A long refacto has been made to re-integrate the HMR system of Ogone. note that it's not hot reloading but hot module replacement. All modifications will update your application and keep it sync with your mind. For this built-in HMR system, only one source of code is used, running on Deno and browser

HSE (Visual Studio Code Webview)

Hot Scoped Edition, the idea is to expose the component you're working on, not all the application, just the component. This is curently only available into VS Code. please use the latest version of Otone

Usage:

click on the new button in the activity bar, this will show the panel with the button Start HSE session. Click on this button, it will open the webview and wait for your editions.

Screenshot from 2021-04-06 17-09-21

Breaking changes

Base URL required for assets

You will now have to specify the base url to assets like following into your root component (which is an App Component):

<proto type="app" base="./path/to/assets">
...
</proto>

this folder will copy all the files into the asset. This is required for module resolution also and asset resolution.

Style Element on top is no more supported

Ogone will no more support the pattern template - proto - style but only template - proto as top level elements. indeed, the Style element is now strictly related to the Template element.

To style your component, like when you're styling a Web-component, the style element will have to be the first element into your Template element. This is to follow the current pattern of the Web-components.

NB

keep expecting breaking changes.

Ressources

Deno/x: https://deno.land/x/[email protected] Nest/x: https://nest.land/package/Ogone Discord: https://discord.gg/gCnGzh2wMc

0.28.9

3 years ago

ogone-svg-svg (1)-svg

0.28.0 was unusable because of an issue with an URL. please consider using 0.28.9 instead which is the more stable and relevant version of Ogone

installation deno install -Afq --unstable https://deno.land/x/[email protected]/cli/ogone.ts

0.28.0

3 years ago

Ogone 0.28.0

ogone-svg-svg (1)-svg

Breaking changes

Type 'App' required for the root component

BREAKING: introduction of the new type 'app', the root component (the first component of your application) will now have to be a App Component.

this allows a better configuration of your application

by adding a head element for example.

example:
```
    <template>

      <head>

          // SEO

      </head>

    // anything you want

    </template>

    <proto type="app">

    </proto>
```

Getting far away from Vue's template style

BREAKING: Ogone is changing it's style, we will now use curly braces for props and flags, instead of quotes:

basically this means instead of typing this:
```
  :item="this.item"
```
you will now have to type this:
```
  item={this.item}
```
same thing for the flags:
```
 --for="item of this.array"
```
you will now have to type this:
```
  --for={item of this.array}
```
dynamic transformation can be done with your IDE using the following regexp:
```
  /(?<=\s)(:|-{2})(.+?)((=)(["'`])(.*?)(\5))/
```
replacing the result by:
```
  $2$4{$6}
```

Inherit Statement for props

BREAKING: the require syntax for props is no more supported, use instead the inherit statement like following:


require prop as string; // no more supported

<proto>

    declare:

      public inherit prop: string = "";

    // or with def

    def:

      inherit prop: ""

</proto>

Additional Features

Ogone CLI

feat: Ogone CLI is landed

start using it by the following command:


    deno install -Afq --unstable https://deno.land/x/[email protected]/cli/ogone.ts

    deno install -Afq --unstable https://x.nest.land/[email protected]/cli/ogone.ts

you can now run your application like following:


ogone run <path_to_component>

more has to be done...

Spread Flag

feat: using curly braces on components allows us to spread any object.

this is the same as adding the spread flag (--spread)

example:
```
    <MyComponent {...this.property} />

    or

    <MyComponent --spread={...this.property} />
```
duplicate is not allowed

Configurable Reactions

feat: Ogone will now let you choose the type of reaction you want by setting the (engine) attribute to your proto element

example:


    <proto engine="inline-reaction" /> // will change your script by adding a function after all assignment.

    // [optional] is set by default if the def modifier is used.

    <proto engine="proxy-reaction" /> // will tell to Ogone to use a proxy.

    // [optional] is set by default if the declare modifier is used.

Web-Component re-cycle

feat: start tuning your webcomponents with Ogone, by using the attribute (is) on the template element.

example:
```
    <template is="my-awesome-webcomponent" />
```
you can also set the attribute (engine) to your proto element and add the argument (sync-template)

this will tell to Ogone to update the webcomponent's data when the component is updated.

example:
```
    <template is="my-awesome-webcomponent" />

    <proto engine="sync-template proxy-reaction">

    // ...

    </proto>
```
if your custom element is an extension of an element, please consider using arguments like following,

where element is the tag you want:
```
    <template is="my-custom-element:element" />

    <proto engine="sync-template proxy-reaction">

    // ...

    </proto>
```
by default Ogone uses the method (attributeChangedCallback) when any property is updated.

your webcomponent can also expose the following methods as callback: - beforeUpdate - beforeDestroy

Component Encapsulation

feat: [private|protected] You can now encapsulate the component's template by setting the attribute (private or protected)

this will secure your component from any external DOM manipulation. it's useful to prevent all malicious iframe for example.

example:


<template private>

    <span id="unreachable"> unreachable span </span>

    <span ref="reachable"> reachable via the reference </span>

    <iframe src="..." />

</template>

<proto type="app">

    default:
      document.getElementById('unreachable'); // null
      const [span] = Refs.reachable;
      break;

</proto>

using the attribute (protected) will expose the template to any DOM Manipulation

all external css rules will have no more effect, on the component.

Style your private component by adding the style element into the template. it has to be the very first one element.

example:


<template protected>

    <style>

    .container {

        margin-top: 25%;

        margin-bottom: 25%;

        .logo {

            height: 56%;

        }

    }

    </style>

    <div class="container">

      <img class="logo" src="/src/public/ogone.svg" />

    </div>

</template>

Internal Improvements

chore: Ogone will start using workers, the first one is set for the local server.
chore: specifying the port on configurtion is no more required. default is 8080
chore: support for Deno 1.7.0+

a new strategy has been implemented. this one improves the performances of the type checking step

like 10 seconds of type checking against 1 second

basically in the past we were type checking each components one by one, now we will type check all components all together

Known issues

TODOs

import modules into the component
revert HMR
CLI build function
WebGL 1/2 support (thinking about THREE or BABYLON too)

0.26.0

3 years ago

New Project (4)

Releasing Ogone 0.26.0 called "Itachi"

which is a big internal refactor that started like 2-3 months ago, with a better typescript support, more robustness, and the introduction of modifiers. This refactor was required to make Ogone more readable and more maintainable

Changes

tsx transpilation allowing a better props type-checking
the component is no more destructured in dynamic attributes/props/flags, this means instead of this <input --bind="property" /> you will need to write <input --bind="this.property" />, same for all flags and props.
simpler and more robust regExp system, using the functions read | getDeepTranslation.
removing too huge and large files, started to get unmaintainable.
def | default | case xxx | before-each are now considered as modifiers
- all modifiers are based on there indentations
- the components using the declare modifier will be transpiled to tsx and type checked
  - these will use Proxies for the reactivity
- using def and declare is no more allowed
- the before-each modifier will no more support the reflection syntax, instead use the compute modifier:

<proto>
  declare:
    public reflect() {
      return 'this is a reflection updated every there\'s a change';
    }
  compute:
     this.a => this.reflect()
</proto>

Obvious is now renamed Style

Additional Features

the compute modifier
add methods to the component, with the declare modifier
the --for flag is now following this syntax: --for="item of array" | --for="(item, index) of array", you can now destructure the item element doing something like this:

<template>
  <div --for="{ name, id } of this.users">${id} Hello ${name}</div>
</template>
<proto>
  declare:
     public users: { name: string, id: number }[] = [...]
</proto>

0.21.0

3 years ago

Decided to remove Denolus and Deno-sass from dependencies.

why

not maintained and generate many issues in Ogone. Many of you may have experimented some issues when trying to run the examples in this repository:

Screenshot from 2020-08-15 13-33-49

Screenshot from 2020-08-15 12-57-21

these shouldn't appear again.

and now what ?

I'm planning to incorporate a custom css parser (Ogone's postcss) to get more free from dependencies check the issue here

0.20.0

3 years ago

0.20.0 Updates

This release implements some major updates into Ogone.

Performances

Ogone's example app has now ~150ms of scripting.

Features:

Component's properties are now type checked and will emit ts errors.
add --event:animationend: and --event:animationstart flags to handle CSS Animations (see it)
(wip): add --keyframes flag on style element, to get animations (see it)
Components will now only accept tree nodes at the top-level (proto, template, style) use template to insert elements.
require syntax has changed and is now evaluated in the compiler-time new syntax: require <props> as (types);
simplify router logic, router components now use section element and wrap the component rendered.

Fixes:

--for flag on async components
use .slice().reverse() on server-side instead of only .reverse(): fixing undefined contexts, absent textnodes

Plans:

(wip) Ogone CLI
WebGL 1/2 supports
start custom CSS preprocessor
recycle web-components feature