Skip to content

Commit

Permalink
feat: remove component$ host element (QwikDev#1019)
Browse files Browse the repository at this point in the history
  • Loading branch information
@manucorporat
manucorporat authored Aug 10, 2022
1 parent 7d10369 commit 3e18804
Show file tree
Hide file tree
Showing 182 changed files with 3,553 additions and 3,835 deletions.
12 changes: 5 additions & 7 deletions .vscode/qwik.code-snippets
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@
" });",
" $0",
" return (",
" <Host>",
" <div>",
" <button onClick$={() => state.count += props.step}>",
" {state.count}",
" </button>",
" </Host>",
" </div>",
" );",
"});"
]
Expand All @@ -30,11 +30,9 @@
"body": [
"export const ${1:MyCmp} = component$(() => {",
" return (",
" <Host>",
" <div>",
" ${1:MyCmp}",
" </div>",
" </Host>",
" <div>",
" ${1:MyCmp}",
" </div>",
" );",
"});"
]
Expand Down
39 changes: 18 additions & 21 deletions packages/docs/src/components/body/body.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@
import { component$, Host, useContextProvider, useStore } from '@builder.io/qwik';
import { component$, useContextProvider, useStore } from '@builder.io/qwik';
import { Content } from '@builder.io/qwik-city';
import { GlobalStore, SiteStore } from '../../context';

export const Body = component$(
() => {
const store = useStore<SiteStore>({
headerMenuOpen: false,
sideMenuOpen: false,
});
useContextProvider(GlobalStore, store);
export const Body = component$(() => {
const store = useStore<SiteStore>({
headerMenuOpen: false,
sideMenuOpen: false,
});
useContextProvider(GlobalStore, store);

return (
<Host
class={{
'header-open': store.headerMenuOpen,
'menu-open': store.sideMenuOpen,
}}
>
<Content />
</Host>
);
},
{ tagName: 'body' }
);
return (
<body
class={{
'header-open': store.headerMenuOpen,
'menu-open': store.sideMenuOpen,
}}
>
<Content />
</body>
);
});
55 changes: 26 additions & 29 deletions packages/docs/src/components/code-block/code-block.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { component$, Host, useStyles$ } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import { highlight, languages } from 'prismjs';
import styles from './code-block.css?inline';

Expand All @@ -9,33 +9,30 @@ interface CodeBlockProps {
code: string;
}

export const CodeBlock = component$(
(props: CodeBlockProps) => {
useStyles$(styles);
export const CodeBlock = component$((props: CodeBlockProps) => {
useStyles$(styles);

let language = props.language;
if (!language && props.path && props.code) {
const ext = props.path.split('.').pop();
language =
ext === 'js' || ext === 'json'
? 'javascript'
: ext === 'html'
? 'markup'
: ext === 'css'
? 'css'
: undefined;
}
let language = props.language;
if (!language && props.path && props.code) {
const ext = props.path.split('.').pop();
language =
ext === 'js' || ext === 'json'
? 'javascript'
: ext === 'html'
? 'markup'
: ext === 'css'
? 'css'
: undefined;
}

if (language && languages[language]) {
const highlighted = highlight(props.code, languages[language], language);
const className = `language-${language}${props.theme ? ' theme-' + props.theme : ''}`;
return (
<Host class={className}>
<code class={className} dangerouslySetInnerHTML={highlighted} />
</Host>
);
}
return null;
},
{ tagName: 'pre' }
);
if (language && languages[language]) {
const highlighted = highlight(props.code, languages[language], language);
const className = `language-${language}${props.theme ? ' theme-' + props.theme : ''}`;
return (
<pre class={className}>
<code class={className} dangerouslySetInnerHTML={highlighted} />
</pre>
);
}
return null;
});
63 changes: 30 additions & 33 deletions packages/docs/src/components/content-nav/content-nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,41 @@
import { ContentMenu, useContent, useLocation } from '@builder.io/qwik-city';
import { component$, Host, useStyles$ } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import styles from './content-nav.css?inline';

export const ContentNav = component$(
() => {
useStyles$(styles);
export const ContentNav = component$(() => {
useStyles$(styles);

const { menu } = useContent();
const { pathname } = useLocation();
const { menu } = useContent();
const { pathname } = useLocation();

if (!menu) {
return null;
}
if (!menu) {
return null;
}

const items = flattenMenu(menu);
const items = flattenMenu(menu);

const prev = getNav(items, pathname, -1);
const next = getNav(items, pathname, 1);
const prev = getNav(items, pathname, -1);
const next = getNav(items, pathname, 1);

return (
<Host class="content-nav border-t border-slate-300 flex flex-wrap py-4">
<div class="flex-1">
{prev ? (
<a class="px-3 py-1 prev" href={prev.href}>
{prev.text}
</a>
) : null}
</div>
<div class="flex-1 text-right">
{next ? (
<a class="px-3 py-1 next" href={next.href}>
{next.text}
</a>
) : null}
</div>
</Host>
);
},
{ tagName: 'nav' }
);
return (
<nav class="content-nav border-t border-slate-300 flex flex-wrap py-4">
<div class="flex-1">
{prev ? (
<a class="px-3 py-1 prev" href={prev.href}>
{prev.text}
</a>
) : null}
</div>
<div class="flex-1 text-right">
{next ? (
<a class="px-3 py-1 next" href={next.href}>
{next.text}
</a>
) : null}
</div>
</nav>
);
});

export const getNav = (items: ContentMenu[], currentPathname: string, direction: -1 | 1) => {
const currentIndex = items.findIndex((p) => p.href === currentPathname);
Expand Down
51 changes: 24 additions & 27 deletions packages/docs/src/components/footer/footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,27 @@
import { component$, Host, useStyles$ } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import styles from './footer.css?inline';

export const Footer = component$(
() => {
useStyles$(styles);
export const Footer = component$(() => {
useStyles$(styles);

return (
<Host class="pt-8 pb-12 px-2 flex flex-wrap justify-center sm:justify-between text-sm">
<nav class="flex py-2 px-2 md:px-0">
<a class="px-4 py-1" href="https://github.com/BuilderIO/qwik" target="_blank">
Github
</a>
<a class="px-4 py-1" href="https://twitter.com/QwikDev" target="_blank">
@QwikDev
</a>
<a class="px-4 py-1" href="https://qwik.builder.io/chat" target="_blank">
Discord
</a>
</nav>
<div class="py-3 px-2 md:px-0">
<span>Made with ♡ by the </span>
<a href="https://www.builder.io/">Builder.io</a>
<span> team</span>
</div>
</Host>
);
},
{ tagName: 'footer' }
);
return (
<footer class="pt-8 pb-12 px-2 flex flex-wrap justify-center sm:justify-between text-sm">
<nav class="flex py-2 px-2 md:px-0">
<a class="px-4 py-1" href="https://github.com/BuilderIO/qwik" target="_blank">
Github
</a>
<a class="px-4 py-1" href="https://twitter.com/QwikDev" target="_blank">
@QwikDev
</a>
<a class="px-4 py-1" href="https://qwik.builder.io/chat" target="_blank">
Discord
</a>
</nav>
<div class="py-3 px-2 md:px-0">
<span>Made with ♡ by the </span>
<a href="https://www.builder.io/">Builder.io</a>
<span> team</span>
</div>
</footer>
);
});
51 changes: 24 additions & 27 deletions packages/docs/src/components/head/head.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,36 +4,33 @@ import { Manifest } from './manifest';
import { Social } from './social';
import { Vendor } from './vendor';

export const Head = component$(
() => {
const head = useDocumentHead();
const loc = useLocation();
export const Head = component$(() => {
const head = useDocumentHead();
const loc = useLocation();

return (
<>
<meta charSet="utf-8" />
return (
<head>
<meta charSet="utf-8" />

<title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
<link rel="canonical" href={loc.href} />
<meta name="viewport" content="width=device-width" />
<title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
<link rel="canonical" href={loc.href} />
<meta name="viewport" content="width=device-width" />

<Manifest />
<Social loc={loc} head={head} />
<Vendor />
<Manifest />
<Social loc={loc} head={head} />
<Vendor />

{head.meta.map((m) => (
<meta {...m} />
))}
{head.meta.map((m) => (
<meta {...m} />
))}

{head.links.map((l) => (
<link {...l} />
))}
{head.links.map((l) => (
<link {...l} />
))}

{head.styles.map((s) => (
<style {...s.props} dangerouslySetInnerHTML={s.style} />
))}
</>
);
},
{ tagName: 'head' }
);
{head.styles.map((s) => (
<style {...s.props} dangerouslySetInnerHTML={s.style} />
))}
</head>
);
});
Loading

0 comments on commit 3e18804

Please sign in to comment.