tchayen / red-otter Goto Github PK

cool project :)

there are certainly much faster frameworks than React these days (though most will require a JS/browser env).

https://krausest.github.io/js-framework-benchmark/current.html

i'm not sure about the advertised performance claims here, however.

ImGUI in the browser suffers from the same idle perf issues, see this ImPlot demo: epezent/implot#183 (comment)

i think there's a way to mitigate this somewhat by suspending the render loop or something, but dunno how this works out in real life.

Maybe its too early for this library to start dealing with safari issues...but here's what I see when I run some of your demo sample code on Safari:

Here's what I see in Chrome (I assume expected):

And here's the error:

My safari version is 16.2 and this is what I have enabled under experimental safari extensions (I didn't change anything, these are defaults):

Hello! I keep running into this issue (using [email protected] and [email protected]). This is the error I see when hovering over any JSX in vscode. If I compile with typescript on the cli, I also get the same error.

Cannot find module 'red-otter/jsx-runtime' or its corresponding type declarations.ts(2307)

If I compile with parcel, I see this:

🚨 Build failed.

@parcel/core: Failed to resolve 
'red-otter/jsx-dev-runtime' from 
'./src/index.tsx'

  /Users/tanishqkancharla/Documents/Projects/webgl-editor/src/index.tsx:1:1
  > 1 | import { Context, Font, FontAt
  >   | ^
    2 | 
    3 | async function loadFont(fontUr

This might be related to the exports field in your package.json which leaves out jsx-runtime?

My .parcelrc:

{
	"extends": "@parcel/config-default",
	"transformers": {
		"url:*": ["@parcel/transformer-raw"]
	}
}

index.tsx:

import { Context, Font, FontAtlas, Layout, TTF } from "red-otter";

async function loadFont(fontUrl: string) {
	// Add font to the document so we will use browser to rasterize the font.
	const fontFace = new FontFace("Inter", `url("${fontUrl}")`);
	await fontFace.load();
	document.fonts.add(fontFace);

	// Download font file for parsing.
	const file = await fetch(fontUrl);
	const buffer = await file.arrayBuffer();

	const ttf = new TTF(buffer);
	if (!ttf.ok) {
		throw new Error("Failed to parse font file.");
	}

	// Render font atlas.
	const atlas = new FontAtlas(ttf);
	const { canvas, spacing } = atlas.render();

	const image = new Image();
	image.src = canvas.toDataURL();

	return new Font(spacing, image);
}

export function add(x: number, y: number) {
	return x + y;
}

async function run() {
	const canvas = document.createElement("canvas");
	const scale = window.devicePixelRatio;
	canvas.width = 800 * scale;
	canvas.height = 600 * scale;

	const div = document.getElementById("app")!;
	div.appendChild(canvas);

	const font = await loadFont("./inter.ttf");

	const context = new Context(canvas, font);
	context.clear();

	const layout = new Layout(context);
	layout.add(
		<view style={{ width: 100, height: 100, backgroundColor: "#fff" }}>
			<text style={{ fontFamily: font, fontSize: 20, color: "#000" }}>
				Hello
			</text>
		</view>
	);

	layout.render();
	context.flush();
}

if (typeof window !== "undefined") {
	// If in browser context
	run();
}

Relevant of package.json:

"type": "module",
	"scripts": {
		"build": "parcel src/index.html",
		"dev": "parcel src/index.html",
		"serve": "parcel serve dist",
		"deploy": "npx vercel deploy",
		"test": "NODE_OPTIONS='--loader tsx' mocha './src/**/*.test.ts' --verbose"
	},

tsconfig.json

{
	"compilerOptions": {
		"jsx": "react-jsx",
		"jsxImportSource": "red-otter",
		"types": ["red-otter", "./src/types"],
		"target": "es2017",
		"module": "ESNext" /* Specify what module code is generated. */,
		"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
		"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
		"moduleResolution": "node",

		/* Type Checking */
		"strict": true /* Enable all strict type-checking options. */,
		"skipLibCheck": true /* Skip type checking all .d.ts files. */,
		"outDir": "dist"
	},
	"include": ["./src/**.ts"]
}

Any tips you might have would be greatly appreciated :)

Hi @tchayen! Really interesting project, thanks for working on it.
I've briefly checked some examples and would like to know if there's a way to inject some custom shaders in order to apply some postprocessing after the base layout has been drawn? If not, what do think about this feature? Are there any plans to work on it in the future?

Hi!

I think there’s a bug when calculating center alignment for self. The element width is used twice, and I suspect that one of the values should be the width of the parent? I’m not quite sure about the x/y values calculated in the same step.

Out of curiosity, what does the check for if a child input with or height is a number do when determining the parent width or height do? Those values are never used in those steps?

Thank for a nice blog about Flexbox layout post by the way!

Hi, @tchayen It looks very powerful to render the ui in webgl, my first idea of its usage is to use it to render the UI mock, like framer.com(it seems to be rending on html), if using red-otter, it takes an extra step to convert to canvas to html.

So i am still not very clear where can i go further in working on the library, please give me some tips given my knowledge is too few.