{"_id":"@domoinc/page-filters-wrapper","_rev":"5-da373b6a352c3075a942829f88eea411","name":"@domoinc/page-filters-wrapper","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@domoinc/page-filters-wrapper","version":"1.0.1","_id":"@domoinc/page-filters-wrapper@1.0.1","maintainers":[{"name":"ttingey","email":"trevor.tingey@domo.com"},{"name":"morganjohn12","email":"morganjohn12@gmail.com"},{"name":"jeff.smith","email":"jeff.smith@domo.com"},{"name":"cameronnokes","email":"ccnokes@gmail.com"},{"name":"congrieb","email":"cgrieb9@gmail.com"},{"name":"diazd2","email":"biancodd@gmail.com"},{"name":"statianzo","email":"code.npm@jxs.me"},{"name":"mountain01","email":"edwardsjm01@gmail.com"},{"name":"th3uiguy","email":"spencer@myweb-host.net"},{"name":"jasonleehodges","email":"jasonleehodges@outlook.com"},{"name":"jmnemelka","email":"john.morgan.nemelka@gmail.com"},{"name":"jontiritilli-domo","email":"jon.tiritilli@domo.com"}],"bin":{"da-pfwrapper":"dist/bin.js"},"dist":{"shasum":"cca664fb727a61cb63657e2052b34e498fccb586","tarball":"https://registry.npmjs.org/@domoinc/page-filters-wrapper/-/page-filters-wrapper-1.0.1.tgz","fileCount":13,"integrity":"sha512-deY84bSONZlOzDJ3mbq6ihhHe5xbODIyDjHHT4HKqb4OM9FnUZXR3fLjAQNldsZak/Xtmlds3vCqpu9F8rlodA==","signatures":[{"sig":"MEYCIQCtjDtEKiNW18vSy8ilpfrf0OBsS/tVm7HWBX6NcZrfSQIhAK1G7wE/KPftdRV9l1DGYDxbNeQ1EUYOKyFGr5KbmYG+","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1649573},"main":"./dist/serve.js","gitHead":"bc38241f21eabe9e34da3cf7f10e2f252676d353","scripts":{"lint":"eslint 'src/**/*.ts?(x)'","build":"react-scripts build","serve":"yarn build && node ./dist/serve.js","postbuild":"node ./scripts/_postbuild.js"},"_npmUser":{"name":"jontiritilli-domo","actor":{"name":"jontiritilli-domo","type":"user","email":"jon.tiritilli@domo.com"},"email":"jon.tiritilli@domo.com"},"_npmVersion":"10.9.2","description":"This repo provides two features:","directories":{},"_nodeVersion":"22.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"react":"^18.2.0","yargs":"^17.7.2","ryuu.js":"^4.5.0","react-dom":"^18.2.0","typescript":"^4.0.3","react-redux":"^7.2.0","react-scripts":"5.0.1","@domoinc/toolkit":"^2.3.0","@reduxjs/toolkit":"^1.9.7","@domoinc/ryuu-proxy":"^4.3.4"},"eslintConfig":{"extends":"react-app"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.61.0","chalk":"^4.0.0","prettier":"^3.0.0","react-is":"^16.13.1","@babel/core":"^7.12.0","@types/node":"^12.0.0","@domoapps/da":"git+ssh://git@github.com/DomoApps/da.git","@types/react":"^16.9.0","babel-loader":"^8.2.3","@types/react-dom":"^18.0.6","@types/react-redux":"^7.1.7","eslint-plugin-react":"^7.14.3","eslint-config-prettier":"^6.0.0","eslint-plugin-prettier":"^5.0.0","@domoapps/eslint-config":"git+ssh://git@github.com/DomoApps/eslint-config.git","@domoapps/prettier-config":"git+ssh://git@github.com/DomoApps/prettier-config.git","@typescript-eslint/parser":">=4.0.0","@typescript-eslint/eslint-plugin":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/page-filters-wrapper_1.0.1_1751316557867_0.12091298908751069","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-06-30T20:49:17.866Z","modified":"2026-02-27T17:28:40.184Z","1.0.1":"2025-06-30T20:49:18.079Z"},"description":"This repo provides two features:","maintainers":[{"email":"trevor.tingey@domo.com","name":"ttingey"},{"email":"morganjohn12@gmail.com","name":"morganjohn12"},{"email":"jeff.smith@domo.com","name":"jeff.smith"},{"email":"cgrieb9@gmail.com","name":"congrieb"},{"email":"spencer@myweb-host.net","name":"th3uiguy"},{"email":"jason.hansen@domo.com","name":"domo_json"},{"email":"jon.tiritilli@domo.com","name":"jontiritilli-domo"}],"readme":"# Page Filter Wrapper\n\nThis repo provides two features:\n\n- A React-based wrapper app that functions as a parent for other apps which subscribe to the `onFiltersUpdate` of the **ryuu.js** library ([see details here](https://developer.domo.com/docs/tools/domo-js#domo.onFiltersUpdate)).\n- A helper CLI binary (node-based) for serving an existing URL.\n\n> **IMPORTANT:**\n> The main purpose of this project is to provide devs with the ability to mock and test page-filters in local development, <u>**when their apps subscribe to the `filtersUpdated` event</u>**.\n\n## Requirements\n\n#### 1. `da`\n\nThe `da` generator is required. Although you probably already have it installed, make sure it is at least `v1.3.0`.\n\nYou can upgrade it to the latest version by running:\n\n- ##### if installed in app (i.e. present in your app's package.json file)\n\n  `yarn add git+ssh://git@github.com:DomoApps/da.git --dev`\n\n- ##### if installed only globally, but not in app\n  `npm i -g git+ssh://git@github.com:DomoApps/da.git`\n\n#### 2. listener\n\nThe wrapper goes through these steps, in order:\n\n1. renders the \"child app\" inside an iframe\n2. opens up a channel (via MessageChannel)\n3. assigns one of the channel's ports to the child\n4. passes all changes to the page filters down to the child through that port.\n\nTherefore, the child app must be able to receive that port and send/receive pre-defined messages through it. This is all already prebuilt in the **ryuu.js** library, via the `onFiltersUpdate` method. e.g.\n\n```typescript\nimport RyuuJS from 'ryuu.js';\n...\nRyuuJS.onFiltersUpdate((filters) => {\n  // do something with the filters\n});\n```\n\n#### 3. command\n\nThe easiest way to use the wrapper from inside an app is by adding this script to your project's `package.json` file:\n\n`\"start:pagefilters\": \"da with-filters\",`\n\nAnd then simply run `yarn start:pagefilters` when you need the app inside the wrapper, or `yarn start` when without.\n\n\\*Note: You can also run the binary directly, if needed (see the \"Commands\" section below).\n\n## pagefilters.json\n\nConfiguration options can be set by adding a `pagefilters.json` file to the root folder of the project where the command is run.\n\nAll these properties are optional.\n\n| Option     | Type   | Description                                     | Example                 |\n| ---------- | ------ | ----------------------------------------------- | ----------------------- |\n| analyzerId | number | Load saved page filter view into wrapper        | 49876213                |\n| appUrl     | string | Replaces the address used to load the child app | \"http://localhost:8080\" |\n\n> **analyzerId**\n> If you have any saved filter views, you can find its \"analyzerId\" by inspecting the network requests at the page where your filters are stored:\n>\n> 1. Open the page with the stored filter views, and open the inspector.\n> 2. On page load, find the request sent to:\n>    `https://[INSTANCE].domo.com/api/content/v3/pages/[PAGEID]/analyzer`\n> 3. In the response, find and copy the `analyzerId` value for the filter view you're looking to load into the wrapper.\n\n## Commands\n\nIf installed globally, or via `npx`, a `da-pfwrapper` command is provided. You can use it to wrap an app that is already being served (or hosted).\n\n```\n  serve <port>            Serve wrapper with page filters on <port>                        [aliases: s]\n```\n","readmeFilename":"README.md"}