From 1e5bf006409d0b06ed9e550750151c11bf21eb2c Mon Sep 17 00:00:00 2001 From: Jesus Soto Date: Fri, 29 May 2020 20:52:50 -0500 Subject: [PATCH 1/4] Added webpack time monitor and configured routing Configure router to allow access to perspective and pages through URL, also improved loading time in webpack compiler. --- package.json | 1 + src/doc.ts | 17 +++++++++++++++-- src/home.ts | 4 ++-- src/init.ts | 3 ++- src/router.ts | 9 +++++++-- webpack.config.js | 14 +++++++++----- 6 files changed, 36 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index e691944..62be4b6 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "file-loader": "^6.0.0", "html-webpack-plugin": "^3.2.0", "rimraf": "^2.6.3", + "speed-measure-webpack-plugin": "^1.3.3", "temp-dir": "^2.0.0", "ts-loader": "^6.2.2", "typescript": "^3.8.3", diff --git a/src/doc.ts b/src/doc.ts index 8264c2e..e518d8e 100644 --- a/src/doc.ts +++ b/src/doc.ts @@ -8,12 +8,23 @@ import { Router } from '@vaadin/router'; export class Doc extends moduleConnect(LitElement) { @property({ attribute: false }) docId!: string; - + // @property({ attribute: false }) defaultAuthority!: string; + @property({ attribute: false }) + perspectiveId: string; + + @property({ attribute: false }) + pageId: string; + async firstUpdated() { - this.docId = window.location.pathname.split('/')[2]; + const pathElements = window.location.pathname.split('/'); + + this.docId = pathElements[2]; + this.perspectiveId = + pathElements[3] !== 'official' ? pathElements[3] : undefined; + this.pageId = pathElements.length > 3 ? pathElements[4] : undefined; const eveesHttpProvider = this.requestAll( EveesModule.bindings.EveesRemote @@ -34,6 +45,8 @@ export class Doc extends moduleConnect(LitElement) { this.goHome()} ref=${this.docId} + init-ref=${this.perspectiveId} + page-id=${this.pageId} default-authority=${this.defaultAuthority} .editableAuthorities=${[this.defaultAuthority]} > diff --git a/src/home.ts b/src/home.ts index f5dd29a..1de9e1f 100644 --- a/src/home.ts +++ b/src/home.ts @@ -189,8 +189,8 @@ export class Home extends moduleConnect(LitElement) { this.go(perspectiveId); } - go(perspectiveId: string) { - Router.go(`/doc/${perspectiveId}`); + go(perspectiveId: string) { + Router.go(`/space/${perspectiveId}/official`); } renderSpaces() { diff --git a/src/init.ts b/src/init.ts index 4d5e62e..dfb236b 100644 --- a/src/init.ts +++ b/src/init.ts @@ -19,7 +19,8 @@ import { DiscoveryModule } from '@uprtcl/multiplatform'; export const EveesEthereumBinding = 'evees-ethereum'; export const initUprtcl = async () => { - const c1host = 'https://api.intercreativity.io/uprtcl/1'; + // const c1host = 'https://api.intercreativity.io/uprtcl/1'; + const c1host = 'http://localhost:3000/uprtcl/1'; const ethHost = ''; const ipfsConfig = { diff --git a/src/router.ts b/src/router.ts index a6b42de..39968bd 100644 --- a/src/router.ts +++ b/src/router.ts @@ -13,8 +13,13 @@ export function setupRouter(outlet: HTMLElement) { component: 'app-home', }, { - path: '/doc/:ref', - component: 'app-doc', + path: '/space/:rootPerspective', + children: [ + { path: '/official', component: 'app-doc' }, + { path: '/official/:pageId', component: 'app-doc' }, + { path: '/:perspectiveId', component: 'app-doc' }, + { path: '/:perspectiveId/:pageId', component: 'app-doc' }, + ], }, ]); diff --git a/webpack.config.js b/webpack.config.js index 1565465..7c94671 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,10 @@ const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); +const SpeedMeasurePlugin = require('speed-measure-webpack-plugin'); -module.exports = { +const smp = new SpeedMeasurePlugin(); + +module.exports = smp.wrap({ output: { filename: 'main.[hash].bundle.js', path: path.resolve(__dirname, 'dist-pages'), @@ -19,9 +22,7 @@ module.exports = { '@authentic/mwc-notched-outline': path.resolve( './node_modules/@authentic/mwc-notched-outline' ), - '@authentic/mwc-card': path.resolve( - './node_modules/@authentic/mwc-card' - ), + '@authentic/mwc-card': path.resolve('./node_modules/@authentic/mwc-card'), '@authentic/mwc-tooltip': path.resolve( './node_modules/@authentic/mwc-tooltip' ), @@ -103,16 +104,19 @@ module.exports = { rules: [ { test: /\.js$/, + exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: [['@babel/preset-env', { targets: { ie: '11' } }]], plugins: ['@babel/plugin-syntax-dynamic-import'], + cacheDirectory: true, }, }, }, { test: /\.ts$/, + exclude: /(node_modules)/, use: { loader: 'ts-loader', }, @@ -125,4 +129,4 @@ module.exports = { minify: true, }), ], -}; +}); From eb24e20c81c292b61c6a38897461bbdeaadc3ef7 Mon Sep 17 00:00:00 2001 From: Jesus Soto Date: Fri, 29 May 2020 21:04:12 -0500 Subject: [PATCH 2/4] Added a suggestion, to add an .env file --- src/init.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/init.ts b/src/init.ts index dfb236b..b7a6b04 100644 --- a/src/init.ts +++ b/src/init.ts @@ -19,8 +19,9 @@ import { DiscoveryModule } from '@uprtcl/multiplatform'; export const EveesEthereumBinding = 'evees-ethereum'; export const initUprtcl = async () => { - // const c1host = 'https://api.intercreativity.io/uprtcl/1'; - const c1host = 'http://localhost:3000/uprtcl/1'; + const c1host = 'https://api.intercreativity.io/uprtcl/1'; + //const c1host = 'http://localhost:3000/uprtcl/1'; + // Suggestion: to create an .env file in order to handle ports and hosts const ethHost = ''; const ipfsConfig = { From 88bcb6844deef3e397faa1ddb94ec8dd323e6714 Mon Sep 17 00:00:00 2001 From: Jesus Soto Date: Mon, 1 Jun 2020 18:23:12 -0500 Subject: [PATCH 3/4] Update routing to be triggered by wikis --- src/doc.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/doc.ts b/src/doc.ts index f683415..6985cb1 100644 --- a/src/doc.ts +++ b/src/doc.ts @@ -40,11 +40,23 @@ export class Doc extends moduleConnect(LitElement) { Router.go(`/home`); } + goToPerspective(e) { + const { detail: { rootPerspective, perspective } } = e; + Router.go(`/space/${rootPerspective}/${(!perspective) ? 'official' : perspective}`); + } + + goToPage(e) { + const { detail: { official, pageId, perspective, rootPerspective } } = e; + Router.go(`/space/${rootPerspective}/${(official) ? 'official' : perspective}/${pageId}`); + } + render() { if (this.docId === undefined) return ''; return html` this.goHome()} + @page=${(e) => this.goToPage(e)} + @perspective=${(e) => this.goToPerspective(e)} ref=${this.docId} init-ref=${this.perspectiveId} page-id=${this.pageId} From a0036fbe6bb5ac2354bd36eff0b67c7be0710599 Mon Sep 17 00:00:00 2001 From: Jesus Soto Date: Tue, 2 Jun 2020 18:43:58 -0500 Subject: [PATCH 4/4] Now the url parameters will be checked in the wiki component instead. --- src/doc.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/src/doc.ts b/src/doc.ts index 6985cb1..cb3ba5d 100644 --- a/src/doc.ts +++ b/src/doc.ts @@ -22,9 +22,6 @@ export class Doc extends moduleConnect(LitElement) { const pathElements = window.location.pathname.split('/'); this.docId = pathElements[2]; - this.perspectiveId = - pathElements[3] !== 'official' ? pathElements[3] : undefined; - this.pageId = pathElements.length > 3 ? pathElements[4] : undefined; const eveesHttpProvider = this.requestAll( EveesModule.bindings.EveesRemote @@ -46,20 +43,22 @@ export class Doc extends moduleConnect(LitElement) { } goToPage(e) { - const { detail: { official, pageId, perspective, rootPerspective } } = e; + const { detail: { official, pageId, perspective, rootPerspective } } = e; Router.go(`/space/${rootPerspective}/${(official) ? 'official' : perspective}/${pageId}`); } render() { if (this.docId === undefined) return ''; - return html` + + // If property `external-routing` is removed, the component will nagivate internarlly + + return html` this.goHome()} - @page=${(e) => this.goToPage(e)} - @perspective=${(e) => this.goToPerspective(e)} + @back=${() => this.goHome()} + @select-perspective=${(e) => this.goToPerspective(e)} + @select-page=${(e) => this.goToPage(e)} + external-routing=${true} ref=${this.docId} - init-ref=${this.perspectiveId} - page-id=${this.pageId} default-authority=${this.defaultAuthority} .editableAuthorities=${[this.defaultAuthority]} >