Fix/gh 82 bundle size (#92)

Fix/gh 82 bundle size

.vscode/settings.json

@@ -7,6 +7,7 @@
     "outro",
     "precache",
     "projectz",
+    "realtime",
     "rtdb",
     "schema",
     "sourcemap"
@@ -20,4 +21,4 @@
     "statusBarItem.hoverBackground": "#ed463f",
     "statusBar.foreground": "#e7e7e7"
   }
-}
+}

README.md

@@ -4,7 +4,6 @@
 
 <!-- /TITLE -->
 
-
 <!-- BADGES/ -->
 
 <span class="badge-badge"><a href="https://lernajs.io/" title="Maintained by Lerna"><img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Lerna" /></a></span>
@@ -17,7 +16,6 @@
 
 <!-- /BADGES -->
 
-
 ![logo](https://raw.githubusercontent.com/flamelink/flamelink/master/docs/_assets/icon.svg?sanitize=true)
 
 > Easily integrate with your Flamelink CMS.
@@ -26,13 +24,12 @@
 
 <!-- DESCRIPTION/ -->
 
-This SDK is intended for use in a browser or Node.js environment. 
+This SDK is intended for use in a browser or Node.js environment.
 
 If you are unfamiliar with Flamelink, please visit our [flamelink.io](https://www.flamelink.io/) website for more info on features, pricing and more.
 
 <!-- /DESCRIPTION -->
 
-
 ## Prerequisites
 
 It goes without saying that you will need to have a [Flamelink](https://www.flamelink.io) project for this SDK to be of any use to you.
@@ -97,46 +94,33 @@ This will always load the latest version of this SDK for you. If you want to loa
 
 First ensure that you load the `firebase` SDK and then the main `flamelink` app package along with any of the modules you want to you in your project.
 
+> The examples below shows you how to quickly get started. Take a look at the [Advanced Installation](https://flamelink.github.io/flamelink-js-sdk/#/getting-started?id=advanced-installation) instructions to import only what you need.
+
 In a CommonJS environment:
 
 ```javascript
-var flamelink = require('flamelink/app')
-require('flamelink/settings')
-require('flamelink/content')
-require('flamelink/storage')
-require('flamelink/navigation')
-require('flamelink/users')
+var flamelink = require('flamelink')
 ```
 
 or using ES Modules:
 
 ```javascript
-import flamelink from 'flamelink/app'
-import 'flamelink/settings'
-import 'flamelink/content'
-import 'flamelink/storage'
-import 'flamelink/navigation'
-import 'flamelink/users'
+import flamelink from 'flamelink'
 ```
 
 or using TypeScript:
 
 ```javascript
-import * as flamelink from 'flamelink/app'
-import 'flamelink/settings'
-import 'flamelink/content'
-import 'flamelink/storage'
-import 'flamelink/navigation'
-import 'flamelink/users'
+import * as flamelink from 'flamelink'
 ```
 
 ### Creating your Flamelink app instance
 
 Create your `flamelink` app instance by passing in an existing `firebaseApp` instance along with any other `flamelink` config options:
 
 ```javascript
-import * as firebase from 'firebase' // This imports everything - just as an example
-import flamelink from 'flamelink' // This imports everything - just as an example - it is better to import only what you need
+import * as firebase from 'firebase'
+import flamelink from 'flamelink'
 
 const firebaseConfig = {
   apiKey: '<your-api-key>',
@@ -204,7 +188,6 @@ As easy as that. Read our [docs](https://flamelink.github.io/flamelink-js-sdk) f
 
 <!-- /HISTORY -->
 
-
 <!-- BACKERS/ -->
 
 <h2>Backers</h2>
@@ -219,19 +202,14 @@ These amazing people are maintaining this project:
 
 No sponsors yet! Will you be the first?
 
-
-
 <h3>Contributors</h3>
 
 These amazing people have contributed code to this project:
 
 <ul><li><a href="http://jperasmus.me">JP Erasmus</a> — <a href="https://github.com/flamelink/flamelink-js-sdk/commits?author=jperasmus" title="View the GitHub contributions of JP Erasmus on repository flamelink/flamelink-js-sdk">view contributions</a></li></ul>
 
-
-
 <!-- /BACKERS -->
 
-
 <!-- LICENSE/ -->
 
 <h2>License</h2>

docs/getting-started.md

@@ -177,4 +177,141 @@ app.content.get({ schemaKey: 'products' })
 
 Check out the [API docs](/api-overview) for all the available methods!
 
+## Advanced Installation
+
+For the bundle-size-minded developers out there, this JavaScript SDK is split out into very small sub-modules that you can import to ensure the smallest possible bundle size.
+
+You essentially have 3 options to import and use this SDK:
+
+1. **Import everything** - all modules for both Cloud Firestore and the Realtime DB
+2. **Import specific modules** - only the Flamelink modules you need for both CF & RTDB
+3. **Import DB specific modules** - only the Flamelink modules for your specific DB
+
+!> All of these installation options still require Firebase to be imported first
+
+### Import Everything
+
+This is the simplest way to quickly get started with Flamelink.
+
+#### JavaScript imports
+
+```javascript
+import flamelink from 'flamelink'
+```
+
+#### TypeScript imports
+
+```javascript
+import * as flamelink from 'flamelink'
+```
+
+#### UMD/Script imports
+
+```javascript
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink.js"></script>
+```
+
+### Import Specific Modules
+
+This will import only the Flamelink modules that you plan to use.
+
+#### JavaScript imports
+
+```javascript
+import flamelink from 'flamelink/app'
+// The following are all optional depending on your use case
+import 'flamelink/content'
+import 'flamelink/navigation'
+import 'flamelink/storage'
+import 'flamelink/settings'
+import 'flamelink/users'
+```
+
+#### TypeScript imports
+
+```javascript
+import * as flamelink from 'flamelink/app'
+// The following are all optional depending on your use case
+import 'flamelink/content'
+import 'flamelink/navigation'
+import 'flamelink/storage'
+import 'flamelink/settings'
+import 'flamelink/users'
+```
+
+#### UMD/Script imports
+
+```javascript
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-app.js"></script>
+// The following are all optional depending on your use case
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-content.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-navigation.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-storage.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-settings.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-users.js"></script>
+```
+
+### Import DB Specific Modules
+
+This will produce the absolute smallest bundle sizes.
+
+!> It is very important that the imports match the `dbType` you specify when initializing the Flamelink app instance.
+
+> `cf`: Cloud Firestore
+> `rtdb`: Realtime Database
+
+#### JavaScript imports
+
+```javascript
+import flamelink from 'flamelink/app'
+// The following are all optional depending on your use case
+// (import either rtdb or cf, not both)
+import 'flamelink/cf/content'
+import 'flamelink/rtdb/content'
+import 'flamelink/cf/navigation'
+import 'flamelink/rtdb/navigation'
+import 'flamelink/cf/storage'
+import 'flamelink/rtdb/storage'
+import 'flamelink/cf/settings'
+import 'flamelink/rtdb/settings'
+import 'flamelink/cf/users'
+import 'flamelink/rtdb/users'
+```
+
+#### TypeScript imports
+
+```javascript
+import * as flamelink from 'flamelink/app'
+// The following are all optional depending on your use case
+// (import either rtdb or cf, not both)
+import 'flamelink/cf/content'
+import 'flamelink/rtdb/content'
+import 'flamelink/cf/navigation'
+import 'flamelink/rtdb/navigation'
+import 'flamelink/cf/storage'
+import 'flamelink/rtdb/storage'
+import 'flamelink/cf/settings'
+import 'flamelink/rtdb/settings'
+import 'flamelink/cf/users'
+import 'flamelink/rtdb/users'
+```
+
+#### UMD/Script imports
+
+```javascript
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-app.js"></script>
+// The following are all optional depending on your use case
+// (import either rtdb or cf, not both)
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-content-cf.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-content-rtdb.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-navigation-cf.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-navigation-rtdb.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-storage-cf.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-storage-rtdb.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-settings-cf.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-settings-rtdb.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-users-cf.js"></script>
+<script src="//cdn.jsdelivr.net/npm/flamelink@next/flamelink-users-rtdb.js"></script>
+```
+
 > 🔥🔥🔥 **PSST. Your coding skills... So hot right now.** 🔥🔥🔥

packages/app/src/index.ts

@@ -18,12 +18,16 @@ const createFlamelinkFactory: App.FactoryCreator = () => {
 
   const initRegisteredModules = (context: App.Context): void => {
     registeredModules.forEach(({ moduleName, setupModule }) => {
+      const moduleApi = setupModule(context)
+
+      if (!moduleApi) return
+
       if (context.modules[moduleName]) {
         return logWarning(`Duplicate import for the "${moduleName}" module`)
       }
 
       Object.defineProperty(context.modules, moduleName, {
-        value: setupModule(context),
+        value: moduleApi,
         writable: false
       })
     })

packages/navigation/README.md → packages/content-cf/README.md

@@ -1,5 +1,5 @@
-# @flamelink/sdk-navigation
+# @flamelink/sdk-content-cf
 
-This is the navigation module for the Flamelink JavaScript SDK.
+This is the Cloud Firestore content module for the Flamelink JavaScript SDK.
 
 > This package should only be used via the official [flamelink](https://www.npmjs.com/package/flamelink) package.

packages/content/package.json → packages/content-cf/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "@flamelink/sdk-content",
+  "name": "@flamelink/sdk-content-cf",
   "version": "1.0.0-alpha.22",
   "publishConfig": {
     "access": "public"
   },
-  "description": "Content module for Flamelink JavaScript SDK",
+  "description": "Content module for Flamelink JavaScript SDK - Cloud Firestore",
   "keywords": [
     "flamelink",
     "sdk",
@@ -28,7 +28,7 @@
     "@flamelink/sdk-app": "^1.0.0-alpha.22",
     "@flamelink/sdk-app-types": "^1.0.0-alpha.22",
     "@flamelink/sdk-content-types": "^1.0.0-alpha.22",
-    "@flamelink/sdk-schemas": "^1.0.0-alpha.22",
+    "@flamelink/sdk-schemas-cf": "^1.0.0-alpha.22",
     "@flamelink/sdk-utils": "^1.0.0-alpha.21"
   },
   "scripts": {

packages/content/src/cf/__tests__/index.test.ts → packages/content-cf/src/__tests__/index.test.ts

@@ -4,8 +4,8 @@ import * as Content from '@flamelink/sdk-content-types'
 import {
   initializeFirestoreProject,
   getBaseContext
-} from '../../../../../tools/testing/firebase'
-import getAPI from '../index'
+} from '../../../../tools/testing/firebase'
+import { factory as getAPI } from '../index'
 
 let firebaseApp: FirebaseApp
 let context: Context

packages/content-cf/src/constants.ts

@@ -0,0 +1 @@
+export const BATCH_WRITE_LIMIT = 500

packages/content/src/cf/index.ts → packages/content-cf/src/index.ts

@@ -5,6 +5,7 @@ import chunk from 'lodash/chunk'
 import castArray from 'lodash/castArray'
 import compose from 'compose-then'
 import flamelink from '@flamelink/sdk-app'
+import * as App from '@flamelink/sdk-app-types'
 import { FlamelinkFactory, Api, CF } from '@flamelink/sdk-content-types'
 import { Schema, SchemaField, SchemaFields } from '@flamelink/sdk-schemas-types'
 import {
@@ -17,12 +18,13 @@ import {
   getCurrentUser,
   populateEntriesForCF
 } from '@flamelink/sdk-utils'
-import { CF_BATCH_WRITE_LIMIT } from '../constants'
+import { BATCH_WRITE_LIMIT } from './constants'
+import '@flamelink/sdk-schemas-cf'
 
 const CONTENT_COLLECTION = 'fl_content'
 const SCHEMAS_COLLECTION = 'fl_schemas'
 
-const factory: FlamelinkFactory = context => {
+export const factory: FlamelinkFactory = context => {
   const api: Api = {
     ref(ref, options) {
       const firestoreService = flamelink._ensureService('firestore', context)
@@ -332,7 +334,7 @@ const factory: FlamelinkFactory = context => {
         return
       }
 
-      const contentDocChunks: any[] = chunk(snapshot.docs, CF_BATCH_WRITE_LIMIT)
+      const contentDocChunks: any[] = chunk(snapshot.docs, BATCH_WRITE_LIMIT)
       const db = flamelink._ensureService('firestore', context)
 
       const batchQueue = createQueue(async (contentDocChunk: any[]) => {
@@ -350,4 +352,12 @@ const factory: FlamelinkFactory = context => {
   return api
 }
 
-export default factory
+export const register: App.SetupModule = (context: App.Context) => {
+  if (context.dbType === 'cf') {
+    return factory(context)
+  }
+
+  return null
+}
+
+flamelink._registerModule('content', register)

packages/content-rtdb/README.md

@@ -0,0 +1,5 @@
+# @flamelink/sdk-content-rtdb
+
+This is the Realtime Database content module for the Flamelink JavaScript SDK.
+
+> This package should only be used via the official [flamelink](https://www.npmjs.com/package/flamelink) package.