Merge pull request #365 from nudibranchrecords/feature/globals-intell…

…isense

Feature/globals intellisense

.gitignore

@@ -2,4 +2,5 @@
 *.log
 node_modules
 dist
-config/dev.config.js
+config/dev.config.js
+static/globalVars

config/webpack.custom.config.js

@@ -1,3 +1,22 @@
+const path = require('path')
+const CopyPlugin = require('copy-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+// Should mirror electron/renderer/globalVars.js
+const globalDepNames = [
+  'three',
+  'postprocessing',
+  'glslify',
+  '@tweenjs/tween.js',
+]
+
+const staticGlobalVarsPath = path.join(process.cwd(), 'static/globalVars')
+
+const copyPatterns = globalDepNames.map(name => ({
+  from: `node_modules/${name}/**/*`,
+  to: staticGlobalVarsPath,
+}))
+
 const config = {
   module: {
     rules: [
@@ -7,6 +26,20 @@ const config = {
       },
     ],
   },
+  plugins: [
+    // Clear out static/globalVars for each build
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [`${staticGlobalVarsPath}/**/*`],
+    }),
+    // Copy global dependency files to be included externally in the build
+    new CopyPlugin([
+      {
+        from: 'src/electron/renderer/globalVars.js',
+        to: `${staticGlobalVarsPath}/index.js`,
+      },
+      ...copyPatterns,
+    ]),
+  ],
 }
 
 module.exports = config

docs/dev/index.md

@@ -99,7 +99,7 @@ module.exports = {
 ```
 
 ## index.js
-This is the main file for the sketch. Essentially, it's a Javascript class, with some important properties and methods. You can `require` other modules from here, so don't feel restricted to a single file. However, you should use the Hedron global version of `THREE` and not import this yourself (`window.HEDRON.dependencies`), see below.
+This is the main file for the sketch. Essentially, it's a Javascript class, with some important properties and methods. You can `require` other modules from here, so don't feel restricted to a single file. However, you should use the Hedron global version of `THREE` and not import this yourself (`window.HEDRON.dependencies`), [see below](#global-hedron-variable).
 
 ### Properties
 
@@ -139,6 +139,8 @@ Hedron provides a single global variable with some useful libraries to make use
   - `postprocessing` - The post [processing library](https://github.com/vanruesc/postprocessing) Hedron uses
   - `glslify` - [Module system for GLSL](https://github.com/glslify/glslify)
 
+Using this variable means that VS Code Intellisense won't work by default. [See below](#setting-up-vs-code-intellisense) on how to fix this.
+
 ### Very basic example
 This is the minimum you need to do in order to use Hedron.
 
@@ -330,6 +332,44 @@ This refresh will remove the sketch from the scene, import any new params or sho
 
 **Please note: File change detection may not work with all text editors. (e.g. Atom on OSX is reported to be inconsistent).**
 
+## Setting up VS Code Intellisense
+Using the `HEDRON` global variable is recommended, but it does come back with a drawback by default. VS Code Intellisense (e.g. autocomplete, paramater info) won't work with these libraries. To remedy this, Hedron exposes these dependencies, which means they can be imported with the right config files. In the root of your project folder, you'll need `jsconfig.json` and `globals.d.ts`. Below is information on these, examples can also be found in the `example-projects` directory.
+
+#### jsconfig.json
+```json
+{
+  "compilerOptions": {},
+  "exclude": ["node_modules", "**/node_modules/*"]
+}
+```
+This file does not need to be edited and can be uses as above.
+
+#### globals.d.ts
+```typescript
+import { dependencies } from 'path/to/hedron/src/electron/renderer/globalVars' 
+
+export as namespace HEDRON;
+
+export { dependencies }
+```
+The import path in this file will need updating, depending on your operating system and if you are using a compiled version of Hedron or the source code. Below are some examples (which you may still need to edit to your needs).
+
+Installed (Windows):
+```
+  C:/Users/alex/AppData/Local/Programs/Hedron/resources/static/globalVars
+```
+
+Installed (OSX):
+```
+  /Applications/Hedron.app/Contents/Resources/static/globalVars
+```
+
+From source:
+```
+  /path/to/hedron/src/electron/renderer/globalVars
+```
+
+
 ## Hedron dev config
 
 You can get extra functionality by adding `dev.config.js` to `/config` (from the root directory of the Hedron repo).

example-projects/globals.d.ts

@@ -0,0 +1,24 @@
+/*
+  Include this file in the root of your project, along with jsconfig.json,
+  to get VS Code intellisense hints on the packages that hedron exposes with the HEDRON global var.
+
+  You will need to update the import path, please see the docs for details.
+
+  Example import paths:
+
+  Installed (Windows)
+  C:/Users/alex/AppData/Local/Programs/Hedron/resources/static/globalVars
+
+  Installed (OSX)
+  /Applications/Hedron.app/Contents/Resources/static/globalVars
+
+  From source
+  /path/to/hedron/src/electron/renderer/globalVars
+*/
+
+// This local path only works for example projects inside of the hedron folder
+import { dependencies } from '../src/electron/renderer/globalVars' 
+
+export as namespace HEDRON;
+
+export { dependencies }

example-projects/jsconfig.json

@@ -0,0 +1,4 @@
+{
+  "compilerOptions": {},
+  "exclude": ["node_modules", "**/node_modules/*"]
+}