JSX implementation

This commit is contained in:
Andrew 2020-10-27 13:27:28 -07:00
parent a60f3b0ac2
commit 43198ce9ec
10 changed files with 6117 additions and 1953 deletions

4
.gitignore vendored
View File

@ -4,8 +4,8 @@
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
# Premake files
.bin/*
.build/*
.bin/
.build/
# User-specific files
*.suo

View File

@ -17,7 +17,11 @@ workspace "quickjs-msvc"
-- Premake output folder
location(path.join(".build", _ACTION))
defines {"JS_STRICT_NAN_BOXING"} -- this option enables x64 build
defines {
"JS_STRICT_NAN_BOXING", -- this option enables x64 build on Windows/MSVC
"CONFIG_BIGNUM",
"CONFIG_JSX", -- native JSX support - enables JSX literals
}
platforms { "x86", "x64", "arm32", "arm64" }
@ -71,6 +75,7 @@ project "quickjs"
"libunicode.c",
"quickjs.c",
"quickjs-libc.c",
"libbf.c",
"libregexp.h",
"libregexp-opcode.h",
"libunicode.h",
@ -79,7 +84,8 @@ project "quickjs"
"quickjs.h",
"quickjs-atom.h",
"quickjs-libc.h",
"quickjs-opcode.h"
"quickjs-opcode.h",
"quickjs-jsx.h",
}
-----------------------------------------------------------------------------------------------------------------------
@ -102,8 +108,11 @@ project "qjs"
files {
"qjs.c",
"repl.js",
"repl.c"
"repl.c",
"qjscalc.js",
"qjscalc.c"
}
-- Compile repl.js and save bytecode into repl.c
prebuildcommands { "\"%{cfg.buildtarget.directory}/qjsc.exe\" -c -o \"../../repl.c\" -m \"../../repl.js\"" }
prebuildcommands { "\"%{cfg.buildtarget.directory}/qjsc.exe\" -c -o \"../../qjscalc.c\" -m \"../../qjscalc.js\"" }

3788
qjscalc.c Normal file

File diff suppressed because it is too large Load Diff

View File

@ -223,6 +223,9 @@ DEF(BigDecimal, "BigDecimal")
DEF(OperatorSet, "OperatorSet")
DEF(Operators, "Operators")
#endif
#ifdef CONFIG_JSX
DEF(JSX, "JSX")
#endif
DEF(Map, "Map")
DEF(Set, "Set") /* Map + 1 */
DEF(WeakMap, "WeakMap") /* Map + 2 */

224
quickjs-jsx.h Normal file
View File

@ -0,0 +1,224 @@
/* JSX translates XML literals like this
*
* var jsx = <div foo="bar">some text</div>;
*
* into calls of "JSX driver function":
*
* __jsx__("div", {foo:"bar"}, ["some text"]);
*
* note:
* a) the call always have 3 arguments: string, object|null, array|null
* b) __jsx__ can be redefined, e.g. for https://mithril.js.org it will be just
*
* __jsx__ = m; // using mithril as JSX driver
*/
static __exception int next_web_token(JSParseState *s) {
s->allow_web_name_token = 1;
int r = next_token(s);
s->allow_web_name_token = 0;
return r;
}
static int js_parse_jsx_expr(JSParseState *s, int level)
{
int atts_count = 0;
int kids_count = 0;
// NOTE: caller already consumed '<'
if (next_web_token(s)) goto fail;
if (s->token.val != TOK_IDENT)
return js_parse_error(s, "Expecting tag name");
//tag
JSAtom tag_atom = s->token.u.ident.atom;
JSValue tag = JS_AtomToString(s->ctx,tag_atom);
// load JSX function - driver of JSX expressions:
#if 1 // load it as a global function
emit_op(s, OP_get_var);
emit_atom(s, JS_ATOM_JSX);
#else // load it as a local/scope function - do we need that?
emit_op(s, OP_scope_get_var);
emit_atom(s, JS_ATOM_JSX);
emit_u16(s, s->cur_func->scope_level);
#endif
// #0 #1 #2
// JSX(tag, atts ,kids); where
// - atts - object {...}, can be empty
// - kids - array [...], can be empty
emit_push_const(s, tag, 0);
JS_FreeValue(s->ctx, tag);
// parse attributes
JSAtom attr_name = JS_ATOM_NULL;
JSValue attr_value = JS_UNINITIALIZED;
#if defined(CONFIG_JSX_SCITER) // HTML shortcuts used by Sciter
char class_buffer[512] = {0};
#endif
if (next_web_token(s)) goto fail;
emit_op(s, OP_object);
while (s->token.val != '>') {
if (s->token.val == '/') {
next_token(s);
//json_parse_expect(s, '>');
if(s->token.val != '>')
js_parse_error(s, "expecting '>'");
goto GENERATE_KIDS;
}
#if defined(CONFIG_JSX_SCITER) // HTML shortcuts used by Sciter
if (s->token.val == '#') { // <div #some> -> <div id="some">
if (next_web_token(s)) goto fail;
if (s->token.val != TOK_IDENT) { js_parse_error(s, "expecting identifier"); goto fail; }
attr_name = JS_NewAtom(s->ctx,"id");
attr_value = JS_AtomToString(s->ctx, s->token.u.ident.atom);
goto PUSH_ATTR_VALUE;
}
if (s->token.val == '|') { // <input|text> -> <input type="text">
if (next_web_token(s)) goto fail;
if (s->token.val != TOK_IDENT) { js_parse_error(s, "expecting identifier"); goto fail; }
attr_name = JS_NewAtom(s->ctx, "type");
attr_value = JS_AtomToString(s->ctx, s->token.u.ident.atom);
goto PUSH_ATTR_VALUE;
}
if (s->token.val == '(') { // <input(foo)> -> <input name="foo">
if (next_web_token(s)) goto fail;
if (s->token.val != TOK_IDENT) { js_parse_error(s, "expecting identifier"); goto fail; }
attr_name = JS_NewAtom(s->ctx, "name");
attr_value = JS_AtomToString(s->ctx, s->token.u.ident.atom);
if (next_token(s)) goto fail;
if (s->token.val != ')') { js_parse_error(s, "expecting ')'"); goto fail; }
goto PUSH_ATTR_VALUE;
}
if (s->token.val == '.') { // <div.some> -> <div class="some">
if (next_web_token(s)) goto fail;
if (s->token.val != TOK_IDENT) { js_parse_error(s, "expecting identifier"); goto fail; }
char cls1[256];
const char *name = JS_AtomGetStr(s->ctx, cls1, countof(cls1), s->token.u.ident.atom);
if (strlen(class_buffer) + strlen(name) + 2 < countof(class_buffer)) {
if(class_buffer[0]) strcat(class_buffer, " ");
strcat(class_buffer, name);
}
next_web_token(s);
continue;
}
#endif
if (token_is_ident(s->token.val)) {
/* keywords and reserved words have a valid atom */
attr_name = JS_DupAtom(s->ctx, s->token.u.ident.atom);
if (next_token(s))
goto fail;
}
if (js_parse_expect(s, '='))
goto fail;
if (s->token.val == TOK_STRING) {
attr_value = JS_DupValue(s->ctx,s->token.u.str.str);
PUSH_ATTR_VALUE:
if (emit_push_const(s, attr_value, 0))
goto fail;
JS_FreeValue(s->ctx, attr_value);
}
else if (s->token.val == '{')
{
if (next_token(s))
goto fail;
if (js_parse_assign_expr(s, TRUE))
goto fail;
if(s->token.val != '}')
return js_parse_error(s, "expecting '}'");
}
set_object_name(s, attr_name);
emit_op(s, OP_define_field);
emit_atom(s, attr_name);
JS_FreeAtom(s->ctx, attr_name);
if (next_web_token(s))
return -1;
}
#if defined(CONFIG_JSX_SCITER) // HTML shortcuts used by Sciter
if (class_buffer[0]) { // add remaining classes
attr_value = JS_NewString(s->ctx, class_buffer);
emit_push_const(s, JS_NewString(s->ctx, class_buffer), 0);
JS_FreeValue(s->ctx, attr_value);
attr_name = JS_NewAtom(s->ctx, "class");
set_object_name(s, attr_name);
emit_op(s, OP_define_field);
emit_atom(s, attr_name);
JS_FreeAtom(s->ctx, attr_name);
}
#endif
// parse content of the element
for (;;) {
const uint8_t *p;
p = s->last_ptr = s->buf_ptr;
s->last_line_num = s->token.line_num;
if (js_parse_string(s, '<', TRUE, p, &s->token, &p))
goto fail;
if (s->buf_ptr != p) {
s->buf_ptr = p;
if (emit_push_const(s, s->token.u.str.str, 1))
goto fail;
++kids_count;
}
next_token(s);
if (s->token.val == '<') {
if (*s->buf_ptr == '/') {
next_token(s); // skip '/'
next_web_token(s); // get tail tag name
if (token_is_ident(s->token.val)) { /* keywords and reserved words have a valid atom */
if(s->token.u.ident.atom != tag_atom)
return js_parse_error(s, "head and tail tags do not match");
next_token(s);
if (s->token.val != '>')
return js_parse_error(s, "expecting '>' in tail tag");
break;
}
}
else {
js_parse_jsx_expr(s, level + 1);
++kids_count;
}
}
else if (s->token.val == '{') {
if (next_token(s))
goto fail;
if (js_parse_assign_expr(s, TRUE))
goto fail;
if(s->token.val != '}')
return js_parse_error(s, "expected '}'");
++kids_count;
}
}
GENERATE_KIDS:
emit_op(s, OP_array_from);
emit_u16(s, kids_count);
emit_op(s, OP_call);
emit_u16(s, 3);
if (level == 0)
next_token(s);
return 0;
fail:
JS_FreeValue(s->ctx, tag);
JS_FreeAtom(s->ctx, attr_name);
JS_FreeValue(s->ctx, attr_value);
return -1;
}

View File

@ -2821,6 +2821,11 @@ static JSAtom __JS_NewAtomInit(JSRuntime *rt, const char *str, int len,
return __JS_NewAtom(rt, p, atom_type);
}
JSAtom JS_NewAtomLenRT(JSRuntime *rt, const char *str, int len)
{
return __JS_NewAtomInit(rt, str, len, JS_ATOM_TYPE_STRING);
}
static JSAtom __JS_FindAtom(JSRuntime *rt, const char *str, size_t len,
int atom_type)
{
@ -2995,7 +3000,7 @@ static JSValue JS_NewSymbolFromAtom(JSContext *ctx, JSAtom descr,
#define ATOM_GET_STR_BUF_SIZE 64
/* Should only be used for debug. */
static const char *JS_AtomGetStrRT(JSRuntime *rt, char *buf, int buf_size,
const char *JS_AtomGetStrRT(JSRuntime *rt, char *buf, int buf_size,
JSAtom atom)
{
if (__JS_AtomIsTaggedInt(atom)) {
@ -7357,7 +7362,7 @@ static int num_keys_cmp(const void *p1, const void *p2, void *opaque)
return 1;
}
static void js_free_prop_enum(JSContext *ctx, JSPropertyEnum *tab, uint32_t len)
void js_free_prop_enum(JSContext *ctx, JSPropertyEnum *tab, uint32_t len)
{
uint32_t i;
if (tab) {
@ -9742,6 +9747,16 @@ void *JS_GetOpaque2(JSContext *ctx, JSValueConst obj, JSClassID class_id)
return p;
}
JSClassID JS_GetClassID(JSValueConst obj, void** ppopaque) {
JSObject *p;
if (JS_VALUE_GET_TAG(obj) != JS_TAG_OBJECT)
return 0;
p = JS_VALUE_GET_OBJ(obj);
if(ppopaque)
*ppopaque = p->u.opaque;
return p->class_id;
}
#define HINT_STRING 0
#define HINT_NUMBER 1
#define HINT_NONE 2
@ -20061,6 +20076,9 @@ typedef struct JSParseState {
BOOL is_module; /* parsing a module */
BOOL allow_html_comments;
BOOL ext_json; /* true if accepting JSON superset */
#ifdef CONFIG_JSX;
BOOL allow_web_name_token; /* HTML and CSS tokens that accept '-' as part of the nmtoken */
#endif
} JSParseState;
typedef struct JSOpCode {
@ -20306,6 +20324,13 @@ static __exception int js_parse_string(JSParseState *s, int sep,
uint32_t c;
StringBuffer b_s, *b = &b_s;
int multiline_str =
#ifdef CONFIG_JSX
sep == '`' || '<';
#else
sep == '`';
#endif
/* string */
if (string_buffer_init(s->ctx, b, 32))
goto fail;
@ -20319,7 +20344,7 @@ static __exception int js_parse_string(JSParseState *s, int sep,
js_parse_error(s, "invalid character in a JSON string");
goto fail;
}
if (sep == '`') {
if (multiline_str) {
if (c == '\r') {
if (p[1] == '\n')
p++;
@ -20330,8 +20355,16 @@ static __exception int js_parse_string(JSParseState *s, int sep,
goto invalid_char;
}
p++;
#ifdef CONFIG_JSX
if ((c == '{' || c == '<') && sep == '<') {
/* expr start */
--p;
break;
} else
#endif
if (c == sep)
break;
if (c == '$' && *p == '{' && sep == '`') {
/* template start or middle part */
p++;
@ -20598,6 +20631,9 @@ static JSAtom parse_ident(JSParseState *s, const uint8_t **pp,
} else if (c >= 128) {
c = unicode_from_utf8(p, UTF8_CHAR_LEN_MAX, &p1);
}
#ifdef CONFIG_JSX
if (c == '-' && s->allow_web_name_token) {;} else
#endif
if (!lre_js_is_ident_next(c))
break;
p = p1;
@ -20800,6 +20836,10 @@ static __exception int next_token(JSParseState *s)
}
break;
case '#':
#ifdef CONFIG_JSX
if (s->allow_web_name_token) goto def_token;
#endif // CONFIG_JSX
/* private name */
{
const uint8_t *p1;
@ -24227,6 +24267,10 @@ static void optional_chain_test(JSParseState *s, int *poptional_chaining_label,
emit_label(s, label_next);
}
#ifdef CONFIG_JSX
#include "quickjs-jsx.h"
#endif
static __exception int js_parse_postfix_expr(JSParseState *s, BOOL accept_lparen)
{
FuncCallType call_type;
@ -24441,6 +24485,12 @@ static __exception int js_parse_postfix_expr(JSParseState *s, BOOL accept_lparen
}
}
break;
#ifdef CONFIG_JSX
case '<':
if (js_parse_jsx_expr(s,0))
return -1;
break;
#endif
case TOK_NEW:
if (next_token(s))
return -1;
@ -28027,6 +28077,9 @@ JSModuleDef *JS_RunModule(JSContext *ctx, const char *basename,
return NULL;
}
if (m->evaluated)
return m;
/* Evaluate the module code */
func_obj = JS_DupValue(ctx, JS_MKPTR(JS_TAG_MODULE, m));
ret = JS_EvalFunction(ctx, func_obj);
@ -28036,6 +28089,28 @@ JSModuleDef *JS_RunModule(JSContext *ctx, const char *basename,
return m;
}
JSValue JS_GetModuleExportItem(JSContext *ctx, JSModuleDef *m, JSAtom atom)
{
JSValue rv = JS_UNDEFINED;
for (int n = 0; n < m->export_entries_count; ++n)
{
JSExportEntry *me = &m->export_entries[n];
if (me->local_name == atom && me->export_type == JS_EXPORT_TYPE_LOCAL /*???*/) {
rv = me->u.local.var_ref->value;
break;
}
}
return JS_DupValue(ctx, rv);
}
JSValue JS_GetModuleExportItemStr(JSContext *ctx, JSModuleDef *m, const char *name)
{
JSAtom atom = JS_NewAtom(ctx, name);
JSValue rv = JS_GetModuleExportItem(ctx, m, atom);
JS_FreeAtom(ctx, atom);
return rv;
}
static JSValue js_dynamic_import_job(JSContext *ctx,
int argc, JSValueConst *argv)
{

View File

@ -520,6 +520,8 @@ void JS_DumpMemoryUsage(FILE *fp, const JSMemoryUsage *s, JSRuntime *rt);
JSAtom JS_NewAtomLen(JSContext *ctx, const char *str, size_t len);
JSAtom JS_NewAtom(JSContext *ctx, const char *str);
JSAtom JS_NewAtomUInt32(JSContext *ctx, uint32_t n);
JSAtom JS_NewAtomLenRT(JSRuntime *rt, const char *str, int len);
const char *JS_AtomGetStrRT(JSRuntime *rt, char *buf, int buf_size, JSAtom atom);
JSAtom JS_DupAtom(JSContext *ctx, JSAtom v);
void JS_FreeAtom(JSContext *ctx, JSAtom v);
void JS_FreeAtomRT(JSRuntime *rt, JSAtom v);
@ -535,6 +537,8 @@ typedef struct JSPropertyEnum {
JSAtom atom;
} JSPropertyEnum;
void js_free_prop_enum(JSContext *ctx, JSPropertyEnum *tab, uint32_t len);
typedef struct JSPropertyDescriptor {
int flags;
JSValue value;
@ -897,6 +901,7 @@ int JS_DefinePropertyGetSet(JSContext *ctx, JSValueConst this_obj,
void JS_SetOpaque(JSValue obj, void *opaque);
void *JS_GetOpaque(JSValueConst obj, JSClassID class_id);
void *JS_GetOpaque2(JSContext *ctx, JSValueConst obj, JSClassID class_id);
JSClassID JS_GetClassID(JSValueConst obj, void** ppopaque);
/* 'buf' must be zero terminated i.e. buf[buf_len] = '\0'. */
JSValue JS_ParseJSON(JSContext *ctx, const char *buf, size_t buf_len,
@ -999,6 +1004,9 @@ JSAtom JS_GetScriptOrModuleName(JSContext *ctx, int n_stack_levels);
JSModuleDef *JS_RunModule(JSContext *ctx, const char *basename,
const char *filename);
JSValue JS_GetModuleExportItemStr(JSContext *ctx, JSModuleDef *m, const char *name);
JSValue JS_GetModuleExportItem(JSContext *ctx, JSModuleDef *m, JSAtom atom);
/* C function definition */
typedef enum JSCFunctionEnum { /* XXX: should rename for namespace isolation */
JS_CFUNC_generic,

3340
repl.c

File diff suppressed because it is too large Load Diff

63
tests/JSX/test-jsx.js Normal file
View File

@ -0,0 +1,63 @@
// "driver" of JSX expressions
JSX = function(tag,atts,kids) {
return [tag,atts,kids]; // just produce "vnode" tuple
}
function isObject(object) {
return object != null && typeof object === 'object';
}
function deepEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (const key of keys1) {
const val1 = object1[key];
const val2 = object2[key];
const areObjects = isObject(val1) && isObject(val2);
if (
areObjects && !deepEqual(val1, val2) ||
!areObjects && val1 !== val2
) {
return false;
}
}
return true;
}
function assert(v1,v2) {
if(!deepEqual(v1,v2)) {
//console.log(JSON.stringify(v1,v2));
throw "problem in JSX construct"
}
}
var t1 = <div>test</div>;
var t1a = ["div",{},["test"]];
assert(t1,t1a);
var t2 = <h1 id="foo">test</h1>;
var t2a = ["h1",{id:"foo"},["test"]];
assert(t2,t2a);
var t3 = <div><h1/></div>;
var t3a = ["div",{},[["h1",{},[]]]];
assert(t3,t3a);
var t4 = <div id="foo" class="bar"><h1>header</h1><button>clicks</button></div>;
var t4a = ["div",{id:"foo",class:"bar"},[["h1",{},["header"]],["button",{},["clicks"]]]];
assert(t3,t3a);
console.log("JSX test passed!");