Skip to content

Commit

Permalink
Merge branch 'develop'
Browse files Browse the repository at this point in the history
  • Loading branch information
gnithin committed Jul 22, 2019
2 parents 8ac1461 + 5be14e5 commit 1cf4d14
Show file tree
Hide file tree
Showing 10 changed files with 117 additions and 55 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@
__snapshots__
.DS_Store
/lib
.idea
yarn.lock
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# CHANGE-LOG

## 0.4.0
- Add support for directory-level flavors
- Fix all the security warnings on libraries

## 0.3.0
- Add `getFlavor` macro
- Fix the unmet dependency warnings on installing the library
Expand Down
21 changes: 18 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,21 +40,31 @@ Here the the flavors-key is `layout-theme`. The current flavor being `green`.

If, for some reason, you cannot include the `.babel-plugin-macrosrc.json` file to your project, you can use any of the methods mentioned [here](https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#config-experimental).

You can then use the flavor-key in any class by adding the macro-key as the last element, in the name of the import string or just before the extension. Also make sure to call the `flavor()` function. In the below example, the flavor-key `layout-theme`, configured above, is being used -
You can then use the flavor-key in any class by adding the macro-key as the last element, in the name of the import string or just before the extension. You can use flavors in the directory-level as well. Just make sure to call the `flavor()` function, after all the import statements.

In the below example, the flavor-key `layout-theme`, configured above, is being used -
```js
// Import flavors on top
import flavors from 'flavors.macro'

import Hello from './hello.layout-theme.js'
import Bye from './bye.layout-theme'
import Constants from './constants.layout-theme/theme'
import Config from './layout-theme.config/config'
import Theme from './layout-theme/theme'
// ... other imports

// Add this right after all the imports are declared
// Add this right after all the imports are declared (won't work otherwise)
flavors();
```
When the application is built, the above class will evaluate to -
When the application is built, the above statements will evaluate to -

```js
import Hello from './hello.green.js'
import Bye from './bye.green'
import Constants from './constants.green/theme'
import Config from './green.config/config'
import Theme from './green/theme'
// ... other imports
```

Expand Down Expand Up @@ -87,6 +97,11 @@ switch (currFlavor) {
```
`getFlavor` will return an empty string if the flavor-key is incorrect.

## Building and running locally
- All the source-code is inside the `src` directory.
- Ideally any change that's made needs to have a test. Running the tests - `npm test`.
- Whenever testing out in the example-app, make sure to run `npm run-script build` in the project-root, since it'll be picking up from the local-env. NOTE: `lib` dir is git-ignored, so you'll not be able to see any-change tracked by git.
- Deploy to npm using - `npm publish`

## License
MIT. See license file
4 changes: 4 additions & 0 deletions example-app/src/App.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { Component } from 'react';
import Hello from './hello.layout-theme'
import ContentLayout from './contents.layout-theme/content'
import ContentStyled from './contents.style-theme/content'
import flavors from 'flavors.macro'
flavors();

class App extends Component {
render() {
return (
<div className="App">
<ContentLayout />
<ContentStyled />
<Hello />
</div>
);
Expand Down
13 changes: 13 additions & 0 deletions example-app/src/contents.black/content.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React, { Component } from 'react';

class App extends Component {
render() {
return (
<div>
Content from inside the black flavor
</div>
);
}
}

export default App;
13 changes: 13 additions & 0 deletions example-app/src/contents.green/content.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import React, { Component } from 'react';

class App extends Component {
render() {
return (
<div>
Content from inside the green flavor
</div>
);
}
}

export default App;
77 changes: 30 additions & 47 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "flavors.macro",
"version": "0.3.0",
"version": "0.4.0",
"description": "Macro for building different flavors of a react-app ",
"keywords": [
"babel-plugin-macros"
Expand Down
16 changes: 12 additions & 4 deletions src/processor.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,31 @@ export default class Processor {
importVal: importVal,
}

if (Utils.isNull(importVal)) {
return resp
}

// Fetch the flavor-map
var flavorMap = Processor.getFlavorMapForConfig(config)

// Import statement logic
var isMatched = false;
var replacementVal = null;
var matchedKey = null;
var matchedPathChar = null;

for (var flavorKey in flavorMap) {
if (false === flavorMap.hasOwnProperty(flavorKey)) {
continue
}

var isDefaultRegex = new RegExp(`^.+\\.${Utils.escapeRegExp(flavorKey)}(?:\\.[^.]+)?$`)
if (true === isDefaultRegex.test(importVal)) {
var isDefaultRegex = new RegExp(`^.+([./])${Utils.escapeRegExp(flavorKey)}(?:[./].+)?$`)
var regexResults = importVal.match(isDefaultRegex)
if (false === Utils.isNull(regexResults) && regexResults.length >= 2) {
isMatched = true;
matchedKey = flavorKey
replacementVal = flavorMap[matchedKey]
matchedPathChar = regexResults[1]
break;
}
}
Expand All @@ -50,9 +58,9 @@ export default class Processor {
"" => abc.js
*/
if (replacementVal !== "") {
replacementVal = `.${replacementVal}`
replacementVal = `${matchedPathChar}${replacementVal}`
}
var defaultReplaceRegex = new RegExp(`\\.${Utils.escapeRegExp(matchedKey)}\\b`)
var defaultReplaceRegex = new RegExp(`[./]${Utils.escapeRegExp(matchedKey)}\\b`)
importVal = importVal.replace(defaultReplaceRegex, `${replacementVal}`);


Expand Down
20 changes: 20 additions & 0 deletions tests/configs.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,26 @@ it('Config test', () => {
},
[EXPECTED_MODIFIED_KEY]: false,
},
// Directory flavors
{
[IP_KEY]: "abc/styleFlavor/theme.js",
[EXPECTED_KEY]: "abc/green/theme.js",
[CONFIG_KEY]: flavorConfig,
[EXPECTED_MODIFIED_KEY]: true,
},
{
[IP_KEY]: "abc/constants.layoutFlavor/theme.js",
[EXPECTED_KEY]: "abc/constants.red/theme.js",
[CONFIG_KEY]: flavorConfig,
[EXPECTED_MODIFIED_KEY]: true,
},
// The reversed-flavors should also work
{
[IP_KEY]: "abc/layoutFlavor.constants/theme.js",
[EXPECTED_KEY]: "abc/red.constants/theme.js",
[CONFIG_KEY]: flavorConfig,
[EXPECTED_MODIFIED_KEY]: true,
},
]

ipList.forEach(entry => {
Expand Down

0 comments on commit 1cf4d14

Please sign in to comment.