Skip to content

Commit

Permalink
Update build scripts and clean up
Browse files Browse the repository at this point in the history
  • Loading branch information
@tomi-msft
tomi-msft committed Aug 22, 2023
1 parent 7ba1d6b commit 641e10d
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 38 deletions.
28 changes: 13 additions & 15 deletions importer/rtlMetadata.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,20 @@ const argv = require("yargs").boolean("selector").default("selector", false).boo
const _ = require("lodash");

const SRC_PATH = argv.source;
const DEST_PATH = argv.dest;
const DEST_FILE = argv.dest;

if (!SRC_PATH) {
throw new Error("Icon source folder not specified by --source");
}
if (!DEST_PATH) {
throw new Error("Output destination folder not specified by --dest");
if (!DEST_FILE) {
throw new Error("Output destination file not specified by --dest");
}

if (!fs.existsSync(DEST_PATH)) {
fs.mkdirSync(DEST_PATH);
const destFolder = path.dirname(DEST_FILE);
if (!fs.existsSync(destFolder)) {
fs.mkdirSync(destFolder);
}

const destFile = path.join(DEST_PATH, 'rtl.json')

processFolder(SRC_PATH);
const result ={}
function processFolder(srcPath) {
Expand Down Expand Up @@ -50,7 +49,7 @@ function processFolder(srcPath) {
} else if (file.startsWith('_')) {
// Skip invalid file names
return;
} else if(file.endsWith('.json')) {
} else if (file === 'metadata.json') {
// If it's a metadata file, read and parse its content
fs.readFile(srcFile, 'utf8', (err, data) => {
if (err) {
Expand All @@ -60,11 +59,11 @@ function processFolder(srcPath) {
try {
// Parse the json content
let metadata = JSON.parse(data);
let iconSize = metadata.size //get the size array
let iconName = metadata.name; // get the icon name
const directionType = metadata.directionType ? metadata.directionType : 'none'; // check to see if a directionType is in this manifest.json file
if(directionType === 'none') { //ignore files with no directionType
return
let iconSize = metadata.size;
let iconName = metadata.name;
const directionType = metadata.directionType;
if (!directionType) { //ignore files with no directionType
return;
}
iconName = iconName.replace(/\s+/g, '') //remove space
iconName = iconName.replace(iconName.substring(0, 1), iconName.substring(0, 1).toUpperCase()) // capitalize the first letter
Expand Down Expand Up @@ -99,11 +98,10 @@ function processFolder(srcPath) {
})
})
}
//console.log(result)

function convertToJson(result) {
const compiledJson = JSON.stringify(result, null, 2);
fs.writeFile(destFile, compiledJson, 'utf8', (err) => {
fs.writeFile(DEST_FILE, compiledJson, 'utf8', (err) => {
if (err) {
console.error('Error writing to JSON fIle: ', err)
}
Expand Down
16 changes: 7 additions & 9 deletions packages/react-icons/convert-font.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const DEST_PATH = argv.dest;
// @ts-ignore
const CODEPOINT_DEST_PATH = argv.codepointDest;
// @ts-ignore
const RTL_PATH = argv.rtl;
const RTL_FILE = argv.rtl;


if (!SRC_PATH) {
Expand All @@ -32,8 +32,8 @@ if (!DEST_PATH) {
if (!CODEPOINT_DEST_PATH) {
throw new Error("Output destination folder for codepoint map not specified by --dest");
}
if (!RTL_PATH) {
throw new Error("RTL folder not specified by --rtl");
if (!RTL_FILE) {
throw new Error("RTL file not specified by --rtl");
}

processFiles(SRC_PATH, DEST_PATH)
Expand Down Expand Up @@ -144,17 +144,15 @@ async function generateCodepointMapForWebpackPlugin(destPath, iconEntries, resiz
function generateReactIconEntries(iconEntries, resizable) {
/** @type {string[]} */
const iconExports = [];
let rtlPath = path.join(RTL_PATH, 'rtl.json')
const metadata = JSON.parse(fsS.readFileSync(rtlPath));
const metadata = JSON.parse(fsS.readFileSync(RTL_FILE, 'utf-8'));
for (const [iconName, codepoint] of Object.entries(iconEntries)) {
let destFilename = getReactIconNameFromGlyphName(iconName, resizable);
var flipInRtl = metadata[destFilename] === 'mirror' //checks rtl.json to see if icon is autoflippable
const options = flipInRtl ? ` { flipInRtl: true }` : undefined;
var flipInRtl = metadata[destFilename] === 'mirror';
var jsCode = `export const ${destFilename} = /*#__PURE__*/createFluentFontIcon(${JSON.stringify(destFilename)
}, ${JSON.stringify(String.fromCodePoint(codepoint))
}, ${resizable ? 2 /* Resizable */ : /filled$/i.test(iconName) ? 0 /* Filled */ : 1 /* Regular */
}, ${resizable ? undefined : ` ${/(?<=_)\d+(?=_filled|_regular)/.exec(iconName)[0]}`
}, ${options});`;
}, ${resizable ? undefined : ` ${/(?<=_)\d+(?=_filled|_regular)/.exec(iconName)?.[0]}`
}${flipInRtl ? `, { flipInRtl: true }` : ''});`;

iconExports.push(jsCode);
}
Expand Down
10 changes: 5 additions & 5 deletions packages/react-icons/convert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,17 @@ const _ = require("lodash");

const SRC_PATH = argv.source;
const DEST_PATH = argv.dest;
const RTL_PATH = argv.rtl;
const RTL_FILE = argv.rtl;

if (!SRC_PATH) {
throw new Error("Icon source folder not specified by --source");
}
if (!DEST_PATH) {
throw new Error("Output destination folder not specified by --dest");
}
if (!RTL_PATH) {
throw new Error("RTL folder not specified by --rtl");

if (!RTL_FILE) {
throw new Error("RTL file not specified by --rtl");
}

if (!fs.existsSync(DEST_PATH)) {
Expand Down Expand Up @@ -91,8 +92,7 @@ function processFolder(srcPath, destPath, resizable) {
var files = fs.readdirSync(srcPath)
/** @type string[] */
const iconExports = [];
let rtlPath = path.join(RTL_PATH, 'rtl.json')
var metadata = JSON.parse(fs.readFileSync(rtlPath));
var metadata = JSON.parse(fs.readFileSync(RTL_FILE, 'utf-8'));
//console.log(metadata);
files.forEach(function (file, index) {
var srcFile = path.join(srcPath, file)
Expand Down
12 changes: 6 additions & 6 deletions packages/react-icons/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,21 @@
},
"scripts": {
"clean": "find ./src -type f ! -name \"wrapIcon.tsx\" -name \"*.tsx\" -delete",
"cleanSvg": "rm -rf ./intermediate",
"clean:svg": "rm -rf ./intermediate",
"copy": "node ../../importer/generate.js --source=../../assets --dest=./intermediate --extension=svg --target=react",
"copy:font-files": "cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib/utils/fonts/. && cpy './src/utils/fonts/*.{ttf,woff,woff2,json}' ./lib-cjs/utils/fonts/.",
"convert:svg": "node convert.js --source=./intermediate --dest=./src --rtl=./intermediate",
"convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts --rtl=./intermediate",
"convert:svg": "node convert.js --source=./intermediate --dest=./src --rtl=./intermediate/rtl.json",
"convert:fonts": "node convert-font.js --source=./src/utils/fonts --dest=./src/fonts --codepointDest=./src/utils/fonts --rtl=./intermediate/rtl.json",
"generate:font-regular": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Regular --codepoints=../../fonts/FluentSystemIcons-Regular.json",
"generate:font-filled": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Filled --codepoints=../../fonts/FluentSystemIcons-Filled.json",
"generate:font-resizable": "node ../../importer/generateFont.js --source=intermediate --dest=src/utils/fonts --iconType=Resizable",
"generate:font": "npm run generate:font-regular && npm run generate:font-filled && npm run generate:font-resizable",
"generate:rtl": "node ../../importer/rtlMetadata.js --source=../../assets --dest=./intermediate",
"generate:rtl": "node ../../importer/rtlMetadata.js --source=../../assets --dest=./intermediate/rtl.json",
"rollup": "node ./generateRollup.js",
"optimize": "svgo --config svgo.config.js --folder=./intermediate --precision=2",
"unfill": "find ./intermediate -type f -name \"*.svg\" -exec sed -i.bak 's/fill=\"none\"//g' {} \\; && find ./intermediate -type f -name \"*.bak\" -delete",
"build": "npm run copy && npm run generate:font && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run cleanSvg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
"buildSvg": "npm run copy && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run cleanSvg && npm run build:esm && npm run build:cjs",
"build": "npm run copy && npm run generate:font && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run convert:fonts && npm run clean:svg && npm run build:esm && npm run build:cjs && npm run copy:font-files",
"build:svg": "npm run copy && npm run generate:rtl && npm run optimize && npm run unfill && npm run convert:svg && npm run clean:svg && npm run build:esm && npm run build:cjs",
"build:cjs": "tsc --module commonjs --outDir lib-cjs && babel lib-cjs --out-dir lib-cjs",
"build:esm": "tsc && babel lib --out-dir lib"
},
Expand Down
1 change: 0 additions & 1 deletion packages/react-icons/src/utils/createFluentIcon.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ export type FluentIcon = {

export type CreateFluentIconOptions = {
flipInRtl?: boolean;
// rtlPaths?: string[];
}

export const createFluentIcon = (displayName: string, width: string, paths: string[], options?: CreateFluentIconOptions): FluentIcon => {
Expand Down
6 changes: 4 additions & 2 deletions packages/react-icons/src/utils/fonts/createFluentFontIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import { FluentIconsProps } from '../FluentIconsProps.types';
import { CreateFluentIconOptions } from '../createFluentIcon';
import { makeStyles, makeStaticStyles, mergeClasses } from "@griffel/react";
import { useIconState } from '../useIconState';

Expand Down Expand Up @@ -70,8 +69,11 @@ const useRootStyles = makeStyles({
},
});

export type CreateFluentFontIconOptions = {
flipInRtl?: boolean;
}

export function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentIconOptions): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} {
export function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentFontIconOptions): React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} {
const Component: React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>>> & { codepoint: string} = (props) => {
useStaticStyles();
const styles = useRootStyles();
Expand Down

0 comments on commit 641e10d

Please sign in to comment.