gatsby-plugin-material-symbols
Version:
Easily add Material Symbols to your Gatsby site, with various Gatsby-specific performance optimizations built-in.
139 lines • 5.35 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.preprocessSource = exports.staticAnalysisCache = void 0;
exports.babelParseToAst = babelParseToAst;
const path_1 = __importDefault(require("path"));
const fs_1 = __importDefault(require("fs"));
const traverse_1 = __importDefault(require("@babel/traverse"));
const parser_1 = require("@babel/parser");
const babel_jsx_utils_1 = require("babel-jsx-utils");
const fetch_remote_file_1 = require("gatsby-core-utils/fetch-remote-file");
const PARSER_OPTIONS = {
allowImportExportEverywhere: true,
allowReturnOutsideFunction: true,
allowSuperOutsideMethod: true,
sourceType: `unambiguous`,
plugins: [
`jsx`,
`flow`,
`doExpressions`,
`objectRestSpread`,
[
`decorators`,
{
decoratorsBeforeExport: true,
},
],
`classProperties`,
`classPrivateProperties`,
`classPrivateMethods`,
`exportDefaultFrom`,
`exportNamespaceFrom`,
`asyncGenerators`,
`functionBind`,
`functionSent`,
`dynamicImport`,
`numericSeparator`,
`optionalChaining`,
`importMeta`,
`bigInt`,
`optionalCatchBinding`,
`throwExpressions`,
[
`pipelineOperator`,
{
proposal: `minimal`,
},
],
`nullishCoalescingOperator`,
],
};
function getBabelParserOptions(filePath) {
if (/\.tsx?/.test(filePath)) {
const { plugins } = PARSER_OPTIONS;
return {
...PARSER_OPTIONS,
plugins: (plugins || []).map(plugin => plugin === `flow` ? `typescript` : plugin),
};
}
return PARSER_OPTIONS;
}
;
function babelParseToAst(contents, filePath) {
return (0, parser_1.parse)(contents, getBabelParserOptions(filePath));
}
;
const extractProps = (ast, filename, onError) => {
const props = [];
(0, traverse_1.default)(ast, {
JSXOpeningElement(nodePath) {
let name = nodePath.get("name");
let nameReferencesImport = nodePath.get("name").referencesImport("gatsby-plugin-material-symbols", "MaterialSymbol");
if (!nodePath
.get("name")
.referencesImport("gatsby-plugin-material-symbols", "MaterialSymbol")) {
return;
}
;
const prop = ((nodePath) => {
let props = (0, babel_jsx_utils_1.getAttributeValues)(nodePath, onError, MATERIALSYMBOL_PROPS);
if (props.icon && typeof props.icon === "string") {
props.icon = props.icon.toLowerCase();
}
if (props.symbolStyle && typeof props.symbolStyle === "string") {
props.symbolStyle = props.symbolStyle.toLowerCase();
}
else {
props.symbolStyle = "outlined";
}
return props;
})(nodePath);
props.push(prop);
},
});
return props;
};
const MATERIALSYMBOL_PROPS = new Set([
"symbol",
"fill",
"weight",
"grade",
"size",
"symbolStyle",
"className",
"style",
"as",
"onClick"
]);
exports.staticAnalysisCache = {};
const preprocessSource = async ({ filename, contents, cache, reporter, store, getNode, actions: { deletePage, createPage } }, pluginOptions) => {
if (!contents.includes("MaterialSymbol") ||
![`.jsx`, `.tsx`].includes(path_1.default.extname(filename))) {
return;
}
if (store.getState().program._[0] == "develop") {
const url = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-25..200";
const filename = await (0, fetch_remote_file_1.fetchRemoteFile)({ url, cache, ext: ".css", name: "material-symbols", httpHeaders: {
"user-agent": `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0`,
} });
const cacheDir = path_1.default.join(__dirname, "..", ".cache");
if (!fs_1.default.existsSync(cacheDir)) {
fs_1.default.mkdirSync(cacheDir);
}
fs_1.default.copyFileSync(filename, path_1.default.join(cacheDir, "material-symbols.css"));
return;
}
else {
const ast = babelParseToAst(contents, filename);
const symbols = extractProps(ast, filename);
exports.staticAnalysisCache[filename] = symbols;
pluginOptions.verbose
? reporter.info(`gatsby-plugin-material-symbols: Statically analyzed ${filename} for Material Symbols, found ${symbols.length} symbols`)
: reporter.verbose(`gatsby-plugin-material-symbols: Statically analyzed ${filename} for Material Symbols, found ${symbols.length} symbols`);
}
};
exports.preprocessSource = preprocessSource;
//# sourceMappingURL=preprocessSource.js.map