init with p5js canvas

Author: lanly-dev

.gitignore

@@ -2,4 +2,5 @@
 *.mp3
 *.vsix
 media
-node_modules
+node_modules
+package-lock.json

src/extension.js

@@ -3,6 +3,7 @@ const vscode = require('vscode')
 const tv = require('./treeview')
 const pug = require('pug')
 const path = require('path')
+const p5_path = require.resolve('p5')
 
 // const p5 = require('p5')
 /**
@@ -28,10 +29,16 @@ function activate(context) {
     // And restric the webview to only loading content from our extension's `media` directory.
     // localResourceRoots: [vscode.Uri.file(path.join(extensionPath, 'media'))]
   })
-
-  const scriptPathOnDisk = vscode.Uri.file(path.join(context.extensionPath, 'src', 'vue_template.js'));
-  const scriptUri = scriptPathOnDisk.with({scheme: 'vscode-resource'})
-  wv.webview.html = compiledFunction({uri: scriptUri, nonce: '123'})
+  console.log(p5_path)
+  const vue_template_uri = (vscode.Uri.file(path.join(context.extensionPath, 'src', 'vue_template.js'))).with({scheme: 'vscode-resource'})
+  const sk_uri = (vscode.Uri.file(path.join(context.extensionPath, 'src', 'sketch.js'))).with({scheme: 'vscode-resource'})
+  const p5_uri = (vscode.Uri.file(p5_path)).with({scheme: 'vscode-resource'})
+  wv.webview.html = compiledFunction({
+    p5_uri: p5_uri,
+    sk_uri: sk_uri,
+    vue_uri: vue_template_uri, 
+    nonce: '123'
+  })
 }
 exports.activate = activate
 

src/index.pug

@@ -6,8 +6,12 @@ html
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
 
   body
-      h1 Firstname : #{firstname}
-      h1 Lastname : #{lastname}
-  script(nonce=`${nonce}`, src=`${uri}`)
+    h1 Firstname : #{firstname}
+    h1 Lastname : #{lastname}
+    .sketch
+
+  script(nonce=`${nonce}`, src=`${vue_uri}`)
+  script(nonce=`${nonce}`, src=`${p5_uri}`)
+  script(nonce=`${nonce}`, src=`${sk_uri}`)
   script(nonce=`${nonce}`).
-      console.log("#{uri}")
+      console.log('#{p5_uri}')

src/sketch.js

@@ -0,0 +1,8 @@
+let sketch = function(p) {
+    p.setup = function(){
+      p.createCanvas(100, 100);
+      p.background(255);
+    }
+  };
+new p5(sketch, 'sketch');
+console.log('sketch here')