Skip to content
This repository was archived by the owner on Jul 6, 2025. It is now read-only.

Commit 488a537

Browse files
ijeije
committed
Add components dir for react framework
1 parent b14a203 commit 488a537

File tree

17 files changed

+114
-99
lines changed

17 files changed

+114
-99
lines changed

‎compiler/src/jsx.rs

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,16 @@ impl AlephJsxFold {
6767
JSXElementName::Ident(id) => {
6868
let name = id.sym.as_ref();
6969
match name {
70-
"head" | "script" => {
70+
"head" => {
7171
let mut resolver = self.resolver.borrow_mut();
72-
resolver.used_builtin_jsx_tags.insert(name.into());
73-
el.name = JSXElementName::Ident(quote_ident!(rename_builtin_tag(name)));
72+
resolver.used_builtin_jsx_tags.insert("Head".into());
73+
el.name = JSXElementName::Ident(quote_ident!("__ALEPH_Head"));
74+
}
75+
76+
"script" => {
77+
let mut resolver = self.resolver.borrow_mut();
78+
resolver.used_builtin_jsx_tags.insert("CustomScript".into());
79+
el.name = JSXElementName::Ident(quote_ident!("__ALEPH_CustomScript"));
7480
}
7581

7682
"a" => {
@@ -97,12 +103,12 @@ impl AlephJsxFold {
97103
}
98104

99105
if should_replace {
100-
resolver.used_builtin_jsx_tags.insert(name.into());
101-
el.name = JSXElementName::Ident(quote_ident!(rename_builtin_tag(name)));
106+
resolver.used_builtin_jsx_tags.insert("Anchor".into());
107+
el.name = JSXElementName::Ident(quote_ident!("__ALEPH_Anchor"));
102108
}
103109
}
104110

105-
"link" | "StyleLink" => {
111+
"link" => {
106112
let mut should_replace = false;
107113

108114
for attr in &el.attrs {
@@ -112,9 +118,7 @@ impl AlephJsxFold {
112118
value: Some(JSXAttrValue::Lit(Lit::Str(Str { value, .. }))),
113119
..
114120
}) => {
115-
if name.eq("StyleLink")
116-
|| (id.sym.eq("rel") && (value.eq("stylesheet") || value.eq("style")))
117-
{
121+
if id.sym.eq("rel") && (value.eq("stylesheet") || value.eq("style")) {
118122
should_replace = true;
119123
break;
120124
}
@@ -162,8 +166,8 @@ impl AlephJsxFold {
162166
}
163167

164168
if name.eq("link") {
165-
resolver.used_builtin_jsx_tags.insert("stylelink".into());
166-
el.name = JSXElementName::Ident(quote_ident!(rename_builtin_tag("stylelink")));
169+
resolver.used_builtin_jsx_tags.insert("StyleLink".into());
170+
el.name = JSXElementName::Ident(quote_ident!("__ALEPH_StyleLink"));
167171
}
168172
}
169173
}
@@ -213,8 +217,8 @@ impl AlephJsxFold {
213217
specifier: "#".to_owned() + id.as_str(),
214218
is_dynamic: false,
215219
});
216-
resolver.used_builtin_jsx_tags.insert(name.into());
217-
el.name = JSXElementName::Ident(quote_ident!(rename_builtin_tag(name)));
220+
resolver.used_builtin_jsx_tags.insert("InlineStyle".into());
221+
el.name = JSXElementName::Ident(quote_ident!("__ALEPH_InlineStyle"));
218222
inline_style = Some((type_prop_value, id.into()));
219223
}
220224

@@ -363,9 +367,11 @@ impl Fold for AlephJsxBuiltinModuleResolveFold {
363367
if name.eq("a") {
364368
name = "anchor".to_owned()
365369
}
366-
let id = quote_ident!(rename_builtin_tag(name.as_str()));
370+
let mut id_name = "__ALEPH_".to_owned();
371+
id_name.push_str(name.as_str());
372+
let id = quote_ident!(id_name);
367373
let (resolved_path, fixed_url) = resolver.resolve(
368-
format!("{}/framework/react/{}.ts", aleph_pkg_uri, name).as_str(),
374+
format!("{}/framework/react/components/{}.ts", aleph_pkg_uri, name).as_str(),
369375
false,
370376
);
371377
if resolver.bundle_mode && resolver.bundle_external.contains(fixed_url.as_str()) {
@@ -419,18 +425,6 @@ impl Fold for AlephJsxBuiltinModuleResolveFold {
419425
}
420426
}
421427

422-
fn rename_builtin_tag(name: &str) -> String {
423-
let mut c = name.chars();
424-
let mut name = match c.next() {
425-
None => String::new(),
426-
Some(f) => f.to_uppercase().collect::<String>() + c.as_str(),
427-
};
428-
if name.eq("A") {
429-
name = "Anchor".into();
430-
}
431-
"__ALEPH_".to_owned() + name.as_str()
432-
}
433-
434428
#[cfg(test)]
435429
mod tests {
436430
use crate::resolve::DependencyDescriptor;
@@ -465,21 +459,22 @@ mod tests {
465459
"#;
466460
let (code, resolver) = st("/pages/index.tsx", source, false);
467461
assert!(code.contains(
468-
"import __ALEPH_Anchor from \"../-/deno.land/x/[email protected]/framework/react/anchor.js\""
462+
"import __ALEPH_Anchor from \"../-/deno.land/x/[email protected]/framework/react/components/Anchor.js\""
469463
));
470464
assert!(code.contains(
471-
"import __ALEPH_Head from \"../-/deno.land/x/[email protected]/framework/react/head.js\""
465+
"import __ALEPH_Head from \"../-/deno.land/x/[email protected]/framework/react/components/Head.js\""
472466
));
473467
assert!(code.contains(
474-
"import __ALEPH_Stylelink from \"../-/deno.land/x/[email protected]/framework/react/stylelink.js\""
468+
"import __ALEPH_StyleLink from \"../-/deno.land/x/[email protected]/framework/react/components/StyleLink.js\""
475469
));
476470
assert!(code.contains(
477-
"import __ALEPH_Script from \"../-/deno.land/x/[email protected]/framework/react/script.js\""
471+
"import __ALEPH_CustomScript from \"../-/deno.land/x/[email protected]/framework/react/components/CustomScript.js\""
478472
));
479473
assert!(code.contains("React.createElement(\"a\","));
480474
assert!(code.contains("React.createElement(__ALEPH_Anchor,"));
481475
assert!(code.contains("React.createElement(__ALEPH_Head,"));
482-
assert!(code.contains("React.createElement(__ALEPH_Stylelink,"));
476+
assert!(code.contains("React.createElement(__ALEPH_StyleLink,"));
477+
assert!(code.contains("React.createElement(__ALEPH_CustomScript,"));
483478
assert!(code.contains("href: \"/style/index.css\""));
484479
assert!(code.contains(
485480
format!(
@@ -488,7 +483,6 @@ mod tests {
488483
)
489484
.as_str()
490485
));
491-
assert!(code.contains("React.createElement(__ALEPH_Script,"));
492486
let r = resolver.borrow_mut();
493487
assert_eq!(
494488
r.dep_graph,
@@ -502,19 +496,21 @@ mod tests {
502496
is_dynamic: false,
503497
},
504498
DependencyDescriptor {
505-
specifier: "https://deno.land/x/[email protected]/framework/react/head.ts".into(),
499+
specifier: "https://deno.land/x/[email protected]/framework/react/components/Head.ts".into(),
506500
is_dynamic: false,
507501
},
508502
DependencyDescriptor {
509-
specifier: "https://deno.land/x/[email protected]/framework/react/stylelink.ts".into(),
503+
specifier: "https://deno.land/x/[email protected]/framework/react/components/StyleLink.ts"
504+
.into(),
510505
is_dynamic: false,
511506
},
512507
DependencyDescriptor {
513-
specifier: "https://deno.land/x/[email protected]/framework/react/anchor.ts".into(),
508+
specifier: "https://deno.land/x/[email protected]/framework/react/components/Anchor.ts".into(),
514509
is_dynamic: false,
515510
},
516511
DependencyDescriptor {
517-
specifier: "https://deno.land/x/[email protected]/framework/react/script.ts".into(),
512+
specifier: "https://deno.land/x/[email protected]/framework/react/components/CustomScript.ts"
513+
.into(),
518514
is_dynamic: false,
519515
}
520516
]
@@ -545,9 +541,9 @@ mod tests {
545541
"#;
546542
let (code, resolver) = st("/pages/index.tsx", source, false);
547543
assert!(code.contains(
548-
"import __ALEPH_Style from \"../-/deno.land/x/[email protected]/framework/react/style.js\""
544+
"import __ALEPH_InlineStyle from \"../-/deno.land/x/[email protected]/framework/react/components/InlineStyle.js\""
549545
));
550-
assert!(code.contains("React.createElement(__ALEPH_Style,"));
546+
assert!(code.contains("React.createElement(__ALEPH_InlineStyle,"));
551547
assert!(code.contains("__styleId: \"inline-style-"));
552548
let r = resolver.borrow_mut();
553549
assert!(r.inline_styles.len() == 2);

‎compiler/src/resolve.rs

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -495,10 +495,13 @@ mod tests {
495495
)
496496
);
497497
assert_eq!(
498-
resolver.resolve("https://deno.land/x/aleph/framework/react/link.ts", false),
498+
resolver.resolve(
499+
"https://deno.land/x/aleph/framework/react/components/Link.ts",
500+
false
501+
),
499502
(
500-
"../-/http_localhost_2020/framework/react/link.js".into(),
501-
"http://localhost:2020/framework/react/link.ts".into()
503+
"../-/http_localhost_2020/framework/react/components/Link.js".into(),
504+
"http://localhost:2020/framework/react/components/Link.ts".into()
502505
)
503506
);
504507
assert_eq!(

‎compiler/src/resolve_fold.rs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -719,7 +719,7 @@ mod tests {
719719
vec![
720720
"https://esm.sh/react".into(),
721721
"https://esm.sh/react-dom".into(),
722-
"https://deno.land/x/aleph/framework/react/head.ts".into(),
722+
"https://deno.land/x/aleph/framework/react/components/Head.ts".into(),
723723
"/components/logo.tsx".into(),
724724
"/shared/iife.ts".into(),
725725
],
@@ -742,10 +742,10 @@ mod tests {
742742
code.contains("AsyncLogo = React.lazy(()=>__ALEPH.import(\"/components/async-logo.tsx\"")
743743
);
744744
assert!(code.contains(
745-
"const { default: __ALEPH_Head } = __ALEPH.pack[\"https://deno.land/x/aleph/framework/react/head.ts\"]"
745+
"const { default: __ALEPH_Head } = __ALEPH.pack[\"https://deno.land/x/aleph/framework/react/components/Head.ts\"]"
746746
));
747747
assert!(code.contains(
748-
"import __ALEPH_Stylelink from \"../-/deno.land/x/aleph/framework/react/stylelink.bundling.js\""
748+
"import __ALEPH_StyleLink from \"../-/deno.land/x/aleph/framework/react/components/StyleLink.bundling.js\""
749749
));
750750
assert!(code.contains("import \"../-/esm.sh/tailwindcss/dist/tailwind.min.css.bundling.js\""));
751751
assert!(code.contains("import \"../style/index.css.bundling.js#/style/index.css@000000\""));

‎framework/react/bootstrap.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { ComponentType, createElement } from 'react'
22
import { hydrate, render } from 'react-dom'
33
import { importModule, trimModuleExt } from '../core/module.ts'
44
import { RouteModule, Routing, RoutingOptions } from '../core/routing.ts'
5+
import Router from './components/Router.ts'
56
import { loadPageDataFromTag } from './pagedata.ts'
67
import { createPageProps, PageRoute } from './pageprops.ts'
7-
import Router from './router.ts'
88

99
type BootstrapOptions = Required<RoutingOptions> & {
1010
sharedModules: RouteModule[],

‎framework/react/anchor.ts renamed to ‎framework/react/components/Anchor.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import {
88
useEffect,
99
useMemo,
1010
} from 'react'
11-
import util from '../../shared/util.ts'
12-
import events from '../core/events.ts'
13-
import { redirect } from '../core/redirect.ts'
14-
import { useRouter } from './hooks.ts'
11+
import util from '../../../shared/util.ts'
12+
import events from '../../core/events.ts'
13+
import { redirect } from '../../core/redirect.ts'
14+
import { useRouter } from '../hooks.ts'
1515

1616
const prefetchedPages = new Set<string>()
1717

‎framework/react/script.ts renamed to ‎framework/react/components/CustomScript.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import {
33
ScriptHTMLAttributes,
44
useContext
55
} from 'react'
6-
import util from '../../shared/util.ts'
7-
import { SSRContext } from './context.ts'
6+
import util from '../../../shared/util.ts'
7+
import { SSRContext } from '../context.ts'
88

9-
export default function Script(props: PropsWithChildren<ScriptHTMLAttributes<{}>>) {
9+
export default function CustomScript(props: PropsWithChildren<ScriptHTMLAttributes<{}>>) {
1010
const { scripts } = useContext(SSRContext)
1111

1212
if (util.inDeno) {

‎framework/react/error.ts renamed to ‎framework/react/components/ErrorBoundary.ts

File renamed without changes.

‎framework/react/head.ts renamed to ‎framework/react/components/Head.ts

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ import {
99
useEffect,
1010
useMemo
1111
} from 'react'
12-
import util from '../../shared/util.ts'
13-
import { SSRContext } from './context.ts'
14-
import Script from './script.ts'
15-
import Style from './style.ts'
16-
import StyleLink from './stylelink.ts'
12+
import util from '../../../shared/util.ts'
13+
import { SSRContext } from '../context.ts'
14+
import CustomScript from './CustomScript.ts'
15+
import InlineStyle from './InlineStyle.ts'
16+
import StyleLink from './StyleLink.ts'
1717

1818
export default function Head(props: PropsWithChildren<{}>) {
19-
const renderer = useContext(SSRContext)
19+
const { headElements } = useContext(SSRContext)
2020
const [els, forwardNodes] = useMemo(() => parse(props.children), [props.children])
2121

2222
if (util.inDeno) {
23-
els.forEach(({ type, props }, key) => renderer.headElements.set(key, { type, props }))
23+
els.forEach(({ type, props }, key) => headElements.set(key, { type, props }))
2424
}
2525

2626
useEffect(() => {
@@ -90,11 +90,11 @@ function parse(node: ReactNode): [Map<string, { type: string, props: Record<stri
9090
case StyleLink:
9191
forwardNodes.push(createElement(StyleLink, props))
9292
break
93-
case Style:
94-
forwardNodes.push(createElement(Style, props))
93+
case InlineStyle:
94+
forwardNodes.push(createElement(InlineStyle, props))
9595
break
96-
case Script:
97-
forwardNodes.push(createElement(Script, props))
96+
case CustomScript:
97+
forwardNodes.push(createElement(CustomScript, props))
9898
break
9999
case 'base':
100100
case 'title':

‎framework/react/htmlpage.ts renamed to ‎framework/react/components/HtmlPage.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/// <reference lib="dom" />
22

33
import React, { useEffect, useRef, RefObject, PropsWithRef, HTMLAttributes } from 'react'
4-
import { redirect } from '../core/redirect.ts'
4+
import { redirect } from '../../core/redirect.ts'
55

66
type HTMLPageProps = PropsWithRef<HTMLAttributes<{}> & {
77
ref?: RefObject<HTMLDivElement>

‎framework/react/components/InlineStyle.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { StyleHTMLAttributes, useContext, useEffect } from 'react'
2+
import util from '../../../shared/util.ts'
3+
import { applyCSS, removeCSS } from '../../core/style.ts'
4+
import { SSRContext } from '../context.ts'
5+
6+
export default function InlineStyle({ children, ...rest }: StyleHTMLAttributes<{}>) {
7+
const { inlineStyles } = useContext(SSRContext)
8+
const { __styleId: id } = rest as any
9+
const css = children?.toLocaleString()
10+
11+
if (id && css) {
12+
if (util.inDeno) {
13+
inlineStyles.set('#' + id, css)
14+
} else {
15+
applyCSS('#' + id, css)
16+
}
17+
}
18+
19+
useEffect(() => () => id && removeCSS('#' + id), [])
20+
21+
return null
22+
}

0 commit comments

Comments
 (0)