More transparent theme style JSON generation.

🚀 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 <ApplicationProvider styles={evaModule.styles} (...)> 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 ofApplicationProvider.

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.

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

import { styles } from "./theme.styles.generated";
import { theme } from "./theme.palettes";

// ...
function App() {
  return (
    <EvaThemeProvider styles={styles} theme={theme}>
    {/* ... */}
    </EvaThemeProvider>
  );
}

[sschottler]

I ran into similar issues. This was my workaround for the hard-coded RELATIVE_PATHS inside BootstrapService (detect root and call process.chdir before calling BootstrapService.run):

// cli.js
const path = require('path');
const findWorkspaceRoot = require('find-yarn-workspace-root');
const BootstrapService = require('@ui-kitten/metro-config/services/bootstrap.service').default;

function findRootFolder() {
  const packageFolder = path.dirname(__dirname);
  const index = packageFolder.toLowerCase().indexOf('node_modules');
  const isRunningInsideNodeModules = index > -1;

  if (isRunningInsideNodeModules) {
    return packageFolder.substring(0, index);
  }
  // running inside local monorepo:
  return findWorkspaceRoot(packageFolder);
}

const rootFolder = findRootFolder();
process.chdir(rootFolder);

BootstrapService.run({ evaPackage: '@eva-design/eva', customMappingFile: '....' });

node cli

[artyorsh]

@dehypnosis I would suggest looking through existing implementation to realize how it works. There is no meaningful documentation on working with mapping to be honest.

mapping.json