[examples] Add Dojo Example (#3882)

Adds an example for Dojo applications with ZEIT Now. Co-Authored-By: Steven <steven@ceriously.com> Co-Authored-By: Andy <AndyBitz@users.noreply.github.com>
vercel · Mar 25, 2020 · f5e0afd · f5e0afd
1 parent c1b4c62
commit f5e0afd
Show file tree

Hide file tree

Showing 37 changed files with 468 additions and 0 deletions.
diff --git a/examples/dojo/.dojorc b/examples/dojo/.dojorc
@@ -0,0 +1,6 @@
+{
+	"build-app": {},
+	"test-intern": {},
+	"create-app": {},
+	"create-widget": {}
+}
diff --git a/examples/dojo/.gitignore b/examples/dojo/.gitignore
@@ -0,0 +1,4 @@
+node_modules/
+_build/
+output/
+.cert/
diff --git a/examples/dojo/README.md b/examples/dojo/README.md
@@ -0,0 +1,25 @@
+# Dojo Example
+
+This directory is a brief example of a [Dojo](https://dojo.io) site that can be deployed with ZEIT Now and zero configuration.
+
+## Deploy Your Own
+
+Deploy your own Dojo project with ZEIT Now.
+
+[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/import/project?template=https://github.com/zeit/now-examples/tree/master/dojo)
+
+### How We Created This Example
+
+To get started with Dojo on Now, you can use the [Dojo CLI](https://github.com/dojo/cli) to initialize the project:
+
+```shell
+$ now init dojo
+```
+
+### Deploying From Your Terminal
+
+Once initialized, you can deploy the Dojo example with just a single command:
+
+```shell
+$ now
+```
diff --git a/examples/dojo/package.json b/examples/dojo/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "dojo",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "dojo build --mode dev --watch --serve",
+    "build": "dojo build --mode dist",
+    "build:dev": "dojo build --mode dev",
+    "test": "dojo test",
+    "test:unit": "dojo build --mode unit && dojo test --unit --config local",
+    "test:functional": "dojo build --mode functional && dojo test --functional --config local",
+    "test:all": "dojo build --mode unit && dojo build --mode functional && dojo test --all --config local"
+  },
+  "dependencies": {
+    "@dojo/framework": "^6.0.0",
+    "@dojo/themes": "^6.0.0",
+    "@dojo/widgets": "^6.0.0",
+    "tslib": "~1.9.1"
+  },
+  "devDependencies": {
+    "@dojo/cli": "^6.0.0",
+    "@dojo/cli-build-app": "^6.0.0",
+    "@dojo/cli-test-intern": "^6.0.0",
+    "@types/node": "~9.6.5",
+    "typescript": "~3.4.5"
+  }
+}
diff --git a/examples/dojo/src/App.m.css b/examples/dojo/src/App.m.css
@@ -0,0 +1,3 @@
+.root {
+
+}
diff --git a/examples/dojo/src/App.m.css.d.ts b/examples/dojo/src/App.m.css.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/examples/dojo/src/App.ts b/examples/dojo/src/App.ts
@@ -0,0 +1,27 @@
+import { create, v, w } from '@dojo/framework/core/vdom';
+import theme from '@dojo/framework/core/middleware/theme';
+import Outlet from '@dojo/framework/routing/Outlet';
+import dojo from '@dojo/themes/dojo';
+
+import Menu from './widgets/Menu';
+import Home from './widgets/Home';
+import About from './widgets/About';
+import Profile from './widgets/Profile';
+
+import * as css from './App.m.css';
+
+const factory = create({ theme });
+
+export default factory(function App({ middleware: { theme } }) {
+	if (!theme.get()) {
+		theme.set(dojo);
+	}
+	return v('div', { classes: [css.root] }, [
+		w(Menu, {}),
+		v('div', [
+			w(Outlet, { key: 'home', id: 'home', renderer: () => w(Home, {}) }),
+			w(Outlet, { key: 'about', id: 'about', renderer: () => w(About, {}) }),
+			w(Outlet, { key: 'profile', id: 'profile', renderer: () => w(Profile, { username: 'Dojo User' }) })
+		])
+	]);
+});
diff --git a/examples/dojo/src/index.html b/examples/dojo/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en-us" dir="ltr">
+<head>
+	<meta charset="utf-8">
+	<title>dojo</title>
+	<meta name="theme-color" content="#222127">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+</body>
+</html>
diff --git a/examples/dojo/src/main.css b/examples/dojo/src/main.css
@@ -0,0 +1,6 @@
+/* Put your styles and imports here */
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
diff --git a/examples/dojo/src/main.ts b/examples/dojo/src/main.ts
@@ -0,0 +1,13 @@
+import renderer, { w } from '@dojo/framework/core/vdom';
+import Registry from '@dojo/framework/core/Registry';
+import { registerRouterInjector } from '@dojo/framework/routing/RouterInjector';
+import '@dojo/themes/dojo/index.css';
+
+import routes from './routes';
+import App from './App';
+
+const registry = new Registry();
+registerRouterInjector(routes, registry);
+
+const r = renderer(() => w(App, {}));
+r.mount({ registry });
diff --git a/examples/dojo/src/routes.ts b/examples/dojo/src/routes.ts
@@ -0,0 +1,15 @@
+export default [
+	{
+		path: 'home',
+		outlet: 'home',
+		defaultRoute: true
+	},
+	{
+		path: 'about',
+		outlet: 'about'
+	},
+	{
+		path: 'profile',
+		outlet: 'profile'
+	}
+];
diff --git a/examples/dojo/src/widgets/About.ts b/examples/dojo/src/widgets/About.ts
@@ -0,0 +1,9 @@
+import { v, create } from '@dojo/framework/core/vdom';
+
+import * as css from './styles/About.m.css';
+
+const factory = create();
+
+export default factory(function Profile() {
+	return v('h1', { classes: [css.root] }, ['About Page']);
+});
diff --git a/examples/dojo/src/widgets/Home.ts b/examples/dojo/src/widgets/Home.ts
@@ -0,0 +1,9 @@
+import { v, create } from '@dojo/framework/core/vdom';
+
+import * as css from './styles/Home.m.css';
+
+const factory = create();
+
+export default factory(function Profile() {
+	return v('h1', { classes: [css.root] }, ['Home Page']);
+});
diff --git a/examples/dojo/src/widgets/Menu.ts b/examples/dojo/src/widgets/Menu.ts
@@ -0,0 +1,39 @@
+import { create, w } from '@dojo/framework/core/vdom';
+import Link from '@dojo/framework/routing/ActiveLink';
+import Toolbar from '@dojo/widgets/toolbar';
+
+import * as css from './styles/Menu.m.css';
+
+const factory = create();
+
+export default factory(function Menu() {
+	return w(Toolbar, { heading: 'My Dojo App!', collapseWidth: 600 }, [
+		w(
+			Link,
+			{
+				to: 'home',
+				classes: [css.link],
+				activeClasses: [css.selected]
+			},
+			['Home']
+		),
+		w(
+			Link,
+			{
+				to: 'about',
+				classes: [css.link],
+				activeClasses: [css.selected]
+			},
+			['About']
+		),
+		w(
+			Link,
+			{
+				to: 'profile',
+				classes: [css.link],
+				activeClasses: [css.selected]
+			},
+			['Profile']
+		)
+	]);
+});
diff --git a/examples/dojo/src/widgets/Profile.ts b/examples/dojo/src/widgets/Profile.ts
@@ -0,0 +1,14 @@
+import { v, create } from '@dojo/framework/core/vdom';
+
+import * as css from './styles/Profile.m.css';
+
+export interface ProfileProperties {
+	username: string;
+}
+
+const factory = create().properties<ProfileProperties>();
+
+export default factory(function Profile({ properties }) {
+	const { username } = properties();
+	return v('h1', { classes: [css.root] }, [`Welcome ${username}!`]);
+});
diff --git a/examples/dojo/src/widgets/styles/About.m.css b/examples/dojo/src/widgets/styles/About.m.css
@@ -0,0 +1,3 @@
+.root {
+
+}
diff --git a/examples/dojo/src/widgets/styles/About.m.css.d.ts b/examples/dojo/src/widgets/styles/About.m.css.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/examples/dojo/src/widgets/styles/Home.m.css b/examples/dojo/src/widgets/styles/Home.m.css
@@ -0,0 +1,3 @@
+.root {
+
+}
diff --git a/examples/dojo/src/widgets/styles/Home.m.css.d.ts b/examples/dojo/src/widgets/styles/Home.m.css.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/examples/dojo/src/widgets/styles/Menu.m.css b/examples/dojo/src/widgets/styles/Menu.m.css
@@ -0,0 +1,23 @@
+.root {
+	flex: 1;
+	overflow: hidden;
+}
+
+.link:hover {
+	color: #4db3ff;
+	background-color:#ccddee;
+}
+
+.link {
+	min-width: 140px;
+	text-align: center;
+	text-transform: uppercase;
+	text-decoration: none;
+	padding: 18px;
+	color: black;
+	box-sizing: border-box;
+}
+
+.selected {
+	color: darkorange;
+}
diff --git a/examples/dojo/src/widgets/styles/Menu.m.css.d.ts b/examples/dojo/src/widgets/styles/Menu.m.css.d.ts
@@ -0,0 +1,3 @@
+export const root: string;
+export const link: string;
+export const selected: string;
diff --git a/examples/dojo/src/widgets/styles/Profile.m.css b/examples/dojo/src/widgets/styles/Profile.m.css
@@ -0,0 +1,3 @@
+.root {
+
+}
diff --git a/examples/dojo/src/widgets/styles/Profile.m.css.d.ts b/examples/dojo/src/widgets/styles/Profile.m.css.d.ts
@@ -0,0 +1 @@
+export const root: string;
diff --git a/examples/dojo/tests/functional/all.ts b/examples/dojo/tests/functional/all.ts
@@ -0,0 +1 @@
+import './main';
diff --git a/examples/dojo/tests/functional/main.ts b/examples/dojo/tests/functional/main.ts
@@ -0,0 +1 @@
+/* Write your app tests here */
diff --git a/examples/dojo/tests/unit/App.ts b/examples/dojo/tests/unit/App.ts
@@ -0,0 +1,46 @@
+const { describe, it } = intern.getInterface('bdd');
+import harness from '@dojo/framework/testing/harness';
+import { v, w } from '@dojo/framework/core/vdom';
+import Outlet from '@dojo/framework/routing/Outlet';
+
+import Menu from '../../src/widgets/Menu';
+import Home from '../../src/widgets/Home';
+import About from '../../src/widgets/About';
+import Profile from '../../src/widgets/Profile';
+
+import App from '../../src/App';
+import * as css from '../../src/App.m.css';
+
+describe('App', () => {
+	it('default renders correctly', () => {
+		const h = harness(() => w(App, {}));
+		h.expect(() =>
+			v('div', { classes: [css.root] }, [
+				w(Menu, {}),
+				v('div', [
+					w(Outlet, { key: 'home', id: 'home', renderer: () => w(Home, {}) }),
+					w(Outlet, { key: 'about', id: 'about', renderer: () => w(About, {}) }),
+					w(Outlet, { key: 'profile', id: 'profile', renderer: () => w(Profile, { username: 'Dojo User' }) })
+				])
+			])
+		);
+	});
+
+	it('home outlet renderer', () => {
+		const h = harness(() => w(App, {}));
+		const renderer = h.trigger('@home', 'renderer');
+		h.expect(() => w(Home, {}), () => renderer);
+	});
+
+	it('about outlet renderer', () => {
+		const h = harness(() => w(App, {}));
+		const renderer = h.trigger('@about', 'renderer');
+		h.expect(() => w(About, {}), () => renderer);
+	});
+
+	it('profile outlet renderer', () => {
+		const h = harness(() => w(App, {}));
+		const renderer = h.trigger('@profile', 'renderer');
+		h.expect(() => w(Profile, { username: 'Dojo User' }), () => renderer);
+	});
+});
diff --git a/examples/dojo/tests/unit/all.ts b/examples/dojo/tests/unit/all.ts
@@ -0,0 +1,2 @@
+import './App';
+import './widgets/all';
diff --git a/examples/dojo/tests/unit/main.ts b/examples/dojo/tests/unit/main.ts
@@ -0,0 +1 @@
+/* Write your app tests here */
diff --git a/examples/dojo/tests/unit/widgets/About.ts b/examples/dojo/tests/unit/widgets/About.ts
@@ -0,0 +1,13 @@
+const { describe, it } = intern.getInterface('bdd');
+import harness from '@dojo/framework/testing/harness';
+import { w, v } from '@dojo/framework/core/vdom';
+
+import About from '../../../src/widgets/About';
+import * as css from '../../../src/widgets/styles/About.m.css';
+
+describe('About', () => {
+	it('default renders correctly', () => {
+		const h = harness(() => w(About, {}));
+		h.expect(() => v('h1', { classes: [css.root] }, ['About Page']));
+	});
+});
diff --git a/examples/dojo/tests/unit/widgets/Home.ts b/examples/dojo/tests/unit/widgets/Home.ts
@@ -0,0 +1,13 @@
+const { describe, it } = intern.getInterface('bdd');
+import harness from '@dojo/framework/testing/harness';
+import { w, v } from '@dojo/framework/core/vdom';
+
+import Home from '../../../src/widgets/Home';
+import * as css from '../../../src/widgets/styles/Home.m.css';
+
+describe('Home', () => {
+	it('default renders correctly', () => {
+		const h = harness(() => w(Home, {}));
+		h.expect(() => v('h1', { classes: [css.root] }, ['Home Page']));
+	});
+});
diff --git a/examples/dojo/tests/unit/widgets/Menu.ts b/examples/dojo/tests/unit/widgets/Menu.ts
@@ -0,0 +1,45 @@
+const { describe, it } = intern.getInterface('bdd');
+import harness from '@dojo/framework/testing/harness';
+import { w } from '@dojo/framework/core/vdom';
+import Link from '@dojo/framework/routing/ActiveLink';
+import Toolbar from '@dojo/widgets/toolbar';
+
+import Menu from '../../../src/widgets/Menu';
+import * as css from '../../../src/widgets/styles/Menu.m.css';
+
+describe('Menu', () => {
+	it('default renders correctly', () => {
+		const h = harness(() => w(Menu, {}));
+		h.expect(() =>
+			w(Toolbar, { heading: 'My Dojo App!', collapseWidth: 600 }, [
+				w(
+					Link,
+					{
+						to: 'home',
+						classes: [css.link],
+						activeClasses: [css.selected]
+					},
+					['Home']
+				),
+				w(
+					Link,
+					{
+						to: 'about',
+						classes: [css.link],
+						activeClasses: [css.selected]
+					},
+					['About']
+				),
+				w(
+					Link,
+					{
+						to: 'profile',
+						classes: [css.link],
+						activeClasses: [css.selected]
+					},
+					['Profile']
+				)
+			])
+		);
+	});
+});