feat(core): packages non related to rhtml but instead core packages w…

…hich can be used to create another frameworks

.eslintignore

@@ -0,0 +1,6 @@
+dist
+*.d.ts
+module
+
+*.js
+*.map.js

.github/pull_request_template.md

@@ -0,0 +1,22 @@
+# [Issue]()
+
+# Description
+Short description representing what you have done
+
+## Type of change
+
+- [x] Non Breaking change
+- [x] Breaking change
+
+# Checklist:
+
+- [x] Checklist item
+- [x] Checklist item
+
+# Notes (specific implementation details)
+
+I have found this and this and this
+
+# Screenshots (optional)
+
+Hey master let me show you some beautiful things :)

.github/workflows/npmpublish.yml

@@ -0,0 +1,37 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish-gpr:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[ci-skip]')"
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          # registry-url: https://npm.pkg.github.com/
+          # scope: "@rxdi"
+      - run: npx @rxdi/bolt install
+      - run: npm run lint --if-present
+      - run: npm test --if-present
+      - run: git config --global user.email '[email protected]'
+      - run: git config --global user.name "Kristiyan Tachev"
+      - run: npm version patch
+      - run: node ./change-version.js
+      - run: npm config set '//registry.npmjs.org/:_authToken' "${{secrets.NPM_TOKEN}}"
+      - run: npm run build
+      - run: npm run patch
+      - run: npm run publish-packages
+        env:
+          NPM_TOKEN: ${{secrets.NPM_TOKEN}}
+      - run: git add .
+      - run: git commit --amend --no-edit
+      - uses: ad-m/github-push-action@master
+        with:
+          tags: true
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -0,0 +1,16 @@
+name: Tests
+
+on: [push]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    if: "!contains(github.event.head_commit.message, '[ci-skip]')"
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npx @rxdi/bolt install
+      - run: npm run lint --if-present
+      - run: npm test

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+.cache
+build
+
+coverage
+
+dist
+
+*.js
+*.map.js
+*.d.ts

.prettierrc

@@ -0,0 +1,4 @@
+{
+    "singleQuote": true,
+    "printWidth": 80
+}

.vscode/settings.json

@@ -0,0 +1,29 @@
+{
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.formatOnSave": false
+  },
+  "[typescript]": {
+    "editor.formatOnSave": false
+  },
+  "eslint.autoFixOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    {
+      "language": "typescript",
+      "autoFix": true
+    }
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "deno.path": "/home/rampage/.deno/bin/deno",
+  "deno.enable": false, // enables extension
+  "deno.lint": false, // inline deno lint diagnostics, requires `deno.unstable`
+  "deno.unstable": false,
+  "deno.suggest.imports.hosts": {
+    "https://cdn.esm.sh": false,
+    "https://deno.land": true
+  } // also provides unstable type declarations in VS Code
+}

CHANGELOG.md

@@ -0,0 +1,4 @@
+
+## [0.0.69] - 2020-12-13
+### Added
+- New package with name `@rhtml/component` [Documentation](./packages/component/README.md)

README.md

@@ -0,0 +1,257 @@
+# Reactive HTML
+
+### Packages
+
+| Package                                                | Description                                                            |
+| ------------------------------------------------------ | ---------------------------------------------------------------------- |
+| [@rhtml/di](packages/di)                               | IOC container                                                          |
+| [@rhtml/component](packages/component)                 | Main reactive component for building UI                                |
+| [@rhtml/components](packages/components)               | Declarative monadic approach defining WC using html                    |
+| [@rhtml/operators](packages/operators)                 | Useful declarative operators like `for` `if`                           |
+| [@rhtml/graphql](packages/graphql)                     | Declarative Graphql for executing `query` `mutation` or `subscription` |
+| [@rhtml/hooks](packages/hooks)                         | React like hooks for use inside web components                         |
+| [@rhtml/renderer](packages/renderer)                   | Main renderer for every component used also with observables           |
+| [@rhtml/schematics](packages/schematics)               | Angular like schematics for component generation using DI container    |
+| [@rhtml/experiments](packages/experiments)             | Declarative way of defining web components only with HTML              |
+| [@rhtml/decorators](packages/decorators)               | Useful decorators @HostListener and @Input                             |
+| [@rhtml/modifiers](packages/modifiers)                 | Modifiers created using Custom HTML Attributes                         |
+| [@rhtml/custom-attributes](packages/custom-attributes) | Create your own custom Attributes                                      |
+
+#### Installation
+
+```bash
+npm i @rhtml/operators @rhtml/components @rhtml/hooks @rhtml/graphql
+```
+
+#### Usage
+
+```typescript
+import { LitElement, Component, html } from '@rxdi/lit-html';
+import { BehaviorSubject } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+import '@rhtml/operators';
+import '@rhtml/components';
+import '@rhtml/hooks';
+import '@rhtml/graphql';
+
+interface State {
+  counter: number;
+}
+interface NotificationState {
+  data: { notifications: { appUpdated: string | number } };
+}
+@Component({
+  selector: 'r-html-view',
+  template(this: RHtmlViewComponent) {
+    return html`
+      <r-renderer
+        .options=${{
+          state: new BehaviorSubject({ counter: 1 }).pipe(delay(1700)),
+          render: (res: State, setState: (res: State) => State) =>
+            html`
+              <button
+                @click=${() => setState({ counter: res.counter + res.counter })}
+              >
+                Increment
+              </button>
+              ${res.counter}
+            `,
+          loading: () =>
+            html`
+              Loading...
+            `,
+          error: () =>
+            html`
+              Error
+            `
+        }}
+      ></r-renderer>
+
+      <r-for .of=${['IterableItem 1', 'Iterable Item 2']}>
+        <r-let
+          .item=${v => html`
+            ${v}
+          `}
+        ></r-let>
+      </r-for>
+
+      <r-part>
+        <r-state .value=${'Kristiyan Tachev'}></r-state>
+        <r-render
+          .state=${name => html`
+            <p>${name}</p>
+          `}
+        >
+        </r-render>
+      </r-part>
+
+      <r-part>
+        <r-settings .value=${{ fetchPolicy: 'cache-first' }}></r-settings>
+        <r-fetch .query=${`{ continents { name } }`}></r-fetch>
+        <r-render
+          .state=${({ data: { continents } }) => html`
+            <r-for .of=${continents}>
+              <r-let .item=${({ name }) => name}></r-let>
+            </r-for>
+          `}
+        >
+        </r-render>
+      </r-part>
+
+      <r-part>
+        <r-fetch .subscribe=${`{ notifications { appUpdated } }`}></r-fetch>
+        <r-render
+          .state=${(
+            {
+              data: {
+                notifications: { appUpdated }
+              }
+            },
+            setState: (s: NotificationState) => void
+          ) => html`
+            <p>${appUpdated}</p>
+            <button
+              @click=${() => {
+                setState({
+                  data: {
+                    notifications: {
+                      appUpdated: Number(appUpdated) + Number(appUpdated)
+                    }
+                  }
+                });
+              }}
+            >
+              Increment Subscriptions State x2
+            </button>
+            (will be overriten when server emit new state)
+          `}
+        >
+        </r-render>
+      </r-part>
+    `;
+  }
+})
+export class RHtmlViewComponent extends LitElement {}
+```
+
+## Setup Graphql Client
+
+To set configuration on bundle time we need to get settings without `barrel` export,
+this way we can set configuration before Graphql module loads configuration
+Keep it in mind that this is the default configuration for GraphqlClient
+
+```typescript
+import { setConfig } from '@rhtml/graphql/settings';
+
+setConfig({
+  config: {
+    uri: 'https://countries.trevorblades.com/',
+    pubsub: 'wss://pubsub.youvolio.com/subscriptions',
+    async onRequest() {
+      return new Headers();
+    }
+  },
+  defaults: {
+    error: e => {
+      return html`
+        <p style="color: black">
+          ${e}
+        </p>
+      `;
+    },
+    loading: () => {
+      return html`
+        <div style="text-align: center;">
+          <rx-loading palette="danger"></rx-loading>
+        </div>
+      `;
+    }
+  }
+});
+
+import '@rhtml/graphql';
+```
+
+Later on you can use `r-fetch` component to specify `query`, `mutation`, `subscription`
+
+```html
+<r-part>
+  <r-fetch .subscribe=${`{ notifications { appUpdated } }`}></r-fetch>
+  <r-render .state=${({ data: { notifications: { appUpdated } } }, setState: (s: NotificationState) => void) => html`
+    <p>${appUpdated}</p>
+    <button
+      @click=${() => {
+        setState({
+          data: {
+            notifications: {
+              appUpdated: Number(appUpdated) + Number(appUpdated)
+            }
+          }
+        });
+      }}
+    >
+      Increment Subscriptions State x2
+    </button>
+    (will be overriten when server emit new state)
+  `}>
+  </r-render>
+</r-part>
+```
+
+##### Dependency Injection
+
+```
+npm i @rhtml/di
+```
+
+```ts
+import '@abraham/reflection';
+
+import { Inject, Injectable, InjectionToken } from '@rhtml/di';
+import { Bootstrap, Component, Module } from '@rhtml/di/module';
+
+type UserId = number;
+const UserId = new InjectionToken<UserId>();
+
+const now = Date.now();
+
+@Injectable()
+export class UserService {
+  constructor(@Inject(UserId) public userId: number) {
+    console.log('[UserService]', userId);
+  }
+}
+
+@Component()
+class AppComponent {
+  constructor(public userService: UserService) {
+    console.log('[AppComponent] ', userService.userId);
+  }
+
+  OnInit() {
+    console.log('[AppComponent] Init');
+  }
+
+  OnDestroy() {
+    console.log('[AppComponent] Destroy');
+  }
+}
+
+@Module({
+  providers: [
+    UserService,
+    {
+      provide: UserId,
+      useFactory: () =>
+        new Promise<number>(resolve => setTimeout(() => resolve(1234), 1000))
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+
+Bootstrap(AppModule).then(() =>
+  console.log('Started', `after ${Date.now() - now}`)
+);
+```