Pre-release refactors (#289)

* refactor: expose `astro/components` as component entrypoint

* refactor: remove `extensions` from all configs

* test: fix snowpack tests

* docs: update config doc

docs/config.md

@@ -4,34 +4,24 @@ To configure Astro, add an `astro.config.mjs` file in the root of your project.
 
 ```js
 export default {
-  /** Where to resolve all URLs relative to. Useful if you have a monorepo project. */
+  projectRoot: '.',         // Where to resolve all URLs relative to. Useful if you have a monorepo project.
-  projectRoot: '.',
+  pages: './src/pages',     // Path to Astro components, pages, and data
-  /** Path to your site’s pages (routes) */
+  dist: './dist',           // When running `astro build`, path to final static output
-  pages: './src/pages',
+  public: './public',       // A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing.
-  /** When running `astro build`, path to final static output */
-  dist: './dist',
-  /** A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don’t need processing. */
-  public: './public',
-  /** Extension-specific handlings */
-  extensions: {
-    /** Set this to "preact" or "react" to determine what *.jsx files should load */
-    '.jsx': 'react',
-  },
-  /** Options specific to `astro build` */
   buildOptions: {
-    /** Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs. */
+    // site: '',            // Your public domain, e.g.: https://my-site.dev/. Used to generate sitemaps and canonical URLs.
-    site: '',
+    sitemap: true,          // Generate sitemap (set to "false" to disable)
-    /** Generate sitemap (set to "false" to disable) */
-    sitemap: true,
   },
-  /** Options for the development server run with `astro dev`. */
   devOptions: {
-    /** The port to run the dev server on. */
+    port: 3000,             // The port to run the dev server on.
-    port: 3000,
+    // tailwindConfig: '',  // Path to tailwind.config.js if used, e.g. './tailwind.config.js'
-    /** Path to tailwind.config.js if used, e.g. './tailwind.config.js' */
-    tailwindConfig: undefined,
   },
-  /** default array of rendering packages inserted into runtime */
+  // component renderers which are enabled by default
-  renderers: ['@astrojs/renderer-preact', '@astrojs/renderer-react', '@astrojs/renderer-svelte', '@astrojs/renderer-vue'],
+  renderers: [
+    '@astrojs/renderer-svelte',
+    '@astrojs/renderer-vue',
+    '@astrojs/renderer-react',
+    '@astrojs/renderer-preact'
+  ],
 };
 ```

docs/markdown.md

@@ -58,7 +58,7 @@ Astro exposes a special `Markdown` component for `.astro` files which enables ma
 ---
 // For now, this import _must_ be named "Markdown" and _must not_ be wrapped with a custom component
 // We're working on easing these restrictions!
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 import Layout from '../layouts/main.astro';
 import MyFancyCodePreview from '../components/MyFancyCodePreview.tsx';
 
@@ -101,7 +101,7 @@ If you have Markdown in a remote source, you may pass it directly to the Markdow
 
 ```jsx
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 
 const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
 ---
@@ -115,7 +115,7 @@ Some times you might want to combine dynamic markdown with static markdown. You
 
 ```jsx
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 
 const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
 ---

examples/astro-markdown/astro.config.mjs

@@ -1,7 +0,0 @@
-export default {
-  extensions: {
-    '.jsx': 'react',
-    '.tsx': 'preact',
-  },
-  public: './public'
-};

examples/astro-markdown/src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 import Layout from '../layouts/main.astro';
 import ReactCounter from '../components/ReactCounter.jsx';
 import PreactCounter from '../components/PreactCounter.tsx';

examples/doc/astro.config.mjs

@@ -1,5 +1,5 @@
 export default {
-  extensions: {
+  renderers: [
-    '.tsx': 'preact'
+    '@astrojs/renderer-preact'
-  }
+  ]
 };

examples/doc/src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 import Layout from '../layouts/Main.astro';
 ---
 

examples/portfolio/astro.config.mjs

@@ -1,5 +1,5 @@
 export default {
-  extensions: {
+  renderers: [
-    '.jsx': 'preact',
+    '@astrojs/renderer-preact'
-  },
+  ]
 };

examples/remote-markdown/astro.config.mjs

@@ -1,5 +0,0 @@
-export default {
-  extensions: {
-    '.jsx': 'preact'
-  }
-}

examples/remote-markdown/docs/dev.md

@@ -1,48 +0,0 @@
-# Development Server
-
-The development server comes as part of the Astro CLI. Start the server with:
-
-```shell
-astro dev
-```
-
-In your project root. You can specify an alternative
-
-## Special routes
-
-The dev server will serve the following special routes:
-
-### /400
-
-This is a custom **400** status code page. You can add this route by adding a page component to your `src/pages` folder:
-
-```
-├── src/
-│   ├── components/
-│   └── pages/
-│       └── 400.astro
-```
-
-For any URL you visit that doesn't have a corresponding page, the `400.astro` file will be used.
-
-### /500
-
-This is a custom **500** status code page. You can add this route by adding a page component to your `src/pages` folder:
-
-```astro
-├── src/ │ ├── components/ │ └── pages/ │ └── 500.astro
-```
-
-This page is used any time an error occurs in the dev server.
-
-The 500 page will receive an `error` query parameter which you can access with:
-
-```
----
-const error = Astro.request.url.searchParams.get('error');
----
-
-<strong>{error}</strong>
-```
-
-A default error page is included with Astro so you will get pretty error messages even without adding a custom 500 page.

examples/remote-markdown/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "@example/remote-markdown",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "start": "astro dev",
-    "build": "astro build",
-    "astro-dev": "nodemon --delay 0.5 -w ../../packages/astro/dist -x '../../packages/astro/astro.mjs dev'"
-  },
-  "devDependencies": {
-    "astro": "0.12.0-next.1",
-    "nodemon": "^2.0.7"
-  },
-  "snowpack": {
-    "workspaceRoot": "../.."
-  }
-}

examples/remote-markdown/src/components/Yell.jsx

@@ -1,10 +0,0 @@
-import { h, Fragment } from 'preact';
-
-export default function Yell({ children }) {
-  return (
-    children
-      .filter((v) => typeof v === 'string')
-      .join('')
-      .toUpperCase() + '!'
-  );
-}

examples/remote-markdown/src/layouts/main.astro

@@ -1,14 +0,0 @@
----
-export let content;
----
-
-<html>
-  <head>
-    <title>{content.title}</title>
-  </head>
-
-  <body>
-    <slot />
-    <pre>{JSON.stringify(content)}</pre>
-  </body>
-</html>

examples/remote-markdown/src/pages/index.astro

@@ -1,72 +0,0 @@
----
-import Markdown from 'astro/components/Markdown.astro';
-import Yell from '../components/Yell.jsx';
-const title = 'INTERPOLATED';
-const quietTest = 'interpolated';
-const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
----
-
-<!-- Basic -->
-<Markdown>
-# Hello world!
-</Markdown>
-
-    <!-- Indented -->
-    <Markdown>
-      # Hello indent!
-    </Markdown>
-
-<!-- Interpolation -->
-<Markdown>
-# Hello {title}!
-</Markdown>
-
-
-        <!-- Can I break this? -->
-        <Markdown>
-          # I cannot!
-
-          <div>
-            # ahhhh
-          </div>
-
-          <Yell>{quietTest}</Yell>
-
-          <strong>Dope</strong>
-
-          `nice`
-
-          ```
-          plain fence
-          ```
-
-          ```html
-          don't <div>me</div> bro
-          ```
-
-          ```js
-          Astro.fetchContent()
-          ```
-
-          ### cool stuff?
-          ```astro
-          {'can\'t interpolate'}
-          {}
-          {title}
-          
-          Do I break? <Markdown> </Markdown>
-          ```
-        </Markdown>
-
-<!-- external content -->
-<Markdown>{content}</Markdown>
-
-<!-- external with newlines -->
-<Markdown>
-  {content}
-</Markdown>
-
-        <!-- external with indentation -->
-        <Markdown>
-          {content}
-        </Markdown>

examples/remote-markdown/src/pages/test.astro

@@ -1,6 +0,0 @@
----
-import Markdown from 'astro/components/Markdown.astro';
-const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
----
-
-<Markdown content={content} />

examples/snowpack/astro.config.mjs

@@ -3,14 +3,9 @@ export default {
   pages: './src/pages',
   dist: './dist',
   public: './public',
-  extensions: {
+  renderers: [
-    '.jsx': 'preact',
+    '@astrojs/renderer-vue',
-  },
+    '@astrojs/renderer-svelte',
-  snowpack: {
+    '@astrojs/renderer-preact'
-    optimize: {
+  ]
-      bundle: false,
-      minify: true,
-      target: 'es2018',
-    },
-  },
 };

packages/astro/components/index.js

@@ -0,0 +1,2 @@
+export { default as Markdown } from './Markdown.astro';
+export { default as Prism } from './Prism.astro';

packages/astro/package.json

@@ -9,6 +9,7 @@
     ".": "./astro.mjs",
     "./package.json": "./package.json",
     "./snowpack-plugin": "./snowpack-plugin.cjs",
+    "./components": "./components/index.js",
     "./components/*": "./components/*",
     "./runtime/svelte": "./dist/frontend/runtime/svelte.js",
     "./dist/frontend/markdown.js": "./dist/frontend/markdown.js"

packages/astro/src/frontend/500.astro

@@ -1,5 +1,5 @@
 ---
-import Prism from 'astro/components/Prism.astro';
+import { Prism } from 'astro/components';
 let title = 'Uh oh...';
 
 const error = Astro.request.url.searchParams.get('error');

packages/astro/test/fixtures/astro-expr/astro.config.mjs

@@ -1,6 +1,5 @@
-
 export default {
-  extensions: {
+  renderers: [
-    '.jsx': 'preact'
+    '@astrojs/renderer-preact'
-  }
+  ]
 }

packages/astro/test/fixtures/astro-fallback/astro.config.mjs

@@ -1,5 +1,5 @@
 export default {
-  extensions: {
+  renderers: [
-    '.jsx': 'preact',
+    '@astrojs/renderer-preact'
-  },
+  ]
-};
+}

packages/astro/test/fixtures/astro-markdown/src/pages/code.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 export const title = 'My Blog Post';
 export const description = 'This is a post about some stuff.';
 ---

packages/astro/test/fixtures/astro-markdown/src/pages/complex.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 import Layout from '../layouts/content.astro';
 import Hello from '../components/Hello.jsx';
 import Counter from '../components/Counter.jsx';

packages/astro/test/fixtures/astro-markdown/src/pages/external.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 import Hello from '../components/Hello.jsx';
 
 const outer = `# Outer`;

packages/astro/test/fixtures/astro-markdown/src/pages/post.astro

@@ -1,5 +1,5 @@
 ---
-import Markdown from 'astro/components/Markdown.astro';
+import { Markdown } from 'astro/components';
 import Layout from '../layouts/content.astro';
 import Example from '../components/Example.jsx';
 

packages/astro/test/fixtures/config-path/config/my-config.mjs

@@ -1,5 +1,5 @@
 export default {
-  extensions: {
+  renderers: [
-    '.jsx': 'preact',
+    '@astrojs/renderer-preact'
-  },
+  ]
-};
+}

packages/astro/test/fixtures/plain-markdown/astro.config.mjs

@@ -1,7 +1,7 @@
 export default {
-  extensions: {
+  renderers: [
-    '.jsx': 'preact',
+    '@astrojs/renderer-preact'
-  },
+  ],
   buildOptions: {
     sitemap: false,
   },