diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap index b444a5b876..501d947c80 100644 --- a/e2e/__snapshots__/templates.test.js.snap +++ b/e2e/__snapshots__/templates.test.js.snap @@ -3361,12 +3361,16 @@ exports[`Templates InstantSearch.js widget File content: CONTRIBUTING.md 1`] = ` ## Test +The tests are written in \`/src/__tests__\` and use Jest. + \`\`\`bash npm test # or yarn test \`\`\` +An example can be found in the \`example\` directory. + ## Build \`\`\`bash @@ -3660,6 +3664,74 @@ module.exports = (api) => { };" `; +exports[`Templates InstantSearch.js widget File content: example/index.css 1`] = ` +"body { + font-family: sans-serif; +} + +[class^=ais-] { + font-size: 1em; +}" +`; + +exports[`Templates InstantSearch.js widget File content: example/index.html 1`] = ` +" + + + + + + + + date-picker example + + +
+
+
+ + +" +`; + +exports[`Templates InstantSearch.js widget File content: example/index.ts 1`] = ` +"import algoliasearch from 'algoliasearch/lite'; +import instantsearch from 'instantsearch.js/es'; +import { configure, hits, searchBox } from 'instantsearch.js/es/widgets'; + +import { datePicker } from '../src'; + +const search = instantsearch({ + indexName: 'instant_search', + searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'), +}); + +search.addWidgets([ + datePicker({ container: '#example' }), + + searchBox({ container: '#search-box' }), + configure({ + attributesToSnippet: ['description:10'], + snippetEllipsisText: '[…]', + }), + hits({ + container: '#hits', + templates: { + item: \` +

+ +

+ + + + \`, + }, + }), +]); + +search.start();" +`; + exports[`Templates InstantSearch.js widget File content: package.json 1`] = ` "{ \\"name\\": \\"@algolia/instantsearch-widget-date-picker\\", @@ -3843,9 +3915,9 @@ export const connectDatePicker: DatePickerConnector = function connectDatePicker `; exports[`Templates InstantSearch.js widget File content: src/index.ts 1`] = ` -"export { datePicker } from './widget'; -export { connectDatePicker } from './connector'; -export { createDatePickerRenderer } from './renderer';" +"export * from './widget'; +export * from './connector'; +export * from './renderer';" `; exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = ` @@ -3861,7 +3933,6 @@ exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = ` export const createDatePickerRenderer: DatePickerRendererCreator = ({ container, }) => { - const containerNode: Element = typeof container === 'string' ? document.querySelector(container)! @@ -3893,6 +3964,7 @@ export const createDatePickerRenderer: DatePickerRendererCreator = ({ /* * Rendering */ + // TODO: use renderOptions to create this widget's DOM }, /* * The dispose function passed to the connector @@ -3907,7 +3979,11 @@ export const createDatePickerRenderer: DatePickerRendererCreator = ({ `; exports[`Templates InstantSearch.js widget File content: src/types.ts 1`] = ` -"import type { Renderer, Connector, WidgetFactory } from 'instantsearch.js'; +"import type { + Renderer, + Connector, + WidgetFactory, +} from 'instantsearch.js/es/types'; /* * Parameters send only to the widget creator function @@ -4055,6 +4131,9 @@ Array [ "LICENSE.md", "README.md", "babel.config.cjs", + "example/index.css", + "example/index.html", + "example/index.ts", "package.json", "src/connector.ts", "src/index.ts", diff --git a/src/templates/InstantSearch.js widget/CONTRIBUTING.md b/src/templates/InstantSearch.js widget/CONTRIBUTING.md index fd70c4706d..d1ee8db15c 100644 --- a/src/templates/InstantSearch.js widget/CONTRIBUTING.md +++ b/src/templates/InstantSearch.js widget/CONTRIBUTING.md @@ -2,12 +2,16 @@ ## Test +The tests are written in `/src/__tests__` and use Jest. + ```bash npm test # or yarn test ``` +An example can be found in the `example` directory. + ## Build ```bash diff --git a/src/templates/InstantSearch.js widget/README.md b/src/templates/InstantSearch.js widget/README.md index e99ef66d20..995df6f9be 100644 --- a/src/templates/InstantSearch.js widget/README.md +++ b/src/templates/InstantSearch.js widget/README.md @@ -1,4 +1,4 @@ -# {{name}} +# {{ name }} {{ description }} diff --git a/src/templates/InstantSearch.js widget/example/index.css b/src/templates/InstantSearch.js widget/example/index.css new file mode 100644 index 0000000000..577ebf8549 --- /dev/null +++ b/src/templates/InstantSearch.js widget/example/index.css @@ -0,0 +1,7 @@ +body { + font-family: sans-serif; +} + +[class^=ais-] { + font-size: 1em; +} diff --git a/src/templates/InstantSearch.js widget/example/index.html b/src/templates/InstantSearch.js widget/example/index.html new file mode 100644 index 0000000000..556a208d9c --- /dev/null +++ b/src/templates/InstantSearch.js widget/example/index.html @@ -0,0 +1,17 @@ + + + + + + + + + {{ name }} example + + + +
+
+ + + diff --git a/src/templates/InstantSearch.js widget/example/index.ts.hbs b/src/templates/InstantSearch.js widget/example/index.ts.hbs new file mode 100644 index 0000000000..15ef328004 --- /dev/null +++ b/src/templates/InstantSearch.js widget/example/index.ts.hbs @@ -0,0 +1,35 @@ +import algoliasearch from 'algoliasearch/lite'; +import instantsearch from 'instantsearch.js/es'; +import { configure, hits, searchBox } from 'instantsearch.js/es/widgets'; + +import { {{ camelCaseName }} } from '../src'; + +const search = instantsearch({ + indexName: 'instant_search', + searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'), +}); + +search.addWidgets([ + {{ camelCaseName }}({ container: '#example' }), + + searchBox({ container: '#search-box' }), + configure({ + attributesToSnippet: ['description:10'], + snippetEllipsisText: '[…]', + }), + hits({ + container: '#hits', + templates: { + item: ` +

+ {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}} +

+ + {{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}} + + `, + }, + }), +]); + +search.start(); diff --git a/src/templates/InstantSearch.js widget/src/index.ts.hbs b/src/templates/InstantSearch.js widget/src/index.ts.hbs index 8fb5c00138..5efa311138 100644 --- a/src/templates/InstantSearch.js widget/src/index.ts.hbs +++ b/src/templates/InstantSearch.js widget/src/index.ts.hbs @@ -1,3 +1,3 @@ -export { {{ camelCaseName }} } from './widget'; -export { connect{{ pascalCaseName }} } from './connector'; -export { create{{ pascalCaseName }}Renderer } from './renderer'; +export * from './widget'; +export * from './connector'; +export * from './renderer'; diff --git a/src/templates/InstantSearch.js widget/src/renderer.ts.hbs b/src/templates/InstantSearch.js widget/src/renderer.ts.hbs index 17dea84816..e4228b3e5e 100644 --- a/src/templates/InstantSearch.js widget/src/renderer.ts.hbs +++ b/src/templates/InstantSearch.js widget/src/renderer.ts.hbs @@ -10,7 +10,6 @@ import type { {{ pascalCaseName }}RendererCreator } from './types'; export const create{{ pascalCaseName }}Renderer: {{ pascalCaseName }}RendererCreator = ({ container, }) => { - const containerNode: Element = typeof container === 'string' ? document.querySelector(container)! @@ -42,6 +41,7 @@ export const create{{ pascalCaseName }}Renderer: {{ pascalCaseName }}RendererCre /* * Rendering */ + // TODO: use renderOptions to create this widget's DOM }, /* * The dispose function passed to the connector diff --git a/src/templates/InstantSearch.js widget/src/types.ts.hbs b/src/templates/InstantSearch.js widget/src/types.ts.hbs index 7e6be80c36..ee80b40837 100644 --- a/src/templates/InstantSearch.js widget/src/types.ts.hbs +++ b/src/templates/InstantSearch.js widget/src/types.ts.hbs @@ -1,4 +1,8 @@ -import type { Renderer, Connector, WidgetFactory } from 'instantsearch.js'; +import type { + Renderer, + Connector, + WidgetFactory, +} from 'instantsearch.js/es/types'; /* * Parameters send only to the widget creator function