Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/muhammad-salem/aurora
Aurora, is a web framework, that can create and define a Web Component standards ('custom elements', 'Shadow DOM' and 'HTML Templates'), that compatible with other frameworks, using Typescript. API: https://muhammad-salem.github.io/aurora-docs
https://github.com/muhammad-salem/aurora
ast aurora components directives html javascript pipes-and-filters typescript webcomponents
Last synced: about 1 month ago
JSON representation
Aurora, is a web framework, that can create and define a Web Component standards ('custom elements', 'Shadow DOM' and 'HTML Templates'), that compatible with other frameworks, using Typescript. API: https://muhammad-salem.github.io/aurora-docs
- Host: GitHub
- URL: https://github.com/muhammad-salem/aurora
- Owner: muhammad-salem
- License: mit
- Created: 2023-04-15T08:08:34.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2024-10-09T18:01:13.000Z (about 1 month ago)
- Last Synced: 2024-10-10T06:31:34.009Z (about 1 month ago)
- Topics: ast, aurora, components, directives, html, javascript, pipes-and-filters, typescript, webcomponents
- Language: TypeScript
- Homepage: https://muhammad-salem.github.io/aurora-demo/
- Size: 2.29 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Aurora
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![LICENSE][license-img]][license-url]
[![lerna][lerna-img]][lerna-url]
![GitHub contributors][contributors]
[![Build Aurora + Example][actions-image]][actions-url]
[npm-image]: https://img.shields.io/npm/v/@ibyar/aurora.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url]: https://npmjs.org/package/@ibyar/aurora
[downloads-image]: https://img.shields.io/npm/dt/@ibyar/aurora
[downloads-url]: https://npmjs.org/package/@ibyar/aurora
[license-img]: https://img.shields.io/github/license/ibyar/aurora
[license-url]: https://github.com/ibyar/aurora/blob/master/LICENSE
[lerna-img]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
[lerna-url]: https://lerna.js.org/
[contributors]: https://img.shields.io/github/contributors/ibyar/aurora
[actions-image]: https://github.com/ibyar/aurora/actions/workflows/build-aurora.yml/badge.svg
[actions-url]: https://github.com/ibyar/aurora/actions/workflows/build-aurora.yml
[npm-image-pipes]: https://img.shields.io/npm/v/@ibyar/pipes.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-pipes]: https://npmjs.org/package/@ibyar/pipes
[npm-image-directives]: https://img.shields.io/npm/v/@ibyar/directives.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-directives]: https://npmjs.org/package/@ibyar/directives
[npm-image-core]: https://img.shields.io/npm/v/@ibyar/core.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-core]: https://npmjs.org/package/@ibyar/core
[npm-image-expressions]: https://img.shields.io/npm/v/@ibyar/expressions.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-expressions]: https://npmjs.org/package/@ibyar/expressions
[npm-image-elements]: https://img.shields.io/npm/v/@ibyar/elements.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-elements]: https://npmjs.org/package/@ibyar/elements
[npm-image-platform]: https://img.shields.io/npm/v/@ibyar/platform.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-platform]: https://npmjs.org/package/@ibyar/platform
[npm-image-cli]: https://img.shields.io/npm/v/@ibyar/cli.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-cli]: https://npmjs.org/package/@ibyar/cli
[npm-image-decorators]: https://img.shields.io/npm/v/@ibyar/decorators.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-decorators]: https://npmjs.org/package/@ibyar/decorators
[npm-image-tslib]: https://img.shields.io/npm/v/tslib.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen
[npm-url-tslib]: https://npmjs.org/package/tslib
[directory]: https://raw.githubusercontent.com/microsoft/vscode-icons/master/icons/light/folder-active.svg
[package]: https://raw.githubusercontent.com/microsoft/vscode-icons/master/icons/light/symbol-field.svg
[package-aurora]: https://github.com/ibyar/aurora/tree/dev/packages/aurora
[source-aurora]: https://github.com/ibyar/aurora/tree/dev/src/aurora
[package-pipes]: https://github.com/ibyar/aurora/tree/dev/packages/pipes
[source-pipes]: https://github.com/ibyar/aurora/tree/dev/src/pipes
[package-directives]: https://github.com/ibyar/aurora/tree/dev/packages/directives
[source-directives]: https://github.com/ibyar/aurora/tree/dev/src/directives
[package-core]: https://github.com/ibyar/aurora/tree/dev/packages/core
[source-core]: https://github.com/ibyar/aurora/tree/dev/src/core
[package-expressions]: https://github.com/ibyar/aurora/tree/dev/packages/expressions
[source-expressions]: https://github.com/ibyar/aurora/tree/dev/src/expressions
[package-elements]: https://github.com/ibyar/aurora/tree/dev/packages/elements
[source-elements]: https://github.com/ibyar/aurora/tree/dev/src/elements
[package-platform]: https://github.com/ibyar/aurora/tree/dev/packages/platform
[source-platform]: https://github.com/ibyar/aurora/tree/dev/src/platform
[package-cli]: https://github.com/ibyar/aurora/tree/dev/packages/cli
[source-cli]: https://github.com/ibyar/aurora/tree/dev/src/cli
[package-decorators]: https://github.com/ibyar/aurora/tree/dev/packages/decorators
[source-decorators]: https://github.com/ibyar/aurora/tree/dev/src/decorators
[tslib]: https://github.com/Microsoft/tslib
Ibyar Aurora, is a web framework, that can create and define a Web Component standards ('custom elements', 'Shadow DOM' and 'HTML Templates'), that compatible with other frameworks, using Typescript.
This framework build with-in a embedded JavaScript Engine [@ibyar/expressions](https://npmjs.org/package/@ibyar/expressions) to execute Template syntax and attributes binding.
- Demo: https://muhammad-salem.github.io/aurora-demo
- API Doc: https://muhammad-salem.github.io/aurora-docs
- Ibyar Expression & Elements parser: https://muhammad-salem.github.io/astexplorer
- select: JavaScript: @ibyar/expressions
- select: HTML: @ibyar/elements
- Custom Elements Everywhere for Aurora Test & Results: https://muhammad-salem.github.io/custom-elements-everywhere/libraries/aurora/results/results.html
## `Install`
``` bash
npm i -g @ibyar/cli
npm i --save @ibyar/aurora
```
``` bash
yarn global add @ibyar/cli
yarn add @ibyar/aurora
```
## Dependencies
| README | Description | NPM, PKG, SRC |
| ------ | ----------- | ------------- |
| @ibyar/aurora | a central package to manage dependance only | [![NPM Version][npm-image]][npm-url] [![PKG][package]][package-aurora] [![SRC][directory]][source-aurora] |
| @ibyar/core | create components, render elements
bind attributes and handling events | [![NPM Version][npm-image-core]][npm-url-core] [![PKG][package]][package-core] [![SRC][directory]][source-core] |
| @ibyar/expressions | a JavaScript engine, parser and evaluator
build by the guid of [V8 JavaScript engine](https://github.com/v8/v8).
Introduce a reactive scope concept to
detect changes for scope variables,
subscriptions based on a `wave effect` like concept,
(simple what is subscribed will only be reevaluated again).
Follow [ESTree](https://github.com/estree/estree/) structural to generate an ast object. | [![NPM Version][npm-image-expressions]][npm-url-expressions] [![PKG][package]][package-expressions] [![SRC][directory]][source-expressions] |
| @ibyar/elements | parse `HTML Template`,
has `tag` names, properties for each `tag` | [![NPM Version][npm-image-elements]][npm-url-elements] [![PKG][package]][package-elements] [![SRC][directory]][source-elements] |
| @ibyar/pipes | implement all supported pipes | [![NPM Version][npm-image-pipes]][npm-url-pipes] [![PKG][package]][package-pipes] [![SRC][directory]][source-pipes] |
| @ibyar/directives | implement all supported directives | [![NPM Version][npm-image-directives]][npm-url-directives] [![PKG][package]][package-directives] [![SRC][directory]][source-directives] |
| @ibyar/platform | utility package for and plural stuff, json patch | [![NPM Version][npm-image-platform]][npm-url-platform] [![PKG][package]][package-platform] [![SRC][directory]][source-platform] |
| @ibyar/decorators | ibyar decorators package | [![NPM Version][npm-image-decorators]][npm-url-decorators] [![PKG][package]][package-decorators] [![SRC][directory]][source-decorators] |
| @ibyar/cli | ibyar cli package | [![NPM Version][npm-image-cli]][npm-url-cli] [![PKG][package]][package-cli] [![SRC][directory]][source-cli] |
| tslib | Runtime library for TypeScript helpers. | [![NPM Version][npm-image-tslib]][npm-url-tslib] [![PKG][package]][npm-url-tslib] [![SRC][directory]][tslib]|
## 'HTML Template' Features
| Support | HTML Template|
| -------------------- | - |
| Parsing Attributes | ✓ |
| One Way Data Binding | ✓ |
| Two Way Data Binding | ✓ |
| Event Binding | ✓ |
| Template Parser | ✓ |
| Template Syntax | ✓ |
| Control Flow Syntax | ✓ |
| Variables in templates | ✓ |
| Template Reference Variables | ✓ |
| Template HTML File | fetch or embedded |
| Fragment | ✓ |
| camelCase Property Naming | ✓ |
| lowercase for root element Property Naming | ✓ |
## Library Features
- [x] ES Module
- [x] Dependency Injection
- [x] Component
- [x] Directives (Attribute and Structural Directives)
- [x] Pipes
- [x] Lifecycle
- [x] Signals
- [x] @Input
- [x] @Output
- [x] @View
- [x] @HostListener [Supported by Component and Attribute directive].
- [x] @HostBinding [Supported by Component and Attribute directive].
- [x] @ViewChild
- [ ] @ViewChildren
- [ ] XSS (cross-site-scripting)
## Built-in Directive
#### Structure Directives
- [x] *if
- [x] *for is same as ( *forOf )
- [x] *forIn
- [x] *forAwait
- [x] *switch and (*case, *default)
-- support control flow syntax
-- see `directive syntax` [structural-directive-syntax-reference](https://github.com/ibyar/aurora/blob/dev/packages/directives/README.md#structural-directive-syntax-reference)
#### Attributes Directives
- [x] class [support `Single class binding`, `Multi-class binding`].
- [x] style [support `Single style binding`, `Multi-style binding`]. the `Single style binding with units` not yet supported.
## Built-in Pipes ( Pipeline operator '|>' )
- [x] async
- [x] json
- [x] lowercase
- [x] uppercase
- [x] titlecase
- [x] keyvalue
- [x] slice
- [ ] date
- [ ] currency
- [ ] number
- [ ] percent
- [ ] i18nPlural
- [ ] i18nSelect
## Web Component standards
- [x] [Custom Elements][custom]
- [x] [Shadow DOM][shadow]
- [x] [HTML Templates Element][template]
- [x] [HTML Templates Element with Shadow DOM][template]
## Custom Elements standards
- [x] [Reflecting Properties to Attributes][attr-props]
- [x] [Observing Changes to Attributes][observ-attr]
- [x] [Element Upgrades][elem-upgrd]
- [x] [Styling a Custom Element][style]
- [x] [Extending native HTML elements][extend-native]
- [ ] [Extending a Custom Element][extend-custom]
- [x] [Two Component On Same Model Class][two-component]
- [ ] [Two Component Share Same Model Instance][two-component]
## Shadow DOM standards
- [x] [Open Mode][shadow-mode-open]
- [x] [Closed Mode][shadow-mode-closed]
- [x] [delegatesFocus][shadow-focus]
- [x] [Shadow DOM event model][shadow-event]
## HTML Templates Element standards
- [x] [Load template by ID from document][template-id]
- [x] As Normal Custom Element
- [x] As Shadow DOM Element
[attr-props]: https://developers.google.com/web/fundamentals/web-components/customelements#reflectattr
[observ-attr]: https://developers.google.com/web/fundamentals/web-components/customelements#attrchanges
[elem-upgrd]: https://developers.google.com/web/fundamentals/web-components/customelements#upgrades
[custom]: https://developers.google.com/web/fundamentals/web-components/customelements
[shadow]: https://developers.google.com/web/fundamentals/web-components/customelements#shadowdom
[template]: https://developers.google.com/web/fundamentals/web-components/customelements#fromtemplate
[style]: https://developers.google.com/web/fundamentals/web-components/customelements#styling
[extend-custom]: https://developers.google.com/web/fundamentals/web-components/customelements#extendcustomeel
[extend-native]: https://developers.google.com/web/fundamentals/web-components/customelements#extendhtml
[shadow-mode-open]:https://developers.google.com/web/fundamentals/web-components/shadowdom#elements
[shadow-mode-closed]: https://developers.google.com/web/fundamentals/web-components/shadowdom#closed
[shadow-focus]: https://developers.google.com/web/fundamentals/web-components/shadowdom#focus
[shadow-event]: https://developers.google.com/web/fundamentals/web-components/shadowdom#events
[template-id]: https://developers.google.com/web/fundamentals/web-components/customelements#fromtemplate
[two-component]:https://github.com/salemebo/aurora-ts/blob/master/test/multi-component/m-person.tsx
#### how to bundle your package before publish
```bash
# run ibyar cli to pre-build your template and view types.
ibyar --build
#or
ibyar --build --watch
```
### How to use:
### `HTML -- template parser example`
in a polyfills.ts file
- use `aurora` zone for detect changes
```ts
import 'zone.js';
import { bootstrapZone } from '@ibyar/aurora';
bootstrapZone('aurora');
```
- or use `manual` Zone, if you don't like to use `Zone.js`
all the events like `rxjs` observables, setTimeout and fetch, etc..
can't be detected.
```ts
import { bootstrapZone } from '@ibyar/aurora';
bootstrapZone('manual');
```
- or use `proxy` Zone, if you don't like to use `Zone.js`
but still like to have full change detection for your application.
it my be hard in debugging your application.
```ts
import { bootstrapZone } from '@ibyar/aurora';
bootstrapZone('proxy');
```
- you still can control the zone peer component while define your component by add
`zone` t one of the zone types 'aurora', 'manual' and 'proxy'.
if `aurora` is selected, you need to import the `Zone.js` package.
- the `zone` property in the `@Component({zone: 'manual'})` is optional
and will get the default value from `bootstrapZone()`
```ts
import { Component, HostListener, isModel, OnDestroy, OnInit } from '@ibyar/aurora';
import { interval, Subscription } from 'rxjs';
@Component({
selector: 'pipe-app',
zone: 'AURORA',
template: `
.bs-color{color: var({{currentColor}});}
@for(let color of colors; let i = index, isOdd = odd) {
isOdd :{{ isOdd? 'odd': 'even'}}
color: {{color}}
}
@let name = user.name;
@let name = user.name, age = user.age;
@let greeting = 'Hello, ' + name;
@let data = data$ | async;
@let pi = 3.1459;
@let coordinates = {x: 50, y: 100};
@let longExpression = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit ' +
'sed do eiusmod tempor incididunt ut labore et dolore magna ' +
'Ut enim ad minim veniam...';
color: {{color}} Current Color ='{{currentColor}}'
pipe
expression
view
async
observable |> async
{{observable |> async}}
*
text
{{text}}
lowercase
text |> lowercase
{{text |> lowercase}}
titlecase
text |> titlecase
{{text |> titlecase}}
uppercase
text |> uppercase
{{text |> uppercase}}
json
obj |> json
{{obj |> json}}
json pre element
obj |> json:undefined:2
{{obj |> json:undefined:2}}
keyvalue
keyValueObject |> keyvalue
{{keyValueObject |> keyvalue |> json}}
keyvalue
keyValueObject |> keyvalue
{{keyValueObject |> keyvalue |> json}}
keyvalue
keyValueMap |> keyvalue
{{keyValueMap |> keyvalue |> json}}
slice
array |> slice:1:3
{{array |> slice:1:3}}
slice
slice(array, 1, 3)
{{slice(array, 1, 3)}}
call windows method directly
3345.54645 |> Math.trunc
{{3345.54645 |> Math.trunc}}
`
})
export class PipeAppComponent implements OnInit, OnDestroy {
text = 'Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups';
obj = {
a: [1, 2, 3],
b: 'property b',
c: {
d: [],
e: 4,
f: [{ 5: 'g' }]
}
};
keyValueObject = {
1: 100,
a: 'A00'
};
keyValueArray = [200, 300];
keyValueMap = new Map([[1, 400], [2, 500], [3, 'B200']]);
observable = interval(1000);
array = ['a', 'b', 'c', 'd'];
colors = [
'--bs-blue',
'--bs-indigo',
'--bs-purple',
'--bs-pink',
'--bs-red',
'--bs-orange',
'--bs-yellow',
'--bs-green',
'--bs-teal',
'--bs-cyan',
'--bs-white',
'--bs-gray',
'--bs-gray-dark'
];
currentColor = this.colors[0];
subscription: Subscription;
onInit() {
let index = 0;
this.subscription = this.observable.subscribe(() => {
if (index === this.colors.length) {
index = 0;
}
this.currentColor = this.colors[index++];
if (isModel(this)) {
this.emitChangeModel('currentColor');
}
console.log(this.currentColor);
});
}
@HostListener('currentColor')
onCurrentColorChange() {
console.log(this.currentColor);
}
onDestroy() {
this.subscription.unsubscribe();
}
}
```
in index.html add:
```html
```
#### how to build
```bash
git clone https://github.com/ibyar/aurora.git
cd aurora
yarn install
yarn build
```
## For NPM 7(workshop support):
```bash
git clone https://github.com/ibyar/aurora.git
cd aurora
npm install
npm run build
```
see test app for full [`example`](https://github.com/ibyar/aurora/tree/dev/example)
## Integration with `Webpack`
### add @ibyar/cli as loader
```js
module.exports = {
entry: './src/index.ts',
module: {
exprContextCritical: false,
rules: [
{
test: /\.tsx?$/,
use: ['@ibyar/cli',],
exclude: /node_modules/,
}
]
}
};
```
### use `ts-loader`
```js
// 1. import default from the plugin module
import {
beforeCompileDirectiveOptions, beforeCompileComponentOptions,
afterDeclarationsCompileComponentOptions,
afterDeclarationsCompileDirectiveOptions,
scanDirectivesOnceAsTransformer,
} from '@ibyar/cli';
// 3. add getCustomTransformer method to the loader config
var config = {
...
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'ts-loader',
options: {
... // other loader's options
getCustomTransformers: () => ({
before: [
scanDirectivesOnceAsTransformer(),
beforeCompileDirectiveOptions,
beforeCompileComponentOptions,
],
after: [],
afterDeclarations: [
afterDeclarationsCompileComponentOptions,
afterDeclarationsCompileDirectiveOptions,
],
})
}
}
]
}
...
};
```
## Integration with `Rollup`
```js
import typescript from '@rollup/plugin-typescript';
import {
beforeCompileDirectiveOptions, beforeCompileComponentOptions,
afterDeclarationsCompileComponentOptions,
afterDeclarationsCompileDirectiveOptions,
scanDirectivesOnceAsTransformer,
} from '@ibyar/cli';
export default = {
...,
plugins: [
typescript({
transformers: {
before: [
{ type: 'program', factory: scanDirectivesOnceAsTransformer() },
{ type: 'program', factory: beforeCompileDirectiveOptions },
{ type: 'program', factory: beforeCompileComponentOptions },
],
after: [],
afterDeclarations: [
{ type: 'program', factory: afterDeclarationsCompileComponentOptions },
{ type: 'program', factory: afterDeclarationsCompileDirectiveOptions },
],
}
}),
],
};
```
see test app for full [`webpack`](https://github.com/ibyar/aurora-demo/tree/main/bundles/webpack)
see test app for full [`rollup`](https://github.com/ibyar/aurora-demo/tree/main/bundles/rollup)