Fix TypeScript import issues (#286)

* TS fixes

* Hide files in VSCode

* gitignore embedded as well

* Add embedded files to node package

Author: lemonmade

.gitignore

@@ -7,7 +7,7 @@ node_modules
 /styles.css
 /styles.scss
 /styles
-/embedded.js
+/embedded.*
 /sandbox
 .DS_Store
 *.scss.d.ts

.vscode/settings.json

@@ -14,7 +14,7 @@
     "styles/": true,
     "types/": true,
     "index.*": true,
-    "embedded.js": true,
+    "embedded.*": true,
     "styles.{css,scss}": true
   },
   "search.exclude": {
@@ -25,7 +25,7 @@
     "styles/": true,
     "types/": true,
     "index.*": true,
-    "embedded.js": true,
+    "embedded.*": true,
     "styles.{css,scss}": true
   }
 }

package.json

@@ -45,7 +45,6 @@
     "postpublish": "in-publish && npm-run-all cdn show-private-readme || :"
   },
   "devDependencies": {
-    "@shopify/images": "^1.0.0",
     "@shopify/js-uploader": "git+ssh://[email protected]/Shopify/js-uploader.git",
     "@types/enzyme": "^2.7.7",
     "@types/jest": "^19.2.2",
@@ -110,9 +109,12 @@
     "index.js",
     "index.es.js",
     "styles.css",
-    "styles.scss"
+    "styles.scss",
+    "embedded.js",
+    "embedded.d.ts"
   ],
   "dependencies": {
+    "@shopify/images": "^1.0.0",
     "@shopify/javascript-utilities": "^1.1.2",
     "@shopify/react-utilities": "^1.1.4",
     "@types/lodash": "^4.14.62",

scripts/build.js

@@ -18,6 +18,8 @@ execSync(`./node_modules/.bin/tsc --outDir ${intermediateBuild}`, {
   stdio: 'inherit',
 });
 
+writeFileSync(resolvePath(root, 'embedded.d.ts'), "export * from './types/embedded';\n");
+
 writeFileSync(resolvePath(intermediateBuild, '.babelrc'), `
   {
     "presets": [

tests/build.test.js

@@ -2,52 +2,51 @@ const execSync = require('child_process').execSync;
 const fs = require('fs-extra');
 
 describe('build', () => {
-  it('generates CDN files in ./build', () => {
+  beforeEach(() => {
     execSync('yarn run build');
+  });
+
+  afterEach(() => {
+    execSync('yarn run clean');
+  });
+
+  it('generates CDN files in ./build', () => {
     expect(fs.existsSync('./build/polaris.css')).toBe(true);
     expect(fs.existsSync('./build/polaris.min.css')).toBe(true);
-    execSync('yarn run clean');
   });
 
   it('generates lib files in ./', () => {
-    execSync('yarn run build');
     expect(fs.existsSync('./index.js')).toBe(true);
     expect(fs.existsSync('./embedded.js')).toBe(true);
     expect(fs.existsSync('./index.es.js')).toBe(true);
     expect(fs.existsSync('./styles.css')).toBe(true);
-    execSync('yarn run clean');
   });
 
   it('generates a ./styles/components dir with Icon.scss', () => {
-    execSync('yarn run build');
     expect(fs.existsSync('./styles/components/Icon.scss')).toBe(true);
-    execSync('yarn run clean');
   });
 
   it('generates a ./styles/foundation dir with spacing.scss', () => {
-    execSync('yarn run build');
     expect(fs.existsSync('./styles/foundation/spacing.scss')).toBe(true);
-    execSync('yarn run clean');
   });
 
   it('generates sass entries files in ./styles dir', () => {
-    execSync('yarn run build');
     expect(fs.existsSync('./styles/global.scss')).toBe(true);
     expect(fs.existsSync('./styles/foundation.scss')).toBe(true);
     expect(fs.existsSync('./styles/shared.scss')).toBe(true);
     expect(fs.existsSync('./styles/components.scss')).toBe(true);
-    execSync('yarn run clean');
   });
 
   it('generates a ./styles.scss sass entry point in root', () => {
-    execSync('yarn run build');
     expect(fs.existsSync('./styles.scss')).toBe(true);
-    execSync('yarn run clean');
   });
 
   it('generates a zip of ./build/sass', () => {
-    execSync('yarn run build');
     expect(fs.existsSync('./build/sass.zip')).toBe(true);
-    execSync('yarn run clean');
+  });
+
+  it('generates the necessary typescript definition files', () => {
+    expect(fs.existsSync('./types/index.d.ts')).toBe(true);
+    expect(fs.existsSync('./embedded.d.ts')).toBe(true);
   });
 });