set up webpack, semantic, p5, and vscode preLaunchTask

Author: lanly-dev

.eslintignore

@@ -0,0 +1 @@
+src/bundle.js

.vscode/launch.json

@@ -10,6 +10,7 @@
 			"type": "extensionHost",
 			"request": "launch",
 			"runtimeExecutable": "${execPath}",
+			"preLaunchTask": "webpack",
 			"args": [
 				"--extensionDevelopmentPath=${workspaceFolder}"
 			]

.vscode/tasks.json

@@ -0,0 +1,16 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=733558
+    // for the documentation about the tasks.json format
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "webpack",
+            "type": "shell",
+            "command": "bash -c 'npx webpack --config webpack.config.js'",
+            "group": "build",
+            "presentation": {
+                "reveal": "always"
+            }
+        }
+    ]
+}

jsconfig.json

@@ -8,6 +8,7 @@
 		]
 	},
 	"exclude": [
-		"node_modules"
+		"node_modules",
+		"src/bundle.js"
 	]
 }

package.json

@@ -37,15 +37,19 @@
     "test": "node ./node_modules/vscode/bin/test"
   },
   "devDependencies": {
+    "@types/mocha": "^2.2.42",
+    "@types/node": "^8.10.25",
+    "eslint": "^4.11.0",
     "typescript": "^3.1.4",
     "vscode": "^1.1.25",
-    "eslint": "^4.11.0",
-    "@types/node": "^8.10.25",
-    "@types/mocha": "^2.2.42"
+    "webpack-cli": "^3.2.3"
   },
   "dependencies": {
+    "jquery": "^3.3.1",
     "p5": "^0.7.3",
     "pug": "^2.0.3",
-    "vue": "^2.6.2"
+    "semantic-ui-css": "^2.4.1",
+    "vue": "^2.6.2",
+    "webpack": "^4.29.3"
   }
 }

src/bundle.js

@@ -3,7 +3,9 @@ const vscode = require('vscode')
 const tv = require('./treeview')
 const pug = require('pug')
 const path = require('path')
-const p5_path = require.resolve('p5')
+const jquery_path = require.resolve('jquery')
+const semjs_path = require.resolve('semantic-ui-css')
+let semcss_path = require.resolve('semantic-ui-css/semantic.min.css');
 
 // const p5 = require('p5')
 /**
@@ -29,14 +31,17 @@ 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'))]
   })
-  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'})
+  const sk_uri = (vscode.Uri.file(path.join(context.extensionPath, 'src', 'bundle.js'))).with({scheme: 'vscode-resource'})
+  const semjs_uri = (vscode.Uri.file(semjs_path)).with({scheme: 'vscode-resource'})
+  const semcss_uri = (vscode.Uri.file(semcss_path)).with({scheme: 'vscode-resource'})
+  const jquery_uri = (vscode.Uri.file(jquery_path)).with({scheme: 'vscode-resource'})
   wv.webview.html = compiledFunction({
-    p5_uri: p5_uri,
     sk_uri: sk_uri,
-    vue_uri: vue_template_uri, 
+    semjs_uri: semjs_uri,
+    semcss_uri: semcss_uri,
+    vue_uri: vue_template_uri,
+    jquery_uri: jquery_uri, 
     nonce: '123'
   })
 }

src/extension.js

@@ -2,16 +2,46 @@ html
   head
     title VueJs Instance
     meta(charset='UTF-8')
-    meta(http-equiv='Content-Security-Policy', content=`default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}';`)
+    meta(http-equiv='Content-Security-Policy', content=`default-src 'none'; img-src vscode-resource: https:; script-src 'nonce-${nonce}'; style-src 'nonce-${nonce}';`)
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
+    script(nonce=`${nonce}`, src=`${jquery_uri}`)
+    script(nonce=`${nonce}`, src=`${semjs_uri}`)
+    link(nonce=`${nonce}`, rel='stylesheet', type="text/css", href=`${semcss_uri}`)
 
   body
     h1 Firstname : #{firstname}
     h1 Lastname : #{lastname}
     .sketch
+    h3 #{semcss_uri}
+
+
+    
+    button.ui.secondary.button Okay
+    button.ui.button Cancel
+    .ui.inverted.segment
+      button.ui.inverted.button Standard
+      button.ui.inverted.primary.button Primary
+      button.ui.inverted.secondary.button Secondary
+      button.ui.inverted.red.button Red
+      button.ui.inverted.orange.button Orange
+      button.ui.inverted.yellow.button Yellow
+      button.ui.inverted.olive.button Olive
+      button.ui.inverted.green.button Green
+      button.ui.inverted.teal.button Teal
+      button.ui.inverted.blue.button Blue
+      button.ui.inverted.violet.button Violet
+      button.ui.inverted.purple.button Purple
+      button.ui.inverted.pink.button Pink
+      button.ui.inverted.brown.button Brown
+      button.ui.inverted.grey.button Grey
+      button.ui.inverted.black.button Black
+
+
 
   script(nonce=`${nonce}`, src=`${vue_uri}`)
-  script(nonce=`${nonce}`, src=`${p5_uri}`)
+  //- script(nonce=`${nonce}`, src=`${p5_uri}`)
   script(nonce=`${nonce}`, src=`${sk_uri}`)
+
+
   script(nonce=`${nonce}`).
       console.log('#{p5_uri}')

src/index.pug

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

src/sketch.js

@@ -0,0 +1,8 @@
+const path = require('path')
+module.exports = {
+    entry: "./src/sketch.js",
+    output: {
+      filename: "bundle.js",
+      path: path.resolve(__dirname, 'src')
+    }
+  }