Merge pull request #6 from laranatech/v0.2.4

v0.2.4

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.2.4
+
+- **fix:** crossorigin images
+
 # 0.2.3
 
 - **feat:** read static images

example/index.js

@@ -23,6 +23,9 @@ const renderer = new ClientRenderer({
 	debug: config.debug,
 	DRM: false,
 	maxFPS: config.maxFPS,
+	fonts: [
+		'/static/monospace.ttf',
+	],
 })
 
 const stateManager = new MemoryStateManager({

example/styles/vars.js

@@ -7,7 +7,7 @@ const initStyleVars = () => {
 		accent: hex('#3caa3c'),
 		componentBg: hex('#fff'),
 		fontWeight: 'medium',
-		fontFamily: 'Montserrat',
+		fontFamily: 'monospace',
 		h0FontSize: 64,
 		h1FontSize: 32,
 		h2FontSize: 28,

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "larana-js",
-	"version": "0.2.3",
+	"version": "0.2.4",
 	"description": "Real SSR framework",
 	"main": "index.js",
 	"scripts": {

roadmap.md

@@ -1,13 +1,14 @@
 # Roadmap
 
-# 0.2.4
+# 0.2.5
 
-- fix: client fonts
 - fix: images jittering
+- fix: client fonts
+- feat: rerender on fullscreen
 - feat: rerender on fullscreen
-- feat: initDefaultStyles inside LaranaApp
 - feat: `toggleTheme`
 - feat: `router.push()`
+- feat: initDefaultStyles inside LaranaApp
 
 # 0.3.0
 

src/static/get-content-type.js

@@ -1,16 +1,24 @@
 const contentTypes = {
 	'txt': 'text/plain',
+	'js': 'text/javascript',
+	'css': 'text/css',
+	'html': 'text/html',
+	'ics': 'text/calendar',
 	'png': 'image/png',
 	'jpg': 'image/jpeg',
 	'jpeg': 'image/jpeg',
 	'webp': 'image/webp',
 	'svg': 'image/svg+xml',
 	'ico': 'image/x-icon',
+	'ttf': 'font/ttf',
+	'otf': 'font/otf',
+	'woff': 'font/woff',
+	'pdf': 'application/pdf',
 	// TODO: more types
 }
 
 const getContentType = (path) => {
-	const ext = path.split('.').pop()
+	const ext = String(path.split('.').pop()).toLowerCase()
 
 	const contentType = contentTypes[ext] ?? 'text/plain'
 

src/ui/rendering/base-renderer.js

@@ -1,10 +1,12 @@
 class BaseRenderer {
 	debug = false
 	trimOffset = 10
+	fonts = []
 
-	constructor({ debug, trimOffset = 10 }) {
+	constructor({ debug, trimOffset = 10, fonts = [] }) {
 		this.debug = debug
 		this.trimOffset = trimOffset
+		this.fonts = fonts
 	}
 
 	get clientCode() {

src/ui/rendering/canvas-renderer.js

@@ -56,6 +56,8 @@ class CanvasRenderer {
 
 		const img = new Image()
 
+		img.crossOrigin = 'anonymous'
+
 		img.onload = () => {
 			ctx.drawImage(img, x, y, w, h)
 			this.images.set(src, img)
@@ -193,7 +195,7 @@ class CanvasRenderer {
 		ctx.beginPath()
 
 		points.forEach((p, i) => {
-			if (i === 0) {
+			if (i === 0 || p.name === 'move-point') {
 				ctx.moveTo(p.x, p.y)
 				return
 			}

src/ui/rendering/client-renderer.js

@@ -13,7 +13,10 @@ const readClientCode = () => {
 	const classCode = fs.readFileSync(canvasPath, 'utf-8')
 
 	return client
-		.replace('"%RENDERER_CLASS%"', classCode.replace('module.exports = { CanvasRenderer }', ''))
+		.replace(
+			'"%RENDERER_CLASS%"',
+			classCode.replace('module.exports = { CanvasRenderer }', '')
+		)
 }
 
 let clientCode = readClientCode()

src/ui/shapes/point.js

@@ -1,6 +1,9 @@
 const { Schemer } = require('@laranatech/schemer')
 
-const pointSchemer = new Schemer({ x: 'number', y: 'number' })
+const pointSchemer = new Schemer({ x: 'number', y: 'number', moveTo: {
+	type: 'bool',
+	required: false,
+}})
 
 class Point {
 	name = 'point'
@@ -15,6 +18,10 @@ class Point {
 		pointSchemer.validate(p)
 		const { x, y } = p
 
+		if (p.moveTo) {
+			this.name = 'move-point'
+		}
+
 		this.x = x
 		this.y = y
 	}

src/ui/style/style.js

@@ -153,7 +153,7 @@ class Style {
 
 	fontSize = 16
 	fontWeight = '400'
-	fontFamily = 'monospace'
+	fontFamily = 'my-mono'
 	textAlign = 'center'
 	textBaseline = 'middle'