commit 672e09abb54fa30c84783b67955657f56e23512b Author: Primakov Alexandr Date: Sat Feb 8 13:37:13 2020 +0300 init diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..948df60 Binary files /dev/null and b/.DS_Store differ diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..9cf9495 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +package-lock=false \ No newline at end of file diff --git a/exampleApp/example.js b/exampleApp/example.js new file mode 100644 index 0000000..a2438dd --- /dev/null +++ b/exampleApp/example.js @@ -0,0 +1,161 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("react"), require("react-dom")); + else if(typeof define === 'function' && define.amd) + define(["react", "react-dom"], factory); + else { + var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]); + for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; + } +})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 1); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./src/example/main.tsx": +/*!******************************!*\ + !*** ./src/example/main.tsx ***! + \******************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var react_1 = __importDefault(__webpack_require__(/*! react */ "react")); +var react_dom_1 = __importDefault(__webpack_require__(/*! react-dom */ "react-dom")); +exports.default = (function () { return (react_1.default.createElement("div", null, "\u041D\u0430\u0448\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u04351")); }); +exports.mount = function (component) { + react_dom_1.default.render(component, document.getElementById('app')); +}; +exports.unmount = function () { + react_dom_1.default.unmountComponentAtNode(document.getElementById('app')); +}; + + +/***/ }), + +/***/ 1: +/*!************************************!*\ + !*** multi ./src/example/main.tsx ***! + \************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__(/*! ./src/example/main.tsx */"./src/example/main.tsx"); + + +/***/ }), + +/***/ "react": +/*!************************!*\ + !*** external "react" ***! + \************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_react__; + +/***/ }), + +/***/ "react-dom": +/*!****************************!*\ + !*** external "react-dom" ***! + \****************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__; + +/***/ }) + +/******/ }); +}); +//# sourceMappingURL=example.js.map \ No newline at end of file diff --git a/exampleApp/example.js.map b/exampleApp/example.js.map new file mode 100644 index 0000000..c58312c --- /dev/null +++ b/exampleApp/example.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap","webpack:///./src/example/main.tsx","webpack:///external \"react\"","webpack:///external \"react-dom\""],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;AClFA,yEAA0B;AAC1B,qFAAiC;AAEjC,mBAAe,cAAM,QAAC,oIAA2B,CAAC,EAA7B,CAA6B,EAAC;AAEtC,aAAK,GAAG,UAAC,SAAS;IAC3B,mBAAQ,CAAC,MAAM,CACX,SAAS,EACT,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CACjC,CAAC;AACN,CAAC;AAGY,eAAO,GAAG;IACnB,mBAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACfD,mD;;;;;;;;;;;ACAA,uD","file":"example.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"), require(\"react-dom\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\", \"react-dom\"], factory);\n\telse {\n\t\tvar a = typeof exports === 'object' ? factory(require(\"react\"), require(\"react-dom\")) : factory(root[\"react\"], root[\"react-dom\"]);\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 1);\n","import React from 'react';\nimport ReactDom from 'react-dom';\n\nexport default () => (
Наше приложение1
);\n\nexport const mount = (component) => {\n ReactDom.render(\n component,\n document.getElementById('app')\n );\n}\n\n\nexport const unmount = () => {\n ReactDom.unmountComponentAtNode(document.getElementById('app'))\n}\n\n\n\n\n","module.exports = __WEBPACK_EXTERNAL_MODULE_react__;","module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;"],"sourceRoot":""} \ No newline at end of file diff --git a/exampleApp/example2.js b/exampleApp/example2.js new file mode 100644 index 0000000..1180eea --- /dev/null +++ b/exampleApp/example2.js @@ -0,0 +1,161 @@ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("react"), require("react-dom")); + else if(typeof define === 'function' && define.amd) + define(["react", "react-dom"], factory); + else { + var a = typeof exports === 'object' ? factory(require("react"), require("react-dom")) : factory(root["react"], root["react-dom"]); + for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i]; + } +})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); +/******/ } +/******/ }; +/******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; +/******/ +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 2); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ "./src/example2/main.tsx": +/*!*******************************!*\ + !*** ./src/example2/main.tsx ***! + \*******************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +var react_1 = __importDefault(__webpack_require__(/*! react */ "react")); +var react_dom_1 = __importDefault(__webpack_require__(/*! react-dom */ "react-dom")); +exports.default = (function () { return (react_1.default.createElement("div", null, "\u041D\u0430\u0448\u0435 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u04352")); }); +exports.mount = function (component) { + react_dom_1.default.render(component, document.getElementById('app')); +}; +exports.unmount = function () { + react_dom_1.default.unmountComponentAtNode(document.getElementById('app')); +}; + + +/***/ }), + +/***/ 2: +/*!*************************************!*\ + !*** multi ./src/example2/main.tsx ***! + \*************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +module.exports = __webpack_require__(/*! ./src/example2/main.tsx */"./src/example2/main.tsx"); + + +/***/ }), + +/***/ "react": +/*!************************!*\ + !*** external "react" ***! + \************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_react__; + +/***/ }), + +/***/ "react-dom": +/*!****************************!*\ + !*** external "react-dom" ***! + \****************************/ +/*! no static exports found */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__; + +/***/ }) + +/******/ }); +}); +//# sourceMappingURL=example2.js.map \ No newline at end of file diff --git a/exampleApp/example2.js.map b/exampleApp/example2.js.map new file mode 100644 index 0000000..b41bda0 --- /dev/null +++ b/exampleApp/example2.js.map @@ -0,0 +1 @@ +{"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///webpack/bootstrap","webpack:///./src/example2/main.tsx","webpack:///external \"react\"","webpack:///external \"react-dom\""],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;QCVA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;;QAEA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;;;QAGA;QACA;;QAEA;QACA;;QAEA;QACA;QACA;QACA,0CAA0C,gCAAgC;QAC1E;QACA;;QAEA;QACA;QACA;QACA,wDAAwD,kBAAkB;QAC1E;QACA,iDAAiD,cAAc;QAC/D;;QAEA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA,yCAAyC,iCAAiC;QAC1E,gHAAgH,mBAAmB,EAAE;QACrI;QACA;;QAEA;QACA;QACA;QACA,2BAA2B,0BAA0B,EAAE;QACvD,iCAAiC,eAAe;QAChD;QACA;QACA;;QAEA;QACA,sDAAsD,+DAA+D;;QAErH;QACA;;;QAGA;QACA;;;;;;;;;;;;;;;;;;AClFA,yEAA0B;AAC1B,qFAAiC;AAEjC,mBAAe,cAAM,QAAC,oIAA2B,CAAC,EAA7B,CAA6B,EAAC;AAEtC,aAAK,GAAG,UAAC,SAAS;IAC3B,mBAAQ,CAAC,MAAM,CACX,SAAS,EACT,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CACjC,CAAC;AACN,CAAC;AAGY,eAAO,GAAG;IACnB,mBAAQ,CAAC,sBAAsB,CAAC,QAAQ,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AACnE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;ACfD,mD;;;;;;;;;;;ACAA,uD","file":"example2.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"react\"), require(\"react-dom\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"react\", \"react-dom\"], factory);\n\telse {\n\t\tvar a = typeof exports === 'object' ? factory(require(\"react\"), require(\"react-dom\")) : factory(root[\"react\"], root[\"react-dom\"]);\n\t\tfor(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];\n\t}\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 2);\n","import React from 'react';\nimport ReactDom from 'react-dom';\n\nexport default () => (
Наше приложение2
);\n\nexport const mount = (component) => {\n ReactDom.render(\n component,\n document.getElementById('app')\n );\n}\n\n\nexport const unmount = () => {\n ReactDom.unmountComponentAtNode(document.getElementById('app'))\n}\n\n\n\n\n","module.exports = __WEBPACK_EXTERNAL_MODULE_react__;","module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;"],"sourceRoot":""} \ No newline at end of file diff --git a/nodemon.json b/nodemon.json new file mode 100644 index 0000000..ece24dc --- /dev/null +++ b/nodemon.json @@ -0,0 +1,3 @@ +{ + "watch": ["stubs/"] + } \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..dd50ad4 --- /dev/null +++ b/package.json @@ -0,0 +1,43 @@ +{ + "name": "@uds/bootstrap", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "nodemon ./stubs/server.js", + "build": "webpack --mode development", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "innoavvlasov@gmail.com", + "license": "MIT", + "devDependencies": { + "@types/node": "13.7.0", + "@types/react": "16.9.19", + "@types/react-dom": "16.9.5", + "@types/react-redux": "7.1.7", + "@types/systemjs": "6.1.0", + "awesome-typescript-loader": "5.2.1", + "clean-webpack-plugin": "3.0.0", + "copy-webpack-plugin": "5.1.1", + "es6-promise": "4.2.8", + "exports-loader": "0.7.0", + "express": "4.17.1", + "fbjs": "1.0.0", + "file-loader": "5.0.2", + "history": "4.10.1", + "imports-loader": "0.8.0", + "redux-devtools-extension": "2.13.8", + "rimraf": "3.0.1", + "systemjs": "6.2.2", + "typescript": "3.7.5", + "webpack": "4.41.5", + "webpack-cli": "3.3.10", + "webpack-dev-middleware": "3.7.2", + "webpack-hot-client": "4.1.2", + "whatwg-fetch": "3.0.0" + }, + "dependencies": { + "react": "16.12.0", + "react-dom": "16.12.0" + } +} diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 0000000..b73ff00 Binary files /dev/null and b/src/.DS_Store differ diff --git a/src/example/main.tsx b/src/example/main.tsx new file mode 100644 index 0000000..21a0e9f --- /dev/null +++ b/src/example/main.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import ReactDom from 'react-dom'; + +export default () => (
Наше приложение1
); + + + +export const mount = (Сomponent) => { + // console.log('component', component); + ReactDom.render( + <Сomponent/>, + document.getElementById('app') + ); +} + + +export const unmount = () => { + ReactDom.unmountComponentAtNode(document.getElementById('app')) +} + + + + diff --git a/src/example2/main.tsx b/src/example2/main.tsx new file mode 100644 index 0000000..35d4092 --- /dev/null +++ b/src/example2/main.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import ReactDom from 'react-dom'; + +export default () => (
Наше приложение2
); + +export const mount = (Сomponent) => { + ReactDom.render( + <Сomponent/>, + document.getElementById('app') + ); +} + + +export const unmount = () => { + ReactDom.unmountComponentAtNode(document.getElementById('app')) +} + + + + diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..8c4ae66 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import ReactDom from 'react-dom'; +import { loadApp } from './utils'; + +class Bootstrap extends React.PureComponent { + App: any; + currentBundle: string = ''; + + async downloader(bundleName: string) { + let _bundleName = bundleName; + this.currentBundle = bundleName; + this.App = await loadApp(_bundleName); + this.forceUpdate(); + } + + mountApp = async(nameApp) => { + await this.downloader(nameApp); + this.App.mount(this.App.default) + } + + unmountApp = () => { + this.App.unmount(); + } + + render () { + return ( +
+ + + + +
+ ); + } +} + +ReactDom.render( + , + document.getElementById('bootstrap') +); + + diff --git a/src/typings/import.d.ts b/src/typings/import.d.ts new file mode 100644 index 0000000..18834a2 --- /dev/null +++ b/src/typings/import.d.ts @@ -0,0 +1,19 @@ +declare module '*.jpg' { + const value: any; + export = value; +} + +declare module '*.svg' { + const value: any; + export = value; +} + +declare module '*.png' { + const value: any; + export = value; +} + +declare module '*.mp4' { + const value: any; + export = value; +} \ No newline at end of file diff --git a/src/utils.ts b/src/utils.ts new file mode 100644 index 0000000..73a46cf --- /dev/null +++ b/src/utils.ts @@ -0,0 +1,10 @@ +export async function loadApp(bundleName) { + return await System.import(`./${bundleName}.js`) + .then(result => { + return result.default; + }) + .catch(error => { + console.info(`Загрузить ${bundleName} не удалось!`); + console.info(`error in ${bundleName}`, error); + }); +} diff --git a/stubs/importmap.json b/stubs/importmap.json new file mode 100644 index 0000000..7f37e3a --- /dev/null +++ b/stubs/importmap.json @@ -0,0 +1,9 @@ +{ + "imports": { + "react": "/extlib/react/react.production.min.js", + "react-dom": "/extlib/react-dom/react-dom.production.min.js", + "redux": "/extlib/redux/redux.min.js", + "react-redux": "/extlib/react-redux/react-redux.min.js", + "styled-components": "extlib/styled-components/styled-components.min.js" + } +} \ No newline at end of file diff --git a/stubs/index.html b/stubs/index.html new file mode 100644 index 0000000..d1427b3 --- /dev/null +++ b/stubs/index.html @@ -0,0 +1,26 @@ + + + + + + + + Занятие по загрузчику + + + + + + + + + +
+
+ + \ No newline at end of file diff --git a/stubs/index.js b/stubs/index.js new file mode 100644 index 0000000..ff4f16b --- /dev/null +++ b/stubs/index.js @@ -0,0 +1,10 @@ +const express = require("express"); +const app = express(); + + +app.use(express.static(__dirname + "/dist")); + + +app.listen(8090, () => console.log("Listening on port 8090!")); + +module.exports = app; \ No newline at end of file diff --git a/stubs/server.js b/stubs/server.js new file mode 100644 index 0000000..2254579 --- /dev/null +++ b/stubs/server.js @@ -0,0 +1,17 @@ +const hotClient = require('webpack-hot-client'); +const middleware = require('webpack-dev-middleware'); +const webpack = require('webpack'); +const config = require('../webpack.config'); +const app = require('../stubs'); +const compiler = webpack(config); +const { publicPath } = config.output; +const options = { }; // webpack-hot-client options + +// we recommend calling the client _before_ adding the dev middleware +const client = hotClient(compiler, options); +const { server } = client; +server.on('listening', () => { + app.use(middleware(compiler, { publicPath, historyApiFallback: true })); + + +}); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..ca61d18 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "lib": [ + "dom", + "es7" + ], + "baseUrl": ".", + "paths": { + "*": [ + "*", + "src/*", + "lib/*", + "dist/*" + ] + }, + "outDir": "./dist/", + "sourceMap": true, + "esModuleInterop": true, + "noImplicitAny": false, + "module": "commonjs", + "target": "es5", + "jsx": "react", + "typeRoots": ["node_modules/@types", "src/typings", "../../node_modules/@types"] + }, + "exclude": [ + "node_modules" + ] +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..75557e1 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,66 @@ +const webpackCopy = require('copy-webpack-plugin'); +const webpack = require('webpack'); +const path = require('path'); +const { CleanWebpackPlugin } = require('clean-webpack-plugin'); + +const outputDirectory = 'dist'; + +module.exports = { + mode: 'development', + entry: { + bootstrap: ['./src/main.tsx'], + example: ['./src/example/main.tsx'], + example2: ['./src/example2/main.tsx'] + }, + output: { + filename: '[name].js', + path: path.resolve(__dirname, outputDirectory), + libraryTarget: 'umd', + globalObject: `(typeof self !== 'undefined' ? self : this)` + }, + node: { + fs: 'empty' + }, + plugins: [ + new CleanWebpackPlugin(), + new webpack.DefinePlugin({ + 'typeof window': JSON.stringify('object') + }), + new webpackCopy([ + { from: 'stubs/index.html' }, + { from: 'stubs/importmap.json' }, + { from: './node_modules/systemjs/dist', to: 'extlib/systemjs' }, + { from: './node_modules/react/umd', to: 'extlib/react' }, + { from: './node_modules/react-dom/umd', to: 'extlib/react-dom' } + // { from: 'exampleApp' } + ]) + ], + devtool: '#source-map', + //devtool: 'none', + resolve: { + modules: ['node_modules', 'src'], + extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js', '.css'] + }, + + module: { + rules: [ + { parser: { system: false } }, + { + test: /\.tsx?$/, + loader: 'awesome-typescript-loader' + }, + { + test: /\.(jpe?g|gif|png|svg|woff|ttf|eot|wav|mp3)$/, + loader: 'file-loader' + } + ] + + }, + externals: { + 'react': 'react', + 'react-dom': 'react-dom', + 'redux': 'redux', + 'react-redux': 'react-redux', + 'styled-components': 'styled-components' + } +};