Skip to content
Permalink
Browse files

[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>
  • Loading branch information
3 people committed Mar 25, 2020
1 parent c1b4c62 commit f5e0afdd7eb872de2e50b7aef54d435c795f3b0c
Showing with 468 additions and 0 deletions.
  1. +6 −0 examples/dojo/.dojorc
  2. +4 −0 examples/dojo/.gitignore
  3. +25 −0 examples/dojo/README.md
  4. +26 −0 examples/dojo/package.json
  5. +3 −0 examples/dojo/src/App.m.css
  6. +1 −0 examples/dojo/src/App.m.css.d.ts
  7. +27 −0 examples/dojo/src/App.ts
  8. +11 −0 examples/dojo/src/index.html
  9. +6 −0 examples/dojo/src/main.css
  10. +13 −0 examples/dojo/src/main.ts
  11. +15 −0 examples/dojo/src/routes.ts
  12. +9 −0 examples/dojo/src/widgets/About.ts
  13. +9 −0 examples/dojo/src/widgets/Home.ts
  14. +39 −0 examples/dojo/src/widgets/Menu.ts
  15. +14 −0 examples/dojo/src/widgets/Profile.ts
  16. +3 −0 examples/dojo/src/widgets/styles/About.m.css
  17. +1 −0 examples/dojo/src/widgets/styles/About.m.css.d.ts
  18. +3 −0 examples/dojo/src/widgets/styles/Home.m.css
  19. +1 −0 examples/dojo/src/widgets/styles/Home.m.css.d.ts
  20. +23 −0 examples/dojo/src/widgets/styles/Menu.m.css
  21. +3 −0 examples/dojo/src/widgets/styles/Menu.m.css.d.ts
  22. +3 −0 examples/dojo/src/widgets/styles/Profile.m.css
  23. +1 −0 examples/dojo/src/widgets/styles/Profile.m.css.d.ts
  24. +1 −0 examples/dojo/tests/functional/all.ts
  25. +1 −0 examples/dojo/tests/functional/main.ts
  26. +46 −0 examples/dojo/tests/unit/App.ts
  27. +2 −0 examples/dojo/tests/unit/all.ts
  28. +1 −0 examples/dojo/tests/unit/main.ts
  29. +13 −0 examples/dojo/tests/unit/widgets/About.ts
  30. +13 −0 examples/dojo/tests/unit/widgets/Home.ts
  31. +45 −0 examples/dojo/tests/unit/widgets/Menu.ts
  32. +13 −0 examples/dojo/tests/unit/widgets/Profile.ts
  33. +4 −0 examples/dojo/tests/unit/widgets/all.ts
  34. +31 −0 examples/dojo/tsconfig.json
  35. +31 −0 packages/frameworks/frameworks.json
  36. BIN packages/frameworks/logos/dojo.png
  37. +21 −0 packages/now-static-build/src/frameworks.ts
@@ -0,0 +1,6 @@
{
"build-app": {},
"test-intern": {},
"create-app": {},
"create-widget": {}
}
@@ -0,0 +1,4 @@
node_modules/
_build/
output/
.cert/
@@ -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
```
@@ -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"
}
}
@@ -0,0 +1,3 @@
.root {

}
@@ -0,0 +1 @@
export const root: string;
@@ -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' }) })
])
]);
});
@@ -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>
@@ -0,0 +1,6 @@
/* Put your styles and imports here */
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@@ -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 });
@@ -0,0 +1,15 @@
export default [
{
path: 'home',
outlet: 'home',
defaultRoute: true
},
{
path: 'about',
outlet: 'about'
},
{
path: 'profile',
outlet: 'profile'
}
];
@@ -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']);
});
@@ -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']);
});
@@ -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']
)
]);
});
@@ -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}!`]);
});
@@ -0,0 +1,3 @@
.root {

}
@@ -0,0 +1 @@
export const root: string;
@@ -0,0 +1,3 @@
.root {

}
@@ -0,0 +1 @@
export const root: string;
@@ -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;
}
@@ -0,0 +1,3 @@
export const root: string;
export const link: string;
export const selected: string;
@@ -0,0 +1,3 @@
.root {

}
@@ -0,0 +1 @@
export const root: string;
@@ -0,0 +1 @@
import './main';
@@ -0,0 +1 @@
/* Write your app tests here */
@@ -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);
});
});
@@ -0,0 +1,2 @@
import './App';
import './widgets/all';
@@ -0,0 +1 @@
/* Write your app tests here */
@@ -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']));
});
});
@@ -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']));
});
});
@@ -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']
)
])
);
});
});

0 comments on commit f5e0afd

Please sign in to comment.
You can’t perform that action at this time.