Bugs and fixes

[L-IGH-T]

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:

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 line
In the picture you can see console.log of source (jsx file) and the error message

Original code has gm modifiers in replace and the m = (multi line) is for all lines in string, it need to be removed

 load.source = load.source.replace(/^\s+|\s+$/gm,'');

Fixed code:

 load.source = load.source.replace(/^\s+|\s+$/g,'');

2. React.Fragment short code support

Steal using old version of babel so shorted version of <React.Fragment> = <> is not supported

Fix:

In the Steal-react-jsx plugin i add support for React.Fragment by replacing the empty tags "<> </>"

load.source = load.source.replace(/<>/g,'<React.Fragment>').replace(/<\/>/g,'</React.Fragment>');

And now it's works fine 😄

My edited Steal-react-jsx plugin:

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

@import (url)

Versions and package.json:

Software	Version
Steal version	2.2.4
Steal-tools version	2.2.6
Steal-react-jsx version	0.0.4
Steal-css version	1.3.2

{
  "name": "application",
  "version": "1.0.0",
  "description": "",
  "main": "App/Core/index.js",
  "scripts": {
    "start": "http-server ./",
    "start_ws": "steal-tools live-reload",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "steal-tools --main App/Core/index --dest App/assets"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "steal": "^2.2.4",
    "steal-react-jsx": "0.0.4"
  },
  "devDependencies": {
    "http-server": "^0.12.3",
    "steal-css": "^1.3.2",
    "steal-tools": "^2.2.6"
  },
  "steal": {
    "configDependencies": [
      "live-reload"
    ],
    "transpiler": "babel",
    "paths": {
      "modules/*": "App/modules/*"
    },
    "babel": {},
    "plugins": [
      "steal-react-jsx",
      "steal-css"
    ]
  }
}

By mistake I created this post on Steal.js