Lightnet/App.jsx

## README.md

      
    Raw
  

              README.md
            
          
    Simple package for nodejs build test.
index.html file for easy setup. One reason is load url file correctly.
{
  "name": "httpsolidjs",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/standalone": "^7.19.2",
    "babel-preset-solid": "^1.5.6",
    "nodemon": "^2.0.20"
  },
  "dependencies": {
    "solid-js": "^1.5.6"
  }
}


## App.jsx

export default function App(){

  return (<>
    <label> Hello World! </label>
  </>)
}

## client.js
import { render } from "solid-js/web"

import App from "./App.jsx"

console.log(App);

render(App, document.getElementById("app"))

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="solid-js render dev build">
  <meta name="keywords" content="HTML, Javascript, solid-js ">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-n0nce'" />
  <script async src="https://unpkg.com/es-module-shims@1.5.9/dist/es-module-shims.js" nonce="n0nce"></script>
  <script type="importmap" nonce="n0nce">
    {
      "imports":{
        "solid-js":"https://unpkg.com/solid-js@1.5.6/dist/solid.js",
        "solid-js/web":"https://unpkg.com/solid-js@1.5.6/web/dist/web.js",
        "solid-js/h":"https://unpkg.com/solid-js@1.5.6/h/dist/h.js"
      }
    }
    </script>
</head>
<body>
  <div id="app"></div>
  <script async type="module" src="client.js" nonce="n0nce"></script>
  <script async type="text/javascript"  nonce="n0nce">
  /*
    var content = document.getElementById('content');
    console.log(location.host)
    var socket = new WebSocket('ws://'+location.host);
    socket.onopen = function () {
      socket.send('hello from the client');
    };

    socket.onmessage = function (message) {
      content.innerHTML += message.data +'<br />';
    };

    socket.onerror = function (error) {
      console.log('WebSocket error: ' + error);
    };
    */
  </script>
</body>
</html>

## server.js
/*
  Information:
    - Solid-js
    - Babeljs
    - Nodejs API
    - http web server.

*/
// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-js-when-using-es6-modules
// https://stackoverflow.com/questions/17699599/node-js-check-if-file-exists


import { WebSocketServer } from 'ws';
import http from 'http';
import fs,{readFileSync} from 'fs';
import { dirname, join } from 'path';
import { fileURLToPath } from 'url';
import Babel from '@babel/standalone';
import solid from 'babel-preset-solid';

const __dirname = dirname(fileURLToPath(import.meta.url));
//console.log(__dirname)

const PORT = process.env.PORT || 1337;

Babel.registerPreset("solid", solid());

function checkFileExistsSync(filepath){
  let flag = true;
  try{
    fs.accessSync(filepath, fs.constants.F_OK);
  }catch(e){
    flag = false;
  }
  return flag;
}

function headerJS(response,text){
  //response.writeHead(200, {'Content-Type': 'text/javascript'});
  response.writeHead(200, {'Content-Type': 'text/javascript','Content-Length':text.length});
  response.write(text);
  response.end();
}

var server = http.createServer(function(request, response) {

  //check for url

  if(request.url == "/"){
    //console.log("INDEX...")
    fs.readFile('./index.html',function (err, data){
      response.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
      response.write(data);
      response.end();
    });
    return;
  }

  if(request.url == "/test.jsx"){
    //console.log("INDEX...")
    //var input = 'const getMessage = () => <div>"Hello World";</div>';
    var input = 'const getMessage = () => "Hello World";';
    var output = Babel.transform(input,{presets: ["solid"]}).code;
    console.log(output)
    response.writeHead(200, {'Content-Type': 'text/javascript'});
    response.write(output);
    response.end();
    return;
  }

  if(request.url.endsWith(".jsx")){
    console.log("found jsx")
    console.log(request.url)
    try{
      let output = readFileSync(join(__dirname, request.url));
      //console.log(output.toString())
      output = Babel.transform(output.toString(),{presets: ["solid"]}).code;
      headerJS(response, output)
      return;
    }catch(e){
      console.log(e)
    }
  }

  if(request.url.endsWith(".js")){
    //console.log("found css")
    //console.log(request.url)
    try{
      //let output = readFileSync(join(__dirname, request.url));
      fs.readFile(join(__dirname, request.url),function (err, data){
        headerJS(response, data)
      });
      return;
    }catch(e){
      console.log(e)
    }
  }

  if(request.url.endsWith(".css")){
    //console.log("found css")
    //console.log(request.url)
    try{
      //let output = readFileSync(join(__dirname, request.url));
      fs.readFile(join(__dirname, request.url),function (err, data){
        response.writeHead(200, {'Content-Type': 'text/css','Content-Length':data.length});
        response.write(data);
        response.end();
      });

      return;
    }catch(e){
      console.log(e)
    }
  }

  if(request.url.indexOf("/components/") == 0){
    console.log(request.url)
    //console.log(request.url.indexOf("/components/"))
    let ext = ".jsx";
    let checkJSX = checkFileExistsSync(join(__dirname, request.url)+".jsx")
    if(checkJSX){
      ext = ".jsx";
    }
    let checkJS = checkFileExistsSync(join(__dirname, request.url)+".js")
    if(checkJS){
      ext = ".js";
    }
    console.log("EXT:", ext)
    if(checkJSX){
      try{
        let output = readFileSync(join(__dirname, request.url+ext));
        //console.log(output.toString())
        output = Babel.transform(output.toString(),{presets: ["solid"]}).code;
        headerJS(response, output)
        return;
      }catch(e){
        console.log(e)
      }
    }
    if(checkJS){
      try{
        //let output = readFileSync(join(__dirname, request.url));
        fs.readFile(join(__dirname, request.url+ext),function (err, data){
          headerJS(response, data)
        });
        return;
      }catch(e){
        console.log(e)
      }
    }

  }

  response.end("Error");
});

/*
const wss = new WebSocketServer({ server });

wss.on('connection', function connection(ws) {
    console.log("connect?")
  ws.on('message', function message(data) {
    console.log('received: %s', data);
  });

  ws.send('something');
  ws.send('this is a websocket example');
});
*/

server.on('upgrade', function upgrade(request, socket, head) {
  //const { pathname } = parse(request.url);

  // This function is not defined on purpose. Implement it with your own logic.
  console.log('upgrade???', request.url);
  /*
  authenticate(request, function next(err, client) {
    if (err || !client) {
      socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
      socket.destroy();
      return;
    }

    wss.handleUpgrade(request, socket, head, function done(ws) {
      wss.emit('connection', ws, request, client);
    });
  });
  */
});


server.listen(PORT, function() {
  console.log((new Date()) + `\nServer is listening on port http://localhost:${PORT}`);
});

	export default function App(){

	return (<>
	<label> Hello World! </label>
	</>)
	}
	import { render } from "solid-js/web"

	import App from "./App.jsx"

	console.log(App);

	render(App, document.getElementById("app"))
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="description" content="solid-js render dev build">
	<meta name="keywords" content="HTML, Javascript, solid-js ">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-n0nce'" />
	<script async src="https://unpkg.com/es-module-shims@1.5.9/dist/es-module-shims.js" nonce="n0nce"></script>
	<script type="importmap" nonce="n0nce">
	{
	"imports":{
	"solid-js":"https://unpkg.com/solid-js@1.5.6/dist/solid.js",
	"solid-js/web":"https://unpkg.com/solid-js@1.5.6/web/dist/web.js",
	"solid-js/h":"https://unpkg.com/solid-js@1.5.6/h/dist/h.js"
	}
	}
	</script>
	</head>
	<body>
	<div id="app"></div>
	<script async type="module" src="client.js" nonce="n0nce"></script>
	<script async type="text/javascript" nonce="n0nce">
	/*
	var content = document.getElementById('content');
	console.log(location.host)
	var socket = new WebSocket('ws://'+location.host);
	socket.onopen = function () {
	socket.send('hello from the client');
	};

	socket.onmessage = function (message) {
	content.innerHTML += message.data +'<br />';
	};

	socket.onerror = function (error) {
	console.log('WebSocket error: ' + error);
	};
	*/
	</script>
	</body>
	</html>
	/*
	Information:
	- Solid-js
	- Babeljs
	- Nodejs API
	- http web server.

	*/
	// https://stackoverflow.com/questions/46745014/alternative-for-dirname-in-node-js-when-using-es6-modules
	// https://stackoverflow.com/questions/17699599/node-js-check-if-file-exists


	import { WebSocketServer } from 'ws';
	import http from 'http';
	import fs,{readFileSync} from 'fs';
	import { dirname, join } from 'path';
	import { fileURLToPath } from 'url';
	import Babel from '@babel/standalone';
	import solid from 'babel-preset-solid';

	const __dirname = dirname(fileURLToPath(import.meta.url));
	//console.log(__dirname)

	const PORT = process.env.PORT \|\| 1337;

	Babel.registerPreset("solid", solid());

	function checkFileExistsSync(filepath){
	let flag = true;
	try{
	fs.accessSync(filepath, fs.constants.F_OK);
	}catch(e){
	flag = false;
	}
	return flag;
	}

	function headerJS(response,text){
	//response.writeHead(200, {'Content-Type': 'text/javascript'});
	response.writeHead(200, {'Content-Type': 'text/javascript','Content-Length':text.length});
	response.write(text);
	response.end();
	}

	var server = http.createServer(function(request, response) {

	//check for url

	if(request.url == "/"){
	//console.log("INDEX...")
	fs.readFile('./index.html',function (err, data){
	response.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
	response.write(data);
	response.end();
	});
	return;
	}

	if(request.url == "/test.jsx"){
	//console.log("INDEX...")
	//var input = 'const getMessage = () => <div>"Hello World";</div>';
	var input = 'const getMessage = () => "Hello World";';
	var output = Babel.transform(input,{presets: ["solid"]}).code;
	console.log(output)
	response.writeHead(200, {'Content-Type': 'text/javascript'});
	response.write(output);
	response.end();
	return;
	}

	if(request.url.endsWith(".jsx")){
	console.log("found jsx")
	console.log(request.url)
	try{
	let output = readFileSync(join(__dirname, request.url));
	//console.log(output.toString())
	output = Babel.transform(output.toString(),{presets: ["solid"]}).code;
	headerJS(response, output)
	return;
	}catch(e){
	console.log(e)
	}
	}

	if(request.url.endsWith(".js")){
	//console.log("found css")
	//console.log(request.url)
	try{
	//let output = readFileSync(join(__dirname, request.url));
	fs.readFile(join(__dirname, request.url),function (err, data){
	headerJS(response, data)
	});
	return;
	}catch(e){
	console.log(e)
	}
	}

	if(request.url.endsWith(".css")){
	//console.log("found css")
	//console.log(request.url)
	try{
	//let output = readFileSync(join(__dirname, request.url));
	fs.readFile(join(__dirname, request.url),function (err, data){
	response.writeHead(200, {'Content-Type': 'text/css','Content-Length':data.length});
	response.write(data);
	response.end();
	});

	return;
	}catch(e){
	console.log(e)
	}
	}

	if(request.url.indexOf("/components/") == 0){
	console.log(request.url)
	//console.log(request.url.indexOf("/components/"))
	let ext = ".jsx";
	let checkJSX = checkFileExistsSync(join(__dirname, request.url)+".jsx")
	if(checkJSX){
	ext = ".jsx";
	}
	let checkJS = checkFileExistsSync(join(__dirname, request.url)+".js")
	if(checkJS){
	ext = ".js";
	}
	console.log("EXT:", ext)
	if(checkJSX){
	try{
	let output = readFileSync(join(__dirname, request.url+ext));
	//console.log(output.toString())
	output = Babel.transform(output.toString(),{presets: ["solid"]}).code;
	headerJS(response, output)
	return;
	}catch(e){
	console.log(e)
	}
	}
	if(checkJS){
	try{
	//let output = readFileSync(join(__dirname, request.url));
	fs.readFile(join(__dirname, request.url+ext),function (err, data){
	headerJS(response, data)
	});
	return;
	}catch(e){
	console.log(e)
	}
	}

	}

	response.end("Error");
	});

	/*
	const wss = new WebSocketServer({ server });

	wss.on('connection', function connection(ws) {
	console.log("connect?")
	ws.on('message', function message(data) {
	console.log('received: %s', data);
	});

	ws.send('something');
	ws.send('this is a websocket example');
	});
	*/

	server.on('upgrade', function upgrade(request, socket, head) {
	//const { pathname } = parse(request.url);

	// This function is not defined on purpose. Implement it with your own logic.
	console.log('upgrade???', request.url);
	/*
	authenticate(request, function next(err, client) {
	if (err \|\| !client) {
	socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
	socket.destroy();
	return;
	}

	wss.handleUpgrade(request, socket, head, function done(ws) {
	wss.emit('connection', ws, request, client);
	});
	});
	*/
	});


	server.listen(PORT, function() {
	console.log((new Date()) + `\nServer is listening on port http://localhost:${PORT}`);
	});