Skip to content

Commit

Permalink
Merge pull request #7 from AlfieJones/react-v4
Browse files Browse the repository at this point in the history
React v4
  • Loading branch information
AlfieJones authored Mar 28, 2022
2 parents 05777d3 + 3bbd60a commit 97f8151
Show file tree
Hide file tree
Showing 26 changed files with 1,261 additions and 844 deletions.
5 changes: 4 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ module.exports = function (grunt) {

clean: {
build: ['css'],
react: ['css/react', 'css/temp/react']
react: ['css/react', 'css/temp/react'],
temp: ['css/temp']
},

// -- Sass Config --------------------------------------------------------
Expand Down Expand Up @@ -182,6 +183,7 @@ module.exports = function (grunt) {
'sass:build',
'postcss:build',
'cssmin',
'clean:temp'
]);

grunt.registerTask('react', [
Expand All @@ -191,6 +193,7 @@ module.exports = function (grunt) {
'sass:react',
'postcss:react',
'cssmin',
'clean:temp'
]);

};
41 changes: 21 additions & 20 deletions packages/react/.svgrrc.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
module.exports = {
jsx: {
babelConfig: {
plugins: [
[
'@svgr/babel-plugin-add-jsx-attribute',
{
"elements": ["svg"],
"attributes": [
{
"name": "aria-hidden",
"value": "true",
"spread": false,
"literal": false,
"position": "start"
}
]
}
],
jsx: {
babelConfig: {
plugins: [
[
"@svgr/babel-plugin-add-jsx-attribute",
{
elements: ["svg"],
attributes: [
{
name: "aria-hidden",
value: "true",
spread: false,
literal: false,
position: "start",
},
],
},
],
},
["./plugins/babel-plugin-update-id-attribute.js"],
],
},
}
},
};
2 changes: 0 additions & 2 deletions packages/react/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<br />
<img alt="NPM version" src="https://img.shields.io/npm/v/@theme-toggles/react?style=for-the-badge">


<!-- PROJECT LOGO -->
<br />
<h1 >@theme-toggles/react</h1>
Expand All @@ -29,7 +28,6 @@ Contributions are what make the open source community such an amazing place to b
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request


## License

Distributed under the MIT License. See `LICENSE` for more information.
32 changes: 16 additions & 16 deletions packages/react/configs/base.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"declaration": true,
"module": "esnext",
"target": "ESNext",
"jsx": "react",
"allowJs": false,
"moduleResolution": "node",
"esModuleInterop": true,
"isolatedModules": true,
"rootDirs": ["../src"],
"outDir": "../dist"
},
"include": ["../src/**/*", "../../../build/**/*", "../typings"]
}
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"noImplicitAny": true,
"declaration": true,
"module": "esnext",
"target": "ESNext",
"jsx": "react",
"allowJs": false,
"moduleResolution": "node",
"esModuleInterop": true,
"isolatedModules": true,
"rootDirs": ["../src"],
"outDir": "../dist"
},
"include": ["../src/**/*", "../../../build/**/*", "../typings"]
}
11 changes: 5 additions & 6 deletions packages/react/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@theme-toggles/react",
"version": "4.0.0",
"version": "4.0.2",
"license": "MIT",
"repository": "https://github.com/AlfieJones/theme-toggles",
"peerDependencies": {
Expand All @@ -19,7 +19,7 @@
"clean-build": "rimraf css && rimraf dist",
"build-react": "svgr --typescript --no-svgo --no-prettier --icon --expand-props none --template templates/button.js --out-dir src/toggles -- ./svgs/default",
"types": "tsc --emitDeclarationOnly --outDir dist",
"build": "yarn clean-build && node scripts/copy.js && yarn clean-react && yarn build-react && node ./scripts/esbuild.js && yarn types",
"build": "yarn clean-build && node scripts/copy.js && yarn clean-react && yarn build-react && prettier --write ./src && node ./scripts/esbuild.js && yarn types",
"dev": "microbundle watch --jsxFragment React.Fragment --jsx React.createElement --jsxImportSource react --tsconfig ./configs/base.json"
},
"funding": {
Expand All @@ -36,16 +36,15 @@
],
"sideEffects": false,
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/types": "^7.17.0",
"@svgr/babel-plugin-add-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^6.0.0",
"@svgr/babel-plugin-transform-svg-component": "^6.2.0",
"@svgr/cli": "^6.2.1",
"@types/react": "^17.0.39",
"css-tree": "^2.0.4",
"esbuild": "^0.14.21",
"esbuild-css-modules-plugin": "^2.1.2",
"fs-extra": "^10.0.1",
"plugin": "^0.3.3",
"prettier": "2.6.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
Expand Down
32 changes: 32 additions & 0 deletions packages/react/plugins/babel-plugin-update-id-attribute.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
const core = require("@babel/core");
const template = core.template;
const t = core.types;

const removeJSXAttribute = () => ({
visitor: {
JSXOpeningElement(path) {
if (!t.isJSXIdentifier(path.node.name)) return;

path.get("attributes").forEach((attribute) => {
if (
t.isJSXAttribute(attribute.node) &&
t.isJSXIdentifier(attribute.node.name)
) {
if(attribute.node.name.name === "id"){
attribute.node.value = t.jsxExpressionContainer(
template.ast(`\`\${idPrefix}${attribute.node.value.value}\``)
.expression
);
} else if (attribute.node.name.name === "clipPath"){
attribute.node.value = t.jsxExpressionContainer(
template.ast(`\`url(#\${idPrefix}${attribute.node.value.value.replace("url(#", "")}\``)
.expression
);
}
}
});
},
},
});

module.exports = removeJSXAttribute;
36 changes: 0 additions & 36 deletions packages/react/scripts/build.js

This file was deleted.

14 changes: 4 additions & 10 deletions packages/react/scripts/copy.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
const fse = require('fs-extra');
const { rmSync } = require('fs');
const fse = require("fs-extra");
const { rmSync } = require("fs");

const srcDir = `./../../assets/svgs`;


function copy(destDir) {
rmSync(destDir, { recursive: true, force: true });
fse.copySync(srcDir, destDir, {overwrite: true}, function (err) {
if (err) {
fse.copySync(srcDir, destDir, { overwrite: true }, function (err) {
if (err) {
console.error(err);
} else {
console.log("success!");
Expand All @@ -16,8 +15,3 @@ function copy(destDir) {
}

copy("./svgs/default");





42 changes: 42 additions & 0 deletions packages/react/scripts/esbuild.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
const esbuild = require("esbuild");
const { readdirSync } = require("fs");

esbuild
.build({
entryPoints: ["src/index.ts"],
bundle: true,
minify: true,
format: "esm",
external: ["react", "react-dom"],
outdir: "dist",
plugins: [],
})
.catch(() => process.exit(1));

const cssDir = "src/toggles/";

const files = readdirSync(cssDir)
.filter((file) => file !== "index.ts")
.map((file) => cssDir.concat(file));

esbuild
.build({
entryPoints: files,
bundle: true,
minify: true,
format: "esm",
external: ["react", "react-dom"],
outdir: "css",
plugins: [],
})
.catch(() => process.exit(1));

esbuild.build({
entryPoints: ['./../../css/react/bundle.min.css'],
bundle: true,
minify: true,
format: "esm",
external: ['react', 'react-dom'],
outfile: 'css/Bundle.css',
plugins: [],
}).catch(() => process.exit(1));
23 changes: 16 additions & 7 deletions packages/react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,19 @@ import { DetailedHTMLProps, Dispatch, SetStateAction } from "react";

export * from "./toggles";

export interface ToggleProps extends Omit<DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "onClick"> {
toggled?: boolean;
toggle?: Dispatch<SetStateAction<boolean>>;
duration?: number;
reversed?: boolean;
onToggle?: (toggled: boolean) => void;
};
export interface ToggleProps
extends Omit<
DetailedHTMLProps<
React.ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement
>,
"onClick"
> {
toggled?: boolean;
toggle?: Dispatch<SetStateAction<boolean>>;
duration?: number;
reversed?: boolean;
forceMotion?: boolean;
idPrefix?: string;
onToggle?: (toggled: boolean) => void;
}
Loading

0 comments on commit 97f8151

Please sign in to comment.