Skip to content

Commit

Permalink
remove container query builtin support
Browse files Browse the repository at this point in the history
  • Loading branch information
mreinstein committed Oct 28, 2023
1 parent 7a5ccbc commit 88dc34e
Show file tree
Hide file tree
Showing 7 changed files with 19 additions and 187 deletions.
74 changes: 0 additions & 74 deletions examples/container-queries.html

This file was deleted.

4 changes: 1 addition & 3 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// Inits with common modules out of the box
// Also easier to use across multiple files
import create from './create.js'
import containerQueryModule from './snabbdom-containerquery.js'
import { attributesModule, classModule, propsModule, styleModule, eventListenersModule } from 'snabbdom'


Expand All @@ -10,6 +9,5 @@ export default create([
eventListenersModule,
classModule,
propsModule,
styleModule,
containerQueryModule
styleModule
])
7 changes: 3 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,17 @@
"license": "MIT",
"files": [
"index.js",
"create.js",
"snabbdom-containerquery.js"
"create.js"
],
"scripts": {
"examples": "serve .",
"predeploy": "npm run test",
"prepublishOnly": "npm run predeploy",
"test": "node test/index.js"
"test": "node test/test.js"
},
"devDependencies": {
"browser-env": "^3.3.0",
"resize-observer-polyfill": "^1.5.1",
"happy-dom": "^12.10.3",
"serve": "^14.0.0",
"tape": "^5.2.2"
},
Expand Down
33 changes: 7 additions & 26 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,23 +53,6 @@ let node2 = greet('World')
You have all the [modules documented by Snabbdom](https://github.com/snabbdom/snabbdom#modules-documentation) loaded by default. See [Directives](#directives) for how to use modules, and [`snabby/create`](#snabby_create) for loading custom modules


### Container Queries

Container Queries are one of the most requested features of all time in CSS. It enables people that want to build responsive
components by allowing classes to be attached to DOM elements based on their width, as opposed to `@media` queries, which only
operate on the viewport width.

In snabby you can specify a series of rules for setting classes on an element based on minimum width:

```js
html`<div data-breakpoints='{ "BP1": 400, "BP2": 600, "BP3": 1200 }'> Some content here </div>`
```

If the div is 700px wide, it will have `BP2` in it's classlist. Only the class with the highest matching rule will be added, regardless of what order the rules are declared in.

Internally, this is implemented with a ResizeObserver. As of version 5, we no longer bundle a ResizeObserver ponyfill with snabby. You should polyfill ResizeObserver yourself if you plan on using snabby on very old browsers. https://www.npmjs.com/package/resize-observer-polyfill


### Directives

Directives are attributes that begin with `@`, and let you interact with Snabbdom modules. In general, the form is `@<name>:[prop]:...`.
Expand Down Expand Up @@ -151,22 +134,20 @@ Create a `snabby` tag function with your own modules.
Here is an equivalent to `snabby` for example:

```js
import create from './create.js'
import { attributesModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/attributes.js';
import { classModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/class.js';
import { propsModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/props.js';
import { styleModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/style.js';
import { eventListenersModule } from 'https://cdn.jsdelivr.net/npm/[email protected]/build/package/modules/eventlisteners.js';
import containerQueryModule from './snabbdom-containerquery.js';
import create from './create.js'
import { attributesModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/attributes.js';
import { classModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/class.js';
import { propsModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/props.js';
import { styleModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/style.js';
import { eventListenersModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/eventlisteners.js';


const html = create([
attributesModule,
eventListenersModule,
classModule,
propsModule,
styleModule,
containerQueryModule
styleModule
])

```
Expand Down
62 changes: 0 additions & 62 deletions snabbdom-containerquery.js

This file was deleted.

15 changes: 0 additions & 15 deletions test/index.js

This file was deleted.

11 changes: 8 additions & 3 deletions test/test.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import snabby from '../index.js'
import { h } from 'snabbdom' // helper function for creating vnodes
import test from 'tape'
import snabby from '../index.js'
import { h } from 'snabbdom' // helper function for creating vnodes
import test from 'tape'
import { Window } from 'happy-dom'


global.window = new Window()
global.document = window.document


test('creation', function (t) {
Expand Down

0 comments on commit 88dc34e

Please sign in to comment.