Merge pull request #126 from team-reactype/development

Development

Author: ChristianEdwardPadilla

src/utils/createApplication.util.ts

@@ -44,10 +44,9 @@ function createIndexHtml(path, appName) {
 export const createIndexTsx = (path, appName) => {
   const filePath = `${path}/${appName}/src/index.tsx`;
   const data = `
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import App from './components/App.tsx';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
 
 ReactDOM.render(<App />, document.getElementById('root'));
   `;
@@ -71,7 +70,7 @@ export const createPackage = (path, appName) => {
   "scripts": {
     "start": "node server/server.js",
     "build": "cross-env NODE_ENV=production webpack",
-    "dev": "nodemon server/server.js & cross-env NODE_ENV=development webpack-dev-server --open"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server"
   },
   "nodemonConfig": {
     "ignore": [
@@ -148,9 +147,6 @@ module.exports = {
   mode: status,
   devServer: {
     publicPath: '/build/',
-    // proxy: {
-    //   '/testDev': 'http://localhost:3000',
-    // },
   },
 
   module: {
@@ -207,7 +203,8 @@ export const createTsConfig = (path, appName) => {
     "noImplicitAny": true,
     "module": "commonjs",
     "target": "es6",
-    "jsx": "react"
+    "jsx": "react",
+    "allowSyntheticDefaultImports": true
   },
   "include": ["./src/**/*"]
 }
@@ -271,9 +268,9 @@ app.get('/', (req, res) => {
   res.sendFile(path.join(__dirname, '../index.html'));
 });
 
-app.listen(3000, () => {
-  console.log('listening on port 3000');
-}); //listens on port 3000 -> http://localhost:3000/
+app.listen(8080, () => {
+  console.log('listening on port 8080');
+}); //listens on port 8080 -> http://localhost:8080/
 `;
   fs.writeFile(filePath, data, err => {
     if (err) {

src/utils/htmlElements.util.ts

@@ -18,32 +18,32 @@ const HTMLelements: htmlElementsInt = {
   Image: {
     width: 100,
     height: 100,
-    attributes: ["ClassName", "id", "Src"]
+    attributes: ['className', 'id', 'src']
   },
   Button: {
     width: 75,
     height: 28,
-    attributes: ["ClassName", "id", "Text"]
+    attributes: ['className', 'id', 'text']
   },
   Form: {
     width: 150,
     height: 150,
-    attributes: ["ClassName", "id", "Text"]
+    attributes: ['className', 'id', 'text']
   },
   Paragraph: {
     width: 250,
     height: 75,
-    attributes: ["ClassName", "id", "Text"]
+    attributes: ['className', 'id', 'text']
   },
   List: {
     width: 75,
     height: 75,
-    attributes: ["ClassName", "id", "Text"]
+    attributes: ['className', 'id', 'text']
   },
   Link: {
     width: 50,
     height: 50,
-    attributes: ["ClassName", "id", "Text"]
+    attributes: ['className', 'id', 'text']
   }
 };
 

tsconfig.json

@@ -6,12 +6,10 @@
     "module": "commonjs",
     "target": "es6",
     "jsx": "react",
-    "lib": ["es6", "dom", "es2017"]
+    "lib": ["es6", "dom", "es2017"],
     // "strict": true,
     // "alwaysStrict": true
-    //these two options are recommended but don't work, maybe an issue with awesome-typsecript-loader vs babel
-    // "esModuleInterop": true
-    // "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true
   },
   "include": ["./src/**/*"]
 }