Releases: SRNV/Ogone
0.29.0: Ogone build and deploy
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:
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.
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
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
Ogone 0.28.0
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.tsyou 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
- Style is sometimes broken, a refacto is planned, for scalability and more maintainability.
- Otone's webview is post-poned
TODOs
- import modules into the component
- revert HMR
- CLI build function
- WebGL 1/2 support (thinking about THREE or BABYLON too)
0.26.0 Itachi
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
componentis 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-eachare now considered as modifiers- all modifiers are based on there indentations
- the components using the
declaremodifier will be transpiled to tsx and type checked- these will use Proxies for the reactivity
- using
defanddeclareis no more allowed - the
before-eachmodifier 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
declaremodifier - the
--forflag 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
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:
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
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:animationstartflags to handle CSS Animations (see it)
-
(wip): add
--keyframesflag 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
sectionelement and wrap the component rendered.
Fixes:
--forflag 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