diff --git a/README.md b/README.md index c2f08d4..fdda178 100644 --- a/README.md +++ b/README.md @@ -35,20 +35,13 @@ src/ <-- your source code public/ <-- unprocessed static `/` assets components/ <-- riots components hello-riot.riot <-- example riot component - app.js <-- app initialization + main.js <-- main app initialization index.html <-- START HERE vite.config.js <-- build configuration README.md ... <-- 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 run dev` - Starts the development server at port 5173 diff --git a/index.html b/index.html index 8755b86..56e2e98 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,12 @@ - + Riot Template - - + + + \ No newline at end of file diff --git a/src/app.js b/src/app.js deleted file mode 100644 index 7563e92..0000000 --- a/src/app.js +++ /dev/null @@ -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 -> - */ -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); -}); \ No newline at end of file diff --git a/src/components/app.riot b/src/components/app.riot new file mode 100644 index 0000000..4e96acd --- /dev/null +++ b/src/components/app.riot @@ -0,0 +1,15 @@ + +
+ +
+ + + \ No newline at end of file diff --git a/src/components/hello-riot.riot b/src/components/hello-riot.riot index 7cde341..1ee55de 100644 --- a/src/components/hello-riot.riot +++ b/src/components/hello-riot.riot @@ -31,7 +31,7 @@ Vite
- v4.x + v5.x diff --git a/src/css/app.css b/src/css/main.css similarity index 100% rename from src/css/app.css rename to src/css/main.css diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..7c4a456 --- /dev/null +++ b/src/main.js @@ -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(); diff --git a/vite.config.js b/vite.config.js index 8c6eba7..3372c72 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,6 +2,8 @@ import { defineConfig } from "vite"; import riot from 'rollup-plugin-riot'; export default defineConfig({ + input: "src/components", + output: "dist/bundle.js", plugins: [riot()], publicDir: 'src/public' });