clientside-require - npm Package Compare versions

Comparing version 4.3.0 to 4.4.0

package.json

 {
   "name": "clientside-require",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "Node.js style require() statements in the browser. Load npm modules, js, html, css, json without any bundling.",
@@ -36,8 +36,10 @@ "main": "src/index.js",
   "devDependencies": {
-    "browserify": "^16.1.1",
-    "jsdom": "^11.6.2",
-    "mocha": "^5.1.1",
+    "browserify": "^16.2.2",
+    "jsdom": "^11.11.0",
+    "mocha": "^5.2.0",
     "xmlhttprequest": "^1.8.0"
   },
-  "dependencies": {}
+  "dependencies": {
+    "dynamic-serial-promise-all": "^1.1.0"
+  }
 }

readme.md

@@ -14,3 +14,4 @@ # Clientside Require
 <script>
-    load(module_name__OR__abs_path__OR__rel_path) // WOW!
+    var promise_request = load("clientside-request") // loads the `clientside-request` npm package
+    var promise_utility = load("/path/to/utility.js") // loads a custom js script without poluting global scope
 </script>
@@ -21,2 +22,5 @@ ```
 
+For example, `/path/to/utility.js` can contain `require('relevant-npm-module')`, `require('./another_utility.js')`, or `require('./configuration.json')`.
+
+
 ## Benefits
@@ -33,5 +37,4 @@ 1. `npm` modules in the browser (i.e., reusability!)
 4. all imported content (load and require) is stored in the same cache and is only loaded once
-    - speedy
 
-## `load()`? What about `require()`?
+#### `load()`? What about `require()`?
 
@@ -44,35 +47,2 @@ Short Version: `require()` is available to `load()`'ed scripts.
 
-
-## Usage Overview
-
-This package enables utilizing `npm` for clientside development. The node modules you `npm install` all the time can be utilized out of the box:
-
-```js
-load("qs") // asynchronously load a node module by module name; module was installed with `npm install qs`
-    .then((qs)=>{
-        var query_string = qs.stringify({foo:bar}); // foo=bar
-    })
-```
-
-In addition, you can load your own js functionality into the browser without polluting the  global scope:
-```js
-load("./util.js") // require a js file with a relative path
-    .then((exports)=>{
-        exports.awesome_functionality(); // where `exports` is defined by `model.exports` in `util.js`
-    })
-```
-
-Last but not least, with this `import()` function we can import any file type  (e.g., `js`, `json`, `html`, `css`, `txt`, etc):
-
-```js
-load("/path/to/html/file.html") // require a html file with an absolute path
-    .then((html)=>{
-        console.log(html)
-    })
-```
-
-
---------------------
-
-
 # Usage
@@ -98,12 +68,19 @@
 
-### Examples
+# Examples
 
-We will assume for all of these examples that the `clientside-require` has already been loaded into the global scope.
+### Loading NPM Modules
+This package enables utilizing `npm` for clientside development. The node modules you `npm install` all the time can be utilized out of the box:
 
-#### load an npm package
+```js
+load("qs") // asynchronously load a node module by module name; module was installed with `npm install qs`
+    .then((qs)=>{
+        var query_string = qs.stringify({foo:bar}); // foo=bar
+    })
+```
 
-*``<script>`` inside of index.html*
+or
+
+
 ```js
-var promise_color_name = load("color-name");
-promise_color_name
+load("color-name")
     .then((color_name)=>{
@@ -114,14 +91,41 @@ console.log(color_name.blue); // outputs  [0, 0, 255]
 
-*directory structure*
+### Loading JS files
+In addition, you can load your own JS content into the browser without polluting the global scope:
+```js
+load("./util.js") // require a js file with a relative path
+    .then((exports)=>{
+        exports.awesome_functionality(); // where `exports` is defined by `model.exports` in `util.js`
+    })
 ```
-node_modules/
-    clientside-require/
-    color-name/
-index.html
+
+### Loading static content
+Further we can import any file type  (e.g., `js`, `json`, `html`, `css`, `txt`, etc):
+
+```js
+load("/path/to/config.json") // get contents of a json file file with an absolute path
+    .then((html)=>{
+        console.log(html)
+    })
 ```
 
-*Note, npm modules made for the clientside specifically are optimized for browser loading and usage! [See this for more info.](#async)*
+### Utilizing `require()` in JS scripts
+If we load a JS script with `load()`, we can use `require()` statements (in addition to `load()` statements) in the script. This allows us to write functionality just as we would on the serverside with node.js:
 
+`random_name_generator.js`:
+```js
+var list_of_names = require("./list_of_names.json");
+var random_selector = require("./random_selector.js");
+var random_name = random_selector.select(list_of_names);
+module.exports = random_name;
+```
 
-#### load a login_signup module and display login mode
+`index.html`:
+```js
+load("/path/to/random_name_generator.js")
+    .then((random_name)=>{
+        console.log(random_name)
+    })
+```
+
+### Creating a view element with [`clientside-view-loader`](https://github.com/uladkasach/clientside-view-loader)
 *This uses the [clientside-view-modal-login_signup](https://github.com/uladkasach/clientside-view-modal-login_signup) npm package. **Use the repo as an example for how you can create your own view module!***
@@ -133,11 +137,8 @@ ```sh
 load("clientside-view-loader")
-    .then((view)=>{
-        return view.load("clientside-view-modal-login_signup").generate();
+    .then(view=>view.load("clientside-view-modal-login_signup").generate())
+    .then((dom)=>{
+        document.body.appendChild(dom); // append the dom to the document body
+        dom.show("login"); // display the login view
     })
-    .then((modal)=>{
-        document.body.appendChild(modal);
-        modal.show("login");
-    })
 ```
-
 generates a fully functional one of these:
@@ -148,3 +149,2 @@
 
---------------------
 
@@ -154,5 +154,5 @@
 
-## Technical Overview
+# Technical Overview
 
-#### `load()` -vs- `require()`
+### load() -vs- require()
 
@@ -165,13 +165,7 @@ Browsers do not permit dynamic synchronous loading as it as it ruins user experience. The only way to dynamically load a file into a web page requires asynchronous operations. The `load` method loads content in this way and returns a promise that resolves with the requested content.
 
-#### caching requests
+### caching requests
 All `require`'ed modules are cached to eliminate duplicate requests. The `require` function is injected into loaded scripts (e.g., module scripts) so that the cache is maintained in every file and module loaded.
 
 
---------------------
 
-
-
-## Fundamental Functionality : `load(request)`
-
-
 ### Paths
@@ -191,3 +185,3 @@
 
-#### absolute path
+##### absolute path
 Absolute paths operate exactly as one would expect. A request to retrieve the file will be sent directly to that path.
@@ -200,3 +194,3 @@ ```js
 
-#### relative path
+##### relative path
 Relative paths operate exactly like you would expect, too! The `require()` function utilizes the `clientside-require` to keep track of the `path` to each file its loaded in.
@@ -219,3 +213,3 @@
 
-#### node_module name
+##### node_module name
 
@@ -240,5 +234,5 @@ The `require(request)` function will assume any `request` that does not start with "/" and has no file extension is a `node_module` name. It will:
 
-## Configuration
+# Configuration
 
-#### node_modules
+### node_modules
 
@@ -270,3 +264,3 @@
 
-## Restrictions
+### Restrictions
 
@@ -276,5 +270,4 @@ #### scope
 
---------------------
 
-## Example Native Packages
+# Example Native Packages
 npm packages written for the browser utilizing `clientside-require`:
@@ -284,8 +277,1 @@ - [clientside-view-loader](https://github.com/uladkasach/clientside-view-loader)
 - [clientside-request](https://github.com/uladkasach/clientside-request) - mimics the npm `request` package for the browser
-
-
-## Pre-Caching
-
-Comming soon.
-
-This will enable creation of a script you can serve to the browser which will preinitialize the `require()` cache (e.g., load any set of modules and js files on page load)

src/index.js

@@ -33,2 +33,11 @@ /*
     /*
+        define the `promise_all` property, enabling users to determine when all `load`ing has completed
+            - this is useful for contexts such as server side rendering
+    */
+    promise_manager : new (require('dynamic-serial-promise-all'))(),
+    get promise_all(){
+        return this.promise_manager.promise_all;
+    },
+
+    /*
         asynchronous_require - the main method used
@@ -48,2 +57,3 @@ - returns a promise which resolves with the requested content
             var promise_content = this.retreiver.promise_to_retreive_content(module_or_path, this.modules_root, options);
+            this.promise_manager.wait_for(promise_content); // ensure promise_manager waits for each `load` promise when determining all is loaded
             this.cache.set(cache_path, promise_content)
@@ -50,0 +60,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

116600

increased by0.65%

Lines of code

1363

increased by0.66%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of lines in readme file

261

decreased by-5.09%

Dependency changes

• + Addeddynamic-serial-promise-all@^1.1.0

• + Addeddynamic-serial-promise-all@1.1.0(transitive)