chore(mixed): fix imports and introduce bundler test #570
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import React from 'react' | ||
| import ReactDOM from 'react-dom' | ||
| import { Button, Provider, themes } from '@stardust-ui/react' | ||
|
|
||
| ReactDOM.render( | ||
| React.createElement( | ||
| Provider, | ||
| { theme: themes.teams }, | ||
| React.createElement(Button, { content: 'Theming' }), | ||
| ), | ||
| document.getElementById('root'), | ||
| ) |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import replace from 'rollup-plugin-replace' | ||
|
There was a problem hiding this comment. this should be placed somewhere under There was a problem hiding this comment. It's already placed in the separate dir. I don't want to be so specific for now. There was a problem hiding this comment. yes, but the same reasoning would apply well in case it will be put in any dir - thus, I am not sure that this is a valid argument. The reasoning behind my ask is the following: currently, with the dir introduced at the place where you are suggesting, we would have the following project structure: So, reasonable question is why There was a problem hiding this comment.
At now, yes. But in the future, I think that we will have other tasks that will should also have files and templates. There was a problem hiding this comment. I must agree here that better directory structure would reflect exactly what we test even. Having structure, something like: will be much more cleaner, and it will be obvious what scenarios we got covered so far... |
||
| import resolve from 'rollup-plugin-node-resolve' | ||
| import commonjs from 'rollup-plugin-commonjs' | ||
|
|
||
| const lodashExports = [ | ||
|
There was a problem hiding this comment. How is this going to scale? Whenever a new function is used, do I need to remember I have to add it here? There was a problem hiding this comment. Yes, it's a real problem 👎 There was a problem hiding this comment. Resolved with |
||
| 'compact', | ||
| 'difference', | ||
| 'each', | ||
| 'findIndex', | ||
| 'flow', | ||
| 'forEach', | ||
| 'get', | ||
| 'has', | ||
| 'filter', | ||
| 'first', | ||
| 'includes', | ||
| 'intersection', | ||
| 'invoke', | ||
| 'isArray', | ||
| 'isEmpty', | ||
| 'isFunction', | ||
| 'isNil', | ||
| 'isObject', | ||
| 'isPlainObject', | ||
| 'inRange', | ||
| 'isUndefined', | ||
| 'keys', | ||
| 'last', | ||
| 'map', | ||
| 'mapValues', | ||
| 'merge', | ||
| 'memoize', | ||
| 'min', | ||
| 'pick', | ||
| 'round', | ||
| 'set', | ||
| 'some', | ||
| 'sortBy', | ||
| 'startsWith', | ||
| 'sum', | ||
| 'take', | ||
| 'trim', | ||
| 'without', | ||
| 'union', | ||
| 'uniq', | ||
| 'uniqueId', | ||
| ] | ||
|
|
||
| export default { | ||
| input: 'app.js', | ||
| output: { | ||
| file: 'bundle.js', | ||
| format: 'iife', | ||
| sourcemap: true, | ||
| }, | ||
| plugins: [ | ||
| replace({ | ||
| 'process.env.NODE_ENV': JSON.stringify('development'), | ||
| }), | ||
| resolve(), | ||
| commonjs({ | ||
| include: 'node_modules/**', | ||
| namedExports: { | ||
| 'node_modules/keyboard-key/src/keyboardKey.js': [ | ||
| 'ArrowDown', | ||
| 'ArrowUp', | ||
| 'ArrowLeft', | ||
| 'ArrowRight', | ||
| 'End', | ||
| 'Enter', | ||
| 'Escape', | ||
| 'Home', | ||
| 'getCode', | ||
| 'Spacebar', | ||
| 'Tab', | ||
| ], | ||
| 'node_modules/lodash/fp.js': lodashExports, | ||
| 'node_modules/lodash/lodash.js': lodashExports, | ||
| 'node_modules/prop-types/index.js': [ | ||
| 'any', | ||
| 'arrayOf', | ||
| 'bool', | ||
| 'element', | ||
| 'func', | ||
| 'node', | ||
| 'number', | ||
| 'object', | ||
| 'oneOf', | ||
| 'oneOfType', | ||
| 'shape', | ||
| 'string', | ||
| 'symbol', | ||
| ], | ||
| 'node_modules/react/index.js': [ | ||
| 'Component', | ||
| 'cloneElement', | ||
| 'createRef', | ||
| 'PureComponent', | ||
| 'Fragment', | ||
| 'Children', | ||
| 'createElement', | ||
| 'isValidElement', | ||
| ], | ||
| 'node_modules/react-dom/index.js': ['createPortal', 'findDOMNode'], | ||
| 'node_modules/react-is/index.js': ['isForwardRef'], | ||
| 'node_modules/what-input/dist/what-input.js': ['ask'], | ||
| }, | ||
| }), | ||
| ], | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import * as debug from 'debug' | ||
| import { task } from 'gulp' | ||
| import * as fs from 'fs' | ||
| import * as path from 'path' | ||
| import * as tmp from 'tmp' | ||
|
|
||
| import { buildAndPackStardust, createPackageFilename, runIn } from './test-projects' | ||
|
|
||
| const logger = debug('bundle:rollup') | ||
| logger.enabled = true | ||
|
|
||
| task('test:bundlers:rollup', async () => { | ||
| const packageFilename = createPackageFilename() | ||
|
|
||
| await buildAndPackStardust(packageFilename) | ||
| logger(`✔️Stardust UI package was prepared: ${packageFilename}`) | ||
|
|
||
| const tmpDirectory = tmp.dirSync({ prefix: 'stardust-' }).name | ||
| logger(`✔️Temporary directory was created: ${tmpDirectory}`) | ||
|
|
||
| const dependencies = [ | ||
| 'rollup', | ||
| 'rollup-plugin-replace', | ||
| 'rollup-plugin-commonjs', | ||
| 'rollup-plugin-node-resolve', | ||
| 'react', | ||
| 'react-dom', | ||
| ].join(' ') | ||
| await runIn(tmpDirectory)(`yarn add ${dependencies}`) | ||
| logger(`✔️Dependencies were installed`) | ||
|
|
||
| await runIn(tmpDirectory)(`yarn add ${packageFilename}`) | ||
| logger(`✔️Stardust UI was added to dependencies`) | ||
|
|
||
| fs.copyFileSync( | ||
| path.resolve(__dirname, '..', 'scaffold', 'app.js'), | ||
| path.resolve(tmpDirectory, 'app.js'), | ||
| ) | ||
| fs.copyFileSync( | ||
| path.resolve(__dirname, '..', 'scaffold', 'rollup.config.js'), | ||
| path.resolve(tmpDirectory, 'rollup.config.js'), | ||
| ) | ||
| logger(`✔️Source and bundler's config were created`) | ||
|
|
||
| await runIn(tmpDirectory)(`yarn rollup -c`) | ||
| logger(`✔️Example project was successfully built: ${tmpDirectory}`) | ||
|
There was a problem hiding this comment. It seems we are ignoring rollup warnings. Are we ok with it or would we like to use this as an opportunity to tighten our rules and require warning-free build in rollup? (no warnings are currently allowed in webpack build) There was a problem hiding this comment. I reworked it, now we have a warning whitelist, other warnings will throw. We can fix all left circular imports in a separate PR because it will require more work. |
||
| }) | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import * as ts from 'typescript' | ||
|
|
||
| type Options = { | ||
| moduleNames: string[] | ||
| } | ||
|
|
||
| /** | ||
| * A factory that creates ES default import, i.e: import _ from 'lodash' | ||
| */ | ||
| const createDefaultImport = (importName: string, moduleName: string) => | ||
| ts.createImportDeclaration( | ||
| undefined, | ||
| undefined, | ||
| ts.createImportClause(ts.createIdentifier(importName), undefined), | ||
| ts.createStringLiteral(moduleName), | ||
| ) | ||
|
|
||
| /** | ||
| * A functions transforms ES import to default if it's required: | ||
| * import * as _ from 'lodash' - will be transformed | ||
| * import { pick } from 'lodash' - will be skipped | ||
| * import _ from 'lodash' - will be skipped | ||
| */ | ||
| const transformImportIfRequired = ( | ||
| node: ts.ImportDeclaration, | ||
| moduleNames: string[], | ||
| ): ts.ImportDeclaration => { | ||
| const importClause = node.importClause | ||
| // Heads up! | ||
| // We need there slice quoutes: 'color' => color | ||
| const importName = node.moduleSpecifier.getText().slice(1, -1) | ||
| const includes = moduleNames.indexOf(importName) !== -1 | ||
|
|
||
| if (includes && ts.isNamespaceImport(importClause.namedBindings)) { | ||
| return createDefaultImport(importClause.namedBindings.name.text, importName) | ||
| } | ||
|
|
||
| return node | ||
| } | ||
|
|
||
| const createTransformer = ( | ||
| options: Partial<Options> = {}, | ||
| ): ts.TransformerFactory<ts.SourceFile> => { | ||
| return (context: ts.TransformationContext) => { | ||
| return (node: ts.SourceFile) => { | ||
| const visitor: ts.Visitor = (node: ts.Node) => { | ||
| if (ts.isImportDeclaration(node)) { | ||
| return transformImportIfRequired(node, options.moduleNames) | ||
| } | ||
|
|
||
| return ts.visitEachChild(node, visitor, context) | ||
| } | ||
|
|
||
| return ts.visitNode(node, visitor) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default createTransformer |
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
when we are planning to return this? And, actually, what was specific reason to disable these tests - currently we have no any checks that any client is able to consume our library
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
After #550 will be merged