From 872fe18376468d6a49a76520b4b895db3383fe56 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Wed, 10 Mar 2021 14:50:43 +0100 Subject: [PATCH 1/2] Fix jsx.d.ts formatting --- jsx.d.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/jsx.d.ts b/jsx.d.ts index ee2ba580..98fad555 100644 --- a/jsx.d.ts +++ b/jsx.d.ts @@ -1,13 +1,13 @@ import { VNode } from 'preact'; interface Options { - jsx?: boolean; - xml?: boolean; - functions?: boolean - functionNames?: boolean, - skipFalseAttributes?: boolean - pretty?: boolean | string; + jsx?: boolean; + xml?: boolean; + functions?: boolean; + functionNames?: boolean; + skipFalseAttributes?: boolean; + pretty?: boolean | string; } -export function render(vnode: VNode, context?: any, options?: Options):string; +export function render(vnode: VNode, context?: any, options?: Options): string; export default render; From 45c2938d6acc9e7d85d3cf7dcccd38d32bcaf0d1 Mon Sep 17 00:00:00 2001 From: Marvin Hagemeister Date: Wed, 10 Mar 2021 15:18:18 +0100 Subject: [PATCH 2/2] Remove all default exports (major) Mixing both default and named exports has no clearly defined behaviour and can easily lead to unexpected results. Some tools use a combination of "default" + "__esModule" property and others ignore named exports completely if both are found. Those issues are difficult to debug when multiple tools are used together. This change makes some code redundant by not having to patch a hand crafted exports object for commonjs environments. --- README.md | 30 ++++++++++++++--- benchmarks/index.js | 2 +- config/node-commonjs.js | 21 ------------ jsx.d.ts | 1 - package.json | 2 +- src/index.d.ts | 3 +- src/index.js | 46 +++++++++++--------------- src/jsx.d.ts | 1 - src/jsx.js | 3 +- test/context.js | 2 +- test/index.js | 12 +++---- test/jsx.js | 2 +- test/preact-render-to-string-tests.tsx | 2 +- 13 files changed, 57 insertions(+), 70 deletions(-) delete mode 100644 config/node-commonjs.js diff --git a/README.md b/README.md index f87c7b48..306746dd 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Works in Node & the browser, making it useful for universal/isomorphic rendering ### Render JSX/VDOM to HTML ```js -import render from 'preact-render-to-string'; +import { render } from 'preact-render-to-string'; import { h } from 'preact'; /** @jsx h */ @@ -31,7 +31,7 @@ console.log(html); ### Render Preact Components to HTML ```js -import render from 'preact-render-to-string'; +import { render } from 'preact-render-to-string'; import { h, Component } from 'preact'; /** @jsx h */ @@ -66,7 +66,7 @@ console.log(html); ```js import express from 'express'; import { h } from 'preact'; -import render from 'preact-render-to-string'; +import { render } from 'preact-render-to-string'; /** @jsx h */ // silly example component: @@ -92,8 +92,30 @@ app.get('/:fox', (req, res) => { --- +## Migration guide -### License +### Migrating from 5.x to 6.x + +The only breaking change introduced with the `6.x` is that the `default` exports have been removed in favor of named exports. To update, replace the default import in your code with a named one. + +```diff +- import render from 'preact-render-to-string'; ++ import { render } from 'preact-render-to-string'; +``` + +Similarily if you've been using the `jsx` renderer, the default import needs to be swapped with a named import: + +```diff +- import render from 'preact-render-to-string/jsx'; ++ import { render } from 'preact-render-to-string/jsx'; +``` + +_Note: The named exports were already present in the `5.x` release line. So if you can't update today for any reason, you can apply the above changes safely to make a future update to `6.x` easier!_ + +--- + + +## License [MIT] diff --git a/benchmarks/index.js b/benchmarks/index.js index 323fe511..f93139ab 100644 --- a/benchmarks/index.js +++ b/benchmarks/index.js @@ -1,6 +1,6 @@ import { h } from 'preact'; import Suite from 'benchmarkjs-pretty'; -import renderToString from '../src/index'; +import { renderToString } from '../src/index'; import TextApp from './text'; // import StackApp from './stack'; import { App as IsomorphicSearchResults } from './isomorphic-ui-search-results'; diff --git a/config/node-commonjs.js b/config/node-commonjs.js deleted file mode 100644 index 9dacbdc4..00000000 --- a/config/node-commonjs.js +++ /dev/null @@ -1,21 +0,0 @@ -const fs = require('fs'); -const path = require('path'); - -// This file will only export default exports in commonjs bundles -// instead of guarding them behind a `.default` property. - -const filePath = (file) => path.join(process.cwd(), 'dist', file); - -// Main entry -fs.copyFileSync(filePath('index.js'), filePath('commonjs.js')); -fs.copyFileSync(filePath('index.js.map'), filePath('commonjs.js.map')); - -const source = `module.exports = require('./commonjs').default;`; -fs.writeFileSync(filePath('index.js'), source, 'utf-8'); - -// JSX entry -fs.copyFileSync(filePath('jsx.js'), filePath('jsx-entry.js')); -fs.copyFileSync(filePath('jsx.js.map'), filePath('jsx-entry.js.map')); - -const sourceJsx = `module.exports = require('./jsx-entry').default;`; -fs.writeFileSync(filePath('jsx.js'), sourceJsx, 'utf-8'); diff --git a/jsx.d.ts b/jsx.d.ts index 98fad555..9b9d0c63 100644 --- a/jsx.d.ts +++ b/jsx.d.ts @@ -10,4 +10,3 @@ interface Options { } export function render(vnode: VNode, context?: any, options?: Options): string; -export default render; diff --git a/package.json b/package.json index 2fa68f0e..4ae9dcfb 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "scripts": { "bench": "node -r @babel/register benchmarks index.js", "build": "npm run -s transpile && npm run -s transpile:jsx && npm run -s copy-typescript-definition", - "postbuild": "node ./config/node-13-exports.js && node ./config/node-commonjs.js", + "postbuild": "node ./config/node-13-exports.js", "transpile": "microbundle src/index.js -f es,umd --target web --external preact", "transpile:jsx": "microbundle src/jsx.js -o dist/jsx.js --target web --external none && microbundle dist/jsx.js -o dist/jsx.js -f cjs", "copy-typescript-definition": "copyfiles -f src/*.d.ts dist", diff --git a/src/index.d.ts b/src/index.d.ts index 221d349a..fd655e64 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -6,11 +6,10 @@ interface Options { pretty?: boolean | string; } -export function render(vnode: VNode, context?: any, options?: Options): string; export function renderToString( vnode: VNode, context?: any, options?: Options ): string; +export const render: typeof renderToString; export function shallowRender(vnode: VNode, context?: any): string; -export default render; diff --git a/src/index.js b/src/index.js index e92cf1c0..06b5934a 100644 --- a/src/index.js +++ b/src/index.js @@ -19,19 +19,6 @@ const UNSAFE_NAME = /[\s\n\\/='"\0<>]/; const noop = () => {}; -/** Render Preact JSX + Components to an HTML string. - * @name render - * @function - * @param {VNode} vnode JSX VNode to render. - * @param {Object} [context={}] Optionally pass an initial context object through the render path. - * @param {Object} [options={}] Rendering options - * @param {Boolean} [options.shallow=false] If `true`, renders nested Components as HTML elements (``). - * @param {Boolean} [options.xml=false] If `true`, uses self-closing tags for elements without children. - * @param {Boolean} [options.pretty=false] If `true`, adds whitespace for readability - * @param {RegEx|undefined} [options.voidElements] RegeEx that matches elements that are considered void (self-closing) - */ -renderToString.render = renderToString; - /** Only render elements, leaving Components inline as ``. * This method is just a convenience alias for `render(vnode, context, { shallow:true })` * @name shallow @@ -39,10 +26,22 @@ renderToString.render = renderToString; * @param {VNode} vnode JSX VNode to render. * @param {Object} [context={}] Optionally pass an initial context object through the render path. */ -let shallowRender = (vnode, context) => renderToString(vnode, context, SHALLOW); +export let shallowRender = (vnode, context) => + renderToString(vnode, context, SHALLOW); const EMPTY_ARR = []; -function renderToString(vnode, context, opts) { + +/** + * Render Preact JSX + Components to an HTML string. + * @param {VNode} vnode JSX VNode to render. + * @param {Object} [context={}] Optionally pass an initial context object through the render path. + * @param {Object} [options={}] Rendering options + * @param {Boolean} [options.shallow=false] If `true`, renders nested Components as HTML elements (``). + * @param {Boolean} [options.xml=false] If `true`, uses self-closing tags for elements without children. + * @param {Boolean} [options.pretty=false] If `true`, adds whitespace for readability + * @param {RegEx|undefined} [options.voidElements] RegeEx that matches elements that are considered void (self-closing) + */ +export function renderToString(vnode, context, opts) { const res = _renderToString(vnode, context, opts); // options._commit, we don't schedule any effects in this library right now, // so we can pass an empty queue to this hook. @@ -50,7 +49,12 @@ function renderToString(vnode, context, opts) { return res; } -/** The default export is an alias of `render()`. */ +export { + // Aliased export for React compat + renderToString as renderToStaticMarkup, + renderToString as render +}; + function _renderToString(vnode, context, opts, inner, isSvgMode, selectValue) { if (vnode == null || typeof vnode === 'boolean') { return ''; @@ -407,13 +411,3 @@ function getFallbackComponentName(component) { } return name; } -renderToString.shallowRender = shallowRender; - -export default renderToString; - -export { - renderToString as render, - renderToString as renderToStaticMarkup, - renderToString, - shallowRender -}; diff --git a/src/jsx.d.ts b/src/jsx.d.ts index 98fad555..9b9d0c63 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -10,4 +10,3 @@ interface Options { } export function render(vnode: VNode, context?: any, options?: Options): string; -export default render; diff --git a/src/jsx.js b/src/jsx.js index f2ac1c78..943c8a84 100644 --- a/src/jsx.js +++ b/src/jsx.js @@ -1,5 +1,5 @@ import './polyfills'; -import renderToString from './index'; +import { renderToString } from './index'; import { indent, encodeEntities, assign } from './util'; import prettyFormat from 'pretty-format'; @@ -72,5 +72,4 @@ function renderToJsxString(vnode, context, opts, inner) { return renderToString(vnode, context, opts, inner); } -export default renderToJsxString; export { renderToJsxString as render }; diff --git a/test/context.js b/test/context.js index 5c4a5d38..7b24b8bd 100644 --- a/test/context.js +++ b/test/context.js @@ -1,4 +1,4 @@ -import render from '../src/jsx'; +import { render } from '../src/jsx'; import { h, createContext, Component } from 'preact'; import chai, { expect } from 'chai'; import sinonChai from 'sinon-chai'; diff --git a/test/index.js b/test/index.js index 32fcaf1e..235139d7 100644 --- a/test/index.js +++ b/test/index.js @@ -1,25 +1,21 @@ -import renderToString, { +import { render, shallowRender, renderToStaticMarkup, - renderToString as _renderToString + renderToString } from '../src'; import { expect } from 'chai'; describe('render-to-string', () => { describe('exports', () => { - it('exposes renderToString as default', () => { - expect(renderToString).to.be.a('function'); - }); - it('exposes render as a named export', () => { expect(render).to.be.a('function'); expect(render).to.equal(renderToString); }); it('exposes renderToString as a named export', () => { - expect(_renderToString).to.be.a('function'); - expect(_renderToString).to.equal(renderToString); + expect(renderToString).to.be.a('function'); + expect(renderToString).to.equal(renderToString); }); it('exposes renderToStaticMarkup as a named export', () => { diff --git a/test/jsx.js b/test/jsx.js index 80408764..15ba3343 100644 --- a/test/jsx.js +++ b/test/jsx.js @@ -1,4 +1,4 @@ -import render from '../src/jsx'; +import { render } from '../src/jsx'; import { h } from 'preact'; import chai, { expect } from 'chai'; import sinonChai from 'sinon-chai'; diff --git a/test/preact-render-to-string-tests.tsx b/test/preact-render-to-string-tests.tsx index 4f6924d1..34b3c9d2 100644 --- a/test/preact-render-to-string-tests.tsx +++ b/test/preact-render-to-string-tests.tsx @@ -1,4 +1,4 @@ -import render from '../src'; +import { render } from '../src'; import { h } from 'preact'; let vdom =
content
;