From 424806d4a153d6bac0a57faa91b93f0504a79141 Mon Sep 17 00:00:00 2001 From: Adam Bulmer Date: Sun, 23 Dec 2018 20:54:56 +0000 Subject: [PATCH] Add dist for now --- .gitignore | 1 - dist/__test__/index.spec.js | 411 ++++++++++++++++++++++++ dist/adapter/cdn.js | 53 +++ dist/adapter/file.js | 91 ++++++ dist/dynamic-container.js | 71 ++++ dist/resolver.js | 77 +++++ dist/static-container.js | 81 +++++ examples/express-cdn/dist/App/Body.js | 30 ++ examples/express-cdn/dist/App/Header.js | 26 ++ examples/express-cdn/dist/App/index.js | 43 +++ examples/express-cdn/dist/index.js | 53 +++ package-lock.json | 2 +- package.json | 2 +- 13 files changed, 938 insertions(+), 3 deletions(-) create mode 100644 dist/__test__/index.spec.js create mode 100644 dist/adapter/cdn.js create mode 100644 dist/adapter/file.js create mode 100644 dist/dynamic-container.js create mode 100644 dist/resolver.js create mode 100644 dist/static-container.js create mode 100644 examples/express-cdn/dist/App/Body.js create mode 100644 examples/express-cdn/dist/App/Header.js create mode 100644 examples/express-cdn/dist/App/index.js create mode 100644 examples/express-cdn/dist/index.js diff --git a/.gitignore b/.gitignore index 450bf7a..0bb5888 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,3 @@ node_modules/ coverage/ .next/ -dist/ diff --git a/dist/__test__/index.spec.js b/dist/__test__/index.spec.js new file mode 100644 index 0000000..784ed20 --- /dev/null +++ b/dist/__test__/index.spec.js @@ -0,0 +1,411 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _enzyme = require("enzyme"); + +var _ = require("../../"); + +var _file = _interopRequireDefault(require("../../file")); + +var _cdn = _interopRequireDefault(require("../../cdn")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } + +function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } + +function buildComponent(displayName) { + function MyComponent(props) { + return _react.default.createElement("div", { + "data-test-id": "my-mock-component" + }, props.children); + } + + MyComponent.displayName = displayName; + return MyComponent; +} + +describe('Resolver', function () { + test('Should dedupe styles', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee() { + var MockComponentOne, MockComponentTwo, CustomApp, resolver, css; + return regeneratorRuntime.wrap(function _callee$(_context) { + while (1) { + switch (_context.prev = _context.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent')); + MockComponentTwo = (0, _.StaticCSS)(buildComponent('MyComponent2')); + + CustomApp = function CustomApp() { + return _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentTwo, null))); + }; + + resolver = new _.Resolver(_react.default.createElement(CustomApp), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context.next = 6; + return resolver.resolve(); + + case 6: + css = _context.sent; + expect(css.length).toEqual(2); + expect(css[0].path).toContain('__test__/MyComponent.css'); + expect(css[1].path).toContain('__test__/MyComponent2.css'); + + case 10: + case "end": + return _context.stop(); + } + } + }, _callee, this); + }))); + describe('FileSystem Adapter', function () { + test('Should return CSS for a single module', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee2() { + var resolver, css; + return regeneratorRuntime.wrap(function _callee2$(_context2) { + while (1) { + switch (_context2.prev = _context2.next) { + case 0: + resolver = new _.Resolver(_react.default.createElement((0, _.StaticCSS)(buildComponent('MyComponent'))), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context2.next = 3; + return resolver.resolve(); + + case 3: + css = _context2.sent; + expect(css.length).toEqual(1); + expect(css[0].content).toContain('.mock-class'); + expect(css[0].success).toEqual(true); + expect(css[0].path).toContain('__test__/MyComponent.css'); + + case 8: + case "end": + return _context2.stop(); + } + } + }, _callee2, this); + }))); + test('Should return CSS for multiple modules', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee3() { + var MockComponentOne, MockComponentTwo, CustomApp, resolver, css; + return regeneratorRuntime.wrap(function _callee3$(_context3) { + while (1) { + switch (_context3.prev = _context3.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent')); + MockComponentTwo = (0, _.StaticCSS)(buildComponent('MyComponent2')); + + CustomApp = function CustomApp() { + return _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentTwo, null)); + }; + + resolver = new _.Resolver(_react.default.createElement(CustomApp), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context3.next = 6; + return resolver.resolve(); + + case 6: + css = _context3.sent; + expect(css.length).toEqual(2); + expect(css[0].content).toContain('.mock-class'); + expect(css[1].content).toContain('.mock-class-two'); + expect(css[0].success).toEqual(true); + expect(css[1].success).toEqual(true); + expect(css[0].path).toContain('__test__/MyComponent.css'); + expect(css[1].path).toContain('__test__/MyComponent2.css'); + + case 14: + case "end": + return _context3.stop(); + } + } + }, _callee3, this); + }))); + test('Should return object with error when component css does not exist', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee4() { + var MockComponentOne, MockComponentTwo, CustomApp, resolver, css; + return regeneratorRuntime.wrap(function _callee4$(_context4) { + while (1) { + switch (_context4.prev = _context4.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent')); + MockComponentTwo = (0, _.StaticCSS)(buildComponent('MyComponent-invalid')); + + CustomApp = function CustomApp() { + return _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentTwo, null)); + }; + + resolver = new _.Resolver(_react.default.createElement(CustomApp), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context4.next = 6; + return resolver.resolve(); + + case 6: + css = _context4.sent; + expect(css.length).toEqual(2); + expect(css[0].content).toContain('.mock-class'); + expect(css[1].content).toContain(''); + expect(css[0].success).toEqual(true); + expect(css[1].success).toEqual(false); + expect(css[0].path).toContain('__test__/MyComponent.css'); + expect(css[1].path).toContain('__test__/MyComponent-invalid.css'); + expect(css[1].error.message).toEqual('Component stylesheet does not exist'); + + case 15: + case "end": + return _context4.stop(); + } + } + }, _callee4, this); + }))); + test('Should fetch user defined CSS files', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee5() { + var MockComponentOne, resolver, css; + return regeneratorRuntime.wrap(function _callee5$(_context5) { + while (1) { + switch (_context5.prev = _context5.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent'), { + styles: function styles() { + return ['UserDefinedStyles.css']; + } + }); + resolver = new _.Resolver(_react.default.createElement(MockComponentOne), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context5.next = 4; + return resolver.resolve(); + + case 4: + css = _context5.sent; + expect(css.length).toEqual(2); + expect(css[0].content).toContain('.mock-class'); + expect(css[1].content).toContain('.defined'); + expect(css[0].success).toEqual(true); + expect(css[1].success).toEqual(true); + expect(css[0].path).toContain('__test__/MyComponent.css'); + expect(css[1].path).toContain('__test__/UserDefinedStyles.css'); + + case 12: + case "end": + return _context5.stop(); + } + } + }, _callee5, this); + }))); + describe('render', function () { + test('should render a single css file', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee6() { + var MockComponentOne, MockComponentTwo, CustomApp, resolver, css; + return regeneratorRuntime.wrap(function _callee6$(_context6) { + while (1) { + switch (_context6.prev = _context6.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent')); + MockComponentTwo = (0, _.StaticCSS)(buildComponent('MyComponent2')); + + CustomApp = function CustomApp() { + return _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentTwo, null)); + }; + + resolver = new _.Resolver(_react.default.createElement(CustomApp), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context6.next = 6; + return resolver.render(); + + case 6: + css = _context6.sent; + expect(css).toEqual('.mock-class { background: red; }.mock-class-two { background: red; }'); + + case 8: + case "end": + return _context6.stop(); + } + } + }, _callee6, this); + }))); + test('should render css as inline styles', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee7() { + var MockComponentOne, MockComponentTwo, CustomApp, resolver, css; + return regeneratorRuntime.wrap(function _callee7$(_context7) { + while (1) { + switch (_context7.prev = _context7.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent')); + MockComponentTwo = (0, _.StaticCSS)(buildComponent('MyComponent2')); + + CustomApp = function CustomApp() { + return _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentTwo, null)); + }; + + resolver = new _.Resolver(_react.default.createElement(CustomApp), new _file.default({ + folderPath: __dirname, + inline: true + })); + _context7.next = 6; + return resolver.render(); + + case 6: + css = _context7.sent; + expect(css).toEqual(''); + + case 8: + case "end": + return _context7.stop(); + } + } + }, _callee7, this); + }))); + }); + }); + describe('CDN Adapter', function () { + test('output link tags for stylesheets', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee8() { + var MockComponentOne, MockComponentTwo, CustomApp, resolver, css; + return regeneratorRuntime.wrap(function _callee8$(_context8) { + while (1) { + switch (_context8.prev = _context8.next) { + case 0: + MockComponentOne = (0, _.StaticCSS)(buildComponent('MyComponent')); + MockComponentTwo = (0, _.StaticCSS)(buildComponent('MyComponent2')); + + CustomApp = function CustomApp() { + return _react.default.createElement(MockComponentOne, null, _react.default.createElement(MockComponentTwo, null)); + }; + + resolver = new _.Resolver(_react.default.createElement(CustomApp), new _cdn.default({ + cdnRoot: 'https://my-cdn.com' + })); + _context8.next = 6; + return resolver.render(); + + case 6: + css = _context8.sent; + expect(css).toEqual(''); + + case 8: + case "end": + return _context8.stop(); + } + } + }, _callee8, this); + }))); + }); +}); +describe('Dynamic CSS React Container', function () { + test('Should wrap and render my component', function () { + var fakeProps = { + children: 'My fake content' + }; + var Component = (0, _.DynamicCSS)(buildComponent('MyComponent')); + var instance = (0, _enzyme.mount)(_react.default.createElement(Component, fakeProps)); + expect(Component.displayName).toEqual('DynamicCSS'); + expect(instance.find('[data-test-id="my-mock-component"]').exists()).toEqual(true); + expect(instance.find('[data-test-id="my-mock-component"]').text()).toEqual('My fake content'); + }); + test('should not try render component css when display name not defined', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee9() { + var resolver, css; + return regeneratorRuntime.wrap(function _callee9$(_context9) { + while (1) { + switch (_context9.prev = _context9.next) { + case 0: + resolver = new _.Resolver((0, _.DynamicCSS)(buildComponent()), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context9.next = 3; + return resolver.resolve(); + + case 3: + css = _context9.sent; + expect(css.length).toEqual(0); + + case 5: + case "end": + return _context9.stop(); + } + } + }, _callee9, this); + }))); +}); +describe('Static CSS React Container', function () { + test('Should wrap and render my component', function () { + var fakeProps = { + children: 'My fake content' + }; + var Component = (0, _.StaticCSS)(buildComponent('MyComponent')); + var instance = (0, _enzyme.mount)(_react.default.createElement(Component, fakeProps)); + expect(Component.displayName).toEqual('StaticCSS'); + expect(instance.find('[data-test-id="my-mock-component"]').exists()).toEqual(true); + expect(instance.find('[data-test-id="my-mock-component"]').text()).toEqual('My fake content'); + }); + test('should not try render component css when display name not defined', + /*#__PURE__*/ + _asyncToGenerator( + /*#__PURE__*/ + regeneratorRuntime.mark(function _callee10() { + var resolver, css; + return regeneratorRuntime.wrap(function _callee10$(_context10) { + while (1) { + switch (_context10.prev = _context10.next) { + case 0: + resolver = new _.Resolver((0, _.StaticCSS)(buildComponent()), new _file.default({ + folderPath: __dirname, + inline: false + })); + _context10.next = 3; + return resolver.resolve(); + + case 3: + css = _context10.sent; + expect(css.length).toEqual(0); + + case 5: + case "end": + return _context10.stop(); + } + } + }, _callee10, this); + }))); +}); \ No newline at end of file diff --git a/dist/adapter/cdn.js b/dist/adapter/cdn.js new file mode 100644 index 0000000..e82ab78 --- /dev/null +++ b/dist/adapter/cdn.js @@ -0,0 +1,53 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +var CDNAdapter = +/*#__PURE__*/ +function () { + function CDNAdapter(opts) { + _classCallCheck(this, CDNAdapter); + + this.cdnRoot = opts.cdnRoot; + } + + _createClass(CDNAdapter, [{ + key: "resolve", + value: function resolve(styles, components) { + var _this = this; + + return Promise.all(styles.map(function (stylePath, index) { + var filePath = "".concat(_this.cdnRoot, "/").concat(stylePath); + return Promise.resolve({ + componentName: components[index], + error: null, + success: true, + path: filePath, + content: "") + }); + })); + } + }, { + key: "render", + value: function render(rawResponse) { + return rawResponse.filter(function (style) { + return style.success; + }).reduce(function (result, style) { + return "".concat(result).concat(style.content); + }, ''); + } + }]); + + return CDNAdapter; +}(); + +exports.default = CDNAdapter; \ No newline at end of file diff --git a/dist/adapter/file.js b/dist/adapter/file.js new file mode 100644 index 0000000..746111f --- /dev/null +++ b/dist/adapter/file.js @@ -0,0 +1,91 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _util = _interopRequireDefault(require("util")); + +var _fs = _interopRequireDefault(require("fs")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +var readFile = _util.default.promisify(_fs.default.readFile); + +function fileExists(filePath) { + try { + return _fs.default.statSync(filePath).isFile(); + } catch (err) { + return false; + } +} + +var FileSystemAdapter = +/*#__PURE__*/ +function () { + function FileSystemAdapter(opts) { + _classCallCheck(this, FileSystemAdapter); + + this.folderPath = opts.folderPath; + this.inline = opts.inline; + } + + _createClass(FileSystemAdapter, [{ + key: "resolve", + value: function resolve(styles, components) { + var _this = this; + + return Promise.all(styles.map(function (stylePath, index) { + var filePath = "".concat(_this.folderPath, "/").concat(stylePath); + + if (fileExists(filePath)) { + return readFile(filePath, 'utf8').then(function (content) { + return { + componentName: components[index], + error: null, + success: true, + path: filePath, + content: content + }; + }); + } + + return Promise.resolve({ + componentName: components[index], + error: new Error('Component stylesheet does not exist'), + success: false, + path: filePath, + content: '' + }); + })); + } + }, { + key: "render", + value: function render(rawResponse) { + if (this.inline) { + return rawResponse.filter(function (style) { + return style.success; + }).reduce(function (result, style) { + return "".concat(result, ""); + }, '').replace(/\r?\n|\r/g, '').trim(); + } + + return rawResponse.filter(function (style) { + return style.success; + }).reduce(function (result, style) { + return "".concat(result).concat(style.content); + }, '').replace(/\r?\n|\r/g, '').trim(); + } + }]); + + return FileSystemAdapter; +}(); + +exports.default = FileSystemAdapter; \ No newline at end of file diff --git a/dist/dynamic-container.js b/dist/dynamic-container.js new file mode 100644 index 0000000..aa57524 --- /dev/null +++ b/dist/dynamic-container.js @@ -0,0 +1,71 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _staticContainer = _interopRequireDefault(require("./static-container")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +var _default = function _default(Component, opts) { + var StaticContainer = (0, _staticContainer.default)(Component, opts); + + var Container = + /*#__PURE__*/ + function (_StaticContainer) { + _inherits(Container, _StaticContainer); + + function Container() { + _classCallCheck(this, Container); + + return _possibleConstructorReturn(this, _getPrototypeOf(Container).apply(this, arguments)); + } + + _createClass(Container, [{ + key: "componentDidMount", + value: function componentDidMount() { + console.log('DynamicCSS'); + } + }, { + key: "render", + value: function render() { + var safeProps = _objectSpread({}, this.props); + + return _react.default.createElement(Component, safeProps); + } + }]); + + return Container; + }(StaticContainer); + + Container.displayName = 'DynamicCSS'; + return Container; +}; + +exports.default = _default; \ No newline at end of file diff --git a/dist/resolver.js b/dist/resolver.js new file mode 100644 index 0000000..5436b41 --- /dev/null +++ b/dist/resolver.js @@ -0,0 +1,77 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +var _reactTreeWalker = _interopRequireDefault(require("react-tree-walker")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); } + +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); } + +function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); } + +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +var Resolver = +/*#__PURE__*/ +function () { + function Resolver(app, adapter) { + _classCallCheck(this, Resolver); + + this.app = app; + this.adapter = adapter; + } + + _createClass(Resolver, [{ + key: "resolve", + value: function resolve() { + var _this = this; + + var styles = []; + var components = []; + return (0, _reactTreeWalker.default)(this.app, function (element, instance) { + if (instance && instance.getStyles) { + var stylesObject = instance.getStyles(); + var alreadyContainStyle = styles.some(function (e) { + return stylesObject.stylePaths.includes(e); + }); + + if (alreadyContainStyle) { + return; + } + + styles = [].concat(_toConsumableArray(styles), _toConsumableArray(stylesObject.stylePaths)); + components = [].concat(_toConsumableArray(components), [stylesObject.componentName]); + } + }).then(function () { + return _this.adapter.resolve(styles, components); + }); + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + return this.resolve().then(function (rawResponse) { + return _this2.adapter.render(rawResponse); + }); + } + }]); + + return Resolver; +}(); + +exports.default = Resolver; \ No newline at end of file diff --git a/dist/static-container.js b/dist/static-container.js new file mode 100644 index 0000000..6c32255 --- /dev/null +++ b/dist/static-container.js @@ -0,0 +1,81 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +var _default = function _default(Component, opts) { + var Container = + /*#__PURE__*/ + function (_React$Component) { + _inherits(Container, _React$Component); + + function Container(props) { + var _this; + + _classCallCheck(this, Container); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(Container).call(this, props)); + _this.getStyles = _this.getStyles.bind(_assertThisInitialized(_assertThisInitialized(_this))); + return _this; + } + + _createClass(Container, [{ + key: "getStyles", + value: function getStyles() { + var defaultStylePaths = []; + + if (Component.displayName) { + defaultStylePaths.push("".concat(Component.displayName, ".css")); + } + + var consumerDefinedStyles = opts && opts.styles ? opts.styles(this.props, this.state) : []; + return { + componentName: Component.displayName ? Component.displayName : '', + stylePaths: [].concat(defaultStylePaths, consumerDefinedStyles) + }; + } + }, { + key: "render", + value: function render() { + var safeProps = _objectSpread({}, this.props); + + return _react.default.createElement(Component, safeProps); + } + }]); + + return Container; + }(_react.default.Component); + + Container.displayName = 'StaticCSS'; + return Container; +}; + +exports.default = _default; \ No newline at end of file diff --git a/examples/express-cdn/dist/App/Body.js b/examples/express-cdn/dist/App/Body.js new file mode 100644 index 0000000..e689561 --- /dev/null +++ b/examples/express-cdn/dist/App/Body.js @@ -0,0 +1,30 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _ = require('../../../../'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function Body(props) { + return _react2.default.createElement( + 'div', + { className: 'fake-body' }, + _react2.default.createElement( + 'p', + null, + props.text + ) + ); +}; + +Body.displayName = "Body"; + +exports.default = (0, _.StaticCSS)(Body); +module.exports = exports['default']; \ No newline at end of file diff --git a/examples/express-cdn/dist/App/Header.js b/examples/express-cdn/dist/App/Header.js new file mode 100644 index 0000000..face81c --- /dev/null +++ b/examples/express-cdn/dist/App/Header.js @@ -0,0 +1,26 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _ = require('../../../../'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function Header() { + return _react2.default.createElement( + 'header', + { className: 'fake-header' }, + 'My header' + ); +}; + +Header.displayName = "Header"; + +exports.default = (0, _.StaticCSS)(Header); +module.exports = exports['default']; \ No newline at end of file diff --git a/examples/express-cdn/dist/App/index.js b/examples/express-cdn/dist/App/index.js new file mode 100644 index 0000000..c1fd6ae --- /dev/null +++ b/examples/express-cdn/dist/App/index.js @@ -0,0 +1,43 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _Header = require('./Header'); + +var _Header2 = _interopRequireDefault(_Header); + +var _Body = require('./Body'); + +var _Body2 = _interopRequireDefault(_Body); + +var _ = require('../../../../'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function Root(props) { + return _react2.default.createElement( + _react2.default.Fragment, + null, + _react2.default.createElement(_Header2.default, null), + _react2.default.createElement( + 'div', + null, + _react2.default.createElement(_Body2.default, { text: props.bodyText }) + ) + ); +} + +Root.displayName = "Root"; + +exports.default = (0, _.StaticCSS)(Root, { + styles: function styles() { + return ['core.css']; + } +}); +module.exports = exports['default']; \ No newline at end of file diff --git a/examples/express-cdn/dist/index.js b/examples/express-cdn/dist/index.js new file mode 100644 index 0000000..8a45d17 --- /dev/null +++ b/examples/express-cdn/dist/index.js @@ -0,0 +1,53 @@ +'use strict'; + +var _express = require('express'); + +var _express2 = _interopRequireDefault(_express); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _server = require('react-dom/server'); + +var _server2 = _interopRequireDefault(_server); + +var _App = require('./App'); + +var _App2 = _interopRequireDefault(_App); + +var _ = require('../../../'); + +var _cdn = require('../../../cdn'); + +var _cdn2 = _interopRequireDefault(_cdn); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var app = (0, _express2.default)(); + +app.use(_express2.default.static('styles')); + +app.get('/', function (req, res) { + var app = _react2.default.createElement(_App2.default, { + bodyText: 'hello world, from the server yo' + }); + + var htmlBody = _server2.default.renderToString(app); + var perfstart = process.hrtime(); + + var resolver = new _.Resolver(app, new _cdn2.default({ + cdnRoot: '' + })); + + resolver.render().then(function (css) { + var perfEnd = process.hrtime(perfstart); + console.log('CSS Render time: %ds %dms', perfEnd[0], perfEnd[1] / 1000000); + + res.send('\n \n \n ' + css + '\n \n \n ' + htmlBody + '\n \n \n '); + }); +}); + +app.listen(8181, function () { + console.log('Example application running on port 8181'); +}); \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index a8a63c8..4a9c747 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@mintuz/react-css-loader", - "version": "3.0.0", + "version": "3.0.2", "lockfileVersion": 1, "dependencies": { "@babel/cli": { diff --git a/package.json b/package.json index ef76589..c38e625 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@mintuz/react-css-loader", - "version": "3.0.0", + "version": "3.0.2", "main": "index.js", "private": false, "description": "A React high order component that provides functionality for tree shaking CSS per component",