{"_id":"@allnulled/importer","_rev":"3-a5ac6abb5ee151cd1982c2dda23bfc1e","name":"@allnulled/importer","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@allnulled/importer","version":"1.0.0","keywords":["module","web","async","import","require"],"author":{"name":"allnulled"},"license":"WTFPL","_id":"@allnulled/importer@1.0.0","maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"dist":{"shasum":"fdc73352281e813cae30575200d4d88798cbe673","tarball":"https://registry.npmjs.org/@allnulled/importer/-/importer-1.0.0.tgz","fileCount":8,"integrity":"sha512-bI9Kfzmptrc2DLBhTADA9oiYnlBWtpDXMNAA8rndo8nACqMPkvGQF1mWPZYs92aRPfzjzlryZ39rEU/0CAm0gA==","signatures":[{"sig":"MEYCIQDybvRXUJ7z4igL7q+2jvZBFRdBP2039tmBgIbUYwXEKAIhAOrSe3Y7QB7Y/Uwo+shhzdwOCZxUiFZ06hlXshXqr4Qr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4237},"main":"importer.js","gitHead":"1c7124a5a1bf17439bf7bfc8fb9d2d4f719a04fd","scripts":{"test":"npx http-server -c-1 . -o"},"_npmUser":{"name":"allnulled","email":"todosanulados@gmail.com"},"_npmVersion":"9.6.7","description":"Import JavaScript, CSS and text easily.","directories":{},"_nodeVersion":"18.17.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/importer_1.0.0_1734717702278_0.3529896161249908","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@allnulled/importer","version":"1.0.1","keywords":["module","web","async","import","require"],"author":{"name":"allnulled"},"license":"WTFPL","_id":"@allnulled/importer@1.0.1","maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"dist":{"shasum":"0a984536349a6718965dcb8c669b2b9697e6aaea","tarball":"https://registry.npmjs.org/@allnulled/importer/-/importer-1.0.1.tgz","fileCount":8,"integrity":"sha512-t/TGum1+RclcM6o46lLPdUvEDryEXHVc3U7pa5pzqbx9sXWV5dUYD7DUIACV99yn0LzFCNY/vlt7ifgeH84LSw==","signatures":[{"sig":"MEUCIFpNYKkAbbNibm/NODvV/I/znwoc7ovRpcF2ACe2z4ayAiEA/+UifFBJq0pLvVgsGuIKGR4G1M2CcFi5Ehc4MQKaJqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4274},"main":"importer.js","gitHead":"05dd05ae621e5d8674e1102e08e05c1e157ee817","scripts":{"test":"npx http-server -c-1 . -o"},"_npmUser":{"name":"allnulled","email":"todosanulados@gmail.com"},"_npmVersion":"9.6.7","description":"Import JavaScript, CSS and text easily.","directories":{},"_nodeVersion":"18.17.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/importer_1.0.1_1734717812623_0.3767540558410356","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@allnulled/importer","version":"1.0.2","keywords":["module","web","async","import","require"],"author":{"name":"allnulled"},"license":"WTFPL","_id":"@allnulled/importer@1.0.2","maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"dist":{"shasum":"9aa2dc12940c781a0f3e56aba50e5ace980881bd","tarball":"https://registry.npmjs.org/@allnulled/importer/-/importer-1.0.2.tgz","fileCount":9,"integrity":"sha512-WQtYR2lhFdCNziseu9ejy14Uu1a3yKUz492jMs2xNdx7i+46saT2eu5agdWhRmCiir9jK/BQxjC0aRY0WcIuew==","signatures":[{"sig":"MEYCIQDC+/LsD1GP56ZSNf6fjWVwQFrVkgtKlG/CP7pB/AOg4gIhAPng3bygFiyhRCCPLKs+Y8i4vwdrVm/LDLhoHeuALUcC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12979},"main":"importer.js","gitHead":"6215cd3e4b3d17cd201480f223522b2f2e4b1395","scripts":{"test":"npx http-server -c-1 . -o"},"_npmUser":{"name":"allnulled","email":"todosanulados@gmail.com"},"_npmVersion":"9.6.7","description":"Import JavaScript, CSS and text easily.","directories":{},"_nodeVersion":"18.17.1","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/importer_1.0.2_1734776535595_0.7625671312569373","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@allnulled/importer","version":"1.0.3","description":"Import JavaScript, CSS and text easily.","main":"importer.js","scripts":{"test":"npx http-server -c-1 . -o"},"keywords":["module","web","async","import","require"],"author":{"name":"allnulled"},"license":"WTFPL","gitHead":"e68a8fd5efd5a00b8c843a9896e929ab3497a9f7","_id":"@allnulled/importer@1.0.3","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-KT+CbLGeF3o3DpyEpij+yG0b7B5chLXerxW0TyabmkJtI0UWDKdGaeztN91Z5XjgE1s3VN/5AQWaNB6Jaf9hag==","shasum":"8965044bc48285fd3cade18e25eff0c9ef816d30","tarball":"https://registry.npmjs.org/@allnulled/importer/-/importer-1.0.3.tgz","fileCount":9,"unpackedSize":18596,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCODx4UFbxp81EDKQHeIzLS1X2upfbDWQg6PuJZb38kAAIgGZ6LaTj4PNTpinVJEfZLrUeOL5rklCR55iJsjUNpZ1w="}]},"_npmUser":{"name":"allnulled","email":"todosanulados@gmail.com"},"directories":{},"maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/importer_1.0.3_1734784777470_0.19559990538258565"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-20T18:01:42.161Z","modified":"2024-12-21T12:39:37.883Z","1.0.0":"2024-12-20T18:01:42.479Z","1.0.1":"2024-12-20T18:03:32.826Z","1.0.2":"2024-12-21T10:22:15.840Z","1.0.3":"2024-12-21T12:39:37.700Z"},"author":{"name":"allnulled"},"license":"WTFPL","keywords":["module","web","async","import","require"],"description":"Import JavaScript, CSS and text easily.","maintainers":[{"name":"allnulled","email":"todosanulados@gmail.com"}],"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<script src=\"node_modules/@allnulled/importer/importer.js\"></script>\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 & .css & .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    <div id=\"intersitial\">\n        <div id=\"intersitial_loader\">\n            <div id=\"intersitial_loader_bar\"></div>\n            <div id=\"intersitial_message\">\n                <span>Loaded <span id=\"intersitial_modules_loaded\"></span> out of <span id=\"intersitial_modules_all\"></span> modules</span>\n            </div>\n        </div>\n        <pre  id=\"intersitial_modules_trace\"></pre>\n    </div>\n```\n\nFrom the Css perspective, you maybe find useful something like this:\n\n```html\n<style>\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</style>\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```","readmeFilename":"README.md"}