add better handling for initial no plugins state

Author: blurymind

src/js/classes/storage.js

@@ -15,10 +15,12 @@ export const DBStorage = function(
       store.put({ key, value });
       return tx.complete;
     },
-    load: async function(valueKey) {
+    load: async function(valueKey, fallBackValue) {
       const tx = this.db.transaction(this.objectStoreName, 'readonly');
       const store = tx.objectStore(this.objectStoreName);
+      
       const data = await store.get(valueKey);
+      if(!data || data.value == null) return fallBackValue;
       return data && data.value;
     },
     openDatabase: function() {
@@ -28,10 +30,10 @@ export const DBStorage = function(
         },
       });
     },
-    getDbValue: function(key = this.dbName) {
+    getDbValue: function(key = this.dbName, fallBackValue) {
       return this.openDatabase().then(_db => {
         this.db = _db;
-        return this.load(key);
+        return this.load(key, fallBackValue);
       });
     },
   };

src/public/plugins/index.js

@@ -1,7 +1,78 @@
 import { Runner } from './runner';
 import { PluginEditor } from './plugin-editor';
 import { ResourcesEditor } from './resources-editor';
+export const EXAMPLE = `
+() => {
+  return {
+      // use the modules option to import modules from addresses or from the plugins gist
+    modules: [
+      // if a module is a web address, it can be included this way
+      "https://unpkg.com/[email protected]/dist/kaplay.js",
+      // this is how you can include the contents of other files from the list
+      //'kaplay-dist.js', // <-- copy of kaplay.js can also be  stored in the gist and imported like so
+      // you can host a module on the same gist
+    ],
+    // if passed, inkjs or bondagejs will be included in the output - can be ink or yarn
+    parser: 'ink',
+    // Use the script option to write your code that uses any imported modules
+    script: () => {
+      // since we imported kaplayjs in the modules option, we can now use it like this to render to the Test tab
+      const k = kaplay();
+      k.loadSprite("bean", "public/icon.png")
+      k.scene("main", () => {
+        k.add([
+          k.pos(200, 100),
+          k.sprite("bean"),
+        ]);
+        k.add([
+          k.text("ohhimark fdfg"),
+        ])
 
+      });
+      k.go("main");
+      // inkjs becomes available because we used parser: 'ink' option
+    }
+  }
+}
+`
+export const INTERNAL_EXAMPLE = `
+() => {
+  return {
+    name: 'ExamplePlugin',
+    Constructor: function( {
+      app,
+      createButton,
+      createToggle,
+      getPluginStore,
+      setPluginStore,
+      addSettingsItem,
+      onYarnLoadedData,
+      onYarnEditorOpen,
+      onYarnInPreviewMode,
+      onYarnSavedNode,
+      onYarnSetLanguage,
+      onYarnLoadedStateFromLocalStorage,
+      onYarnSavedStateToLocalStorage,
+      onYarnSetDocumentType,
+      onKeyUp,
+      onKeyDown,
+      onLoad,
+    }) {
+      const self = this;
+      this.name = 'ExamplePlugin';
+      this.onOpenPluginEditor = ()=> {
+        alert("YAY!")
+      }
+      createButton(self.name, {
+        name: 'ExamplePlugin',
+        attachTo: app.settings.developmentModeEnabled() ? 'appHeader': 'fileMenuDropdown',
+        onClick: 'onOpenPluginEditor()',
+        iconName: 'cog',
+      });
+    }
+  }
+}
+`
 const PLUGINS = [Runner, PluginEditor, ResourcesEditor];
 
 const PublicLibs = {}
@@ -230,7 +301,7 @@ export var Plugins = function (app) {
   };
 
   const dbStorage = app.data.db;
-  const getVloatilePlugins = () => dbStorage.getDbValue('volatilePlugins');
+  const getVloatilePlugins = () => dbStorage.getDbValue('volatilePlugins', { ['example.js']: {content: EXAMPLE}});
   const setVloatilePlugins = value => dbStorage.save('volatilePlugins', value);
   const setVloatilePlugin = (key, value) => {
     return getVloatilePlugins().then(prev => {
@@ -337,7 +408,7 @@ export var Plugins = function (app) {
   const getExtensionScriptData = (fileContents) => {
     try {
       const extension = new Function("parameters", `return ${fileContents}`);//();
-      //console.log({isFunction: typeof extension === 'function', fileContents})
+      //console.log({isFunction: typeof extension === 'function', fileContents})   
       if (typeof extension === 'function') {
         const data = extension();
         if (data) {

src/public/plugins/plugin-editor.js

@@ -1,5 +1,6 @@
 import AceDiff from './ace-diff/ace-diff.min.js';
 import 'ace-builds/webpack-resolver'; // needed for the webworker to work  (syntax highlighting)
+import { EXAMPLE, INTERNAL_EXAMPLE } from './';
 
 const addEsVersionToEditor = editor => {
   editor.session.$worker.send("setOptions", [{
@@ -21,70 +22,6 @@ const removeStyleSheet = (path, root = document) => {
   if (el) root.getElementById(path).remove()
 }
 
-const EXAMPLE = `
-() => {
-  return {
-    modules: [
-      // if a module is a web address, it can be included this way
-      "https://unpkg.com/[email protected]/dist/kaplay.js",
-      // you can host a module on the same gist
-      // "test-local-module.js",
-    ],
-    script: () => {
-      const k = kaplay();
-      k.loadSprite("bean", "public/icon.png")
-      k.scene("main", () => {
-        k.add([
-          k.pos(200, 100),
-          k.sprite("bean"),
-        ]);
-        k.add([
-          k.text("yarr"),
-        ])
-      });
-      k.go("main");
-    }
-  }
-}
-`
-const INTERNAL_EXAMPLE = `
-() => {
-  return {
-    name: 'ExamplePlugin',
-    Constructor: function( {
-      app,
-      createButton,
-      createToggle,
-      getPluginStore,
-      setPluginStore,
-      addSettingsItem,
-      onYarnLoadedData,
-      onYarnEditorOpen,
-      onYarnInPreviewMode,
-      onYarnSavedNode,
-      onYarnSetLanguage,
-      onYarnLoadedStateFromLocalStorage,
-      onYarnSavedStateToLocalStorage,
-      onYarnSetDocumentType,
-      onKeyUp,
-      onKeyDown,
-      onLoad,
-    }) {
-      const self = this;
-      this.name = 'ExamplePlugin';
-      this.onOpenPluginEditor = ()=> {
-        alert("YAY!")
-      }
-      createButton(self.name, {
-        name: 'ExamplePlugin',
-        attachTo: app.settings.developmentModeEnabled() ? 'appHeader': 'fileMenuDropdown',
-        onClick: 'onOpenPluginEditor()',
-        iconName: 'cog',
-      });
-    }
-  }
-}
-`
 
 const getExampleOutputFunction = (error = "") => `
 <head>