{"id":23644431,"url":"https://github.com/allnulled/importer","last_synced_at":"2025-11-11T06:30:18.843Z","repository":{"id":269078110,"uuid":"906355517","full_name":"allnulled/importer","owner":"allnulled","description":"Import JavaScript, CSS and text easily.","archived":false,"fork":false,"pushed_at":"2024-12-21T17:25:11.000Z","size":13,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-28T12:20:18.724Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npmjs.com/@allnulled/importer","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/allnulled.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-20T18:00:51.000Z","updated_at":"2024-12-21T17:25:14.000Z","dependencies_parsed_at":"2024-12-20T19:20:04.212Z","dependency_job_id":"b51c2a7d-1343-461a-99ce-ad615e55f99f","html_url":"https://github.com/allnulled/importer","commit_stats":null,"previous_names":["allnulled/importer"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fimporter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fimporter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fimporter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allnulled%2Fimporter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allnulled","download_url":"https://codeload.github.com/allnulled/importer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239587230,"owners_count":19663892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-28T12:20:07.420Z","updated_at":"2025-11-11T06:30:18.775Z","avatar_url":"https://github.com/allnulled.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# importer\n\nImport JavaScript, CSS and text easily.\n\n## Installation\n\n```js\nnpm install -s @allnulled/importer\n```\n\n## Usage\n\n### 1) Import from HTML:\n\n```html\n\u003cscript src=\"node_modules/@allnulled/importer/importer.js\"\u003e\u003c/script\u003e\n```\n\n### 2) Signature of the API:\n\n```js\nclass Importer {\n    setTotal(n) {/*...*/}\n    setTimeout(ms) {/*...*/}\n    async scriptSrc(src) {/*...*/}\n    async scriptSrcModule(src) {/*...*/}\n    async scriptAsync(url, context = {}) {/*...*/}\n    async linkStylesheet(href) {/*...*/}\n    async text(url) {/*...*/}\n    async importVueComponent(partialUrl) {/*...*/}\n}\n```\n\nJust 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.\n\n### 3) Call methods:\n\n```js\nimporter.setTotal(5);\nawait importer.scriptSrc(\"test/scriptSrc.js\");\nawait importer.scriptSrcModule(\"test/scriptSrcModule.js\");\nawait importer.linkStylesheet(\"test/linkStylesheet.css\");\nconst txt = await importer.text(\"test/text.txt\");\nawait importer.importVueComponent(\"components/dir/resource\") // + (.js \u0026 .css \u0026 .html)\n```\n\n## Full-example\n\nFrom the JavaScript perspective, you can use the globally injected `importer` object like so:\n\n```js\nImport_scripts: {\n    importer.options.trace = true; // Set trace to true to see all the calls\n    importer.setTotal(19); // Number of total modules that must be loaded\n    importer.setTimeout(2000); // Wait 2 seconds untils remove the loader\n    await Promise.all([\n        importer.scriptSrc(\"src/external/socket.io-client.js\"),\n        importer.scriptSrc(\"src/external/vue-v2.js\"),\n        importer.scriptSrc(\"src/external/basic-logger.js\"),\n        importer.scriptSrc(\"src/external/ensure.js\"),\n        importer.scriptSrc(\"src/external/webmarket.js\"),\n        importer.importVueComponent(\"src/components/c-title/c-title\"),\n        importer.importVueComponent(\"src/components/home-page/home-page\"),\n        importer.importVueComponent(\"src/components/app/app\"),\n    ]);\n    await importer.linkStylesheet(\"src/external/win7.css\");\n    await importer.scriptSrc(\"src/external/refresher.js\");\n}\n```\n\nFrom the Html perspective, you should better insert something like this:\n\n```html\n    \u003cdiv id=\"intersitial\"\u003e\n        \u003cdiv id=\"intersitial_loader\"\u003e\n            \u003cdiv id=\"intersitial_loader_bar\"\u003e\u003c/div\u003e\n            \u003cdiv id=\"intersitial_message\"\u003e\n                \u003cspan\u003eLoaded \u003cspan id=\"intersitial_modules_loaded\"\u003e\u003c/span\u003e out of \u003cspan id=\"intersitial_modules_all\"\u003e\u003c/span\u003e modules\u003c/span\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cpre  id=\"intersitial_modules_trace\"\u003e\u003c/pre\u003e\n    \u003c/div\u003e\n```\n\nFrom the Css perspective, you maybe find useful something like this:\n\n```html\n\u003cstyle\u003e\n    #intersitial {\n        position: fixed;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        font-family: Arial;\n        font-size: 12px;\n    }\n    #intersitial_message {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        text-align: center;\n        font-size: 12px;\n        color: gold:\n        font-family: Arial;\n        font-size: 12px;\n        border: 1px solid #888;\n    }\n    #intersitial_loader {\n        position: relative;\n        font-family: Arial;\n        min-height: 14px;\n        background-color: #333;\n    }\n    #intersitial_loader_bar {\n        height: 100%;\n        min-height: 15px;\n        font-size: 12px;\n        background-color: #0F0;\n        width: 0%;\n    }\n    #intersitial_modules_trace {\n        font-family: Arial;\n        font-size: 12px;\n        border: 1px solid #888;\n        margin: 0;\n        padding: 4px;\n        margin-bottom: 1px;\n    }\n\u003c/style\u003e\n```\n\nThe intersitial will be removed once all the modules are loaded.\n\n## Custom usage\n\nIf you need, for any reason, another importer, you can simply:\n\n```js\nconst importer = Importer.create({\n    /* Options of the API: default values */\n    id: \"#intersitial\",\n    id_loaded: \"#intersitial_modules_loaded\",\n    id_all: \"#intersitial_modules_all\",\n    id_trace: \"#intersitial_modules_trace\",\n    id_loader: \"#intersitial_loader\",\n    id_loader_bar: \"#intersitial_loader_bar\",\n    trace: false,\n    update_ui: false, // This option is only set to true on global: window.importer\n    update_ui_minimum_milliseconds: 1200, // Minimum milliseconds the importer\n    // must live before clearing the graphical counterpart\n})\n```\n\nYou can use the parameters to set up your own graphical counterpart.\n\nSome of the settings are under `importer` and some under `importer.options`.\n\nMethods that start with `$` are considered private.\n\nTo 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.\n\nTo fully trace the importer, you can do:\n\n```js\nimporter.options.trace = true;\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fimporter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallnulled%2Fimporter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallnulled%2Fimporter/lists"}