You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.3 KiB
36 lines
1.3 KiB
4 years ago
|
const path = require('path');
|
||
|
|
const pascalCase = require('pascal-case');
|
||
|
|
const { stringifyRequest } = require('loader-utils');
|
||
|
|
const { stringifySymbol, stringify } = require('../../lib/utils');
|
||
|
|
|
||
|
|
module.exports = function runtimeGenerator({ symbol, config, context, loaderContext }) {
|
||
|
|
const { spriteModule, symbolModule, runtimeOptions } = config;
|
||
|
|
const compilerContext = loaderContext._compiler.context;
|
||
|
|
|
||
|
|
const iconModulePath = path.resolve(compilerContext, runtimeOptions.iconModule);
|
||
|
|
const iconModuleRequest = stringify(
|
||
|
|
path.relative(path.dirname(symbol.request.file), iconModulePath)
|
||
|
|
);
|
||
|
|
|
||
|
|
const spriteRequest = stringifyRequest({ context }, spriteModule);
|
||
|
|
const symbolRequest = stringifyRequest({ context }, symbolModule);
|
||
|
|
const parentComponentDisplayName = 'SpriteSymbolComponent';
|
||
|
|
const displayName = `${pascalCase(symbol.id)}${parentComponentDisplayName}`;
|
||
|
|
|
||
|
|
return `
|
||
|
|
import React from 'react';
|
||
|
|
import SpriteSymbol from ${symbolRequest};
|
||
|
|
import sprite from ${spriteRequest};
|
||
|
|
import ${parentComponentDisplayName} from ${iconModuleRequest};
|
||
|
|
|
||
|
|
const symbol = new SpriteSymbol(${stringifySymbol(symbol)});
|
||
|
|
sprite.add(symbol);
|
||
|
|
|
||
|
|
export default class ${displayName} extends React.Component {
|
||
|
|
render() {
|
||
|
|
return <${parentComponentDisplayName} glyph="${symbol.id}" {...this.props} />;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
};
|