P5.js boilerplate addition

package.json

@@ -61,7 +61,7 @@
     "eslint-plugin-html": "^3.2.0",
     "gh-pages": "^1.0.0",
     "less": "^2.7.3",
-    "offline-plugin": "^4.8.3",
+    "offline-plugin": "^5.0.7",
     "poi": "^9.6.7",
     "poi-preset-babel-minify": "^1.0.3",
     "poi-preset-bundle-report": "^2.0.1",
@@ -101,6 +101,7 @@
     "vue-inline": "^1.0.1",
     "vue-router": "^2.7.0",
     "vue-slim-modal": "^1.0.4",
-    "vuex": "^2.3.1"
+    "vuex": "^2.3.1",
+    "webpack": "^3.11.0"
   }
 }

src/boilerplates/p5/codepan.html

@@ -0,0 +1 @@
+<script type="text/javascript" src="https://p5js.org/assets/js/p5.min.js"></script>

src/boilerplates/p5/codepan.js

@@ -0,0 +1,10 @@
+const W = H = 400;
+function setup() {
+  createCanvas(W, H);
+  background(0);
+}
+function draw() {
+  const middle = W/2;
+  const diameter = 10;
+  circle(middle,middle,diameter);
+}

src/boilerplates/p5/index.js

@@ -0,0 +1,18 @@
+export default async () => {
+  const [htmlCode, jsCode] = await Promise.all([
+    import('!raw-loader!./codepan.html'),
+    import('!raw-loader!./codepan.js')
+  ])
+
+  return {
+    html: {
+      code: htmlCode,
+      transformer: 'html'
+    },
+    js: {
+      code: jsCode,
+      transformer: 'babel'
+    },
+    showPans: ['js', 'output']
+  }
+}

src/components/HomeHeader.vue

@@ -22,6 +22,7 @@
           <el-dropdown-item command="es-import">ES import</el-dropdown-item>
           <el-dropdown-item command="rust">Rust</el-dropdown-item>
           <el-dropdown-item command="pixi">Pixi</el-dropdown-item>
+          <el-dropdown-item command="p5">P5.js</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-button

src/views/EditorPage.vue

@@ -34,9 +34,6 @@
       <output-pan class="pan" v-show="isVisible('output')" />
     </div>
 
-    <div ref="codefund">
-      <div class="codefund-placeholder">Loading CodeFund...</div>
-    </div>
   </div>
 </template>