Merge branch 'fix/HMR' into Ogone/1.0.0

.gitignore

@@ -1,5 +1,5 @@
 .deno_plugins/
-dist/
 .github/
 null/
-.susano/
+.susano/
+.ogone/

README.md

@@ -72,14 +72,43 @@ import component StoreMenu from '@/examples/app/stores/StoreMenu.o3';
  *   this component will open the menu in the application
 */
 <template>
+  <style>
+    @const shadowColor = #00000045;
+    @const lineBackground = #848181;
+    .container {
+      padding: 9px;
+      width: 28px;
+      height: auto;
+      background: var(--o-header);
+      display: flex;
+      flex-direction: column;
+      filter: drop-shadow(0px 0px 0px $shadowColor);
+      &:hover {
+        filter: drop-shadow(0px 5px 3px $shadowColor);
+      }
+      &:hover .line {
+        background: var(--o-primary);
+      }
+      .line {
+        background: $lineBackground;
+        margin-top: 2px;
+        margin-bottom: 2px;
+        height: 4px;
+      }
+      .line, & {
+        border-radius: 5px;
+        transition: filter 0.2s ease;
+        cursor: pointer;
+      }
+    }
+  </style>
   <StoreMenu namespace="menu" />
   <div class="container" --click:openMenu>
     <div class="line"></div>
     <div class="line"></div>
     <div class="line"></div>
   </div>
 </template>
-
 <proto>
   declare:
     public isOpen: boolean = false;
@@ -92,37 +121,6 @@ import component StoreMenu from '@/examples/app/stores/StoreMenu.o3';
     break;
 </proto>
 
-<style>
-  @const shadowColor = #00000045;
-  @const lineBackground = #848181;
-  .container {
-    padding: 9px;
-    width: 28px;
-    height: auto;
-    background: var(--o-header);
-    display: flex;
-    flex-direction: column;
-    filter: drop-shadow(0px 0px 0px $shadowColor);
-    &:hover {
-      filter: drop-shadow(0px 5px 3px $shadowColor);
-    }
-    &:hover .line {
-      background: var(--o-primary);
-    }
-    .line {
-      background: $lineBackground;
-      margin-top: 2px;
-      margin-bottom: 2px;
-      height: 4px;
-    }
-    .line, & {
-      border-radius: 5px;
-      transition: filter 0.2s ease;
-      cursor: pointer;
-    }
-  }
-</style>
-
 ```
 ---
 

cli/ogone.ts

@@ -10,8 +10,21 @@ export class OgoneCLI extends Utils {
     switch (command) {
       case Commands.CREATE:
         break;
-      case Commands.BUILD:
-        break;
+      case Commands.BUILD: {
+        const [, entrypoint, build] = Deno.args;
+        o3.run({
+          entrypoint,
+          build,
+        });
+      }
+      case Commands.DEPLOY: {
+        const [, entrypoint, build] = Deno.args;
+        o3.run({
+          entrypoint,
+          build,
+          deploySPA: true,
+        });
+      }
       case Commands.LINT:
         break;
       case Commands.FMT:

deps/deps.ts

@@ -4,15 +4,9 @@ export * as colors from "https://deno.land/std@0.61.0/fmt/colors.ts";
 export {
   join,
   relative,
+  normalize,
 } from "https://deno.land/std@0.61.0/path/mod.ts";
 export { Server } from "https://deno.land/std@0.61.0/http/server.ts";
-/*
-// TODO fix HMR
-export {
-  WebSocket,
-  WebSocketServer,
-} from "https://deno.land/x/websocket@v0.0.3/mod.ts";
-*/
 export {
   assertEquals,
   assertThrows,

deps/fs.ts

@@ -0,0 +1 @@
+export * from "https://deno.land/std@0.91.0/fs/copy.ts"

deps/ws-fork.ts

@@ -0,0 +1,10 @@
+export { EventEmitter } from "https://deno.land/std@0.88.0/node/events.ts";
+export { serve, Server } from "https://deno.land/std@0.88.0/http/server.ts";
+export {
+  acceptWebSocket,
+  isWebSocketCloseEvent,
+  isWebSocketPingEvent,
+  isWebSocketPongEvent,
+} from "https://deno.land/std@0.88.0/ws/mod.ts";
+
+export type { WebSocket } from "https://deno.land/std@0.88.0/ws/mod.ts";

deps/ws.ts

@@ -0,0 +1,4 @@
+export {
+  WebSocketServer,
+} from "https://deno.land/x/websocket@v0.1.0/mod.ts";
+export type { WebSocketAcceptedClient } from "https://deno.land/x/websocket@v0.1.0/mod.ts";

docs/async.README.md

@@ -46,13 +46,11 @@ or any event:
 
 we can also wait for a component to resolve all it's internal promises:
 ```typescript
-// async-parent-component.o3
-// Ogone use this component as 'async-component'
-use @/path/to/async-component.o3 as 'async-component';
+import component AsyncComponent from '@/path/to/AsyncComponent.o3';
 
 <proto type="async"/>
 <template>
-  <async-component --await />
+  <AsyncComponent --await />
 </template>
 ```
 ![ogone](https://raw.githubusercontent.com/SRNV/Ogone/master/docs/assets/async.3.jpg)
@@ -65,16 +63,15 @@ Waiting for the resolution of the Async Component.
 Then is a mixed flag/case, it means that it requires the name of case that you will use after the resolution of the component.
 Use `--then` like in JS:
 ```typescript
-// Ogone use this component as 'async-component'
-use @/path/to/async-component.o3 as 'async-component';
+import component AsyncComponent from '@/path/to/AsyncComponent.o3';
 
 <proto type="async">
   case 'then:caseName':
     console.log('promise resolved', ctx);
   break;
 </proto>
 <template>
-  <async-component --await --then:caseName/>
+  <AsyncComponent --await --then:caseName/>
 </template>
 ```
 ![ogone](https://raw.githubusercontent.com/SRNV/Ogone/master/docs/assets/async.4.jpg)
@@ -88,16 +85,15 @@ Any error inside an Async Component.
 catch is a mixed flag/case, it means that it requires the name of case that you will use after an error in Async Component.
 Use `--catch` like in JS:
 ```typescript
-// Ogone use this component as 'async-component'
-use @/path/to/async-component.o3 as 'async-component';
+import component AsyncComponent from '@/path/to/AsyncComponent.o3';
 
 <proto type="async">
   case 'catch:caseName':
     console.log('promise error caught', ctx);
   break;
 </proto>
 <template>
-  <async-component --await --catch:caseName/>
+  <AsyncComponent --await --catch:caseName/>
 </template>
 ```
 ________
@@ -110,16 +106,15 @@ internal promises all fulfilled successfully or rejected.
 finally is a mixed flag/case, it means that it requires the name of case that you will use after resolution/error in Async Component.
 Use `--finally` like in JS:
 ```typescript
-// Ogone use this component as 'async-component'
-use @/path/to/async-component.o3 as 'async-component';
+import component AsyncComponent from '@/path/to/AsyncComponent.o3';
 
 <proto type="async">
   case 'finally:caseName':
     console.log('promise fulfilled', ctx);
   break;
 </proto>
 <template>
-  <async-component --await --finally:caseName/>
+  <AsyncComponent --await --finally:caseName/>
 </template>
 ```
 ________
@@ -132,8 +127,7 @@ Inserts a promise or anything into an Async Component.
 the Async Component will includes this promise in it's own promise group.
 
 ```typescript
-// Ogone use this component as 'async-component'
-use @/path/to/async-component.o3 as 'async-component';
+import component AsyncComponent from '@/path/to/AsyncComponent.o3';
 
 <proto type="async">
   def:
@@ -147,7 +141,7 @@ use @/path/to/async-component.o3 as 'async-component';
   })
 </proto>
 <template>
-  <async-component --await --defer="promise"/>
+  <AsyncComponent --await --defer="promise"/>
 </template>
 ```
 ________

docs/before-each.README.md

@@ -35,7 +35,7 @@ case 'update:y':
 ## faking computed data
 
 ```typescript
-<template>${position}</template>
+<template>${this.position}</template>
 <proto>
     def:
         x: 0
@@ -61,7 +61,7 @@ Reflections are custom features only supported by Ogone
 these are available in the compute modifier
 
 ```typescript
-<template>${position}</template>
+<template>${this.position}</template>
 <proto>
     def:
         x: 0

docs/examples.md

@@ -72,16 +72,16 @@ import component StoreComponent from "@/examples/tests/async/reloading/store.o3"
     }, 1000);
   break;
 </proto>
-<template>Hello ${fullname}</template>
+<template>Hello ${this.fullname}</template>
 ```
 
 more on reflected datas
 
 ```typescript
 <template>
-  ${position.name} ${position.origin}
-  <p --for="item of position.test">
-    ${item}
+  ${this.position.name} ${this.position.origin}
+  <p --for={item of this.position.test}>
+    ${this.item}
   </p>
 </template>
 <proto>

docs/introduction.md

@@ -29,7 +29,7 @@ let's change the name after 1 second.
     }, 1000);
   break;
 </proto>
-<template>Hello ${name}</template>
+<template>Hello ${this.name}</template>
 ```
 
 this will only update the textnode containing 'Hello \${name}' and replace name by it's value.
@@ -76,6 +76,7 @@ Following this structure of declarations is strongly recommanded:
 - before-each\*
 - case
 - default
+- compute
 
 \*only supported by Ogone
 

egg.yml

@@ -1,25 +1,21 @@
 name: Ogone
-repository: https://github.com/SRNV/Ogone
-version: 0.28.0
-description: >-
-  Web-Components compiler to create front-end modern Apps (SPA, PWA)
-stable: true
+repository: 'https://github.com/SRNV/Ogone'
+version: 0.28.10
+description: Advanced Web Composition for Future
+stable: false
 files:
+  - ./cli/**/*
   - ./docs/**/*
-  - ./classes/**/*
-  - ./enums/**/*
-  - ./workers/**/*
+  - ./deps/**/*
   - ./examples/**/*
-  - ./lib/**/*
-  - ./public/**/*
   - ./src/**/*
   - ./tests/**/*
-  - ./types/**/*
   - ./utils/**/*
-  - ./externals/**/*
-  - .d.ts
-  - deps.ts
   - mod.ts
   - README.md
-  - tsconfig.json
-  - yaml-config.ts
+  - LICENSE
+check: false
+entry: ./mod.ts
+homepage: 'https://github.com/SRNV/Ogone'
+ignore: []
+unlisted: false