Infusion is an application framework for developing flexible stuff with JavaScript
Infusion is a different kind of JavaScript framework. Our approach is to leave you in control—it's your interface, using your markup, your way. Infusion is accessible and very, very configurable.
Infusion includes:
https://fluidproject.org/infusion.html
script tag to include the full framework from the CDN:
<script src='https://unpkg.com/browse/infusion@2.0.0/dist/infusion-all.js'></script>See How Do I Create an Infusion Package?, for details on creating complete or custom packages of Infusion.
Infusion has comprehensive documentation at https://docs.fluidproject.org/infusion.
The Fluid community is an international group of designers, developers, and testers who focus on a common mission: improving the user experience and accessibility of the open web.
The best way to join the Fluid Community is to jump into any of our community activities. Visit our website for links to our mailing lists, chat room, wiki, etc.
The Fluid community is dedicated to inclusive design—design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference. To help ensure that our community is a safe space for all contributors, we have adopted a code of conduct based on the Contributor Covenant. All participants and contributors have the responsibility to uphold this code. Please contact the Advocacy working group if you encounter unacceptable behaviour.
Infusion is the cornerstone of a number of Fluid's own projects dedicated to supporting inclusive design on the Web. You can see some of them featured on our Projects page. Infusion is also used in a variety of third-party applications, which are listed on the Infusion Integrations wiki page.
For simplicity and performance reasons, Infusion distributions are minified. However, such a file is often difficult to read. To address this, source maps for the minified files are automatically generated to make debugging easier.
Source maps are supported in all of the major browsers: Chrome, Firefox, Edge, and Safari. To make use of them, enable source maps in your debugging environment, and ensure that the source maps are hosted adjacent to the file they are associated with.
npm run build to generate Infustion distributions
All other development dependencies will be installed by running the following from the project root:
npm install
Will build a set of predefined distribution bundles of Infusion, some of which include third-party dependencies and some
of which do not, for distribution on NPM. Each distribution file will be
placed in the dist directory and will be accompanied by a source map.
npm run build
Distribution bundles can be viewed on unpkg.
Will include all of Infusion, including third-party dependencies. The source files packaged along with the single concatenated JavaScript file will include all of the demos, examples and unit tests. This is a good choice if you are trying to learn Infusion.
npm run build:pkg
Will only include the modules you request, and all of their dependencies, minus any that are explicitly excluded. Unlike the Infusion All build, none of the demos, examples or tests are included with a custom package.
npm run build:pkg:custom
Any of the following options can be passed to a custom build by specifying the option after --. Examples are shown
below.
value: "module(s)" (String) only available to custom builds
The --include option takes a comma-separated string of the Modules to be included in a custom package.
Only these modules and their dependencies will be included. By default, all modules are included; however, demos,
examples and tests are never included with custom builds.
npm run build:pkg:custom -- --include="fluid-inline-edit, fluid-ui-options"
# shorthand
npm run build:pkg:custom -- -i "fluid-inline-edit, fluid-ui-options"
value: "module(s)" (String) only available to custom builds
The --exclude option takes a comma-separated string of the Modules to be excluded from a custom package.
By default, no modules are excluded. Excludes take priority over includes.
npm run build:pkg:custom -- --exclude=jquery
# shorthand
npm run build:pkg:custom -- -e jquery
value: "custom suffix" (String) only available to custom packages which have specified an include and/or exclude option
By default, custom packages are given a name in the form infusion-custom-{version}.zip and the concatenated JavaScript
file is called infusion-custom.js. By supplying the --name option, you can replace "custom" with any valid string.
If neither the --include nor --exclude options are specified, --name will be ignored and "custom" will be replaced
with "all".
NOTE: If built from a tag, the version will correspond to the tag name. (e.g. infusion-custom-myTag.zip)
# this produces infusion-myPackage.js
npm run build:pkg:custom -- --name=myPackage
# shorthand
npm run build:pkg:custom -- -n myPackage
The build commands producing the zip files which accompany a GitHub release (infusion-all-vx.y.z.zip and infusion-uio-vx.y.z.zip) can be produced by the following commands:
npm run build:pkg
npm run build:pkg:custom -- -i "fluid-ui-options" -n uio
The zip files will obliterate the contents of the products directory and must be copied out after each command.
To run both the browser and node tests for this package:
npm test
To run only the node tests:
npm run test:node
To run only the browser tests:
npm run test:browser
Testem will attempt to launch Chrome and Firefox sequentially with each browser running the full Infusion test suite. The results will be returned in your terminal in the TAP format.
If you would like to debug individual tests or view the test summary in a browser, you can:
Host the working directory:
npm start
Your terminal will show you the local address for the working directory, which will normally be http://localhost:5000.
Open the "rollup" file tests/all-tests.html that runs all tests in a browser. Continuing the above example, you
would load the URL http://localhost:5000/tests/all-tests.html.
To run tests of Infusion's distribution bundles:
npm run test:bundles
When you run the tests using npm test, the full test suite will run and a coverage report will be saved to the
reports directory.
The npm test command has two additional associated scripts.
The pretest script runs before the command defined for the test script. The posttest script runs after. In our
case we use a pretest script to clean up previous coverage data before we run the tests, and a posttest script to
compile the actual report (this can also be accomplished by running npm run test:report after running tests). You do
not need to run the pretest script manually before running either the node or browser tests, or to run the posttest
script afterwards.
You can also run the tests from a Docker container.
Once you have Docker installed, run the following commands to build a Docker image and start a container:
docker build -t infusion .docker run --name infusion -p 8000:80 infusionInfusion will be available at http://localhost:8000
docker rm -f infusionIf you make changes to Infusion, repeat the steps to build the image and start a new container.
Host the working directory (this will make it available at http://localhost:5000 and let you access demos, examples, and tests in your browser):
npm start
Copy Infusion's dependencies from "node_modules" into the "src/lib" directory:
npm run deps
Lint JavaScript, JSON, Markdown and other files using fluid-lint-all:
npm run lint
Remove all of the copied or built directories and files:
npm run clean
The Preferences Framework uses Sass for CSS pre-processing. Only Sass files are included in the GitHub repository.
For developing the Preferences Framework, run the following from the project root to compile Sass files to CSS:
# unminified
npm run build:sass
# minified
npm run build:sass:min
A watch task is also supplied to ease Sass development. This task launches a process that watches all Sass files in
the src directory and recompiles them when they are changed. This task can be started using the following command:
# unminified
npm run watch:sass
# minified
npm run watch:sass:min
For more information on styling the Preferences Framework, please review the documentation on using Sass with the Preferences Framework.
[4.7.1] - 2024-07-30
FAQs
Infusion is an application framework for developing flexible stuff with JavaScript
The npm package infusion receives a total of 1,367 weekly downloads. As such, infusion popularity was classified as popular.
We found that infusion demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.