Add typescript/pleix-frontend

typescript/README.md

@@ -1,7 +1,8 @@
 # Typescript
 
-| Name                      | Description                                                                                             |
+| Name                                | Description                                                                                                                     |
-| ------------------------- | ------------------------------------------------------------------------------------------------------- |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| [lunardash](./lunardash/) | Rhythm game I dropped super early into development                                                      |
+| [lunardash](./lunardash/)           | Rhythm game I dropped super early into development                                                                              |
-| [option](./option/)       | Typescript implementation of the `Maybe` monad                                                          |
+| [option](./option/)                 | Typescript implementation of the `Maybe` monad                                                                                  |
-| [wave38](./wave38/)       | Remake of [wave37](https://github.com/Mateiadrielrafael/wave37) I dropped super early into development. |
+| [wave38](./wave38/)                 | Remake of [wave37](https://github.com/Mateiadrielrafael/wave37) I dropped super early into development.                         |
+| [pleix-frontend](./pleix-frontend/) | No idea what `pleix` was supposed to be, but this was essentially just a bunch of experiments with [lit-html](https://lit.dev/) |

typescript/pleix-frontend/.gitignore

@@ -0,0 +1 @@
+node_modules

typescript/pleix-frontend/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Matei Adriel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

typescript/pleix-frontend/README.md

@@ -0,0 +1,2 @@
+# pleix-front-end
+The front end for the pleix project

typescript/pleix-frontend/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "pleix-client",
+    "version": "1.0.0",
+    "scripts": {
+        "setup": "nvmw use 10.15.3",
+        "start": "webpack-dev-server --open --mode development",
+        "build": "npm run setup 10.15.3 && webpack --mode production"
+    },
+    "devDependencies": {
+        "css-loader": "^2.1.1",
+        "extract-text-webpack-plugin": "^3.0.2",
+        "file-loader": "^3.0.1",
+        "html-loader": "^0.5.5",
+        "html-webpack-plugin": "^3.2.0",
+        "node-sass": "^4.12.0",
+        "sass-loader": "^7.1.0",
+        "source-map-loader": "^0.2.4",
+        "style-loader": "^0.23.1",
+        "ts-loader": "^6.0.0",
+        "typescript": "^3.4.5",
+        "webpack": "^4.31.0",
+        "webpack-cli": "^3.3.2",
+        "webpack-dev-server": "^3.3.1"
+    },
+    "dependencies": {
+        "fromentries": "^1.1.0",
+        "haunted": "^4.2.1",
+        "lit-html": "^1.0.0",
+        "lit-rx": "0.0.2",
+        "prouter": "^9.1.2",
+        "rxjs": "^6.5.2"
+    }
+}

typescript/pleix-frontend/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Welcome to Firebase Hosting</title>
+</head>
+
+<body>
+</body>
+
+</html>

typescript/pleix-frontend/src/index.ts

@@ -0,0 +1,50 @@
+import { html, render } from "lit-html"
+import { AdrielServer } from "./routes";
+import { subscribe } from "lit-rx"
+
+import "./lit-route"
+import { map } from "rxjs/operators";
+
+const password = "123"
+const email = "rafaeladriel11@gmail.com"
+const name = "Adriel Matei"
+
+const server = new AdrielServer()
+
+let timer:number[] = []
+
+const signup = () => {
+    timer.push(performance.now())
+    server.signup(email, name, password)
+}
+
+render(html`
+<lit-router>
+    <lit-route href="/">
+        <button @click=${signup}>Signup</button>
+        <div>
+            Logged in: ${subscribe(server.authenticated)} <br>
+            It took: ${subscribe(server.authenticated.pipe(map(val => 
+                performance.now() - timer[timer.length - 1]
+            )))} ms
+        </div>
+    </lit-route>
+    <lit-route href="/test">
+        <br>
+        something else
+    </lit-route>
+    <div>
+        this isnt affected
+    </div>
+    <button>
+        <lit-a to="/test">
+            Test
+        </lit-a>
+    </button>
+    <button>
+        <lit-a to="/">
+            Root
+        </lit-a>
+    </button>
+</lit-router>
+`, document.body)

typescript/pleix-frontend/src/lit-route.ts

@@ -0,0 +1,57 @@
+import { component, html, useState } from "haunted"
+import { router } from "./lit-router"
+
+
+const Route = component((props) => {
+    const [$html] = useState([...props.childNodes])
+
+    return html`
+        ${$html}
+    `
+})
+
+const routerTagName = "lit-route"
+customElements.define(routerTagName, Route)
+
+const Router = component((props) => {
+    let [currentPath, setCurrentPath] = useState("/")
+    let [first, setFirst] = useState(true)
+
+    const [children] = useState([...props.children])
+
+    if (first) {
+        router.use("*", (req, res, next) => {
+            setCurrentPath(req.originalUrl)
+            res.end()
+        })
+
+        router.listen()
+        setFirst(false)
+    }
+
+
+    const safeChildren = children
+        .filter((value: any) => value.tagName != routerTagName.toLocaleUpperCase())
+
+    const routeElements: HTMLElement[] = children
+        .filter((value: any) => value.getAttribute("href") == currentPath)
+
+    return html`
+        ${safeChildren}
+        ${routeElements}
+    `
+})
+
+customElements.define("lit-router", Router)
+
+const litA = component((props:any) => {
+    const [$html] = useState([...props.childNodes])
+    const [url] = useState(props.getAttribute("to"))
+
+    return html`
+    <span @click=${() => { router.push(url) }}>
+        ${$html}
+    </span>`
+})
+
+customElements.define("lit-a", litA)

typescript/pleix-frontend/src/lit-router.ts

@@ -0,0 +1,3 @@
+import { browserRouter } from "prouter"
+
+export const router = browserRouter()

typescript/pleix-frontend/src/routes/auth/index.ts

@@ -0,0 +1 @@
+export * from "./services/AdrielServer"

typescript/pleix-frontend/src/routes/auth/services/AdrielServer.ts

@@ -0,0 +1,105 @@
+import { AdrielRequestOptions, AdrielTokenResponse } from "./interfaces";
+import { Subject } from "rxjs"
+import { map } from "rxjs/operators"
+
+export class AdrielServer {
+    private _ready = new Subject()
+    private token: string = "";
+
+    private static defaultOptions: AdrielRequestOptions = {
+        method: "GET",
+        url: "/",
+        body: {}
+    }
+
+    public url = "http://localhost:8000"
+    public ready = this._ready.toPromise()
+
+    public user = new Subject()
+    public uid = new Subject<string | null>()
+    public authenticated = this.uid.pipe(
+        map(val => !!val)
+    )
+
+    constructor() { 
+        const tokenPromise = new Promise<string>(async (res,rej) => {
+            if (!localStorage.token) {
+                const token = await this.generateToken()
+                localStorage.token = token
+                res(token) 
+            }
+            else 
+                res(localStorage.token)
+        })
+
+        tokenPromise.then((token:string) => {
+            this.token = token
+            this._ready.next()
+            this._ready.complete()
+            this.uid.next(null)
+        }).catch(err => {
+            this._ready.error(err)
+        })
+    }
+
+    private async generateToken() {
+        const result = await fetch(`${this.url}/token`)
+        const data: AdrielTokenResponse = await result.json()
+        const token = data.data.token
+
+        return token
+    }
+
+    async request(options: Partial<AdrielRequestOptions>) {
+        await this.ready
+
+        const finalOptions = { ...AdrielServer.defaultOptions, ...options }
+
+        //stringify body
+        finalOptions.body = JSON.stringify(finalOptions.body)
+
+        const forbiddenKyes = ["url"]
+        const optionMixin: Partial<AdrielRequestOptions> = {}
+
+        for (let i in finalOptions) {
+            //only for my editor to shut up
+            const key = i as keyof AdrielRequestOptions
+
+            if (forbiddenKyes.indexOf(key) == -1)
+                optionMixin[key] = finalOptions[key]
+        }
+
+        console.log(optionMixin)
+
+        //check if theres a token
+        if (!this.token){
+            throw new Error("cannot make a request without a token")
+        }
+
+        const result = await fetch(`${this.url}/${finalOptions.url}`, {
+            ...optionMixin,
+            headers: {
+                'Content-Type': 'application/json',
+                authorization: `Bearer ${this.token}`
+            }
+        })
+
+        return result
+    }
+
+    async signup(email: string, name: string, password: string) {
+        const res = await this.request({
+            url: "auth",
+            method: "POST",
+            body: {
+                password, email, name
+            }
+        })
+        
+        const data = await res.json()
+    
+        this.uid.next(data.data.uid)
+
+        return data.data.uid
+    }
+}

typescript/pleix-frontend/src/routes/auth/services/interfaces.ts

@@ -0,0 +1,26 @@
+export interface AdrielRequestOptions {
+    method: string
+    url: string
+    body: any
+}
+
+export interface AdrielResponse {
+    succes:boolean
+    data: any
+    errors?: string[]
+}
+
+export interface AdrielTokenResponse extends AdrielResponse {
+    data: {
+        token: string
+    }
+}
+
+export interface User {
+    uid:string,
+    name: string,
+    email: string,
+    photoUrl: string,
+    friends: string[]
+}
+

typescript/pleix-frontend/src/routes/index.ts

@@ -0,0 +1 @@
+export * from "./auth"

typescript/pleix-frontend/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "include": [
+        "src"
+    ],
+    "compilerOptions": {
+        "module": "commonjs",
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "outDir": "lib",
+        "sourceMap": true,
+        "strict": true,
+        "target": "es2017",
+        "moduleResolution": "node"
+    }
+}

typescript/pleix-frontend/webpack.config.js

@@ -0,0 +1,38 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+// const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+    devtool: 'inline-source-map',
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.html$/,
+                use: [
+                    {
+                        loader: "html-loader"
+                    }
+                ]
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebPackPlugin({
+            template: "./src/index.html",
+            filename: "./index.html"
+        })
+    ],
+    resolve: {
+        extensions: [
+            ".js",
+            ".ts"
+        ]
+    },
+    entry: [
+        "./src/index.ts"
+    ]
+};