npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dropkiq-ui

v1.0.77

Published

Liquid Expressions Simplified

Downloads

4,567

Readme

Dropkiq_logo-dk

DropkiqUI

Dropkiq simplifies the creation of Liquid expressions. Quickly build your dynamic content with the simplest Liquid template editor.

  • Immediate Feedback: No more guesswork. Know exactly how your expressions will evaluate in real time.
  • No More Typos: To err is human. Identify mistakes as they happen and take corrective measures.
  • Visibility of Options: Data at your fingertips. See what data is available without asking your development team.

Check it out at https://www.dropkiq.com!

DropkiqUI works with the Dropkiq Engine in order to provide inline Liquid suggestions as users write Liquid documents.

The Dropkiq Engine can be found here: https://www.npmjs.com/package/dropkiq. The engine is responsible for processing the text, caret position, and schema of the application to make suggestions as the user types. The DropkiqUI (contained in this repository) is responsible for rendering the UI so that users may see those suggestions.

The DropkiqUI has been tested in all major browsers and works with standard text input, textarea, and contenteditable fields.

Installation

DropkiqUI is available via npm: https://www.npmjs.com/package/dropkiq-ui

With NPM:

npm install dropkiq-ui

With Yarn:

yarn install dropkiq-ui

Example Installation instructions for Rails (Assuming you're using Webpacker: https://github.com/rails/webpacker):

  1. In package.json, you should add dropkiq-ui
{
  name: "My Application",
  "dependencies": {
    "dropkiq-ui": "^1.0.4"
  }
}
  1. In javascript/packs/application.ts, import the DropkiqUI library:
var { DropkiqUI } = require('dropkiq-ui');
window['DropkiqUI'] = DropkiqUI;
  1. In app/assets/stylesheets/application.scss, import the DropkiqUI CSS:
@import 'dropkiq-ui/dist/dropkiq';
  1. Then, use the DropkiqUI within your application:
var schema = gon.dropkiq_schema_yaml;
var scope = gon.example_data;
var context = {
  activity: {
    type: "ColumnTypes::HasOne",
    foreign_table_name: 'activities'
  },
  first_name: {
    type: "ColumnTypes::String",
    foreign_table_name: null
  },
  last_name: {
    type: "ColumnTypes::String",
    foreign_table_name: null
  }
};

new window.DropkiqUI(document.getElementById('basic-dropkiq-example-1'), schema, context, scope, gon.licenseKey);

Development

After checking out the repo, run yarn to install dependencies. Then, run yarn jest to run the tests.

To generate a new build, run gulp.

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/akdarrah/dropkiq-ui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

License

The Dropkiq UI Javascript Library is available as open source under the terms of the MIT License.