diff --git a/packages/astro/package.json b/packages/astro/package.json
index d489883ab..87bbf2991 100644
--- a/packages/astro/package.json
+++ b/packages/astro/package.json
@@ -39,7 +39,7 @@
     "test": "NODE_OPTIONS=--experimental-vm-modules jest"
   },
   "dependencies": {
-    "@astrojs/compiler": "^0.1.0-canary.45",
+    "@astrojs/compiler": "^0.1.0-canary.46",
     "@astrojs/markdown-remark": "^0.3.1",
     "@astrojs/renderer-preact": "0.0.0-compiler-2021821225719",
     "@astrojs/renderer-react": "0.0.0-compiler-2021821225719",
diff --git a/packages/astro/src/runtime/astro.ts b/packages/astro/src/runtime/astro.ts
index a525a0d3f..d01716f1f 100644
--- a/packages/astro/src/runtime/astro.ts
+++ b/packages/astro/src/runtime/astro.ts
@@ -1,5 +1,7 @@
 import type { AstroComponent, AstroComponentFactory } from '../internal';
 
+import { spreadAttributes, defineStyleVars, defineScriptVars } from '../internal';
+
 export async function renderAstroComponent(component: InstanceType<typeof AstroComponent>) {
   let template = '';
 
@@ -24,3 +26,16 @@ export async function renderPage(result: any, Component: AstroComponentFactory,
   const scripts = Array.from(result.scripts);
   return template.replace('</head>', styles.join('\n') + scripts.join('\n') + '</head>');
 }
+
+function renderElement(name: string, { props: _props, children = ''}: { props: Record<any, any>, children?: string }) {
+  const { hoist: _, "data-astro-id": astroId, "define:vars": defineVars, ...props } = _props;
+  if (defineVars) {
+    if (name === 'style') {
+      children = defineStyleVars(astroId, defineVars) + '\n' + children;
+    }
+    if (name === 'script') {
+      children = defineScriptVars(defineVars) + '\n' + children;
+    }
+  }
+  return `<${name}${spreadAttributes(props)}>${children}</${name}>`
+}
diff --git a/yarn.lock b/yarn.lock
index 9c58b5da4..bd971a9fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -106,20 +106,48 @@
     "@algolia/logger-common" "4.10.5"
     "@algolia/requester-common" "4.10.5"
 
-"@astrojs/compiler@^0.1.0-canary.45":
-  version "0.1.0-canary.45"
-  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.1.0-canary.45.tgz#826ec2eba4785eb08095bd04210b74d1fada4b95"
-  integrity sha512-B68nKGSHh319vum/XP6o8mNcv6bYqg7ipvtqlT7kiaxqXQ/2zA4PZcnWShF7XZ4s6jgs8WG3Pv+vo5/1rPs8pw==
+"@astrojs/compiler@^0.1.0-canary.46":
+  version "0.1.0-canary.46"
+  resolved "https://registry.yarnpkg.com/@astrojs/compiler/-/compiler-0.1.0-canary.46.tgz#99d12c9148c9233df81929204b823112ea26cb69"
+  integrity sha512-JwcPl90H59wjxP/Jx2Ub+OHGqgzkU+QFoZxur2CU028/2rwjkp2N1B5biAakS6g/8trIPwnZK/7iETKWOCGc+Q==
   dependencies:
     typescript "^4.3.5"
 
-"@astrojs/renderer-solid@0.1.1", "@astrojs/renderer-solid@^0.1.1":
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/@astrojs/renderer-solid/-/renderer-solid-0.1.1.tgz#9563e146c8adcb7ae5e42f200775c1d2f17b4ef9"
-  integrity sha512-69ZQIPp5bOhYXp7A/65VJ8sliwYNv4vJWbYh7noyAOrhD4a5kEnbAz6Y36UrldhRxEUr14QRNluMV0UqrxKJUw==
+"@astrojs/renderer-preact@0.0.0-compiler-2021821225719":
+  version "0.0.0-compiler-2021821225719"
+  resolved "https://registry.yarnpkg.com/@astrojs/renderer-preact/-/renderer-preact-0.0.0-compiler-2021821225719.tgz#d6f987ae94820220269e863967dac4203970fc48"
+  integrity sha512-IonFU0ATk9/jfL8P7AgGryHmEWAtirjbfUX/aQYIejOC+H+c6jD7OUIBNGi1KLo5wY9IwCQ06FK/UBOkuboPXw==
   dependencies:
-    babel-preset-solid "^1.0.0"
-    solid-js "^1.0.0"
+    "@babel/plugin-transform-react-jsx" "^7.14.5"
+    preact "^10.5.14"
+    preact-render-to-string "^5.1.19"
+
+"@astrojs/renderer-react@0.0.0-compiler-2021821225719":
+  version "0.0.0-compiler-2021821225719"
+  resolved "https://registry.yarnpkg.com/@astrojs/renderer-react/-/renderer-react-0.0.0-compiler-2021821225719.tgz#b0d86875b9c4fd5a7180d1c45424b69276414843"
+  integrity sha512-018I1M5Ea1P6/eVdW5azxTpoyjXjp9lBGCfSYTW7Zn0UIP9Ry2BgD9BH6cYvHqIK9hyI/5u7VjZttPPP0r/yLA==
+  dependencies:
+    "@babel/plugin-transform-react-jsx" "^7.14.5"
+    react "^17.0.2"
+    react-dom "^17.0.2"
+
+"@astrojs/renderer-svelte@0.0.0-compiler-2021821225719":
+  version "0.0.0-compiler-2021821225719"
+  resolved "https://registry.yarnpkg.com/@astrojs/renderer-svelte/-/renderer-svelte-0.0.0-compiler-2021821225719.tgz#0f3af4c9990caf1e7e870c8e6adfeddfd5437640"
+  integrity sha512-1uEd8+Bo3pHkmn3gmup+HTNR4Nmuu1YH1bDQHIucq7TtiWfUK2FufR7SrlaoXT2otSB4TUwwIq1dKvhgjtUJMQ==
+  dependencies:
+    "@sveltejs/vite-plugin-svelte" "^1.0.0-next.19"
+    svelte "^3.42.3"
+
+"@astrojs/renderer-vue@0.0.0-compiler-2021821225719":
+  version "0.0.0-compiler-2021821225719"
+  resolved "https://registry.yarnpkg.com/@astrojs/renderer-vue/-/renderer-vue-0.0.0-compiler-2021821225719.tgz#56654e2f775a14d1b88a58d5b7854c780c877413"
+  integrity sha512-D6uQwxLtSlKjq2ql6aUkqplimb4zR3xs8kLLQMhfpn6cnXiqwzwzdRYvM8f6q05fO/lNrvDp+m0ed4jbGZKQSg==
+  dependencies:
+    "@vitejs/plugin-vue" "^1.6.0"
+    "@vue/compiler-sfc" "^3.2.6"
+    "@vue/server-renderer" "^3.2.6"
+    vue "^3.2.6"
 
 "@babel/code-frame@7.12.11":
   version "7.12.11"
@@ -2863,15 +2891,6 @@ babel-plugin-jsx-dom-expressions@^0.29.16:
     "@babel/plugin-syntax-jsx" "^7.10.4"
     "@babel/types" "^7.11.5"
 
-babel-plugin-jsx-dom-expressions@^0.29.17:
-  version "0.29.17"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.29.17.tgz#5ce45842a5127b188a8a594d826d2755c121c6d5"
-  integrity sha512-RGd2bUEu6Ym+t/eqS+CwhTMRBnoIgVUEPDD+rUx5GhwLLuGBbJI2tTC0Q92ScX1I5hQpJgveAvaaoDjjyGkgPA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.10.4"
-    "@babel/types" "^7.11.5"
-
 babel-plugin-module-resolver@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
@@ -2909,13 +2928,6 @@ babel-preset-jest@^27.2.0:
     babel-plugin-jest-hoist "^27.2.0"
     babel-preset-current-node-syntax "^1.0.0"
 
-babel-preset-solid@^1.0.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/babel-preset-solid/-/babel-preset-solid-1.1.5.tgz#0f4d7d36723e243ecc17a4354e3df2196602d9c6"
-  integrity sha512-u+s+3zwErLfQzNqE6BfMRxfalxjSCm7BY/ua4pkCHlUuS5KrCFF/i4Bv5G98Z2uC9fWRXoD1nAu5zXA79vwkZA==
-  dependencies:
-    babel-plugin-jsx-dom-expressions "^0.29.17"
-
 babel-preset-solid@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/babel-preset-solid/-/babel-preset-solid-1.1.3.tgz#0d4a4d6855c93ab2775bf929f86f2ed1e97d79ae"
@@ -10376,11 +10388,6 @@ socks@^2.3.3, socks@^2.6.1:
     ip "^1.1.5"
     smart-buffer "^4.1.0"
 
-solid-js@^1.0.0:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.1.5.tgz#d06ca0ec0e7dc54912d230ff889df1dd240d4f03"
-  integrity sha512-cwMNe1U/1bqCTMco2za6LDU66jDn/57m5kfrDUhW3ls9YIbaREdktqPFGULrill22qyoFDngEg5hgm6a6vf6wg==
-
 solid-js@^1.1.1:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/solid-js/-/solid-js-1.1.4.tgz#ceba54d6b60f66692f8a072fb7419e94cfbcdd65"