Skip to content
This repository has been archived by the owner on Oct 4, 2021. It is now read-only.

Releases: SRNV/Ogone

0.29.0: Ogone build and deploy

06 Apr 15:39
Compare
Choose a tag to compare

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/ogone@0.29.0/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/ogone@0.29.0
Nest/x: https://nest.land/package/Ogone
Discord: https://discord.gg/gCnGzh2wMc

Ogone 0.28.9: fix issues

08 Feb 11:33
Compare
Choose a tag to compare

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/ogone@0.28.9/cli/ogone.ts

0.28.0

06 Feb 21:06
Compare
Choose a tag to compare

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/ogone@0.28.8/cli/ogone.ts
    
        deno install -Afq --unstable https://x.nest.land/Ogone@0.28.8/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

0.26.0 Itachi

27 Nov 18:16
Compare
Choose a tag to compare

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 removing Deno-Sass and Denolus from dependencies

15 Aug 12:24
Compare
Choose a tag to compare

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

Major updates in 0.20.0

10 Aug 16:26
Compare
Choose a tag to compare

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)
    Screenshot from 2020-08-10 18-16-29

  • (wip): add --keyframes flag on style element, to get animations (see it)
    Screenshot from 2020-08-10 18-15-01

  • Components will now only accept tree nodes at the top-level (proto, template, style)
    use template to insert elements.
    Screenshot from 2020-08-10 18-20-47

  • require syntax has changed and is now evaluated in the compiler-time
    new syntax: require <props> as (types);
    Screenshot from 2020-08-10 18-08-03

  • 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