akveo / akveo/react-native-ui-kitten

More transparent theme style JSON generation.

オープン
#1,019 コメント 16 件 リアクション 0 件 担当者 0 名 GitHub で見る
:bulb: Proposal :man_shrugging: Needs info
主要言語
TypeScript
スター
10.7k
フォーク
962
PR マージ指標
30日以内にマージされた PR はありません

説明

## 🚀 Feature Proposal

Currently(v5), theme style JSON can be pre-generated with `@ui-kitten/metro-config` module. Which watches a given custom mapping file and creates a JSON file, then injects the created JSON file under `node_modules/@eva-design/...` directory. And the `@eva-design/eva or material` modules' entry source code is rewrited to exports `exports.style = (style object from generated JSON)`. And finally `` be not going to create styles in runtime.

It works well and seems to make launching somewhat faster (I have not exactly measured yet).

- But the whole process of styles injection is complicate and veiled, I think.
- And also I have used two type of custom mappings for each native and web platforms, but current method cannot support such configuration.
- Also my project is mono-repo which raises `no such file path..` error with `@ui-kitten/metro-config`. (I had to make a tricky workaround to resolve it with `@ui-kitten/metro-config`)

While struggling with above problems, I thought rather another way of style pre-generation would be great. So now I generate styles modules by programmatically call the `schemaProcessor.createStyles` and store it into project files, then requires modules for each platforms and provide as `styles` prop of`ApplicationProvider`.

Yes it won't watch the custom mapping dynamically but it can support multiple styles and seems to easy to understand the theming flow.

I hope a tool to generate styles JSON (or js module) with command line might be good rather current veiled process. What do you think about such problems?

## Example
### Generate styles as js module to reduce JSON parsing time before build for native and web platforms each.
```js
const crypto = require("crypto");
const fs = require("fs");
const path = require("path");
const _ = require("lodash");
const { SchemaProcessor } = require("@eva-design/processor");
const schemaProcessor = new SchemaProcessor();

const defaultMapping = require("@eva-design/eva/mapping.json");
const nativeMapping = _.merge({}, defaultMapping, require("./theme.mapping.json"));
const webMapping = _.merge({}, defaultMapping, require("./theme.mapping.web.json"));

createStylesFile("theme.styles.generated", nativeMapping);
createStylesFile("theme.styles.generated.web", webMapping);

function createStylesFile(filePath, mapping) {
const json = JSON.stringify({
checksum: crypto.createHash("sha1").update(JSON.stringify(mapping, null, 2)).digest("hex"),
styles: schemaProcessor.process(mapping),
}, null, 2);
const file = `module.exports = ${json};`;
fs.writeFileSync(
path.resolve(__dirname, filePath),
file,
);
}
```
### Provide styles in runtime
```ts
import { styles } from "./theme.styles.generated";
import { theme } from "./theme.palettes";

// ...
function App() {
return (

{/* ... */}

);
}
```

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。