https://github.com/allnulled/importer
Import JavaScript, CSS and text easily.
https://github.com/allnulled/importer
Last synced: 7 months ago
JSON representation
Import JavaScript, CSS and text easily.
- Host: GitHub
- URL: https://github.com/allnulled/importer
- Owner: allnulled
- Created: 2024-12-20T18:00:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-21T17:25:11.000Z (over 1 year ago)
- Last Synced: 2024-12-28T12:20:18.724Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://npmjs.com/@allnulled/importer
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# importer
Import JavaScript, CSS and text easily.
## Installation
```js
npm install -s @allnulled/importer
```
## Usage
### 1) Import from HTML:
```html
```
### 2) Signature of the API:
```js
class Importer {
setTotal(n) {/*...*/}
setTimeout(ms) {/*...*/}
async scriptSrc(src) {/*...*/}
async scriptSrcModule(src) {/*...*/}
async scriptAsync(url, context = {}) {/*...*/}
async linkStylesheet(href) {/*...*/}
async text(url) {/*...*/}
async importVueComponent(partialUrl) {/*...*/}
}
```
Just note, in the case of `importVueComponent`, it is for `vue@2` only, and accepts any resource that can be appended with `.js`, `.css` and `.html`, and each of the three completed URLs serves a file.
### 3) Call methods:
```js
importer.setTotal(5);
await importer.scriptSrc("test/scriptSrc.js");
await importer.scriptSrcModule("test/scriptSrcModule.js");
await importer.linkStylesheet("test/linkStylesheet.css");
const txt = await importer.text("test/text.txt");
await importer.importVueComponent("components/dir/resource") // + (.js & .css & .html)
```
## Full-example
From the JavaScript perspective, you can use the globally injected `importer` object like so:
```js
Import_scripts: {
importer.options.trace = true; // Set trace to true to see all the calls
importer.setTotal(19); // Number of total modules that must be loaded
importer.setTimeout(2000); // Wait 2 seconds untils remove the loader
await Promise.all([
importer.scriptSrc("src/external/socket.io-client.js"),
importer.scriptSrc("src/external/vue-v2.js"),
importer.scriptSrc("src/external/basic-logger.js"),
importer.scriptSrc("src/external/ensure.js"),
importer.scriptSrc("src/external/webmarket.js"),
importer.importVueComponent("src/components/c-title/c-title"),
importer.importVueComponent("src/components/home-page/home-page"),
importer.importVueComponent("src/components/app/app"),
]);
await importer.linkStylesheet("src/external/win7.css");
await importer.scriptSrc("src/external/refresher.js");
}
```
From the Html perspective, you should better insert something like this:
```html
Loaded out of modules
```
From the Css perspective, you maybe find useful something like this:
```html
#intersitial {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: Arial;
font-size: 12px;
}
#intersitial_message {
position: absolute;
top: 0;
left: 0;
right: 0;
text-align: center;
font-size: 12px;
color: gold:
font-family: Arial;
font-size: 12px;
border: 1px solid #888;
}
#intersitial_loader {
position: relative;
font-family: Arial;
min-height: 14px;
background-color: #333;
}
#intersitial_loader_bar {
height: 100%;
min-height: 15px;
font-size: 12px;
background-color: #0F0;
width: 0%;
}
#intersitial_modules_trace {
font-family: Arial;
font-size: 12px;
border: 1px solid #888;
margin: 0;
padding: 4px;
margin-bottom: 1px;
}
```
The intersitial will be removed once all the modules are loaded.
## Custom usage
If you need, for any reason, another importer, you can simply:
```js
const importer = Importer.create({
/* Options of the API: default values */
id: "#intersitial",
id_loaded: "#intersitial_modules_loaded",
id_all: "#intersitial_modules_all",
id_trace: "#intersitial_modules_trace",
id_loader: "#intersitial_loader",
id_loader_bar: "#intersitial_loader_bar",
trace: false,
update_ui: false, // This option is only set to true on global: window.importer
update_ui_minimum_milliseconds: 1200, // Minimum milliseconds the importer
// must live before clearing the graphical counterpart
})
```
You can use the parameters to set up your own graphical counterpart.
Some of the settings are under `importer` and some under `importer.options`.
Methods that start with `$` are considered private.
To know the convenient number of modules, just see the logs in console, because they tell you each time a new module is loaded. Then hardcode the number in the code, and all fine.
To fully trace the importer, you can do:
```js
importer.options.trace = true;
```