Skip to content

Commit 5a7f316

Browse files
michaelpbmichaelpb
committed
Improved local loading testing
1 parent dd59d5b commit 5a7f316

File tree

5 files changed

+116
-9
lines changed

5 files changed

+116
-9
lines changed

‎README.mdp

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
!DOCTYPE_MODULO(`
2+
3+
![](www-src/img/mono_logo_percent_only.png)
4+
5+
# Modulo
6+
7+
Modulo is a lightweight framework for creating **HTML Web Components**: Reusable
8+
snippets of HTML, CSS, and JavaScript that create new HTML-like tags that can
9+
be used and reused anywhere on your site. Modulo runs entirely in the browser,
10+
and can be incorporated with just a couple lines of code into any HTML file
11+
(see the "Quick start"), such that **no terminal usage is necessary**. However,
12+
if you prefer, you can also start projects using NPM from the Terminal (see the
13+
"NPM start").
14+
15+
- Beginner-friendly features inspired by React, Svelte, and Vue.js, in only
16+
2000 lines of dependency-free, self-building JavaScript. A “no fuss” drop-in
17+
for existing web apps or Jamstack static sites.
18+
19+
- Try interactive demos and learn more on the website: <https://modulojs.org/>
20+
21+
Project Status: \`alpha\` *(Well-documented with lots of examples, but still a
22+
work in progress -- help by trying it out!)*
23+
24+
-----
25+
26+
## Quick start
27+
28+
29+
1. Include in any HTML file the single Modulo JavaScript file loaded from a CDN:
30+
31+
\`\`\`html
32+
<script src="https://unpkg.com/mdu.js"></script>
33+
\`\`\`
34+
35+
36+
2. Now define one or more Modulo web components (custom HTML elements). First,
37+
use \`<template Modulo>\` and \`</template>\` to mark where in your HTML you are
38+
defining our components. Then, add "Template", "Script", and "Style" tags, to
39+
incorporate HTML, JavaScript, and CSS respectively into your component. E.g.:
40+
41+
\`\`\`html
42+
<template Modulo>
43+
<Component name="HelloWorld">
44+
<Template>
45+
Hello <strong>Modulo</strong> World!
46+
</Template>
47+
<Script>
48+
console.log('Hello Modulo JS world!');
49+
</Script>
50+
<Style>
51+
strong { color: purple; }
52+
</Style>
53+
</Component>
54+
</template>
55+
<script src="https://unpkg.com/mdu.js"></script>
56+
\`\`\`
57+
58+
3. Now, you can use and reuse this new custom element wherever you want, just
59+
like any normal HTML tag. E.g.:
60+
61+
\`\`\`html
62+
<x-HelloWorld></x-HelloWorld>
63+
<p>In a P tag: <x-HelloWorld></x-HelloWorld></p>
64+
\`\`\`
65+
66+
67+
* *(Optional)* Download [src/Modulo.js](https://unpkg.com/mdu.js)
68+
(the single 2000-line file that contains all of the framework) to wherever
69+
you put JS files for your website (for example, \`/static/js/Modulo.js\`)
70+
71+
72+
* **Continue?** Want to try more? The official beginner tutorial picks up where
73+
this leaves off:
74+
[Ramping Up with Modulo - Part 1](https://modulojs.org/tutorial/ramping-up/part1.html)
75+
76+
77+
## NPM start
78+
79+
Prefer command-line tools, such as NPM? Run the following, and follow the
80+
on-screen commands:
81+
82+
\`\`\`bash
83+
npm init modulo
84+
\`\`\`
85+
86+
87+
-----
88+
89+
## License
90+
91+
(C) 2023 - Michael Bethencourt [LGPLv3](https://unpkg.com/mdu.js)
92+
93+
`)

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<script Modulo src="./src/Modulo.js">
3+
<Component name="Readme">
4+
<StaticData -data-type="txt" -src="./README.mdp"></StaticData>
5+
<Script -src="https://unpkg.com/snarkdown">
6+
function renderCallback() {
7+
component.innerHTML = component.originalHTML || '';
8+
component.innerHTML += snarkdown(staticdata);
9+
}
10+
</Script>
11+
</Component>
12+
</script>
13+
<x-Readme></x-Readme>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "mdu.js",
33
"author": "michaelb",
4-
"version": "0.0.71",
4+
"version": "0.0.72",
55
"description": "Lightweight, easy-to-learn Web Component JavaScript framework",
66
"homepage": "https://modulojs.org/",
77
"main": "./src/Modulo.js",

‎src/Modulo.js

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Copyright 2024 MichaelB | https://modulojs.org | Modulo v0.0.71 | LGPLv3
1+
// Copyright 2024 MichaelB | https://modulojs.org | Modulo v0.0.72 | LGPLv3
22
// Modulo LGPLv3 NOTICE: Any direct modifications to the Modulo.js source code
33
// must be LGPL or compatible. It is acceptable to distribute dissimilarly
44
// licensed code built with the Modulo framework bundled in the same file for
@@ -910,11 +910,9 @@ modulo.register('core', class FetchQueue {
910910
resolve(this.data[src], src); // (sync route)
911911
} else if (!(src in this.queue)) { // No cache, no queue
912912
this.queue[src] = [ resolve ]; // First time, create the queue Array
913-
const { force, filePadding } = this.modulo.config.fetchqueue;
914-
if (filePadding && (src.startsWith('file:/') || force === 'file')) {
915-
const { prefix, callbackName } = filePadding; // JSONP callback
916-
const auto = this.modulo.registry.utils.stripWord(prefix);
917-
window[callbackName || auto] = str => { this.__data = str };
913+
const { force, callbackName } = this.modulo.config.fetchqueue;
914+
if ((!force && src.startsWith('file:/')) || force === 'file') {
915+
window[callbackName] = str => { this.__data = str };
918916
const elem = window.document.createElement('SCRIPT');
919917
elem.onload = () => this.receiveData(this.__data, src);
920918
elem.src = src + (src.endsWith('/') ? 'index.html' : '');
@@ -956,7 +954,10 @@ modulo.register('core', class FetchQueue {
956954
const check = () => ((++count >= allQueues.length) ? callback() : 0);
957955
allQueues.forEach(queue => queue.push(check)); // Add to every queue
958956
}
959-
}, { filePadding: { prefix: '!DOCTYPE_MODULO(`', suffix: '`)' } });
957+
}, {
958+
callbackName: 'DOCTYPE_MODULO',
959+
filePadding: { prefix: '!DOCTYPE_MODULO(`', suffix: '`)' },
960+
});
960961

961962
modulo.register('cpart', class Props {
962963
initializedCallback(renderObj) {

‎tests/multi-file-tests/loading_src.test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
-src="/demos/tests/multi-file-tests/loading_src_4.json"
3232
></StaticData>
3333

34-
<TestSuite solo>
34+
<TestSuite>
3535
<Test name="Test StaticData and Template loaded">
3636
<Script name="static data loaded">
3737
const actual = JSON.stringify(staticdata);

0 commit comments

Comments
 (0)