I really love Steal.js, but I found some bugs in Steal-tools and Steal-react-jsx and fixed them 🔨 😃
I will be happy if these fixes are applied 😃so far I have to change them manually when creating a new project 😢
I'm sorry if something is misspelled, English is not my primary language.
Steal-tools problems:
1. Blacklist option Error
I got this error message when i start steal-tools build in npm scripts: and i don't have in package.json blacklist option
Fix:
So i look for Babel options and i add this line:
delete opts.blacklist;
in to this file : node_modules\steal-tools\lib\graph\treeshake.js
175 //line in file where is this function
function getBabelOptions(node) {
let opts = loader.babelOptions || {};
var npmPkg = node.load.metadata.npmPackage;
delete opts.blacklist; //this line delete blacklist from options
if(npmPkg) {
var pkgSteal = npmPkg.steal || npmPkg.system;
if(pkgSteal && pkgSteal.babelOptions) {
opts = pkgSteal.babelOptions;
}
}
return opts;
}
2. Path problem
I got this error in Steal-tools build, but it's look like, this error is only in jsx files:
but in developer mode without steal-tools works fine, i got this error only when i start build
This is path in jsx file:This is error message:
The original path is : D:\Work\Webs\Steal\App\App\Core\components\style.css
This is my project directory where are node modules and package.json : D:\Work\Webs\Steal\App
But this is problem only in jsx files, in js files works "./"path fine.
Fix:
For fix this problem i add some lines into steal-react-jsx plugin:
Full fixed Steal-react-jsx plugin is down below
// replace path ./ for example: (path in jsx file: "./file.jsx", path after replace: "path/to/file.jsx")
let address = load.metadata.parsedModuleName.moduleName.split("/"); // get address of parent react jsx file and split it by /
address.pop(); // remove last index of array and get only path to folder where is located parent
let $adress_path = address.join("/"); // join array together
load.source = load.source.replace(/\.\//g,$adress_path+"/"); //replace all ./
Steal-react-jsx problems:
1. All in one line
I found a problem in leading and trailing spaces replace code, which remove all spaces in jsx files
and then all code is in one lineIn the picture you can see console.log of source (jsx file) and the error message
Original codehas gm modifiers in replace and the m = (multi line) is for all lines in string, it need to be removed
export function translate(load) {
load.metadata.format = 'es6';
// remove cdata if present
load.source = load.source.replace('/<!\[CDATA\[.*?\]\]>/gm');
//NEW LINES
// remove leading and traling spaces
load.source = load.source.replace(/^\s+|\s+$/g,'');
// replace path ./ for example: (path in jsx file: "./file.jsx", path after replace: "path/to/file.jsx")
let address = load.metadata.parsedModuleName.moduleName.split("/"); // get address of parent react jsx file and split it by /
address.pop(); // remove last index of array and get only path to folder where is located parent
let $adress_path = address.join("/"); // join array together
load.source = load.source.replace(/\.\//g,$adress_path+"/"); //replace all ./
//replace <> </> to <React.Fragment>
load.source = load.source.replace(/<>/g,'<React.Fragment>').replace(/<\/>/g,'</React.Fragment>');
//
if(load.source.substr(0,1) === "<") {
load.source = `
import React from 'react';
export default function(ctx) {
return ${load.source};
}`;
}
}
Another not fixed problem
In Steal-css "@import" not works in Steal-Tools build, all css imports missing, but in dev mode works fine
Hello
I really love Steal.js, but I found some bugs in Steal-tools and Steal-react-jsx and fixed them 🔨 😃 I will be happy if these fixes are applied 😃 so far I have to change them manually when creating a new project 😢
I'm sorry if something is misspelled, English is not my primary language.
Steal-tools problems:
1. Blacklist option Error
I got this error message when i start steal-tools build in npm scripts:
and i don't have in package.json blacklist option
Fix:
So i look for Babel options and i add this line:
in to this file : node_modules\steal-tools\lib\graph\treeshake.js
2. Path problem
I got this error in Steal-tools build, but it's look like, this error is only in jsx files: but in developer mode without steal-tools works fine, i got this error only when i start build
This is path in jsx file:
This is error message:
![steal-tools-wrong-path-in-jsx-files](https://user-images.githubusercontent.com/60148373/99608106-89d04000-2a0d-11eb-811a-7dd5663bb8ac.png)
The original path is : D:\Work\Webs\Steal\App\App\Core\components\style.css This is my project directory where are node modules and package.json : D:\Work\Webs\Steal\App
But this is problem only in jsx files, in js files works "./"path fine.
Fix:
For fix this problem i add some lines into steal-react-jsx plugin: Full fixed Steal-react-jsx plugin is down below
Steal-react-jsx problems:
1. All in one line
I found a problem in leading and trailing spaces replace code, which remove all spaces in jsx files and then all code is in one line In the picture you can see console.log of source (jsx file) and the error message![steal-react-jsx-leadings](https://user-images.githubusercontent.com/60148373/99609879-00227180-2a11-11eb-94a7-767ff84990e7.png)
Original code has gm modifiers in replace and the m = (multi line) is for all lines in string, it need to be removed
Fixed code:
2. React.Fragment short code support
Steal using old version of babel so shorted version of = <> is not supported
Fix:
In the Steal-react-jsx plugin i add support for React.Fragment by replacing the empty tags "<> </>"
And now it's works fine 😄
My edited Steal-react-jsx plugin:
Another not fixed problem
In Steal-css "@import" not works in Steal-Tools build, all css imports missing, but in dev mode works fine
Versions and package.json: