Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs/issue 1004 document latest status for non standard import formats #1166

Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* import { greenwoodPluginImportCss } from '@greenwood/plugin-import-css';
*
* {
* prerender: true,
* plugins: [{
* greenwoodPluginImportCss()
* }]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* import { greenwoodPluginImportJson } from '@greenwood/plugin-import-json';
*
* {
* prerender: true,
* plugins: [{
* greenwoodPluginImportJson()
* }]
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
* import { greenwoodPluginImportJsx } from '@greenwood/plugin-import-jsx';
*
* {
* prerender: true,
* plugins: [{
* greenwoodPluginImportJsx()
* }]
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
/*
* Use Case
* Run Greenwood with a prerender HTML page that imports TypeScript.
*
* User Result
* Should generate a Greenwood build that correctly builds and bundles all assets.
*
* User Command
* greenwood build
*
* User Config
* {
* prerender: true,
* plugins: [
* greenwoodPluginTypeScript()
* ]
* }
*
* User Workspace
* src/
* components/
* card.ts
* pages/
* index.html
*/
import chai from 'chai';
import { JSDOM } from 'jsdom';
import path from 'path';
import { getSetupFiles, getOutputTeardownFiles } from '../../../../../test/utils.js';
import request from 'request';
import { Runner } from 'gallinago';
import { fileURLToPath } from 'url';

const expect = chai.expect;

// TODO - this should work after this issue is resolved
// https://github.com/ProjectEvergreen/wcc/issues/122
xdescribe('Serve Greenwood With: ', function() {
const LABEL = 'A Prerendered Application (SSR) with an HTML page importing a TypeScript component';
const cliPath = path.join(process.cwd(), 'packages/cli/src/index.js');
const outputPath = fileURLToPath(new URL('.', import.meta.url));
const hostname = 'http://127.0.0.1:8080';
let runner;

before(async function() {
this.context = {
publicDir: path.join(outputPath, 'public'),
hostname
};
runner = new Runner(false, true);
});

describe(LABEL, function() {

before(async function() {
await runner.setup(outputPath, getSetupFiles(outputPath));
await runner.runCommand(cliPath, 'build');

return new Promise(async (resolve) => {
setTimeout(() => {
resolve();
}, 10000);

await runner.runCommand(cliPath, 'serve');
});
});

describe('Serve command with SSR prerender specific behaviors for an HTML page', function() {
let response = {};

before(async function() {
return new Promise((resolve, reject) => {
request.get(`${hostname}/`, (err, res, body) => {
if (err) {
reject();
}

response = res;
response.body = body;
fragmentsApiDom = new JSDOM(body);

resolve();
});
});
});

it('should return a 200 status', function(done) {
expect(response.statusCode).to.equal(200);
done();
});

it('should return a custom status message', function(done) {
expect(response.statusMessage).to.equal('OK');
done();
});

// it should return the correct h1 contents
// it should return the correct app-card contents
});
});

after(function() {
runner.teardown(getOutputTeardownFiles(outputPath));
runner.stopCommand();
});

});
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { greenwoodPluginTypeScript } from '../../../src/index.js';

export default {
prerender: true,
plugins: [
greenwoodPluginTypeScript()
]
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"name": "test-plugin-exp-prerender-ts",
"type": "module"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export default class Card extends HTMLElement {

selectItem() {
alert(`selected item is => ${this.getAttribute('title')}!`);
}

connectedCallback() {
if (!this.shadowRoot) {
const thumbnail: String = this.getAttribute('thumbnail');
const title: String = this.getAttribute('title');
const template: any = document.createElement('template');

template.innerHTML = `
<div>
<h3>${title}</h3>
<img src="${thumbnail}" alt="${title}" loading="lazy" width="100%">
<button onclick="this.parentNode.parentNode.host.selectItem()">View Item Details</button>
</div>
`;
this.attachShadow({ mode: 'open' });
this.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
}

customElements.define('app-card', Card);
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en" prefix="og:http://ogp.me/ns#">

<head>
<script type="module" src="../components/card/card.ts"></script>
</head>

<body>
<h1>Hello World!</h1>
<app-card
title="foo"
thumbnail="bar.png"
></app-card>
</body>

</html>
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ describe('Serve Greenwood With: ', function() {
reject();
}

console.log({ body });
response = res;
response.body = body;
fragmentsApiDom = new JSDOM(body);
Expand Down
8 changes: 4 additions & 4 deletions www/pages/docs/server-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -204,10 +204,10 @@ export async function getTemplate(compilation, route) {
### Custom Imports

> ⚠️ _This feature is experimental._
>
> _**Note**: At this time, [WCC can't handle non-standard javaScript formats](https://github.com/ProjectEvergreen/greenwood/issues/1004), though we hope to enable this by the 1.0 release._
Through the support of the following plugins, Greenwood also supports loading custom file formats on the server side using ESM
- [CSS](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-import-css/README.md#usage)
- [JSON](https://github.com/ProjectEvergreen/greenwood/blob/master/packages/plugin-import-json/README.md#usage)
Combined with Greenwood's [custom import resource plugins](https://www.greenwoodjs.io/plugins/custom-plugins/) (or your own!), Greenwood can handle loading custom file extensions on the server side using ESM, like CSS and JSON!

For example, you can now import JSON in your SSR pages and components.
```js
Expand All @@ -217,7 +217,7 @@ console.log(json); // { status: 200, message: 'some data' }
```

**Steps**
1. Make sure you are using Node `v18.12.1`
1. Make sure you are using Node `v18.15.0`
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, 18.12.1 I think still works? So maybe this doesn't need to specifically called out 🤷

1. Run the Greenwood CLI using the `--experimental-loaders` flag and pass Greenwood's custom loader
```shell
$ node --experimental-loader ./node_modules/@greenwood/cli/src/loader.js ./node_modules/.bin/greenwood <command>
Expand Down
Loading