geoff
/
vite-riot-template
mirror of https://github.com/n2geoff/vite-riot-template.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

major refactor of auto component init

This commit is contained in:
Geoff Doty 2023-03-02 13:29:00 -06:00
parent 6b1b01b7fb
commit 44835c0551
10 changed files with 948 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
README.md
View File

@ -31,13 +31,12 @@ dist/ <-- `npm run build` app
src/ <-- your source code src/ <-- your source code
css/ <-- processed css files css/ <-- processed css files
js/ <-- processed javascript files js/ <-- processed javascript files
registry.js <-- global component registry
public/ <-- unprocessed static `/` assets public/ <-- unprocessed static `/` assets
components/ <-- riots components components/ <-- riots components
hello-riot/ hello-riot/
hello-riot.riot <-- riot component hello-riot.riot <-- riot component
hello-riot.spec.js <-- component tests hello-riot.spec.js <-- component tests
index.js <-- application bootstrap app.js <-- app initialization
index.html <-- START HERE index.html <-- START HERE
vite.config.js <-- build configuration vite.config.js <-- build configuration
README.md README.md
@ -46,7 +45,7 @@ README.md
### Mounting Strategy ### Mounting Strategy
This template uses a static object registry to mount global **components** which in-turn can mount other nested components via `components` export option. This template automaticly registers and mounts riot components. These global **components** can in-turn can mount other nested components via `components` export option.
#### Example #### Example
@ -69,16 +68,16 @@ This template uses a static object registry to mount global **components** which
</my-page> </my-page>
``` ```
> SEE: `/src/index.js` & `/src/js/registry.js` for more information > SEE: `/src/app.js` for more information
### Tests ### Tests
In a folder-per-component setup, you can place your `*.spec.js` files right next to your web components for isolated testing, but this template is a... In a **folder-per-component** setup, you can place your `*.spec.js` files right next to your web components for isolated testing, but this template is a...
*bring your own testing solution* *bring your own testing solution*
> CHAI/MOCHA EXAMPLE: `src/components/hello-riot/hello-riot.spec.js` (unwired) > EXAMPLE: https://github.com/riot/examples/tree/gh-pages/timer
## NPM Scripts ## NPM Scripts

4
index.html
View File

@ -3,11 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/css/main.css"> <link rel="stylesheet" href="/src/css/app.css">
<title>Riot Template</title> <title>Riot Template</title>
</head> </head>
<body> <body>
<hello-riot version="v7.x"></hello-riot> <hello-riot version="v7.x"></hello-riot>
<script type="module" src="/src/index.js"></script> <script type="module" src="/src/app.js"></script>
</body> </body>
</html> </html>

1015
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -1,6 +1,7 @@
{ {
"name": "vite-riot-template", "name": "vite-riot-template",
"version": "1.1.0", "version": "2.0.0",
"type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
@ -12,6 +13,6 @@
"devDependencies": { "devDependencies": {
"@riotjs/compiler": "^6.4.2", "@riotjs/compiler": "^6.4.2",
"rollup-plugin-riot": "^6.0.0", "rollup-plugin-riot": "^6.0.0",
"vite": "^4.0.2" "vite": "^4.1.4"
} }
} }

17
src/app.js Normal file
View File

@ -0,0 +1,17 @@
// RiotJS
import * as riot from 'riot';
/**
* Recursively scan this directory for the Riot components and
* automatically register them with their "name".
*
* Eg. ./components/ExampleComponent.riot -> <example-component></example-component>
*/
Object.entries(import.meta.glob('./**/*.riot', { eager: true })).forEach(([path, definition]) => {
// component name
let name = path.split('/').pop().replace(/\.\w+$/, '');
riot.register(name, definition.default);
riot.mount(name);
});

15
src/components/hello-riot/hello-riot.riot
View File

@ -1,6 +1,6 @@
<hello-riot> <hello-riot>
<div class="splash"> <div class="splash">
<img src="/assets/images/square.svg"> <img src="/assets/images/square.svg" />
<h1>Welcome to Your Riot.js Application</h1> <h1>Welcome to Your Riot.js Application</h1>
<p> <p>
@ -11,12 +11,11 @@
<h2>Getting Started</h2> <h2>Getting Started</h2>
<p> <p>
This page is found at <br> This page is found at <br/>
<code>src/components/hello-riot/hello-riot.riot</code> <br> <code>src/components/hello-riot/hello-riot.riot</code>
and is mounted via object registry at
<code>src/index.js</code>.
<p> <p>
<em>many mounting strategies exist, this is but <strong>one</strong></em> and is auto-registered via <br/>
<code>src/app.js</code>.
</p> </p>
</p> </p>
@ -25,13 +24,13 @@
<div class="flex"> <div class="flex">
<span> <span>
<a href="https://riot.js.org/documentation/">Riot </a> <a href="https://riot.js.org/documentation/">Riot </a>
<br> <br/>
<code>{props.version}</code> <code>{props.version}</code>
</span> </span>
<em>or</em> <em>or</em>
<span> <span>
<a href="https://vitejs.dev/guide/">Vite</a> <a href="https://vitejs.dev/guide/">Vite</a>
<br> <br/>
<code>v4.x</code> <code>v4.x</code>
</span> </span>
</div> </div>

17
src/components/hello-riot/hello-riot.spec.js
View File

@ -1,17 +0,0 @@
import {component} from 'riot';
import {expect} from 'chai';
import HelloRiot from './hello-riot.riot';
describe('Hello Riot Page Unit Test', () => {
const mount = component(HelloRiot);
it('The component properties are properly rendered', () => {
const div = document.createElement('div')
const component = mount(div, {
version: 'v7.x'
});
expect(component.$('p').innerHTML).to.be.equal('v7.x');
});
});

4
src/css/main.css → src/css/app.css
View File

@ -6,6 +6,10 @@ body {
background: #222; background: #222;
} }
h1, h2, h3 {
margin: 1rem;
}
a { a {
color: #ED1 color: #ED1
} }

2
src/index.js
View File

@ -1,2 +0,0 @@
// bootstraps global components
import './js/registery.js';

30
src/js/registery.js
View File

@ -1,30 +0,0 @@
import {register, mount} from 'riot';
import HelloRiot from '../components/hello-riot/hello-riot.riot';
/**
* Register Global Components
*
* helper that registers and mounts global components
* via an object registry
*
* @param {Object} registry key:value object registry
*/
export function Register(registry = {}) {
Object.entries(registry).map(([name, component]) => {
register(name, component);
mount(name);
return {
name,
component
}
});
}
// define global components here
const registry = {
'hello-riot': HelloRiot
};
// export registered global components
export default Register(registry);