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

This commit is contained in:
Geoff Doty 2024-07-29 21:31:16 -04:00
parent 929a8c55e5
commit d883f8d6b7
8 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@ -35,20 +35,13 @@ src/ <-- your source code
public/ <-- unprocessed static `/` assets public/ <-- unprocessed static `/` assets
components/ <-- riots components components/ <-- riots components
hello-riot.riot <-- example riot component hello-riot.riot <-- example riot component
app.js <-- app initialization main.js <-- main app initialization
index.html <-- START HERE index.html <-- START HERE
vite.config.js <-- build configuration vite.config.js <-- build configuration
README.md README.md
... <-- misc project meta files ... <-- misc project meta files
``` ```
### Automatic Tag Registeration
Any `.riot` components under the `src/` directory are automatically registered, like `components/`. You can add, rename, restructure the folders as you like.
> SEE: `/src/app.js` for more information
## NPM Scripts ## NPM Scripts
- `npm run dev` - Starts the development server at port 5173 - `npm run dev` - Starts the development server at port 5173

7
index.html
View File

@ -3,11 +3,12 @@
<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/app.css"> <link rel="stylesheet" href="/src/css/main.css">
<title>Riot Template</title> <title>Riot Template</title>
</head> </head>
<body> <body>
<hello-riot version="v7.x"></hello-riot> <app></app>
<script type="module" src="/src/app.js"></script>
<script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

17
src/app.js
View File

@ -1,17 +0,0 @@
// 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/app.riot Normal file
View File

@ -0,0 +1,15 @@
<app>
<div>
<hello-riot version="v9.x"></hello-riot>
</div>
<script>
import helloRiot from "./hello-riot.riot";
export default {
components: {
helloRiot
}
}
</script>
</app>

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

@ -31,7 +31,7 @@
<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>v5.x</code>
</span> </span>
</div> </div>

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

21
src/main.js Normal file
View File

@ -0,0 +1,21 @@
import * as riot from "riot";
import app from "./components/app.riot";
const main = {
init() {
// start-up actions here
// mount components
this.mount();
},
mount() {
// register core app component
riot.register("app", app);
// mount main app
riot.mount("app");
}
}
main.init();

2
vite.config.js
View File

@ -2,6 +2,8 @@ import { defineConfig } from "vite";
import riot from 'rollup-plugin-riot'; import riot from 'rollup-plugin-riot';
export default defineConfig({ export default defineConfig({
input: "src/components",
output: "dist/bundle.js",
plugins: [riot()], plugins: [riot()],
publicDir: 'src/public' publicDir: 'src/public'
}); });