DBJSX

DBJSX is not a React or Preact clone, it is a light -runtime JSX Runtime, based on Ecmascript 2023, the objective is to allow the construction of web -based modularized interfaces components.Taking advantage of the flexibility that JSX provides to build the templates of your web components.

Getting Started

Create a new project based with npm

npm init

Add index.js in your root project folder

--project_folder
    -- components
        index.js
    -- modules
        --index.js  
    -- index.js
    -- index.html
    -- babel.config.js
    -- jsconfig.json
    --webpack.config.js
	-- package.json  (this file generated with npm init command)

Modify your package.json for install dependencies Babel, Webpack and others. Your Package.json file must be similar to this:

{
    "name":  "yourpackage",
    "version":  "1.0.0",
    "description":  "",
    "source":  "./src/index.js",
    "scripts":  {
	    "test":  "echo \"Error: no test specified\" && exit 1",
	    "build:prod":  "webpack --mode production --config=webpack.config.js",
	    "start":  "webpack-dev-server --mode development --open --port 8888",
	    "build":  "webpack --config=webpack.config.js"
    },
    "author":  "Your name",
    "license":  "MIT",
    "devDependencies":  {
	    "@babel/core":  "^7.22.9",
	    "@babel/plugin-proposal-class-properties":  "^7.18.6",
	    "@babel/plugin-proposal-decorators":  "^7.22.7",
	    "@babel/plugin-proposal-object-rest-spread":  "7.20.7",
	    "@babel/plugin-syntax-jsx":  "^7.22.5",
	    "@babel/plugin-transform-react-jsx":  "^7.22.5",
	    "@babel/preset-env":  "^7.22.9",
	    "@babel/preset-react":  "^7.22.5",
	    "@types/node":  "20.4.6",
	    "babel-loader":  "9.1.3",
	    "babel-plugin-module-alias":  "^1.6.0",
	    "babel-plugin-syntax-decorators":  "^6.13.0",
	    "babel-plugin-transform-class-properties":  "^6.24.1",
	    "babel-plugin-transform-decorators-legacy":  "^1.3.5",
	    "html-webpack-plugin":  "^5.5.3",
	    "prettier":  "^3.0.0",
	    "svg-url-loader":  "^8.0.0",
	    "transform-class-properties":  "^1.0.0-beta",
	    "webpack":  "5.88.2",
	    "webpack-cli":  "5.1.4",
	    "webpack-dev-server":  "^4.15.1",
	    "yarn":  "^1.22.19"
    }
}

Add this module in your proyect with yarn or npm:

yarn add -D dbjsx
npm install --save-dev dbjsx

Your Package.json file updated with added dbjsx:

 {
     "devDependencies":  {
        "dbjsx":  "^1.0.0"
     }
 }

Execute install command with yarn or npm:

yarn install
npm install

Now we will configure Babel to be able to compile our JSX code

{
    "presets":  [
	    "@babel/preset-env",
	    ""babel/preset-react"
    ],
    "plugins":  [
	    [
		    "@babel/plugin-transform-react-jsx",
		    {
			    "throwIfNamespace":  false,
			    "runtime":  "automatic", //set the automatic runtime
			    "allowSyntheticDefaultImports":  true,
			    "importSource":  "dbjsx" //set the dbjsx package
		    }
	    ],
	    [
		    "@babel/plugin-proposal-decorators",
		    {
			    "legacy":  true
		    }
	    ],
	    "@babel/plugin-proposal-class-properties",
	    "@babel/proposal-object-rest-spread",
	    "babel-plugin-module-alias"
    ]
}

Now add the jsconfig.json file into root project folder

{
    "compilerOptions":  {
	    "target":  "ESNext",
	    "module":  "ESNext",
	    "rootDir":  "./",
	    "moduleResolution":  "NodeNext",
	    "resolvePackageJsonExports":  true,
	    "resolvePackageJsonImports":  true,
	    "resolveJsonModule":  true,
	    "importHelpers":  true,
	    "strict":  true,
	    "allowSyntheticDefaultImports":  true,
	    "noUnusedParameters":  true,
	    "noImplicitReturns":  true,
	    "noUnusedLocals":  true,
	    "noImplicitAny":  true,
	    "baseUrl":  "./", // define base url for relative routes
	    "paths":  { // add relative paths
		    "@src":  [
			    "src"
		    ],
		    "@components":  [
			    "src/components/index.js"
		    ],
		    "@modules":  [
			    "src/modules/index.js"
		    ]
	    }
    },
    "exclude":  [
	    "node_modules",
	    "dist"
    ]
}

Finally Rest Configure Webpack to compile our code

const path =  require('path')
const HtmlWebpackPlugin =  require('html-webpack-plugin')

module.exports  = {
	mode:  'development',
	watchOptions: {
		ignored:  '**/node_modules',
		poll:  1000,
		aggregateTimeout:  600,
	},
	entry: path.resolve(__dirname, 'src'),
	output: {
		filename:  '[name].js',
		path: path.resolve(__dirname, 'dist'),
	},
	resolve: {
    	// Here also configures the alias of relative routes
		alias: {
			'@src/*': path.resolve(__dirname, 'src/*.js'),
			'@components': path.resolve(__dirname, 'src/components/index.js'),
			'@modules': path.resolve(__dirname, 'src/modules/index.js'),
		},
		extensions: ['.js', '.jsx', '.json'],
	},
	module: {
	rules: [
		{
			test: /\.(js)x?$/,
			loader:  'babel-loader',
			exclude: /node_modules/,
		},
		{
			test: /\.svg$/,
			use: [
				{
				loader:  'svg-url-loader',
				options: {
					limit:  10000,
				},
				},
			],
		},
	],
	},
	plugins: [
		new  HtmlWebpackPlugin({
		title:  'webpack-dev-server',
		template: path.resolve(__dirname, 'index.html'),
		}),
	],
}

Lets create a index.html with this code:

<!DOCTYPE  html>
<html  lang="en">
    <head>
	    <meta  charset="UTF-8">
	    <meta  name="viewport"  content="width=device-width, initial-scale=1.0">
	    <title>DBJSX Runtime developed by Digital Booting</title>
    </head>
    <body>
	    <div id="root"></div>
    </body>
</html>

Now edit your index.js and add this code example:

import { css, jsx, createElement, render } from  'dbjsx'

const styles =  css`
    font-size:  50px;
    background-color:  aliceblue;
    color:  blanchedalmond;
`
const  App  =  ()  => {
    return (
	    <div  className="hola">
		    <h2>titulo generado mediante jsx</h2>
	    </div>
    )
}

const $jsx =  App()
const element =  createElement($jsx)
render(element, document.getElementById('root')) 

Now init the project with yarn or npm

yarn start
npm start

NOTE: This example only serves to show the compilation JSX rendering in the Dom a Div with an H2 element, in next version we will add examples of web rendering components.

It is important to understand the concept of JSX rendering before creating complex applications, this will allow you a greater learning curve

CONTRIBUTION

Feel free to contribute and contribute to this project, you can send an email to [email protected] and know the Road map we have in mind.

OBJETIVES

Our goal is to create a JSX rendering core that can be used both in large projects and small projects and personal modules, it has happened to me that I sometimes want to create some basic components that I use a lot and I do not want to be developing them in each novel JavaScript framework,And much less have a large alject with many units.

With DBJSX, the only thing you need is to create the main environment, develop your applications, modules or components once and use any project.The objective is to take advantage of all the benefits of the web components and of course as personnel developer personally there is nothing more great than using JSX to handle templates without depending on large compilations or React.

If you have experience in the management of JSX, all your contribution is welcome!