Skip to content

Commit

Permalink
add inline images
Browse files Browse the repository at this point in the history
  • Loading branch information
makamekm committed Feb 23, 2020
1 parent a5be7fe commit ec2d7ea
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 27 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ figmaReact.runFigmaReact(options).catch(err => {
- decorator // default 'observer'
- classAfterFix // default 'Generated'
- fileAfterFix // default '.generated'
- useBase64Images // default false
- typeFactory // default ({ props: componentProps }) => `string`
- prettierOptions // default
```
Expand Down
14 changes: 2 additions & 12 deletions content.plugins.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,12 @@ function applyStyles(state) {
// TODO: use import from './${getComponentName(node.name, options)}'
async function setComponentFromCache(state, shared) {
const { node, content, classNames } = state;
const {
component,
imgMap,
pngImages,
componentMap,
componentDescriptionMap,
localComponentMap,
options,
additionalStyles,
genClassName
} = shared;
const { component, componentMap, localComponentMap, options, additionalStyles, genClassName } = shared;
if (node.id !== component.id && node.name.charAt(0) === '#') {
const name = getComponentName(node.name, options);
emptyChildren(state);
content.push(`<${name} {...props} nodeId='${node.id}' />`);
if (!componentMap[name]) await createComponent(node, imgMap, pngImages, componentMap, componentDescriptionMap, options);
if (!componentMap[name]) await createComponent(node, shared);
localComponentMap[name] = componentMap[name];

const currentClass = genClassName();
Expand Down
16 changes: 13 additions & 3 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,9 @@ async function runFigmaReact(options = {}) {
componentDescriptionMap,
vectorMap,
vectorList,
options
options,
fileKey,
headers
};

// Load the document from Figma
Expand All @@ -61,15 +63,23 @@ async function runFigmaReact(options = {}) {

// Load all images used in the document from Figma
const imageJSON = await loadURLImages(vectorList, fileKey, headers);
const images = await loadImages(imageJSON, fileKey, headers);
const imgMap = await loadImages(imageJSON, fileKey, headers);
const pngImages = await loadURLPNGImages(fileKey, headers);

// Debug
const fs = require('fs');
fs.writeFileSync('./temp.json', JSON.stringify(canvas, null, 4));

// Create components
await createComponents(canvas, images, pngImages, componentMap, componentDescriptionMap, options);
await createComponents(canvas, {
fileKey,
headers,
imgMap,
pngImages,
componentMap,
componentDescriptionMap,
options
});

// Generate components
for (const key in componentMap) {
Expand Down
15 changes: 6 additions & 9 deletions lib.js
Original file line number Diff line number Diff line change
Expand Up @@ -582,7 +582,8 @@ function getDescriptionStyles({ componentDescriptionMap, options }, node) {
return description.substring(description.indexOf(delimiter) + delimiter.length).replace(/\\n/g, `\n`);
}

async function createComponent(component, imgMap, pngImages, componentMap, componentDescriptionMap, options = {}) {
async function createComponent(component, parentShared) {
const { componentMap, options } = parentShared;
const name = getComponentName(component.name, options);
const fileName = getFileName(name);
const instance = getComponentInstance(component, options);
Expand Down Expand Up @@ -625,6 +626,7 @@ async function createComponent(component, imgMap, pngImages, componentMap, compo
const path = `src/design-system/${fileName}.tsx`;

const shared = {
...parentShared,
name,
fileName,
path,
Expand All @@ -636,14 +638,9 @@ async function createComponent(component, imgMap, pngImages, componentMap, compo
genClassName,
printStyle,
additionalStyles,
imgMap,
pngImages,
componentMap,
componentDescriptionMap,
localComponentMap,
stylePlugins: options.stylePlugins,
contentPlugins: options.contentPlugins,
options
contentPlugins: options.contentPlugins
};

print(`return (<>`);
Expand Down Expand Up @@ -691,12 +688,12 @@ async function createComponent(component, imgMap, pngImages, componentMap, compo
componentMap[name] = { instance, name, doc, fileName, localComponentMap };
}

async function createComponents(canvas, images, pngImages, componentMap, componentDescriptionMap, options = {}) {
async function createComponents(canvas, shared) {
for (let i = 0; i < canvas.children.length; i++) {
const child = canvas.children[i];
if (child.name.charAt(0) === '#' && child.visible !== false) {
const child = canvas.children[i];
await createComponent(child, images, pngImages, componentMap, componentDescriptionMap, options);
await createComponent(child, shared);
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions presets.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ module.exports = {
typeFactory: typeFactoryDefault,
classAfterFix: 'Generated',
fileAfterFix: '.generated',
useBase64Images: false,
prettierOptions: {
parser: 'typescript',
semi: true,
Expand All @@ -44,6 +45,7 @@ module.exports = {
typeFactory: typeFactoryDefault,
classAfterFix: 'Generated',
fileAfterFix: '.generated',
useBase64Images: false,
prettierOptions: {
parser: 'typescript',
semi: true,
Expand Down
14 changes: 11 additions & 3 deletions style.plugins.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
const requestImageSize = require('request-image-size');
const fetch = require('node-fetch');
const { colorString, dropShadow, innerShadow, getPaint, paintToLinearGradient, paintToRadialGradient, applyFontStyle } = require('./lib');

const stylePlugins = [
Expand Down Expand Up @@ -198,8 +199,8 @@ function setHorizontalLayout({ node, middleStyle, innerStyle, parent, classNames
}
}

async function setFrameStyles(state, { pngImages }) {
const { node, middleStyle } = state;
async function setFrameStyles(state, { pngImages, headers, options }) {
const { node, middleStyle, props } = state;
if (['FRAME', 'RECTANGLE', 'INSTANCE', 'COMPONENT'].indexOf(node.type) >= 0) {
if (['FRAME', 'COMPONENT', 'INSTANCE'].indexOf(node.type) >= 0) {
middleStyle.backgroundColor = colorString(node.backgroundColor);
Expand All @@ -212,7 +213,14 @@ async function setFrameStyles(state, { pngImages }) {
middleStyle.opacity = lastFill.opacity;
} else if (lastFill.type === 'IMAGE') {
const imageSize = await requestImageSize(pngImages[lastFill.imageRef]);
middleStyle.backgroundImage = `url(${pngImages[lastFill.imageRef]})`;
if (options.useBase64Images || Object.keys(props).includes('useBase64')) {
const imageRequest = await fetch(pngImages[lastFill.imageRef], { headers });
const imageBuffer = await imageRequest.buffer();
const imageDataURL = `data:${imageRequest.headers.get('content-type')};base64,${imageBuffer.toString('base64')}`;
middleStyle.backgroundImage = `url(${imageDataURL})`;
} else {
middleStyle.backgroundImage = `url(${pngImages[lastFill.imageRef]})`;
}
middleStyle.backgroundPosition = 'center center';
middleStyle.backgroundRepeat = 'no-repeat';
if (lastFill.scaleMode === 'FILL') {
Expand Down

0 comments on commit ec2d7ea

Please sign in to comment.