I am playing at the moment with AI artifacts and wanted to see if there is a simple way to make a standalone page that renders a gjs component.
For example in the react world something like this will work:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Hello World with JSX</title>
<style>
.hello-world {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
color: #333;
}
.hello-world h1 {
font-size: 2.5em;
color: #2196F3;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- React Dependencies -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- Application Code -->
<script type="text/babel">
const root = ReactDOM.createRoot(document.getElementById('root'));
function HelloWorld() {
return (
<div className="hello-world">
<h1>Hello, World!</h1>
<p>Welcome to React!</p>
</div>
);
}
root.render(<HelloWorld />);
</script>
</body>
</html>
What is the equivalent with a gjs component.
I totally get this is an edge case and that I should be using build tools, but is there a way to do this in a standalone way. (this is only for prototyping)
Ideally all the script refs are on unpkg already… cause that will play nicer with a CSP.
7 posts - 2 participants