From 344c1d03d9745221cf8114559cd0168a4d8598d4 Mon Sep 17 00:00:00 2001 From: eunjae-lee Date: Wed, 23 Jun 2021 17:59:29 +0200 Subject: [PATCH 1/3] fix(templates): add packageNamePrefix to widget templates --- e2e/__snapshots__/templates.test.js.snap | 188 +++++++++--------- src/cli/getConfiguration.js | 5 +- src/cli/index.js | 1 + .../InstantSearch.js widget/.template.js | 11 +- .../React InstantSearch widget/.template.js | 3 +- 5 files changed, 109 insertions(+), 99 deletions(-) diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap index 13123e19b..ce7c5ee2e 100644 --- a/e2e/__snapshots__/templates.test.js.snap +++ b/e2e/__snapshots__/templates.test.js.snap @@ -3349,7 +3349,7 @@ dist/" `; exports[`Templates InstantSearch.js widget File content: README.md 1`] = ` -"# instantsearch.js-app +"# test _This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._ @@ -3358,9 +3358,9 @@ _This project was generated with [create-instantsearch-app](https://github.com/a ## Install \`\`\`bash -npm install @algolia/instantsearch.js-app +npm install @algolia/instantsearch-widget-test # or -yarn add @algolia/instantsearch.js-app +yarn add @algolia/instantsearch-widget-test \`\`\` ## Widget @@ -3370,7 +3370,7 @@ yarn add @algolia/instantsearch.js-app \`\`\`js import instantsearch from 'instantsearch.js'; import algoliasearch from 'algoliasearch/lite'; -import { instantsearchJsApp } from '@algolia/instantsearch.js-app'; +import { test } from '@algolia/instantsearch-widget-test'; const searchClient = algoliasearch('appId', 'apiKey'); @@ -3380,7 +3380,7 @@ const search = instantsearch({ }); search.addWidgets([ - instantsearchJsApp({ + test({ // widget parameters }), ]); @@ -3399,8 +3399,8 @@ The element to insert the widget into. This can be either a valid CSS Selector: \`\`\`js -instantsearchJsApp({ - container: '#instantsearch.js-app', +test({ + container: '#test', // ... }); \`\`\` @@ -3408,8 +3408,8 @@ instantsearchJsApp({ or an \`HTMLElement\`: \`\`\`js -instantsearchJsApp({ - container: document.querySelector('#instantsearch.js-app'), +test({ + container: document.querySelector('#test'), // ... }); \`\`\` @@ -3422,7 +3422,7 @@ instantsearchJsApp({ REPLACE WITH THE DESCRIPTION FOR THIS OPTION \`\`\`js -instantsearchJsApp({ +test({ option1: 'value', // ... }); @@ -3434,21 +3434,21 @@ instantsearchJsApp({ ### Usage \`\`\`js -import { connectInstantsearchJsApp } from '@algolia/instantsearch.js-app'; +import { connectTest } from '@algolia/instantsearch-widget-test'; // 1. Create a render function -const renderInstantsearchJsApp = (renderOptions, isFirstRender) => { +const renderTest = (renderOptions, isFirstRender) => { // Rendering logic }; // 2. Create the custom widget -const customInstantsearchJsApp = connectInstantsearchJsApp( - renderInstantsearchJsApp +const customTest = connectTest( + renderTest ); // 3. Instantiate search.addWidgets([ - customInstantsearchJsApp({ + customTest({ // instance params }), ]); @@ -3464,16 +3464,16 @@ REPLACE WITH THE DESCRIPTION FOR THIS RENDERING ITEM \`\`\`js -const renderInstantsearchJsApp = (renderOptions, isFirstRender) => { +const renderTest = (renderOptions, isFirstRender) => { // show how to use this render option }; -const customInstantsearchJsApp = connectInstantsearchJsApp( - renderInstantsearchJsApp, +const customTest = connectTest( + renderTest, ); search.addWidgets([ - customInstantsearchJsApp({ + customTest({ // ... }), ]); @@ -3486,18 +3486,18 @@ search.addWidgets([ All original widget options forwarded to the render function. \`\`\`js -const renderInstantsearchJsApp = (renderOptions, isFirstRender) => { +const renderTest = (renderOptions, isFirstRender) => { const { widgetParams } = renderOptions; widgetParams.container.innerHTML = '...'; }; -const customInstantsearchJsApp = connectInstantsearchJsApp( - renderInstantsearchJsApp, +const customTest = connectTest( + renderTest, ); search.addWidgets([ - customInstantsearchJsApp({ - container: document.querySelector('#instantsearch.js-app'), + customTest({ + container: document.querySelector('#test'), // ... }), ]); @@ -3567,7 +3567,7 @@ module.exports = (api) => { exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` "{ - \\"name\\": \\"@algolia/instantsearch.js-app\\", + \\"name\\": \\"@algolia/instantsearch-widget-test\\", \\"version\\": \\"1.0.0\\", \\"description\\": \\"\\", \\"keywords\\": [ @@ -3592,7 +3592,7 @@ exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` \\"start\\": \\"parcel example/index.html\\", \\"prebuild\\": \\"rm -rf dist\\", \\"build\\": \\"npm run build:umd && npm run build:cjs && npm run build:esm && npm run build:types\\", - \\"build:umd\\": \\"parcel build src/index.ts --global instantsearchJsApp --out-dir dist/umd --out-file index.js --experimental-scope-hoisting\\", + \\"build:umd\\": \\"parcel build src/index.ts --global test --out-dir dist/umd --out-file index.js --experimental-scope-hoisting\\", \\"build:cjs\\": \\"BABEL_ENV=cjs babel src --extensions '.js,.ts' --out-dir dist/cjs --ignore '**/__tests__' --source-maps && BABEL_ENV=cjs babel src/index.ts --out-file dist/cjs/index.js --source-maps\\", \\"build:esm\\": \\"BABEL_ENV=esm babel src --extensions '.js,.ts' --out-dir dist/esm --ignore '**/__tests__' --source-maps\\", \\"build:types\\": \\"tsc --build tsconfig.declaration.json\\", @@ -3620,7 +3620,7 @@ exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` `; exports[`Templates InstantSearch.js widget File content: src/connector.ts 1`] = ` -"import type { InstantsearchJsAppConnector } from './types'; +"import type { TestConnector } from './types'; /* * Creates the connector @@ -3633,7 +3633,7 @@ exports[`Templates InstantSearch.js widget File content: src/connector.ts 1`] = * Can be called internally anytime by InstantSearch. */ -export const connectInstantsearchJsApp: InstantsearchJsAppConnector = function connectInstantsearchJsApp( +export const connectTest: TestConnector = function connectTest( renderFn, unmountFn = () => {} ) { @@ -3643,7 +3643,7 @@ export const connectInstantsearchJsApp: InstantsearchJsAppConnector = function c } = widgetParams; return { - $$type: 'algolia.instantsearch.js-app', + $$type: 'algolia.test', /* * Sets up the widget during the InstantSearch initialization. * It is called before the first search and is a good place to call the \`renderFn\` function to set up the initial DOM (a placeholder for example). @@ -3693,7 +3693,7 @@ export const connectInstantsearchJsApp: InstantsearchJsAppConnector = function c return { ...uiState, - instantsearchJsApp: { + test: { // TODO: add this widget's ui state } }; @@ -3717,7 +3717,7 @@ export const connectInstantsearchJsApp: InstantsearchJsAppConnector = function c getRenderState(renderState, renderOptions) { return { ...renderState, - instantsearchJsApp: { + test: { // TODO: call this.getWidgetRenderState(renderOptions), possibly nested per attribute } }; @@ -3747,13 +3747,13 @@ export const connectInstantsearchJsApp: InstantsearchJsAppConnector = function c `; exports[`Templates InstantSearch.js widget File content: src/index.ts 1`] = ` -"export { instantsearchJsApp } from './widget'; -export { connectInstantsearchJsApp } from './connector'; -export { createInstantsearchJsAppRenderer } from './renderer';" +"export { test } from './widget'; +export { connectTest } from './connector'; +export { createTestRenderer } from './renderer';" `; exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = ` -"import type { InstantsearchJsAppRendererCreator } from './types'; +"import type { TestRendererCreator } from './types'; /* * Creates the render and dispose functions @@ -3762,7 +3762,7 @@ exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = ` * - the \`dispose\` function used to clean the changes made by the widget * It can also be used to keep references of objects that must be reused between renders */ -export const createInstantsearchJsAppRenderer: InstantsearchJsAppRendererCreator = ({ +export const createTestRenderer: TestRendererCreator = ({ container, }) => { @@ -3817,7 +3817,7 @@ exports[`Templates InstantSearch.js widget File content: src/types.ts 1`] = ` * Parameters send only to the widget creator function * These parameters will be used by the widget creator to create the widget renderer and factory */ -export type InstantsearchJsAppWidgetParams = { +export type TestWidgetParams = { container: Element | string; // TODO: add the widget params }; @@ -3826,24 +3826,24 @@ export type InstantsearchJsAppWidgetParams = { * Parameters send to the widget creator function * These parameters will be used by the widget creator to manage the widget logic */ -export type InstantsearchJsAppConnectorParams = { +export type TestConnectorParams = { // TODO: add the widget params }; -export type InstantsearchJsAppRenderState = { +export type TestRenderState = { // TODO: add the render state params }; -type InstantsearchJsAppWidgetDescription = { - $$type: 'algolia.instantsearch.js-app'; - renderState: InstantsearchJsAppRenderState; +type TestWidgetDescription = { + $$type: 'algolia.test'; + renderState: TestRenderState; indexRenderState: { - instantsearchJsApp: { + test: { // TODO: add the return type of getRenderState }; }; indexUiState: { - instantsearchJsApp: { + test: { // TODO: add the return type of getWidgetUiState } }; @@ -3852,20 +3852,20 @@ type InstantsearchJsAppWidgetDescription = { /* * Connector type, constructed from the Renderer and Connector parameters */ -export type InstantsearchJsAppConnector = Connector< - InstantsearchJsAppWidgetDescription, - InstantsearchJsAppConnectorParams +export type TestConnector = Connector< + TestWidgetDescription, + TestConnectorParams >; /* * Renderer type, constructed from the Renderer and Connector parameters */ -export type InstantsearchJsAppRendererCreator = ( - widgetParams: InstantsearchJsAppWidgetParams +export type TestRendererCreator = ( + widgetParams: TestWidgetParams ) => { render: Renderer< - InstantsearchJsAppWidgetDescription['renderState'], - InstantsearchJsAppConnectorParams + TestWidgetDescription['renderState'], + TestConnectorParams >; dispose: () => void; }; @@ -3873,49 +3873,49 @@ export type InstantsearchJsAppRendererCreator = ( /* * Widget type, constructed from the Renderer, Connector and Widget parameters */ -export type InstantsearchJsAppWidgetCreator = WidgetFactory< - InstantsearchJsAppWidgetDescription & { - $$widgetType: 'algolia.instantsearch.js-app'; +export type TestWidgetCreator = WidgetFactory< + TestWidgetDescription & { + $$widgetType: 'algolia.test'; }, - InstantsearchJsAppConnectorParams, - InstantsearchJsAppWidgetParams + TestConnectorParams, + TestWidgetParams >;" `; exports[`Templates InstantSearch.js widget File content: src/widget.ts 1`] = ` -"import { connectInstantsearchJsApp } from './connector'; -import { createInstantsearchJsAppRenderer } from './renderer'; +"import { connectTest } from './connector'; +import { createTestRenderer } from './renderer'; import type { - InstantsearchJsAppWidgetCreator, - InstantsearchJsAppConnectorParams, - InstantsearchJsAppWidgetParams, + TestWidgetCreator, + TestConnectorParams, + TestWidgetParams, } from './types'; /* * Widget creator * Returns a widget instance */ -export const instantsearchJsApp: InstantsearchJsAppWidgetCreator = function InstantsearchJsApp( +export const test: TestWidgetCreator = function Test( widgetParams ) { - const rendererWidgetParams: InstantsearchJsAppWidgetParams = { + const rendererWidgetParams: TestWidgetParams = { container: widgetParams.container, // TODO: pick the widget-only parameters from the widgetParams }; - const { render, dispose } = createInstantsearchJsAppRenderer( + const { render, dispose } = createTestRenderer( rendererWidgetParams ); - const createWidget = connectInstantsearchJsApp(render, dispose); + const createWidget = connectTest(render, dispose); - const connectorParams: InstantsearchJsAppConnectorParams = { + const connectorParams: TestConnectorParams = { // TODO: pick the connector-only parameters from the widgetParams }; return { ...createWidget(connectorParams), - $$widgetType: 'algolia.instantsearch.js-app', + $$widgetType: 'algolia.test', }; };" `; @@ -5574,7 +5574,7 @@ exports[`Templates React InstantSearch widget File content: .prettierrc 1`] = ` `; exports[`Templates React InstantSearch widget File content: README.md 1`] = ` -"# react-instantsearch-app +"# test _This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._ @@ -5583,9 +5583,9 @@ _This project was generated with [create-instantsearch-app](https://github.com/a ## Install \`\`\`bash -npm install @algolia/react-instantsearch-app +npm install @algolia/react-instantsearch-widget-test # or -yarn add @algolia/react-instantsearch-app +yarn add @algolia/react-instantsearch-widget-test \`\`\` ## Widget @@ -5595,13 +5595,13 @@ yarn add @algolia/react-instantsearch-app \`\`\`jsx import instantsearch from 'instantsearch.js'; import algoliasearch from 'algoliasearch/lite'; -import { ReactInstantsearchApp } from '@algolia/react-instantsearch-app'; +import { Test } from '@algolia/react-instantsearch-widget-test'; const searchClient = algoliasearch('appId', 'apiKey'); const App = () => ( - + ); \`\`\` @@ -5611,22 +5611,22 @@ const App = () => ( ### Usage \`\`\`jsx -import { connectReactInstantsearchApp } from '@algolia/react-instantsearch-app'; +import { connectTest } from '@algolia/react-instantsearch-widget-test'; // 1. Create a render function -const RenderReactInstantsearchApp = (renderOptions, isFirstRender) => { +const RenderTest = (renderOptions, isFirstRender) => { // Rendering logic }; // 2. Create the custom widget -const CustomReactInstantsearchApp = connectReactInstantsearchApp( - RenderReactInstantsearchApp +const CustomTest = connectTest( + RenderTest ); // 3. Instantiate const App = () => ( - + ); \`\`\` @@ -5689,7 +5689,7 @@ exports[`Templates React InstantSearch widget File content: example/index.html 1 - @algolia/react-instantsearch-app | example + @algolia/react-instantsearch-widget-test | example
@@ -5704,7 +5704,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom'; -import { ReactInstantsearchApp } from '../src'; +import { Test } from '../src'; const searchClient = algoliasearch( 'latency', @@ -5714,7 +5714,7 @@ const searchClient = algoliasearch( ReactDOM.render( - + @@ -5725,14 +5725,14 @@ ReactDOM.render( exports[`Templates React InstantSearch widget File content: package.json 1`] = ` "{ - \\"name\\": \\"@algolia/react-instantsearch-app\\", + \\"name\\": \\"@algolia/react-instantsearch-widget-test\\", \\"version\\": \\"1.0.0\\", \\"description\\": \\"\\", \\"keywords\\": [ \\"instantsearch-widget\\", \\"instantsearch\\", \\"react-instantsearch\\", - \\"react-instantsearch-widget-react-instantsearch-app\\", + \\"react-instantsearch-widget-test\\", \\"widget\\", \\"connector\\", \\"algolia\\" @@ -5769,9 +5769,9 @@ exports[`Templates React InstantSearch widget File content: package.json 1`] = ` `; exports[`Templates React InstantSearch widget File content: src/index.tsx 1`] = ` -"export { connectReactInstantsearchApp } from './lib/connector'; -export { ReactInstantsearchAppComponent } from './lib/component'; -export { ReactInstantsearchApp } from './lib/widget';" +"export { connectTest } from './lib/connector'; +export { TestComponent } from './lib/component'; +export { Test } from './lib/widget';" `; exports[`Templates React InstantSearch widget File content: src/lib/__tests__/dummy-test.tsx 1`] = ` @@ -5779,7 +5779,7 @@ exports[`Templates React InstantSearch widget File content: src/lib/__tests__/du import React from 'react'; import { InstantSearch, Hits } from 'react-instantsearch-dom'; -import { ReactInstantsearchApp } from '../widget'; +import { Test } from '../widget'; const runAllMicroTasks = (): Promise => new Promise(setImmediate); @@ -5804,7 +5804,7 @@ describe('nothing', () => { const { debug } = render( - + hit.name} /> ); @@ -5824,7 +5824,7 @@ type Props = ProvidedProps & { refine: () => void; }; -export const ReactInstantsearchAppComponent = ({}: Props) => { +export const TestComponent = ({}: Props) => { return (
{/* TODO: render something */} @@ -5840,8 +5840,8 @@ export type ProvidedProps = { // TODO: fill props that are returned by \`getProvidedProps\` }; -export const connectReactInstantsearchApp = createConnector({ - displayName: 'ReactInstantsearchApp', +export const connectTest = createConnector({ + displayName: 'Test', getProvidedProps(props, searchState, searchResults): ProvidedProps { return { @@ -5869,8 +5869,8 @@ export const connectReactInstantsearchApp = createConnector({ `; exports[`Templates React InstantSearch widget File content: src/lib/widget.tsx 1`] = ` -"import { ReactInstantsearchAppComponent } from './component'; -import { connectReactInstantsearchApp } from './connector'; +"import { TestComponent } from './component'; +import { connectTest } from './connector'; import type { ElementType } from 'react'; @@ -5881,8 +5881,8 @@ type WidgetParams = { placeholder?: string; }; -export const ReactInstantsearchApp: ElementType = - connectReactInstantsearchApp(ReactInstantsearchAppComponent);" +export const Test: ElementType = + connectTest(TestComponent);" `; exports[`Templates React InstantSearch widget File content: tsconfig.declaration.json 1`] = ` diff --git a/src/cli/getConfiguration.js b/src/cli/getConfiguration.js index 5c07f3563..18d584754 100644 --- a/src/cli/getConfiguration.js +++ b/src/cli/getConfiguration.js @@ -8,9 +8,10 @@ function capitalize(str) { return str.substr(0, 1).toUpperCase() + str.substr(1); } -function createNameAlternatives({ organization, name }) { +function createNameAlternatives({ organization, name, templateConfig }) { return { - packageName: `@${organization}/${name}`, + packageName: `@${organization}/${templateConfig.packageNamePrefix || + ''}${name}`, widgetType: `${organization}.${name}`, camelCaseName: camelCase(name), pascalCaseName: capitalize(camelCase(name)), diff --git a/src/cli/index.js b/src/cli/index.js index 38cc0da3a..2d3e8dae5 100755 --- a/src/cli/index.js +++ b/src/cli/index.js @@ -273,6 +273,7 @@ async function run() { const alternativeNames = createNameAlternatives({ ...configuration, ...answers, + templateConfig, }); const libraryVersion = await getLibraryVersion( diff --git a/src/templates/InstantSearch.js widget/.template.js b/src/templates/InstantSearch.js widget/.template.js index 551fef000..42df6ff06 100644 --- a/src/templates/InstantSearch.js widget/.template.js +++ b/src/templates/InstantSearch.js widget/.template.js @@ -6,8 +6,15 @@ module.exports = { libraryName: 'instantsearch.js', supportedVersion: '>= 4.21.0 < 5.0.0', templateName: 'instantsearch.js-widget', - appName: 'instantsearch.js-app', - keywords: ['algolia', 'InstantSearch', 'Vanilla', 'instantsearch.js', 'widget'], + appName: 'test', // only used for test cases + packageNamePrefix: 'instantsearch-widget-', + keywords: [ + 'algolia', + 'InstantSearch', + 'Vanilla', + 'instantsearch.js', + 'widget', + ], tasks: { install, teardown, diff --git a/src/templates/React InstantSearch widget/.template.js b/src/templates/React InstantSearch widget/.template.js index baf8019a1..721422c9d 100644 --- a/src/templates/React InstantSearch widget/.template.js +++ b/src/templates/React InstantSearch widget/.template.js @@ -6,7 +6,8 @@ module.exports = { libraryName: 'react-instantsearch', supportedVersion: '>= 6.0.0 < 7.0.0', templateName: 'react-instantsearch-widget', - appName: 'react-instantsearch-app', + appName: 'test', // only used for test cases + packageNamePrefix: 'react-instantsearch-widget-', keywords: [ 'algolia', 'InstantSearch', From e9095ce63be229f4badcb755a1bf2d65d7084da4 Mon Sep 17 00:00:00 2001 From: eunjae-lee Date: Thu, 24 Jun 2021 10:47:28 +0200 Subject: [PATCH 2/3] chore: update appName for widget tests --- e2e/__snapshots__/templates.test.js.snap | 188 +++++++++--------- e2e/templates.test.js | 4 + .../InstantSearch.js widget/.template.js | 1 - .../React InstantSearch widget/.template.js | 1 - 4 files changed, 98 insertions(+), 96 deletions(-) diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap index ce7c5ee2e..6588add40 100644 --- a/e2e/__snapshots__/templates.test.js.snap +++ b/e2e/__snapshots__/templates.test.js.snap @@ -3349,7 +3349,7 @@ dist/" `; exports[`Templates InstantSearch.js widget File content: README.md 1`] = ` -"# test +"# date-picker _This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._ @@ -3358,9 +3358,9 @@ _This project was generated with [create-instantsearch-app](https://github.com/a ## Install \`\`\`bash -npm install @algolia/instantsearch-widget-test +npm install @algolia/instantsearch-widget-date-picker # or -yarn add @algolia/instantsearch-widget-test +yarn add @algolia/instantsearch-widget-date-picker \`\`\` ## Widget @@ -3370,7 +3370,7 @@ yarn add @algolia/instantsearch-widget-test \`\`\`js import instantsearch from 'instantsearch.js'; import algoliasearch from 'algoliasearch/lite'; -import { test } from '@algolia/instantsearch-widget-test'; +import { datePicker } from '@algolia/instantsearch-widget-date-picker'; const searchClient = algoliasearch('appId', 'apiKey'); @@ -3380,7 +3380,7 @@ const search = instantsearch({ }); search.addWidgets([ - test({ + datePicker({ // widget parameters }), ]); @@ -3399,8 +3399,8 @@ The element to insert the widget into. This can be either a valid CSS Selector: \`\`\`js -test({ - container: '#test', +datePicker({ + container: '#date-picker', // ... }); \`\`\` @@ -3408,8 +3408,8 @@ test({ or an \`HTMLElement\`: \`\`\`js -test({ - container: document.querySelector('#test'), +datePicker({ + container: document.querySelector('#date-picker'), // ... }); \`\`\` @@ -3422,7 +3422,7 @@ test({ REPLACE WITH THE DESCRIPTION FOR THIS OPTION \`\`\`js -test({ +datePicker({ option1: 'value', // ... }); @@ -3434,21 +3434,21 @@ test({ ### Usage \`\`\`js -import { connectTest } from '@algolia/instantsearch-widget-test'; +import { connectDatePicker } from '@algolia/instantsearch-widget-date-picker'; // 1. Create a render function -const renderTest = (renderOptions, isFirstRender) => { +const renderDatePicker = (renderOptions, isFirstRender) => { // Rendering logic }; // 2. Create the custom widget -const customTest = connectTest( - renderTest +const customDatePicker = connectDatePicker( + renderDatePicker ); // 3. Instantiate search.addWidgets([ - customTest({ + customDatePicker({ // instance params }), ]); @@ -3464,16 +3464,16 @@ REPLACE WITH THE DESCRIPTION FOR THIS RENDERING ITEM \`\`\`js -const renderTest = (renderOptions, isFirstRender) => { +const renderDatePicker = (renderOptions, isFirstRender) => { // show how to use this render option }; -const customTest = connectTest( - renderTest, +const customDatePicker = connectDatePicker( + renderDatePicker, ); search.addWidgets([ - customTest({ + customDatePicker({ // ... }), ]); @@ -3486,18 +3486,18 @@ search.addWidgets([ All original widget options forwarded to the render function. \`\`\`js -const renderTest = (renderOptions, isFirstRender) => { +const renderDatePicker = (renderOptions, isFirstRender) => { const { widgetParams } = renderOptions; widgetParams.container.innerHTML = '...'; }; -const customTest = connectTest( - renderTest, +const customDatePicker = connectDatePicker( + renderDatePicker, ); search.addWidgets([ - customTest({ - container: document.querySelector('#test'), + customDatePicker({ + container: document.querySelector('#date-picker'), // ... }), ]); @@ -3567,7 +3567,7 @@ module.exports = (api) => { exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` "{ - \\"name\\": \\"@algolia/instantsearch-widget-test\\", + \\"name\\": \\"@algolia/instantsearch-widget-date-picker\\", \\"version\\": \\"1.0.0\\", \\"description\\": \\"\\", \\"keywords\\": [ @@ -3592,7 +3592,7 @@ exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` \\"start\\": \\"parcel example/index.html\\", \\"prebuild\\": \\"rm -rf dist\\", \\"build\\": \\"npm run build:umd && npm run build:cjs && npm run build:esm && npm run build:types\\", - \\"build:umd\\": \\"parcel build src/index.ts --global test --out-dir dist/umd --out-file index.js --experimental-scope-hoisting\\", + \\"build:umd\\": \\"parcel build src/index.ts --global datePicker --out-dir dist/umd --out-file index.js --experimental-scope-hoisting\\", \\"build:cjs\\": \\"BABEL_ENV=cjs babel src --extensions '.js,.ts' --out-dir dist/cjs --ignore '**/__tests__' --source-maps && BABEL_ENV=cjs babel src/index.ts --out-file dist/cjs/index.js --source-maps\\", \\"build:esm\\": \\"BABEL_ENV=esm babel src --extensions '.js,.ts' --out-dir dist/esm --ignore '**/__tests__' --source-maps\\", \\"build:types\\": \\"tsc --build tsconfig.declaration.json\\", @@ -3620,7 +3620,7 @@ exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` `; exports[`Templates InstantSearch.js widget File content: src/connector.ts 1`] = ` -"import type { TestConnector } from './types'; +"import type { DatePickerConnector } from './types'; /* * Creates the connector @@ -3633,7 +3633,7 @@ exports[`Templates InstantSearch.js widget File content: src/connector.ts 1`] = * Can be called internally anytime by InstantSearch. */ -export const connectTest: TestConnector = function connectTest( +export const connectDatePicker: DatePickerConnector = function connectDatePicker( renderFn, unmountFn = () => {} ) { @@ -3643,7 +3643,7 @@ export const connectTest: TestConnector = function connectTest( } = widgetParams; return { - $$type: 'algolia.test', + $$type: 'algolia.date-picker', /* * Sets up the widget during the InstantSearch initialization. * It is called before the first search and is a good place to call the \`renderFn\` function to set up the initial DOM (a placeholder for example). @@ -3693,7 +3693,7 @@ export const connectTest: TestConnector = function connectTest( return { ...uiState, - test: { + datePicker: { // TODO: add this widget's ui state } }; @@ -3717,7 +3717,7 @@ export const connectTest: TestConnector = function connectTest( getRenderState(renderState, renderOptions) { return { ...renderState, - test: { + datePicker: { // TODO: call this.getWidgetRenderState(renderOptions), possibly nested per attribute } }; @@ -3747,13 +3747,13 @@ export const connectTest: TestConnector = function connectTest( `; exports[`Templates InstantSearch.js widget File content: src/index.ts 1`] = ` -"export { test } from './widget'; -export { connectTest } from './connector'; -export { createTestRenderer } from './renderer';" +"export { datePicker } from './widget'; +export { connectDatePicker } from './connector'; +export { createDatePickerRenderer } from './renderer';" `; exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = ` -"import type { TestRendererCreator } from './types'; +"import type { DatePickerRendererCreator } from './types'; /* * Creates the render and dispose functions @@ -3762,7 +3762,7 @@ exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = ` * - the \`dispose\` function used to clean the changes made by the widget * It can also be used to keep references of objects that must be reused between renders */ -export const createTestRenderer: TestRendererCreator = ({ +export const createDatePickerRenderer: DatePickerRendererCreator = ({ container, }) => { @@ -3817,7 +3817,7 @@ exports[`Templates InstantSearch.js widget File content: src/types.ts 1`] = ` * Parameters send only to the widget creator function * These parameters will be used by the widget creator to create the widget renderer and factory */ -export type TestWidgetParams = { +export type DatePickerWidgetParams = { container: Element | string; // TODO: add the widget params }; @@ -3826,24 +3826,24 @@ export type TestWidgetParams = { * Parameters send to the widget creator function * These parameters will be used by the widget creator to manage the widget logic */ -export type TestConnectorParams = { +export type DatePickerConnectorParams = { // TODO: add the widget params }; -export type TestRenderState = { +export type DatePickerRenderState = { // TODO: add the render state params }; -type TestWidgetDescription = { - $$type: 'algolia.test'; - renderState: TestRenderState; +type DatePickerWidgetDescription = { + $$type: 'algolia.date-picker'; + renderState: DatePickerRenderState; indexRenderState: { - test: { + datePicker: { // TODO: add the return type of getRenderState }; }; indexUiState: { - test: { + datePicker: { // TODO: add the return type of getWidgetUiState } }; @@ -3852,20 +3852,20 @@ type TestWidgetDescription = { /* * Connector type, constructed from the Renderer and Connector parameters */ -export type TestConnector = Connector< - TestWidgetDescription, - TestConnectorParams +export type DatePickerConnector = Connector< + DatePickerWidgetDescription, + DatePickerConnectorParams >; /* * Renderer type, constructed from the Renderer and Connector parameters */ -export type TestRendererCreator = ( - widgetParams: TestWidgetParams +export type DatePickerRendererCreator = ( + widgetParams: DatePickerWidgetParams ) => { render: Renderer< - TestWidgetDescription['renderState'], - TestConnectorParams + DatePickerWidgetDescription['renderState'], + DatePickerConnectorParams >; dispose: () => void; }; @@ -3873,49 +3873,49 @@ export type TestRendererCreator = ( /* * Widget type, constructed from the Renderer, Connector and Widget parameters */ -export type TestWidgetCreator = WidgetFactory< - TestWidgetDescription & { - $$widgetType: 'algolia.test'; +export type DatePickerWidgetCreator = WidgetFactory< + DatePickerWidgetDescription & { + $$widgetType: 'algolia.date-picker'; }, - TestConnectorParams, - TestWidgetParams + DatePickerConnectorParams, + DatePickerWidgetParams >;" `; exports[`Templates InstantSearch.js widget File content: src/widget.ts 1`] = ` -"import { connectTest } from './connector'; -import { createTestRenderer } from './renderer'; +"import { connectDatePicker } from './connector'; +import { createDatePickerRenderer } from './renderer'; import type { - TestWidgetCreator, - TestConnectorParams, - TestWidgetParams, + DatePickerWidgetCreator, + DatePickerConnectorParams, + DatePickerWidgetParams, } from './types'; /* * Widget creator * Returns a widget instance */ -export const test: TestWidgetCreator = function Test( +export const datePicker: DatePickerWidgetCreator = function DatePicker( widgetParams ) { - const rendererWidgetParams: TestWidgetParams = { + const rendererWidgetParams: DatePickerWidgetParams = { container: widgetParams.container, // TODO: pick the widget-only parameters from the widgetParams }; - const { render, dispose } = createTestRenderer( + const { render, dispose } = createDatePickerRenderer( rendererWidgetParams ); - const createWidget = connectTest(render, dispose); + const createWidget = connectDatePicker(render, dispose); - const connectorParams: TestConnectorParams = { + const connectorParams: DatePickerConnectorParams = { // TODO: pick the connector-only parameters from the widgetParams }; return { ...createWidget(connectorParams), - $$widgetType: 'algolia.test', + $$widgetType: 'algolia.date-picker', }; };" `; @@ -5574,7 +5574,7 @@ exports[`Templates React InstantSearch widget File content: .prettierrc 1`] = ` `; exports[`Templates React InstantSearch widget File content: README.md 1`] = ` -"# test +"# date-picker _This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._ @@ -5583,9 +5583,9 @@ _This project was generated with [create-instantsearch-app](https://github.com/a ## Install \`\`\`bash -npm install @algolia/react-instantsearch-widget-test +npm install @algolia/react-instantsearch-widget-date-picker # or -yarn add @algolia/react-instantsearch-widget-test +yarn add @algolia/react-instantsearch-widget-date-picker \`\`\` ## Widget @@ -5595,13 +5595,13 @@ yarn add @algolia/react-instantsearch-widget-test \`\`\`jsx import instantsearch from 'instantsearch.js'; import algoliasearch from 'algoliasearch/lite'; -import { Test } from '@algolia/react-instantsearch-widget-test'; +import { DatePicker } from '@algolia/react-instantsearch-widget-date-picker'; const searchClient = algoliasearch('appId', 'apiKey'); const App = () => ( - + ); \`\`\` @@ -5611,22 +5611,22 @@ const App = () => ( ### Usage \`\`\`jsx -import { connectTest } from '@algolia/react-instantsearch-widget-test'; +import { connectDatePicker } from '@algolia/react-instantsearch-widget-date-picker'; // 1. Create a render function -const RenderTest = (renderOptions, isFirstRender) => { +const RenderDatePicker = (renderOptions, isFirstRender) => { // Rendering logic }; // 2. Create the custom widget -const CustomTest = connectTest( - RenderTest +const CustomDatePicker = connectDatePicker( + RenderDatePicker ); // 3. Instantiate const App = () => ( - + ); \`\`\` @@ -5689,7 +5689,7 @@ exports[`Templates React InstantSearch widget File content: example/index.html 1 - @algolia/react-instantsearch-widget-test | example + @algolia/react-instantsearch-widget-date-picker | example
@@ -5704,7 +5704,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { InstantSearch, SearchBox, Hits } from 'react-instantsearch-dom'; -import { Test } from '../src'; +import { DatePicker } from '../src'; const searchClient = algoliasearch( 'latency', @@ -5714,7 +5714,7 @@ const searchClient = algoliasearch( ReactDOM.render( - + @@ -5725,14 +5725,14 @@ ReactDOM.render( exports[`Templates React InstantSearch widget File content: package.json 1`] = ` "{ - \\"name\\": \\"@algolia/react-instantsearch-widget-test\\", + \\"name\\": \\"@algolia/react-instantsearch-widget-date-picker\\", \\"version\\": \\"1.0.0\\", \\"description\\": \\"\\", \\"keywords\\": [ \\"instantsearch-widget\\", \\"instantsearch\\", \\"react-instantsearch\\", - \\"react-instantsearch-widget-test\\", + \\"react-instantsearch-widget-date-picker\\", \\"widget\\", \\"connector\\", \\"algolia\\" @@ -5769,9 +5769,9 @@ exports[`Templates React InstantSearch widget File content: package.json 1`] = ` `; exports[`Templates React InstantSearch widget File content: src/index.tsx 1`] = ` -"export { connectTest } from './lib/connector'; -export { TestComponent } from './lib/component'; -export { Test } from './lib/widget';" +"export { connectDatePicker } from './lib/connector'; +export { DatePickerComponent } from './lib/component'; +export { DatePicker } from './lib/widget';" `; exports[`Templates React InstantSearch widget File content: src/lib/__tests__/dummy-test.tsx 1`] = ` @@ -5779,7 +5779,7 @@ exports[`Templates React InstantSearch widget File content: src/lib/__tests__/du import React from 'react'; import { InstantSearch, Hits } from 'react-instantsearch-dom'; -import { Test } from '../widget'; +import { DatePicker } from '../widget'; const runAllMicroTasks = (): Promise => new Promise(setImmediate); @@ -5804,7 +5804,7 @@ describe('nothing', () => { const { debug } = render( - + hit.name} /> ); @@ -5824,7 +5824,7 @@ type Props = ProvidedProps & { refine: () => void; }; -export const TestComponent = ({}: Props) => { +export const DatePickerComponent = ({}: Props) => { return (
{/* TODO: render something */} @@ -5840,8 +5840,8 @@ export type ProvidedProps = { // TODO: fill props that are returned by \`getProvidedProps\` }; -export const connectTest = createConnector({ - displayName: 'Test', +export const connectDatePicker = createConnector({ + displayName: 'DatePicker', getProvidedProps(props, searchState, searchResults): ProvidedProps { return { @@ -5869,8 +5869,8 @@ export const connectTest = createConnector({ `; exports[`Templates React InstantSearch widget File content: src/lib/widget.tsx 1`] = ` -"import { TestComponent } from './component'; -import { connectTest } from './connector'; +"import { DatePickerComponent } from './component'; +import { connectDatePicker } from './connector'; import type { ElementType } from 'react'; @@ -5881,8 +5881,8 @@ type WidgetParams = { placeholder?: string; }; -export const Test: ElementType = - connectTest(TestComponent);" +export const DatePicker: ElementType = + connectDatePicker(DatePickerComponent);" `; exports[`Templates React InstantSearch widget File content: tsconfig.declaration.json 1`] = ` diff --git a/e2e/templates.test.js b/e2e/templates.test.js index 5a75535d9..d5685abf4 100644 --- a/e2e/templates.test.js +++ b/e2e/templates.test.js @@ -17,6 +17,10 @@ describe('Templates', () => { templates.forEach(templatePath => { const templateName = path.basename(templatePath); const templateConfig = require(`${templatePath}/.template.js`); + if (templateConfig.category === 'Widget') { + // `appName` in widget templates is used only in test cases + templateConfig.appName = 'date-picker'; + } describe(`${templateName}`, () => { let temporaryDirectory; diff --git a/src/templates/InstantSearch.js widget/.template.js b/src/templates/InstantSearch.js widget/.template.js index 42df6ff06..c8a5fe113 100644 --- a/src/templates/InstantSearch.js widget/.template.js +++ b/src/templates/InstantSearch.js widget/.template.js @@ -6,7 +6,6 @@ module.exports = { libraryName: 'instantsearch.js', supportedVersion: '>= 4.21.0 < 5.0.0', templateName: 'instantsearch.js-widget', - appName: 'test', // only used for test cases packageNamePrefix: 'instantsearch-widget-', keywords: [ 'algolia', diff --git a/src/templates/React InstantSearch widget/.template.js b/src/templates/React InstantSearch widget/.template.js index 721422c9d..c3c404680 100644 --- a/src/templates/React InstantSearch widget/.template.js +++ b/src/templates/React InstantSearch widget/.template.js @@ -6,7 +6,6 @@ module.exports = { libraryName: 'react-instantsearch', supportedVersion: '>= 6.0.0 < 7.0.0', templateName: 'react-instantsearch-widget', - appName: 'test', // only used for test cases packageNamePrefix: 'react-instantsearch-widget-', keywords: [ 'algolia', From e640b69727eae7e76ab6f989ad839b22c4ce7918 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Thu, 24 Jun 2021 15:09:45 +0200 Subject: [PATCH 3/3] Update e2e/templates.test.js Co-authored-by: Haroen Viaene --- e2e/templates.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/e2e/templates.test.js b/e2e/templates.test.js index d5685abf4..143301fa7 100644 --- a/e2e/templates.test.js +++ b/e2e/templates.test.js @@ -18,7 +18,6 @@ describe('Templates', () => { const templateName = path.basename(templatePath); const templateConfig = require(`${templatePath}/.template.js`); if (templateConfig.category === 'Widget') { - // `appName` in widget templates is used only in test cases templateConfig.appName = 'date-picker'; }