0.0.249 • Published 3 months ago

be-hive v0.0.249

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

be-hive WIP

Published on webcomponents.org How big is this package in your project? NPM version

Inheriting behiviors

be-hive lets it snow in August.

be-hive allows us to manage and coordinate the family, or HTML frimework of be-enhanced custom enhancements.

Without be-hive, the developer is burdened with plopping an instance of each enhancement inside each shadow DOM realm.

With the help of the be-hive component, the developer only has to plop a single instance of be-hive inside the Shadow DOM realm, like so:

<be-hive></be-hive>

This signals that the Shadow DOM realm is opting-in, and allowing element behiviors, and will inherit all the behiviors from the parent Shadow DOM realm, by default.

But the child Shadow DOM realm can develop a personality of its own by:

  1. Adding additional behiviors by adding specific be-enhanced based enhancement instructions inside the be-hive instance tag.
  2. Avoiding naming conflicts by overriding the attribute associated with the inherited behivior.
  3. Preventing inheriting unwanted behiviors from affecting the child Shadow DOM realm.
  4. Start over. Only decorator elements manually added inside the Shadow DOM (preferably inside the be-hive tag, for inheritance to work within)

Syntax for customizations of inherited behiviors WIP

<be-hive passthrough></be-hive>

allows behiviors to flow though the ShadowDOM realm to child ShadowDOM realms, but skips over the one in question.

<be-hive include=... exclude=...>

allows for blocking or specifying which behiviors to enable within the ShadowDOM realm, while allowing them to flow through to the child ShadowDOM realms, unaffected.

<be-hive overrides='{
    "be-sharing":{
        "becomes": "be-familial"
    },
    "be-gracious": {
        "becomes": "be-respectful"
    },
    "be-disobedient-without-facing-the-consequences": {
        "block": "true"
    }
}'></be-hive>

Be like Sirius Black

If the inherited behiviors are all just too odious to inherit, there's an option to start again:

<be-hive be-severed>
</be-hive>

Adding back a personality trait TODO

If one Shadow DOM blocks an inherited behivior, child Shadow DOMs can bring it back within their (and descendent) shadow DOM realms thusly:

<be-hive overrides='{
    "be-disobedient-without-facing-the-consequences": {
        "unblock": "true"
    }
}'></be-hive>

The "Emcee" script files

To make the ceremony of establishing DOM enhancements go as smoothly as possible, be-hive rests on a key object structure that should accompany each enhancement -- the "EMC" object.

EMC stands for "Enhancement Mount Configuration".

These objects are small, and most of it can be turned into a JSON import:

For example:

export const emc: EMC = {
    base: 'be-based',
    map: {
        '0.0': 'base'
    },
    enhPropKey: 'beBased',
    importEnh: async () => {
        const {BeBased} = await import('./behance.js');
        return BeBased;
    }
};

This provides a kind of "entrance ticket" that can then be used to enhance an element programmatically:

const beBasedEnhancement = await oDivElement.beEnhanced.whenResolved(emc);

It also contains all the needed information for how to parse the the behavior/enhancement attributes, into an object that can be passed in to the behavior/enhancement during template instantiation.

To see a more complex example along those lines, see be-switched.

Potentially, an alternative EMC definition can be used inside different Shadow DOM roots in order to avoid clashes between two libraries that use the same names.

So we can synchronously load these small files (or a bundle of such small files), which would block being able to do template instantiation on a first load. but at least the files are as small (and as parsable) as possible.

The thinking is we can take a template filled with lots of inline behavior/enhancement attributes, where that template is going to be cloned repeatedly. In order to avoid excessive string parsing, we can analyze the template:

If the EMC's "cache" setting is set to true, then it will look at the initial attribute settings, and see if it matches something that is already in the cache, and if so, do a (structural clone?) of the object without re-parsing. Maybe this should only be done if the root fragment isn't connected?

Behivior aspects WIP

There may be some cases, especially for enhancements with many equally important parameters where a developer may prefer to break up the settings into separate attributes. Here's an example where I can definitely see the appeal. So instead of:

<time lang="ar-EG" datetime=2011-11-18T14:54:39.929Z be-intl='{ "weekday": "long", "year": "numeric", "month": "long", "day": "numeric" }'></time>

we can write:

<time lang="ar-EG" 
    datetime=2011-11-18T14:54:39.929Z 
    be-intl-weekday=long be-intl-year=numeric be-intl-month=long
    be-intl-day=numeric>
</time>

This is especially useful in environments where the consumer of the behivior prefers to use attributes, rather than properties, for updating a property of the behivior.

0.0.249

3 months ago

0.0.248

3 months ago

0.0.247

4 months ago

0.0.246

4 months ago

0.0.245

5 months ago

0.0.244

5 months ago

0.0.243

6 months ago

0.0.242

6 months ago

0.0.238

6 months ago

0.0.237

6 months ago

0.0.239

6 months ago

0.0.241

6 months ago

0.0.240

6 months ago

0.0.236

6 months ago

0.0.235

6 months ago

0.0.234

7 months ago

0.0.233

7 months ago

0.0.232

7 months ago

0.0.229

7 months ago

0.0.228

7 months ago

0.0.230

7 months ago

0.0.231

7 months ago

0.0.227

8 months ago

0.0.226

8 months ago

0.0.225

8 months ago

0.0.224

8 months ago

0.0.223

8 months ago

0.0.222

8 months ago

0.0.221

9 months ago

0.0.205

10 months ago

0.0.204

10 months ago

0.0.209

9 months ago

0.0.208

9 months ago

0.0.207

9 months ago

0.0.206

10 months ago

0.0.216

9 months ago

0.0.215

9 months ago

0.0.214

9 months ago

0.0.213

9 months ago

0.0.219

9 months ago

0.0.218

9 months ago

0.0.217

9 months ago

0.0.212

9 months ago

0.0.211

9 months ago

0.0.210

9 months ago

0.0.203

10 months ago

0.0.202

10 months ago

0.0.201

10 months ago

0.0.200

10 months ago

0.0.199

11 months ago

0.0.197

11 months ago

0.0.198

11 months ago

0.0.196

11 months ago

0.0.195

11 months ago

0.0.194

11 months ago

0.0.193

11 months ago

0.0.192

11 months ago

0.0.191

11 months ago

0.0.190

11 months ago

0.0.179

12 months ago

0.0.186

11 months ago

0.0.185

11 months ago

0.0.184

11 months ago

0.0.183

12 months ago

0.0.189

11 months ago

0.0.188

11 months ago

0.0.187

11 months ago

0.0.182

12 months ago

0.0.181

12 months ago

0.0.180

12 months ago

0.0.175

1 year ago

0.0.174

1 year ago

0.0.173

1 year ago

0.0.172

1 year ago

0.0.178

1 year ago

0.0.177

1 year ago

0.0.176

1 year ago

0.0.171

1 year ago

0.0.170

1 year ago

0.0.159

1 year ago

0.0.158

1 year ago

0.0.157

1 year ago

0.0.156

1 year ago

0.0.155

1 year ago

0.0.154

1 year ago

0.0.169

1 year ago

0.0.164

1 year ago

0.0.162

1 year ago

0.0.161

1 year ago

0.0.168

1 year ago

0.0.167

1 year ago

0.0.166

1 year ago

0.0.165

1 year ago

0.0.160

1 year ago

0.0.153

1 year ago

0.0.152

1 year ago

0.0.151

1 year ago

0.0.150

1 year ago

0.0.149

1 year ago

0.0.148

1 year ago

0.0.147

1 year ago

0.0.146

1 year ago

0.0.145

1 year ago

0.0.144

1 year ago

0.0.142

1 year ago

0.0.143

1 year ago

0.0.141

1 year ago

0.0.140

1 year ago

0.0.139

1 year ago

0.0.138

1 year ago

0.0.137

1 year ago

0.0.136

1 year ago

0.0.135

1 year ago

0.0.134

1 year ago

0.0.133

1 year ago

0.0.131

1 year ago

0.0.132

1 year ago

0.0.130

1 year ago

0.0.129

1 year ago

0.0.128

1 year ago

0.0.117

2 years ago

0.0.116

2 years ago

0.0.115

2 years ago

0.0.114

2 years ago

0.0.119

2 years ago

0.0.118

2 years ago

0.0.113

2 years ago

0.0.112

2 years ago

0.0.111

2 years ago

0.0.127

2 years ago

0.0.126

2 years ago

0.0.125

2 years ago

0.0.120

2 years ago

0.0.124

2 years ago

0.0.123

2 years ago

0.0.122

2 years ago

0.0.121

2 years ago

0.0.109

2 years ago

0.0.108

2 years ago

0.0.110

2 years ago

0.0.106

2 years ago

0.0.105

2 years ago

0.0.104

2 years ago

0.0.103

2 years ago

0.0.107

2 years ago

0.0.102

2 years ago

0.0.101

2 years ago

0.0.100

2 years ago

0.0.95

2 years ago

0.0.96

2 years ago

0.0.97

2 years ago

0.0.98

2 years ago

0.0.99

2 years ago

0.0.93

2 years ago

0.0.94

2 years ago

0.0.84

2 years ago

0.0.85

2 years ago

0.0.86

2 years ago

0.0.87

2 years ago

0.0.88

2 years ago

0.0.89

2 years ago

0.0.83

2 years ago

0.0.90

2 years ago

0.0.91

2 years ago

0.0.92

2 years ago

0.0.80

2 years ago

0.0.81

2 years ago

0.0.82

2 years ago

0.0.79

2 years ago

0.0.73

3 years ago

0.0.74

3 years ago

0.0.75

3 years ago

0.0.76

3 years ago

0.0.77

3 years ago

0.0.78

3 years ago

0.0.70

3 years ago

0.0.71

3 years ago

0.0.72

3 years ago

0.0.62

3 years ago

0.0.63

3 years ago

0.0.64

3 years ago

0.0.65

3 years ago

0.0.66

3 years ago

0.0.67

3 years ago

0.0.68

3 years ago

0.0.69

3 years ago

0.0.60

3 years ago

0.0.61

3 years ago

0.0.47

3 years ago

0.0.59

3 years ago

0.0.51

3 years ago

0.0.52

3 years ago

0.0.53

3 years ago

0.0.54

3 years ago

0.0.55

3 years ago

0.0.56

3 years ago

0.0.57

3 years ago

0.0.58

3 years ago

0.0.50

3 years ago

0.0.48

3 years ago

0.0.46

3 years ago

0.0.44

3 years ago

0.0.45

3 years ago

0.0.40

3 years ago

0.0.41

3 years ago

0.0.42

3 years ago

0.0.43

3 years ago

0.0.37

3 years ago

0.0.38

3 years ago

0.0.39

3 years ago

0.0.35

3 years ago

0.0.36

3 years ago

0.0.20

3 years ago

0.0.21

3 years ago

0.0.22

3 years ago

0.0.23

3 years ago

0.0.24

3 years ago

0.0.25

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.18

3 years ago

0.0.19

3 years ago

0.0.30

3 years ago

0.0.31

3 years ago

0.0.32

3 years ago

0.0.33

3 years ago

0.0.34

3 years ago

0.0.14

3 years ago

0.0.26

3 years ago

0.0.27

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.10

4 years ago

0.0.11

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago

0.0.0

4 years ago