Socket
Socket
Sign inDemoInstall

dyna-ts-react-module-boilerplate

Package Overview
Dependencies
24
Maintainers
1
Versions
94
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 17.0.2 to 17.0.3

.eslintignore
.eslintrc.js
dist/Button/Button.d.ts
dist/Button/Button.js.map
dist/Button/index.d.ts
dist/Button/index.js.map
dist/Label/index.d.ts
dist/Label/index.js.map
dist/Label/Label.d.ts
dist/Label/Label.js.map
src/Button/Button.less
src/Button/Button.tsx
src/Button/index.tsx
src/Label/index.tsx
src/Label/Label.tsx
tsconfig.update.js

8

.storybook/main.js

@@ -5,3 +5,4 @@ // .storybook/main.js

stories: [
'../**/*.stories.@(ts|tsx)',
'../src/**/*.stories.@(ts|tsx)',
'../stories/**/*.stories.@(ts|tsx)',
],

@@ -11,3 +12,6 @@ addons: [

'@storybook/addon-controls',
]
],
typescript: {
reactDocgen: "none",
},
}

2

dev/app-showcase/index.ts

@@ -1,1 +0,1 @@

export {AppShowcase } from "./AppShowcase";
export {AppShowcase} from "./AppShowcase";

1

dist/index.d.ts
export { Button, IButtonProps, EStyle, EColor, ESize, } from "./Button";
export { Label, ILabelProps, } from "./Label";

568

dist/index.js

@@ -99,6 +99,6 @@ (function webpackUniversalModuleDefinition(root, factory) {

/***/ "./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./src/Button.less":
/*!**************************************************************************************************************************************!*\
!*** ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--8-2!./node_modules/less-loader/dist/cjs.js!./src/Button.less ***!
\**************************************************************************************************************************************/
/***/ "./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./src/Button/Button.less":
/*!*********************************************************************************************************************************************!*\
!*** ./node_modules/css-loader!./node_modules/postcss-loader/lib??ref--8-2!./node_modules/less-loader/dist/cjs.js!./src/Button/Button.less ***!
\*********************************************************************************************************************************************/
/*! no static exports found */

@@ -108,3 +108,3 @@ /*! all exports used */

exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
exports = module.exports = __webpack_require__(/*! ../../node_modules/css-loader/lib/css-base.js */ "./node_modules/css-loader/lib/css-base.js")(false);
// imports

@@ -134,75 +134,75 @@

// css base code, injected by the css-loader
module.exports = function (useSourceMap) {
var list = []; // return the list of modules as css string
module.exports = function(useSourceMap) {
var list = [];
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
if (item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
}; // import a list of modules into the list
list.i = function (modules, mediaQuery) {
if (typeof modules === "string") modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for (var i = 0; i < this.length; i++) {
var id = this[i][0];
if (typeof id === "number") alreadyImportedModules[id] = true;
}
for (i = 0; i < modules.length; i++) {
var item = modules[i]; // skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if (mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if (mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */';
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
} // Adapted from convert-source-map (MIT)
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
return '/*# ' + data + ' */';
}
/***/ }),

@@ -628,2 +628,3 @@

/**

@@ -641,2 +642,3 @@ * When source maps are enabled, `style-loader` uses a link element with a data-uri to

*/
module.exports = function (css) {

@@ -648,69 +650,73 @@ // get current location

throw new Error("fixUrls requires window.location");
} // blank or null?
}
if (!css || typeof css !== "string") {
return css;
// blank or null?
if (!css || typeof css !== "string") {
return css;
}
var baseUrl = location.protocol + "//" + location.host;
var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/"); // convert each url(...)
var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");
/*
This regular expression is just a way to recursively match brackets within
a string.
/url\s*\( = Match on the word "url" with any whitespace after it and then a parens
( = Start a capturing group
(?: = Start a non-capturing group
[^)(] = Match anything that isn't a parentheses
| = OR
\( = Match a start parentheses
(?: = Start another non-capturing groups
[^)(]+ = Match anything that isn't a parentheses
| = OR
\( = Match a start parentheses
[^)(]* = Match anything that isn't a parentheses
\) = Match a end parentheses
) = End Group
*\) = Match anything and then a close parens
) = Close non-capturing group
* = Match anything
) = Close capturing group
\) = Match a close parens
/gi = Get all matches, not the first. Be case insensitive.
*/
// convert each url(...)
/*
This regular expression is just a way to recursively match brackets within
a string.
var fixedCss = css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function (fullMatch, origUrl) {
// strip quotes (if they exist)
var unquotedOrigUrl = origUrl.trim().replace(/^"(.*)"$/, function (o, $1) {
return $1;
}).replace(/^'(.*)'$/, function (o, $1) {
return $1;
}); // already a full url? no change
/url\s*\( = Match on the word "url" with any whitespace after it and then a parens
( = Start a capturing group
(?: = Start a non-capturing group
[^)(] = Match anything that isn't a parentheses
| = OR
\( = Match a start parentheses
(?: = Start another non-capturing groups
[^)(]+ = Match anything that isn't a parentheses
| = OR
\( = Match a start parentheses
[^)(]* = Match anything that isn't a parentheses
\) = Match a end parentheses
) = End Group
*\) = Match anything and then a close parens
) = Close non-capturing group
* = Match anything
) = Close capturing group
\) = Match a close parens
if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(unquotedOrigUrl)) {
return fullMatch;
} // convert the url to a full url
/gi = Get all matches, not the first. Be case insensitive.
*/
var fixedCss = css.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(fullMatch, origUrl) {
// strip quotes (if they exist)
var unquotedOrigUrl = origUrl
.trim()
.replace(/^"(.*)"$/, function(o, $1){ return $1; })
.replace(/^'(.*)'$/, function(o, $1){ return $1; });
// already a full url? no change
if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(unquotedOrigUrl)) {
return fullMatch;
}
var newUrl;
// convert the url to a full url
var newUrl;
if (unquotedOrigUrl.indexOf("//") === 0) {
//TODO: should we add protocol?
newUrl = unquotedOrigUrl;
} else if (unquotedOrigUrl.indexOf("/") === 0) {
// path should be relative to the base url
newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
} else {
// path should be relative to current directory
newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
} // send back the fixed url(...)
if (unquotedOrigUrl.indexOf("//") === 0) {
//TODO: should we add protocol?
newUrl = unquotedOrigUrl;
} else if (unquotedOrigUrl.indexOf("/") === 0) {
// path should be relative to the base url
newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
} else {
// path should be relative to current directory
newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
}
// send back the fixed url(...)
return "url(" + JSON.stringify(newUrl) + ")";
});
return "url(" + JSON.stringify(newUrl) + ")";
}); // send back the fixed css
return fixedCss;
// send back the fixed css
return fixedCss;
};
/***/ }),

@@ -726,33 +732,32 @@

module.exports = function (module) {
if (!module.webpackPolyfill) {
module.deprecate = function () {};
module.exports = function(module) {
if (!module.webpackPolyfill) {
module.deprecate = function() {};
module.paths = [];
// module.parent = undefined by default
if (!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function() {
return module.i;
}
});
module.webpackPolyfill = 1;
}
return module;
};
module.paths = []; // module.parent = undefined by default
if (!module.children) module.children = [];
Object.defineProperty(module, "loaded", {
enumerable: true,
get: function get() {
return module.l;
}
});
Object.defineProperty(module, "id", {
enumerable: true,
get: function get() {
return module.i;
}
});
module.webpackPolyfill = 1;
}
return module;
};
/***/ }),
/***/ "./src/Button.less":
/*!*************************!*\
!*** ./src/Button.less ***!
\*************************/
/***/ "./src/Button/Button.less":
/*!********************************!*\
!*** ./src/Button/Button.less ***!
\********************************/
/*! no static exports found */

@@ -763,3 +768,3 @@ /*! all exports used */

var content = __webpack_require__(/*! !../node_modules/css-loader!../node_modules/postcss-loader/lib??ref--8-2!../node_modules/less-loader/dist/cjs.js!./Button.less */ "./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./src/Button.less");
var content = __webpack_require__(/*! !../../node_modules/css-loader!../../node_modules/postcss-loader/lib??ref--8-2!../../node_modules/less-loader/dist/cjs.js!./Button.less */ "./node_modules/css-loader/index.js!./node_modules/postcss-loader/lib/index.js?!./node_modules/less-loader/dist/cjs.js!./src/Button/Button.less");

@@ -778,3 +783,3 @@ if(typeof content === 'string') content = [[module.i, content, '']];

var update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options);
var update = __webpack_require__(/*! ../../node_modules/style-loader/lib/addStyles.js */ "./node_modules/style-loader/lib/addStyles.js")(content, options);

@@ -787,6 +792,6 @@ if(content.locals) module.exports = content.locals;

/***/ "./src/Button.tsx":
/*!************************!*\
!*** ./src/Button.tsx ***!
\************************/
/***/ "./src/Button/Button.tsx":
/*!*******************************!*\
!*** ./src/Button/Button.tsx ***!
\*******************************/
/*! no static exports found */

@@ -824,2 +829,4 @@ /*! all exports used */

return function (d, b) {
if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
_extendStatics(d, b);

@@ -835,2 +842,42 @@

var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = {
enumerable: true,
get: function get() {
return m[k];
}
};
}
Object.defineProperty(o, k2, desc);
} : function (o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
});
var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
Object.defineProperty(o, "default", {
enumerable: true,
value: v
});
} : function (o, v) {
o["default"] = v;
});
var __importStar = this && this.__importStar || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) {
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
}
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", {

@@ -841,5 +888,5 @@ value: true

var React = __webpack_require__(/*! react */ "react");
var React = __importStar(__webpack_require__(/*! react */ "react"));
__webpack_require__(/*! ./Button.less */ "./src/Button.less");
__webpack_require__(/*! ./Button.less */ "./src/Button/Button.less");

@@ -889,3 +936,3 @@ var EStyle;

onClick = _a.onClick;
var className = [userClassName, "my-button my-button--style-" + style + " ", "my-button--color-" + color, "my-button--size-" + size].filter(Boolean).join(' ');
var className = [userClassName, "my-button my-button--style-".concat(style, " "), "my-button--color-".concat(color), "my-button--size-".concat(size)].filter(Boolean).join(' ');
return React.createElement("a", {

@@ -921,7 +968,11 @@ className: className,

reactHotLoader.register(__extends, "__extends", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button.tsx");
reactHotLoader.register(EStyle, "EStyle", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button.tsx");
reactHotLoader.register(EColor, "EColor", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button.tsx");
reactHotLoader.register(ESize, "ESize", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button.tsx");
reactHotLoader.register(Button, "Button", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button.tsx");
reactHotLoader.register(__extends, "__extends", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(__createBinding, "__createBinding", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(__setModuleDefault, "__setModuleDefault", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(__importStar, "__importStar", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(React, "React", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(EStyle, "EStyle", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(EColor, "EColor", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(ESize, "ESize", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
reactHotLoader.register(Button, "Button", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Button/Button.tsx");
})();

@@ -935,6 +986,188 @@

})();
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../node_modules/webpack/buildin/module.js */ "./node_modules/webpack/buildin/module.js")(module)))
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../node_modules/webpack/buildin/module.js */ "./node_modules/webpack/buildin/module.js")(module)))
/***/ }),
/***/ "./src/Button/index.tsx":
/*!******************************!*\
!*** ./src/Button/index.tsx ***!
\******************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal["default"].signature : function (a) {
return a;
};
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ESize = exports.EColor = exports.EStyle = exports.Button = void 0;
var Button_1 = __webpack_require__(/*! ./Button */ "./src/Button/Button.tsx");
Object.defineProperty(exports, "Button", {
enumerable: true,
get: function get() {
return Button_1.Button;
}
});
Object.defineProperty(exports, "EStyle", {
enumerable: true,
get: function get() {
return Button_1.EStyle;
}
});
Object.defineProperty(exports, "EColor", {
enumerable: true,
get: function get() {
return Button_1.EColor;
}
});
Object.defineProperty(exports, "ESize", {
enumerable: true,
get: function get() {
return Button_1.ESize;
}
});
/***/ }),
/***/ "./src/Label/Label.tsx":
/*!*****************************!*\
!*** ./src/Label/Label.tsx ***!
\*****************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
(function () {
var enterModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.enterModule : undefined;
enterModule && enterModule(module);
})();
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal["default"].signature : function (a) {
return a;
};
var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = {
enumerable: true,
get: function get() {
return m[k];
}
};
}
Object.defineProperty(o, k2, desc);
} : function (o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
});
var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
Object.defineProperty(o, "default", {
enumerable: true,
value: v
});
} : function (o, v) {
o["default"] = v;
});
var __importStar = this && this.__importStar || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) {
if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
}
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Label = void 0;
var React = __importStar(__webpack_require__(/*! react */ "react"));
var Label = function Label(props) {
var className = props.className,
children = props.children;
return React.createElement("div", {
className: className
}, children);
};
exports.Label = Label;
;
(function () {
var reactHotLoader = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.default : undefined;
if (!reactHotLoader) {
return;
}
reactHotLoader.register(__createBinding, "__createBinding", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Label/Label.tsx");
reactHotLoader.register(__setModuleDefault, "__setModuleDefault", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Label/Label.tsx");
reactHotLoader.register(__importStar, "__importStar", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Label/Label.tsx");
reactHotLoader.register(React, "React", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Label/Label.tsx");
reactHotLoader.register(Label, "Label", "/Users/dennisat/dev/dyna/dyna-ts-react-module-boilerplate/src/Label/Label.tsx");
})();
;
(function () {
var leaveModule = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal.leaveModule : undefined;
leaveModule && leaveModule(module);
})();
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../node_modules/webpack/buildin/module.js */ "./node_modules/webpack/buildin/module.js")(module)))
/***/ }),
/***/ "./src/Label/index.tsx":
/*!*****************************!*\
!*** ./src/Label/index.tsx ***!
\*****************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __signature__ = typeof reactHotLoaderGlobal !== 'undefined' ? reactHotLoaderGlobal["default"].signature : function (a) {
return a;
};
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Label = void 0;
var Label_1 = __webpack_require__(/*! ./Label */ "./src/Label/Label.tsx");
Object.defineProperty(exports, "Label", {
enumerable: true,
get: function get() {
return Label_1.Label;
}
});
/***/ }),
/***/ "./src/index.tsx":

@@ -958,5 +1191,5 @@ /*!***********************!*\

});
exports.ESize = exports.EColor = exports.EStyle = exports.Button = void 0;
exports.Label = exports.ESize = exports.EColor = exports.EStyle = exports.Button = void 0;
var Button_1 = __webpack_require__(/*! ./Button */ "./src/Button.tsx");
var Button_1 = __webpack_require__(/*! ./Button */ "./src/Button/index.tsx");

@@ -988,2 +1221,11 @@ Object.defineProperty(exports, "Button", {

var Label_1 = __webpack_require__(/*! ./Label */ "./src/Label/index.tsx");
Object.defineProperty(exports, "Label", {
enumerable: true,
get: function get() {
return Label_1.Label;
}
});
/***/ }),

@@ -990,0 +1232,0 @@

63

package.json
{
"name": "dyna-ts-react-module-boilerplate",
"version": "17.0.2",
"version": "17.0.3",
"description": "React Component / Module boilerplate",

@@ -15,11 +15,10 @@ "repository": {

"create": "echo Creation started... && rm -rf .git && rm -rf yarn.lock; mv README.md README.boilerplate.md && echo \\# readme > README.md && yarn install && node _boilerplateCreateModule.js && echo --- module created",
"install-check": "yarn install --check-files",
"install-clean": "rm -rf node_modules; install",
"start": "webpack-dev-server --config webpack.dev.config.js --devtool eval --progress --inline --hot --content-base dev/public --open --host localhost --port 3200 ",
"start-at": "webpack-dev-server --config webpack.dev.config.js --devtool eval --progress --inline --hot --content-base dev/public --open --host localhost --port",
"lint": "tslint './src/**/*.ts*' --format stylish --force",
"build-analyze": "set NODE_ENV=production && webpack --config webpack.dist.analyze.config.js",
"build": "rm -rf ./dist; yarn run .build-index.d.ts && yarn run .build-dist",
"build-watch": "webpack --watch --config webpack.dist.config.js",
".build-index.d.ts": "tsc && touch ./dist/index.js && rm ./dist/index.js && yarn run .build-index.d.ts-clear",
".build-index.d.ts-clear": "cd dist/ && find . -name \\*.js -delete && cd ..",
".build-dist": "set NODE_ENV=production && webpack --config webpack.dist.config.js",
"build": "yarn lint && set NODE_ENV=production && rm -rf ./dist; yarn build-ts-declarations && webpack --config webpack.dist.config.js",
"build-watch": "rm -rf ./dist; yarn build-ts-declarations && webpack --watch --config webpack.dist.config.js",
"build-ts-declarations": "node tsconfig.update.js && tsc && cd dist/ && find . -name \\*.js -delete && cd ..",
"storybook": "start-storybook -p 9200",

@@ -29,9 +28,14 @@ "storybook-at": "start-storybook -p",

"commit-amend": "git add -u && git add -A && git commit --amend --allow-empty --no-edit",
"publish-push": "yarn publish --non-interactive && git push && git push --tags",
"lint": "eslint -c .eslintrc.js ./src ./tests",
"lint-fix": "eslint -c .eslintrc.js --fix ./src ./tests",
"test": "jest --coverage --no-cache --runInBand",
"test-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
"test-watch": "jest --watch --verbose --runInBand",
"test-no-coverage": "jest --no-cache --runInBand",
"test-update-snapshots": "jest --updateSnapshot --runInBand",
"sync-usages": "node sync-usages.js",
"sync-usages-watch": "node sync-usages.js --watch",
"release": "yarn test && yarn run build && git add -u && git add -A && git commit --allow-empty -m \"Build changes\" && yarn version --patch && yarn run publish-push",
"upgrade-release": "yarn upgrade && yarn run release"
"publish-push": "yarn version --patch && yarn publish --non-interactive && git push && git push --tags",
"release": "yarn build && yarn test && git add -u && git add -A && git commit --allow-empty -m \"Build changes\" && yarn publish-push",
"upgrade-release": "yarn upgrade && yarn release"
},

@@ -47,3 +51,4 @@ "keywords": [

"react": "^17.0.2",
"react-dom": "^17.0.2"
"react-dom": "^17.0.2",
"sass": "^1.52.3"
},

@@ -55,16 +60,18 @@ "devDependencies": {

"@babel/preset-react": "^7.0.0",
"@storybook/addon-controls": "^6.2.9",
"@storybook/addon-essentials": "^6.2.9",
"@storybook/addon-knobs": "^6.2.9",
"@storybook/react": "^6.2.9",
"@storybook/addon-controls": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-knobs": "^6.4.0",
"@storybook/react": "^6.4.19",
"@types/enzyme": "^3.1.15",
"@types/enzyme-adapter-react-16": "^1.0.3",
"@types/jest": "^26.0.15",
"@types/jest": "^27.0.1",
"@types/node": "^10.12.2",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.5.0",
"autoprefixer": "^7.2.6",
"awesome-typescript-loader": "^5.2.1",
"babel-jest": "^26.6.3",
"babel-loader": "^8.1.0",
"babel-preset-minify": "^0.5.1",
"babel-preset-react-app": "^6.1.0",

@@ -75,9 +82,18 @@ "chokidar": "^3.4.0",

"css-loader": "^1.0.1",
"dyna-guid": "^1.0.10",
"dyna-guid": "^2.1.2",
"dyna-node-arguments": "^2.0.1",
"dyna-node-fs": "^1.0.4",
"dyna-showcase": "^2.0.2",
"dyna-showcase": "^3.0.1",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "^1.6.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^7.32.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-etc": "^2.0.1",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jest": "^25.3.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"file-loader": "^2.0.0",

@@ -89,2 +105,3 @@ "html-webpack-plugin": "^4.5.0",

"jest-cli": "^26.6.3",
"jest-electron": "^0.1.12",
"jest-junit": "^12.0.0",

@@ -95,3 +112,2 @@ "jsdom": "^16.4.0",

"less-loader": "^4.1.0",
"node-sass": "^4.10.0",
"postcss-cli": "^4.1.0",

@@ -108,4 +124,4 @@ "postcss-flexbugs-fixes": "3.2.0",

"ts-jest": "^26.4.3",
"tslint": "^6.1.3",
"typescript": "^4.0.5",
"ts-loader": "^8.3.0",
"typescript": "^4.6.2",
"typings-for-css-modules-loader": "^1.7.0",

@@ -126,3 +142,4 @@ "uglifyjs-webpack-plugin": "^2.0.1",

"collectCoverage": false,
"testEnvironment": "jsdom",
"runner": "jest-electron/runner",
"testEnvironment": "jest-electron/environment",
"transform": {

@@ -129,0 +146,0 @@ ".(ts|tsx)": "ts-jest"

72

README.md

@@ -9,3 +9,3 @@ # About

Replace the `my-component` with the name of your new module.
Replace the `my-component` with the name of your new module.
```

@@ -17,3 +17,3 @@ git clone http://github.com/aneldev/dyna-ts-react-module-boilerplate my-component

That's all.
That's all.

@@ -51,7 +51,7 @@ # Why is `create-react-app` different?

This boilerplate runs only under Linux.
This boilerplate runs only under `bash` (Linux, Mac, Windows with git bash).
Scripts of this package are not designed for Windows command line!
Scripts of this package are not designed for the Windows command line!
For windows users there are multiple ways:
For Windows users, there are multiple ways:
- [Git bash](https://git-scm.com/downloads) (probably you have this already installed on your machine)

@@ -62,8 +62,38 @@ - [Win10 Ubuntu shell](https://www.howtogeek.com/249966/how-to-install-and-use-the-linux-bash-shell-on-windows-10/) _recommended for windows users_

# Export a single module
Export whatever you want in `/src/index.tsx` line this
```
export { Button, IButtonProps} from "./Button.tsx";
```
From another package, import the Button line this:
```
import {Button} from "my-compoennt";
```
# Export multiple modules isolated
Each folder would contain components, and each component would be exported as a module. This will help the shaking tree method of webpack since your final App module won't include components that are not used.
Delete the `/src/index.tsx` and under the `/src` folder, each folder will be considered a module.
The Absence of the `/src/index.tsx` will make the boilerplate build each folder as a module. _If the `/src/index.tsx` is exists, then only one module is exported._
The folder structure will be like this:
```
/src
/src/Button/Button.tsx
/src/Button/index.tsx // This index exports for the Button only
/src/Label/Label.tsx
/src/Label/index.tsx // This index exports for the Label only
```
From another package, import the Button line this:
```
import {Button} from "my-compoennt/dist/Button";
```
# Folder structure
The source code of your project is under the `/src/` folder only. The distributed module is what is exported from the `/src/index.tsc` only.
There are loaders for various files, like: `.less`, `.scss`, `.svg`, `.jpg`, `etc.`. Loaders *loaded* in `/webpack.loaders.js`, where you can add your loaders used for all tasks (npm scripts).
There are loaders for various files, like: `.less`, `.scss`, `.svg`, `.jpg`, `etc.`. Loaders *are loaded* in `/webpack.loaders.js`, where you can add your own loaders that will be used for all tasks (npm scripts).
# Develop

@@ -73,3 +103,3 @@

If you want to add a dependency that will be used only in a Story or in your custom app install is as `dev` dependency.
If you want to add a dependency that will be used only in a Story or in your custom app, install it as `dev` dependency.

@@ -82,3 +112,3 @@ ## Start the Storybook

Or `yarn storybook-at <custom port>` to open Storybook on custom port.
Or `yarn storybook-at <custom port>` to open Storybook on a custom port.

@@ -89,3 +119,3 @@ ## Start an app

Under the `/dev/app/` folder, a small web application can use your module component in different ways.
Under the `/dev/app/` folder, a small web application can use your module component in different ways.
This way, you can develop, debug, and create a demo of your component.

@@ -95,6 +125,6 @@

or, if you want to start it to a different port `yarn start-to -- 3232` to start in port 3232.
or, if you want to start it to a different port, `yarn start-to -- 3232` to start in port 3232.
Like an App, this boilerplate uses the `dyna-showcase` where it is a very light StoryBook like solution.
One of the benefits is that it is speedy compared with StoraBook, and you can see the actual edges of the components (for high fidelity dev).
Like an App, this boilerplate uses the `dyna-showcase`, a very light StoryBook like solution.
One of the benefits is that it is speedy compared with StoryBook, and you can see the actual edges of the components (for high fidelity dev).
It is ideal for development, but you can easily replace it with yours, `yarn remove dyna-showcase`, and write your app under the `/dev` folder.

@@ -108,7 +138,7 @@

Update the `tslint.json` with your own preferences.
Update the `tslint.json` with your preferences.
## Analyse dependencies
Run `yarn build-analyze` and check which dependencies will be delivered in your module.
Run `yarn build-analyze` and check which dependencies will be delivered in your module.

@@ -124,3 +154,3 @@ # Test

## Run tests
Call `yarn test` to run your tests and coverage.

@@ -155,3 +185,3 @@

You can exclude dependencies from the distributed bundle by declaring them in the `/webpack.dist.config.js`. By default, all dependencies are declared there.
You can exclude dependencies from the distributed bundle by declaring them in the `/webpack.dist.config.js`. By default, all dependencies are declared there.

@@ -188,3 +218,3 @@ # Features

- For Linux [follow this guide](https://www.hostinger.com/tutorials/how-to-use-rsync)
- For Windows's _not a clear guid has been found, feel free to fork this doc._
- For Windows's _not a clear guid has been found, feel free to fork this doc._

@@ -195,7 +225,7 @@ # Known issues

The callbaks are not called, only the page is refreshed. Forks are welcome.
The callbacks are not called only the page is refreshed. Forks are welcome.
# Typescript module without React?
If you are interested in a **typescript module**, with other words if you want to implement everything as we do here but without any react components,
If you are interested in a **typescript module**, in other words, if you want to implement everything as we do here but without any react components,
check this out this [dyna-ts-module-boilerplate](https://github.com/aneldev/dyna-ts-module-boilerplate) repo.

@@ -202,0 +232,0 @@

1

tests/setup/testSetup.ts
// Setup the test environment.
jest.setTimeout(5000);

8

tests/unit/sample.test.ts

@@ -1,9 +0,5 @@

import "jest";
jest.setTimeout(5000);
declare let window: any;
if (typeof jasmine !== 'undefined') jasmine.DEFAULT_TIMEOUT_INTERVAL = 5000;
// Help: https://facebook.github.io/jest/docs/expect.html
// help: https://facebook.github.io/jest/docs/expect.html
describe('Sample unit test', () => {

@@ -10,0 +6,0 @@ it('should import the component', () => {

9

tsconfig.json

@@ -18,2 +18,3 @@ {

"allowJs": false,
"esModuleInterop": true,
"skipLibCheck": true,

@@ -34,6 +35,6 @@ "noErrorTruncation": true,

},
"compileOnSave": false,
"files": [
"src/index.tsx"
],
"compileOnSave": false
}
"./src/index.tsx"
]
}

1

webpack.dist.analyze.config.js

@@ -7,2 +7,3 @@ const path = require('path');

config.externals = undefined;
config.output.path = path.resolve(__dirname, 'temp/build-analyze');

@@ -9,0 +10,0 @@ config.output.publicPath = '/temp/build-analyze';

60

webpack.dist.config.js

@@ -6,19 +6,9 @@ const fs = require('fs');

const distConfig = {
exportSrcFoldersAsModule: false,
// True means:
// Exports the /src/<module name>/index.ts as module
// Should import line this: import {<module name>} from "package-name/dist/<module name>"
// False means: (the default)
// Exports the /src/index.ts as module
// Should import line this: import {<module name>} from "package-name"
const isSingleModule =
fs.existsSync('./src/index.ts') ||
fs.existsSync('./src/index.tsx');
const thisPackageBelongsToMonorepo =
fs.existsSync('../../package.json') &&
!!require('../../package.json').workspaces;
thisPackageBelongToMonorepo: false,
// True means:
// This boilerplate is used as a package of a monorepo
// This script will exclude deps of the monorepo as well
// False means (the default)
// This boilerplate is used as a stand-alone.
};
const package_ = JSON.parse(fs.readFileSync('./package.json', 'utf8'));

@@ -28,3 +18,3 @@ const loaders = require('./webpack.loaders');

const getDirectories =
const getModuleNames =
root =>

@@ -35,3 +25,3 @@ fs.readdirSync(root, {withFileTypes: true})

const entries = getDirectories('./src');
const moduleNames = getModuleNames('./src');

@@ -42,6 +32,12 @@ const config = {

entry:
distConfig.exportSrcFoldersAsModule
isSingleModule
? (
// Classic export of the /src/index.ts
[
path.resolve(__dirname, 'src/index.tsx')
]
)
:(
// Multiple module exports of the /src/<Module name>/index.ts
entries
moduleNames
.reduce((acc, entry) => {

@@ -51,11 +47,5 @@ acc[entry] = `./src/${entry}`;

}, {})
)
: (
// Classic export of the /src/index.ts
[
path.resolve(__dirname, 'src/index.tsx')
]
),
externals:
distConfig.thisPackageBelongToMonorepo
thisPackageBelongsToMonorepo
? [ // exclude all dependencies from the bundle

@@ -75,11 +65,4 @@ nodeExternals(),

output:
distConfig.exportSrcFoldersAsModule
isSingleModule
? {
// Multiple module exports of the /src/<Module name>/index.ts
filename: '[name]/index.js',
path: __dirname + '/dist',
libraryTarget: 'umd',
umdNamedDefine: true,
}
: {
// Classic export of the /src/index.ts

@@ -92,2 +75,9 @@ path: path.resolve(__dirname, 'dist'),

umdNamedDefine: true
}
: {
// Multiple module exports of the /src/<Module name>/index.ts
filename: '[name]/index.js',
path: __dirname + '/dist',
libraryTarget: 'umd',
umdNamedDefine: true,
},

@@ -94,0 +84,0 @@ resolve: {

40

webpack.loaders.js

@@ -9,11 +9,3 @@ const autoprefixer = require('autoprefixer');

loader: 'babel-loader',
options: {
sourceType: 'unambiguous',
presets: [['@babel/env'], '@babel/react'],
plugins: [
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-syntax-nullish-coalescing-operator",
]
}
exclude: /node_modules/,
},

@@ -25,3 +17,3 @@ {

'babel-loader',
'awesome-typescript-loader',
'ts-loader',
],

@@ -81,9 +73,9 @@ },

return [
require('autoprefixer')
require('autoprefixer'),
];
}
}
},
},
},
'less-loader'
]
'less-loader',
],
},

@@ -138,9 +130,9 @@ {

return [
require('autoprefixer')
require('autoprefixer'),
];
}
}
},
},
},
'sass-loader'
]
'sass-loader',
],
},

@@ -151,3 +143,3 @@ {

test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=100000'
loader: 'url-loader?limit=100000',
},

@@ -180,6 +172,6 @@ {

{
test: /\.svg$/, loader: 'svg-inline-loader'
test: /\.svg$/, loader: 'svg-inline-loader',
},
]
}
],
},
};
dist/Button.d.ts
dist/Button.js.map
src/Button.less
src/Button.tsx
tslint.json
.babelrc

Sorry, the diff of this file is not supported yet

dev/app-showcase/AppShowcase.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/logo/index.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/showcases/all-together/all-together.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/showcases/css-loaders/css-loaders.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/showcases/index.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/showcases/interactive/interactive.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/showcases/sizes/sizes.tsx

Sorry, the diff of this file is not supported yet

dev/app-showcase/showcases/the-end/the-end.tsx

Sorry, the diff of this file is not supported yet

dev/public/.htaccess

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

src/index.tsx

Sorry, the diff of this file is not supported yet

stories/Button.stories.tsx

Sorry, the diff of this file is not supported yet

tests/ui/Button.spec.tsx

Sorry, the diff of this file is not supported yet

tests/ui/Sample.spec.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc