@searchcraft/javascript-sdk 0.8.1 → 0.9.0

package/README.md

@@ -21,17 +21,19 @@ $ npm install @searchcraft/javascript-sdk
 ### HTML
 Add the web components to your html. They should be placed with the rest of your page content where you'd like them to render in the layout. These are the web components available to use:
 ```html
-  <searchcraft-input-form />
+  <searchcraft-input-form></searchcraft-input-form>
   ..
-  <searchcraft-popover-form />
+  <searchcraft-popover-form></searchcraft-popover-form>
   ...
-  <searchcraft-filter-panel />
+  <searchcraft-filter-panel></searchcraft-filter-panel>
   ...
-  <searchcraft-results-info />
+  <searchcraft-results-info /></searchcraft-results-info>
   ...
-  <searchcraft-base-search-results />
+  <searchcraft-base-search-results></searchcraft-base-search-results>
   ...
-  <searchcraft-theme /> (Required to apply theme to components)
+  <searchcraft-theme></searchcraft-theme>
+  ...
+  <searchcraft-pagination></searchcraft-pagination>
 
 ```
 To see more about the specific attributes required for each component, refer to their individual documentation pages.
@@ -42,39 +44,31 @@ To see more about the specific attributes required for each component, refer to
 
 
 ### Javascript
-Before anything else, the web components must be initialized. Import and Initialize the SDK and call `defineCustomElements()` to set up the web components.
+As early as possible in your app's lifecycle, initialize searchcraft, passing in config values that correspond with your Searchcraft environment.
 
 ```js
+import { Searchcraft } from '@searchcraft/javascript-sdk';
 
-import { defineCustomElements } from '@searchcraft/javascript-sdk/components';
-defineCustomElements();
-
-```
-
-Create a configuration object that your web components can use.
-```jsx
-const config = {
+const searchcraft = new Searchcraft({
   index: ['your_index_from_vektron'],
   readKey: 'your_read_key_from_vektron',
   endpointURL: 'your_searchcraft_endpoint_url',
   searchDebounceDelay: 50, // The amount of debounce, in millis, to add to search requests (optional)
-};
+})
 ```
+
 When the DOM content is loaded:
-- Provide the input form (or popover form) with your `config` object. 
 - If you are using a filter panel, provide the filter panel with the filter panel item configuration.
 - Provide the search results with the search result mapping configuration.
 
 ```js
 
 document.addEventListener('DOMContentLoaded', () => {
-  const inputForm = document.querySelector('searchcraft-input-form');
   const filterPanel = document.querySelector('searchcraft-filter-panel');
   const searchResults = document.querySelector(
     'searchcraft-base-search-results',
   );
 
-  inputForm.config = config;
   filterPanel.items = filterPanelItems;
   searchResults.searchResultMappings = searchResultsMappings;
 });
@@ -170,32 +164,26 @@ export const searchResultsMappings = {
 };
 ```
 
-### Event Handling
-Optionally, if you need to perform other actions, such as modifying page layout, when various searchcraft events are emitted, you can add the following listeners:
+### Event Subscriptions
+You can subscribe to various events within Searchcraft:
 
 ```jsx
 
-  inputForm.addEventListener('querySubmit', (event) => {
-    // Perform an action
+  const searchcraft = new Searchcraft({
+    index: ['your_index_from_vektron'],
+    readKey: 'your_read_key_from_vektron',
+    endpointURL: 'your_searchcraft_endpoint_url',
   });
 
-  inputForm.addEventListener('inputCleared', () => {
-    // Perform an action
+  const unsubscribeCallback = searchcraft.subscribe('query_submitted', (event) => {
+    // Do something in your application when a query has been submitted
   });
 
-  inputForm.addEventListener('inputFocus', () => {
-    // Perform an action
-  });
 
-  inputForm.addEventListener('inputBlur', () => {
-    // Perform an action
+  const unsubscribeCallback = searchcraft.subscribe('ad_container_rendered', (event) => {
+    // Do something when a new ad container has been rendered
   });
 
-  inputForm.addEventListener('inputInit', () => {
-    // Perform an action
-  });
+  ```
 
-  searchResults.addEventListener('noResults', () => {
-    // Perform an action
-  });
-  ```
+  For a complete listing of subscription events, refer to the api reference.

package/dist/components/defineCustomElements.d.ts

@@ -0,0 +1 @@
+export declare const defineCustomElements: () => void;

package/dist/components/defineCustomElements.js

@@ -0,0 +1,46 @@
+import { defineCustomElement as define_searchcraft_ad } from './searchcraft-ad.js';
+import { defineCustomElement as define_searchcraft_base_search_result } from './searchcraft-base-search-result.js';
+import { defineCustomElement as define_searchcraft_base_search_results } from './searchcraft-base-search-results.js';
+import { defineCustomElement as define_searchcraft_button } from './searchcraft-button.js';
+import { defineCustomElement as define_searchcraft_error_message } from './searchcraft-error-message.js';
+import { defineCustomElement as define_searchcraft_facet_list } from './searchcraft-facet-list.js';
+import { defineCustomElement as define_searchcraft_filter_panel } from './searchcraft-filter-panel.js';
+import { defineCustomElement as define_searchcraft_input_form } from './searchcraft-input-form.js';
+import { defineCustomElement as define_searchcraft_input_label } from './searchcraft-input-label.js';
+import { defineCustomElement as define_searchcraft_pagination } from './searchcraft-pagination.js';
+import { defineCustomElement as define_searchcraft_popover_button } from './searchcraft-popover-button.js';
+import { defineCustomElement as define_searchcraft_popover_form } from './searchcraft-popover-form.js';
+import { defineCustomElement as define_searchcraft_popover_list_item } from './searchcraft-popover-list-item.js';
+import { defineCustomElement as define_searchcraft_popover_list_view } from './searchcraft-popover-list-view.js';
+import { defineCustomElement as define_searchcraft_results_info } from './searchcraft-results-info.js';
+import { defineCustomElement as define_searchcraft_search_results_per_page } from './searchcraft-search-results-per-page.js';
+import { defineCustomElement as define_searchcraft_select } from './searchcraft-select.js';
+import { defineCustomElement as define_searchcraft_slider } from './searchcraft-slider.js';
+import { defineCustomElement as define_searchcraft_theme } from './searchcraft-theme.js';
+import { defineCustomElement as define_searchcraft_toggle_button } from './searchcraft-toggle-button.js';
+
+export const defineCustomElements = () => {
+  define_searchcraft_ad();
+  define_searchcraft_base_search_result();
+  define_searchcraft_base_search_results();
+  define_searchcraft_button();
+  define_searchcraft_error_message();
+  define_searchcraft_facet_list();
+  define_searchcraft_filter_panel();
+  define_searchcraft_input_form();
+  define_searchcraft_input_label();
+  define_searchcraft_pagination();
+  define_searchcraft_popover_button();
+  define_searchcraft_popover_form();
+  define_searchcraft_popover_list_item();
+  define_searchcraft_popover_list_view();
+  define_searchcraft_results_info();
+  define_searchcraft_search_results_per_page();
+  define_searchcraft_select();
+  define_searchcraft_slider();
+  define_searchcraft_theme();
+  define_searchcraft_toggle_button();
+};
+
+// Call defineCustomElements as soon as it's available
+defineCustomElements();

package/dist/components/index.d.ts

@@ -1,3 +1,45 @@
+/* SearchcraftJavascriptSdk custom elements */
+export { SearchcraftPopoverListItemAd as SearchcraftAd } from '../types/components/searchcraft-ad/searchcraft-ad';
+export { defineCustomElement as defineCustomElementSearchcraftAd } from './searchcraft-ad';
+export { SearchcraftBaseSearchResult as SearchcraftBaseSearchResult } from '../types/components/searchcraft-base-search-result/searchcraft-base-search-result';
+export { defineCustomElement as defineCustomElementSearchcraftBaseSearchResult } from './searchcraft-base-search-result';
+export { SearchcraftBaseSearchResults as SearchcraftBaseSearchResults } from '../types/components/searchcraft-base-search-results/searchcraft-base-search-results';
+export { defineCustomElement as defineCustomElementSearchcraftBaseSearchResults } from './searchcraft-base-search-results';
+export { SearchcraftButton as SearchcraftButton } from '../types/components/searchcraft-button/searchcraft-button';
+export { defineCustomElement as defineCustomElementSearchcraftButton } from './searchcraft-button';
+export { SearchcraftErrorMessage as SearchcraftErrorMessage } from '../types/components/searchcraft-error-message/searchcraft-error-message';
+export { defineCustomElement as defineCustomElementSearchcraftErrorMessage } from './searchcraft-error-message';
+export { SearchcraftFacetList as SearchcraftFacetList } from '../types/components/searchcraft-facet-list/searchcraft-facet-list';
+export { defineCustomElement as defineCustomElementSearchcraftFacetList } from './searchcraft-facet-list';
+export { SearchcraftFilterPanel as SearchcraftFilterPanel } from '../types/components/searchcraft-filter-panel/searchcraft-filter-panel';
+export { defineCustomElement as defineCustomElementSearchcraftFilterPanel } from './searchcraft-filter-panel';
+export { SearchcraftInput as SearchcraftInputForm } from '../types/components/searchcraft-input-form/searchcraft-input-form';
+export { defineCustomElement as defineCustomElementSearchcraftInputForm } from './searchcraft-input-form';
+export { SearchcraftInputLabel as SearchcraftInputLabel } from '../types/components/searchcraft-input-label/searchcraft-input-label';
+export { defineCustomElement as defineCustomElementSearchcraftInputLabel } from './searchcraft-input-label';
+export { SearchcraftPagination as SearchcraftPagination } from '../types/components/searchcraft-pagination/searchcraft-pagination';
+export { defineCustomElement as defineCustomElementSearchcraftPagination } from './searchcraft-pagination';
+export { SearchcraftPopoverButton as SearchcraftPopoverButton } from '../types/components/searchcraft-popover-button/searchcraft-popover-button';
+export { defineCustomElement as defineCustomElementSearchcraftPopoverButton } from './searchcraft-popover-button';
+export { SearchcraftPopoverForm as SearchcraftPopoverForm } from '../types/components/searchcraft-popover-form/searchcraft-popover-form';
+export { defineCustomElement as defineCustomElementSearchcraftPopoverForm } from './searchcraft-popover-form';
+export { SearchcraftPopoverListItem as SearchcraftPopoverListItem } from '../types/components/searchcraft-popover-list-item/searchcraft-popover-list-item';
+export { defineCustomElement as defineCustomElementSearchcraftPopoverListItem } from './searchcraft-popover-list-item';
+export { SearchcraftPopoverListView as SearchcraftPopoverListView } from '../types/components/searchcraft-popover-list-view/searchcraft-popover-list-view';
+export { defineCustomElement as defineCustomElementSearchcraftPopoverListView } from './searchcraft-popover-list-view';
+export { SearchcraftResultsInfo as SearchcraftResultsInfo } from '../types/components/searchcraft-results-info/searchcraft-results-info';
+export { defineCustomElement as defineCustomElementSearchcraftResultsInfo } from './searchcraft-results-info';
+export { SearchcraftSearchResultsPerPage as SearchcraftSearchResultsPerPage } from '../types/components/searchcraft-search-results-per-page/searchcraft-search-results-per-page';
+export { defineCustomElement as defineCustomElementSearchcraftSearchResultsPerPage } from './searchcraft-search-results-per-page';
+export { SearchcraftSelect as SearchcraftSelect } from '../types/components/searchcraft-select/searchcraft-select';
+export { defineCustomElement as defineCustomElementSearchcraftSelect } from './searchcraft-select';
+export { SearchcraftSlider as SearchcraftSlider } from '../types/components/searchcraft-slider/searchcraft-slider';
+export { defineCustomElement as defineCustomElementSearchcraftSlider } from './searchcraft-slider';
+export { SearchcraftTheme as SearchcraftTheme } from '../types/components/searchcraft-theme/searchcraft-theme';
+export { defineCustomElement as defineCustomElementSearchcraftTheme } from './searchcraft-theme';
+export { SearchcraftToggleButton as SearchcraftToggleButton } from '../types/components/searchcraft-toggle-button/searchcraft-toggle-button';
+export { defineCustomElement as defineCustomElementSearchcraftToggleButton } from './searchcraft-toggle-button';
+
 /**
  * Get the base path to where the assets can be found. Use "setAssetPath(path)"
  * if the path needs to be customized.
@@ -31,15 +73,6 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';
 
-/**
- * Utility to define all custom elements within this package using the tag name provided in the component's source.
- * When defining each custom element, it will also check it's safe to define by:
- *
- * 1. Ensuring the "customElements" registry is available in the global context (window).
- * 2. Ensuring that the component tag name is not already defined.
- *
- * Use the standard [customElements.define()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)
- * method instead to define custom elements individually, or to provide a different tag name.
- */
-export declare const defineCustomElements: (opts?: any) => void;
+export declare const defineCustomElements: () => void;

package/dist/components/index.js

@@ -1,60 +1,111 @@
-import { SearchcraftBaseSearchResult } from './searchcraft-base-search-result.js';
-import { SearchcraftBaseSearchResultAd } from './searchcraft-base-search-result-ad.js';
-import { SearchcraftBaseSearchResults } from './searchcraft-base-search-results.js';
-import { SearchcraftButton } from './searchcraft-button.js';
-import { SearchcraftErrorMessage } from './searchcraft-error-message.js';
-import { SearchcraftFacetList } from './searchcraft-facet-list.js';
-import { SearchcraftFilterPanel } from './searchcraft-filter-panel.js';
-import { SearchcraftInputForm } from './searchcraft-input-form.js';
-import { SearchcraftInputLabel } from './searchcraft-input-label.js';
-import { SearchcraftPagination } from './searchcraft-pagination.js';
-import { SearchcraftPopoverButton } from './searchcraft-popover-button.js';
-import { SearchcraftPopoverForm } from './searchcraft-popover-form.js';
-import { SearchcraftPopoverListItem } from './searchcraft-popover-list-item.js';
-import { SearchcraftPopoverListItemAd } from './searchcraft-popover-list-item-ad.js';
-import { SearchcraftPopoverListView } from './searchcraft-popover-list-view.js';
-import { SearchcraftResultsInfo } from './searchcraft-results-info.js';
-import { SearchcraftSearchResultsPerPage } from './searchcraft-search-results-per-page.js';
-import { SearchcraftSelect } from './searchcraft-select.js';
-import { SearchcraftSlider } from './searchcraft-slider.js';
-import { SearchcraftTheme } from './searchcraft-theme.js';
-import { SearchcraftToggleButton } from './searchcraft-toggle-button.js';
 export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5365011f.js';
+import { g as ge } from './p-6d8b0ead.js';
+export { s as searchcraftStore } from './p-6d8b0ead.js';
+export { SearchcraftAd, defineCustomElement as defineCustomElementSearchcraftAd } from './searchcraft-ad.js';
+export { SearchcraftBaseSearchResult, defineCustomElement as defineCustomElementSearchcraftBaseSearchResult } from './searchcraft-base-search-result.js';
+export { SearchcraftBaseSearchResults, defineCustomElement as defineCustomElementSearchcraftBaseSearchResults } from './searchcraft-base-search-results.js';
+export { SearchcraftButton, defineCustomElement as defineCustomElementSearchcraftButton } from './searchcraft-button.js';
+export { SearchcraftErrorMessage, defineCustomElement as defineCustomElementSearchcraftErrorMessage } from './searchcraft-error-message.js';
+export { SearchcraftFacetList, defineCustomElement as defineCustomElementSearchcraftFacetList } from './searchcraft-facet-list.js';
+export { SearchcraftFilterPanel, defineCustomElement as defineCustomElementSearchcraftFilterPanel } from './searchcraft-filter-panel.js';
+export { SearchcraftInputForm, defineCustomElement as defineCustomElementSearchcraftInputForm } from './searchcraft-input-form.js';
+export { SearchcraftInputLabel, defineCustomElement as defineCustomElementSearchcraftInputLabel } from './searchcraft-input-label.js';
+export { SearchcraftPagination, defineCustomElement as defineCustomElementSearchcraftPagination } from './searchcraft-pagination.js';
+export { SearchcraftPopoverButton, defineCustomElement as defineCustomElementSearchcraftPopoverButton } from './searchcraft-popover-button.js';
+export { SearchcraftPopoverForm, defineCustomElement as defineCustomElementSearchcraftPopoverForm } from './searchcraft-popover-form.js';
+export { SearchcraftPopoverListItem, defineCustomElement as defineCustomElementSearchcraftPopoverListItem } from './searchcraft-popover-list-item.js';
+export { SearchcraftPopoverListView, defineCustomElement as defineCustomElementSearchcraftPopoverListView } from './searchcraft-popover-list-view.js';
+export { SearchcraftResultsInfo, defineCustomElement as defineCustomElementSearchcraftResultsInfo } from './searchcraft-results-info.js';
+export { SearchcraftSearchResultsPerPage, defineCustomElement as defineCustomElementSearchcraftSearchResultsPerPage } from './searchcraft-search-results-per-page.js';
+export { SearchcraftSelect, defineCustomElement as defineCustomElementSearchcraftSelect } from './searchcraft-select.js';
+export { SearchcraftSlider, defineCustomElement as defineCustomElementSearchcraftSlider } from './searchcraft-slider.js';
+export { SearchcraftTheme, defineCustomElement as defineCustomElementSearchcraftTheme } from './searchcraft-theme.js';
+export { SearchcraftToggleButton, defineCustomElement as defineCustomElementSearchcraftToggleButton } from './searchcraft-toggle-button.js';
 export { p as parseCustomStyles, s as serializeStyles } from './p-d9551738.js';
-export { u as useSearchcraftStore } from './p-38419178.js';
 
-const defineCustomElements = (opts) => {
-    if (typeof customElements !== 'undefined') {
-        [
-            SearchcraftBaseSearchResult,
-            SearchcraftBaseSearchResultAd,
-            SearchcraftBaseSearchResults,
-            SearchcraftButton,
-            SearchcraftErrorMessage,
-            SearchcraftFacetList,
-            SearchcraftFilterPanel,
-            SearchcraftInputForm,
-            SearchcraftInputLabel,
-            SearchcraftPagination,
-            SearchcraftPopoverButton,
-            SearchcraftPopoverForm,
-            SearchcraftPopoverListItem,
-            SearchcraftPopoverListItemAd,
-            SearchcraftPopoverListView,
-            SearchcraftResultsInfo,
-            SearchcraftSearchResultsPerPage,
-            SearchcraftSelect,
-            SearchcraftSlider,
-            SearchcraftTheme,
-            SearchcraftToggleButton,
-        ].forEach(cmp => {
-            if (!customElements.get(cmp.is)) {
-                customElements.define(cmp.is, cmp, opts);
-            }
+const name = "@searchcraft/javascript-sdk";
+const version = "0.9.0";
+const description = "Searchcraft Javascript SDK";
+const author = "Searchcraft";
+const license = "Apache-2.0";
+const main = "dist/index.cjs.js";
+const module = "dist/components/index.js";
+const types = "dist/components/index.d.ts";
+const collection = "dist/collection/collection-manifest.json";
+const unpkg = "dist/searchcraft-javascript-sdk/searchcraft-javascript-sdk.esm.js";
+const exports = {
+	".": {
+		"import": "./dist/components/index.js",
+		types: "./dist/components/index.d.ts"
+	},
+	"./dist/components/*": {
+		"import": "./dist/components/*",
+		types: "./dist/components/*"
+	}
+};
+const repository = {
+	type: "git",
+	url: "https://bitbucket.org/madebychalk/searchcraft-javascript-sdks/"
+};
+const files = [
+	"dist/"
+];
+const scripts = {
+	build: "stencil build && yarn docs",
+	docs: "typedoc --options typedoc.json",
+	dev: "stencil build --dev --watch",
+	test: "stencil test --spec --e2e",
+	"test.watch": "stencil test --spec --e2e --watchAll",
+	generate: "stencil generate"
+};
+const dependencies = {
+	"@stencil/vue-output-target": "^0.9.2",
+	classnames: "^2.3.2",
+	dompurify: "^3.2.4",
+	nanoid: "^5.0.9"
+};
+const devDependencies = {
+	"@searchcraft/core": "^0.9.0",
+	"@stencil/core": "^4.7.0",
+	"@stencil/react-output-target": "^0.8.2",
+	"@stencil/sass": "^3.0.12",
+	"@types/node": "^16.18.11",
+	zustand: "^5.0.1"
+};
+const packageJson = {
+	name: name,
+	"private": false,
+	version: version,
+	description: description,
+	author: author,
+	license: license,
+	main: main,
+	module: module,
+	types: types,
+	collection: collection,
+	"collection:main": "dist/collection/index.js",
+	unpkg: unpkg,
+	exports: exports,
+	repository: repository,
+	files: files,
+	scripts: scripts,
+	dependencies: dependencies,
+	devDependencies: devDependencies
+};
+
+/**
+ * The consumer-facing `Searchcraft` class.
+ */
+class Searchcraft extends ge {
+    constructor(config) {
+        super(config, {
+            sdkName: packageJson.name,
+            sdkVersion: packageJson.version,
         });
     }
-};
+}
 
-export { defineCustomElements };
+export { Searchcraft };
 
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map
+export { defineCustomElements } from './defineCustomElements.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA;;;MAGa,WAAY,SAAQA,EAAe;IAC9C,YAAY,MAAyB;QACnC,KAAK,CAAC,MAAM,EAAE;YACZ,OAAO,EAAE,WAAW,CAAC,IAAI;YACzB,UAAU,EAAE,WAAW,CAAC,OAAO;SAChC,CAAC,CAAC;KACJ;;;;;","names":["SearchcraftCore"],"sources":["src/index.ts"],"sourcesContent":["import { type SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';\nimport { searchcraftStore } from '@store';\nimport packageJson from '../package.json';\n\n/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\nexport type * from './components';\nexport type { SearchcraftConfig };\nexport { searchcraftStore };\n\nexport {\n  parseCustomStyles,\n  serializeStyles,\n} from './utils';\n\nexport type { Components } from './components';\n\n/**\n * The consumer-facing `Searchcraft` class.\n */\nexport class Searchcraft extends SearchcraftCore {\n  constructor(config: SearchcraftConfig) {\n    super(config, {\n      sdkName: packageJson.name,\n      sdkVersion: packageJson.version,\n    });\n  }\n}\n"],"version":3}