Related
I am trying to load a React component dynamically into another application (also a simple React app) but cannot get the index.js to be run.
I am somewhat orienting on this article, but that's actually not the question.
I stumbled upon the fact that that the generated enormous JS function that is generated to the index.html is somehow the entry point for my index.js to be called.
<!doctype html>
<html lang="en">
<head>
<!-- head stuff here -->
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- this is the function I am talking about -->
<script>!function (c) { function e(e) { for (var r, t, n = e[0], o = e[1], u = e[2], a = 0, l = []; a < n.length; a++)t = n[a], Object.prototype.hasOwnProperty.call(i, t) && i[t] && l.push(i[t][0]), i[t] = 0; for (r in o) Object.prototype.hasOwnProperty.call(o, r) && (c[r] = o[r]); for (s && s(e); l.length;)l.shift()(); return p.push.apply(p, u || []), f() } function f() { for (var e, r = 0; r < p.length; r++) { for (var t = p[r], n = !0, o = 1; o < t.length; o++) { var u = t[o]; 0 !== i[u] && (n = !1) } n && (p.splice(r--, 1), e = a(a.s = t[0])) } return e } var t = {}, i = { 1: 0 }, p = []; function a(e) { if (t[e]) return t[e].exports; var r = t[e] = { i: e, l: !1, exports: {} }; return c[e].call(r.exports, r, r.exports, a), r.l = !0, r.exports } a.m = c, a.c = t, a.d = function (e, r, t) { a.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, a.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, a.t = function (r, e) { if (1 & e && (r = a(r)), 8 & e) return r; if (4 & e && "object" == typeof r && r && r.__esModule) return r; var t = Object.create(null); if (a.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: r }), 2 & e && "string" != typeof r) for (var n in r) a.d(t, n, function (e) { return r[e] }.bind(null, n)); return t }, a.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return a.d(r, "a", r), r }, a.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, a.p = "/search/"; var r = window.webpackJsonpsearch = window.webpackJsonpsearch || [], n = r.push.bind(r); r.push = e, r = r.slice(); for (var o = 0; o < r.length; o++)e(r[o]); var s = n; f() }([])</script>
<script src="/search/static/js/2.360c2576.chunk.js"></script>
<script src="/search/static/js/main.f6fe58e3.chunk.js"></script>
</body>
</html>
Currently I am only including the main.js, this is why my prototype does not work, so I would like to understand what the index.html is actually doing to recreate it in the importing system.
I am not able to find any documentation to what this javascript is actually doing. Can anyone help me find some hints of what this function is doing?
The project is a simple create-react-app application. No further configuration is done, but the "homepage" attribute set in package.json.
Found the answer. Actually this post got me into the right direction.
The function is the inlined runtime chunk, to save some network traffic. There is an actual Webpack plugin for that that can be set by env-variable like this
INLINE_RUNTIME_CHUNK=false
Source
This was implemented due to this reported issue.
The code from reacts webpack.config.js is the following:
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
// https://github.com/facebook/create-react-app/issues/5358
isEnvProduction &&
shouldInlineRuntimeChunk &&
new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),
Is it possible to add to a multidimensional array of unknown size without using a google sheets(spreadsheet) to hold the data? Looking everywhere and can't find an example for a 3 dimensional array.
Here is what I want to do:
var aDirTree=[];
aDirTree[0][0][0]="myName1";
aDirTree[0][0][1]="myURL1";
aDirTree[1][0][0]="myName2";
aDirTree[1][0][1]="myURL2";
//Notice we are skipping elements
aDirTree[2][5][0]="myName3";
aDirTree[2][5][1]="myURL3";
Where values that are skipped are null? I'm guessing it might be some sort of push method.
In the lazier version, array can be used as a key (but it's converted to string) :
var o = {}
o[[1,2,3]]='a'
o['4,5,6']='b'
console.log(o) // { "1,2,3": "a", "4,5,6": "b" }
console.log(o[[0,0,0]]) // undefined
Proxy(not available in IE)
can be another alternative, but it will create a lot of extra values:
var handler = { get: (a, i) => i in a ? a[i] : a[i] = new Proxy([], handler) }
var a = new Proxy([], handler)
a[1][2][3]='a'
a[4][5][6]='b'
console.log(a) // [[],[[],[],[[],[],[],"a"]],[],[],[[],[],[],[],[],[[],[],[],[],[],[],"b"]]]
console.log(a[0][0][0]) // []
And finally, the "real" answer:
function set(a, x, y, z, v) { ((a = a[x] || (a[x] = []))[y] || (a[y] = []))[z] = v }
function get(a, x, y, z, v) { return (a = a[x]) && (a = a[y]) && z in a ? a[z] : v }
var a = []
set(a,1,2,3,'a')
set(a,4,5,6,'b')
console.log( get(a,0,0,0) ) // undefined
console.log( get(a,0,0,0,'default') ) // "default"
console.log( a ) // [,[,,[,,,"a"]],,,[,,,,,[,,,,,,"b"]]]
Bonus: combination of all 3, but not very efficient, because the keys are converted to strings:
var a = [], p = new Proxy(a, { set: (a, k, v) =>
([x,y,z] = k.split(','), ((a = a[x] || (a[x] = []))[y] || (a[y] = []))[z] = v) })
p[[1,2,3]] = 'a'
p[[4,5,6]] = 'b'
console.log( a[[0,0,0]] ) // undefined
console.log( a ) // [,[,,[,,,"a"]],,,[,,,,,[,,,,,,"b"]]]
function writeToTree(tree, first, second, third, value)
{
tree[first] || (tree[first] = []);
tree[first][second] || (tree[first][second] = []);
tree[first][second][third] || (tree[first][second][third] = []);
tree[first][second][third] = value;
}
var aDirTree = [];
writeToTree(aDirTree, 1, 55, 3, "someValue");
Or recursively, giving you arbitrary depth:
function writeToTree(tree, position, value)
{
var insertAt = position.shift();
tree[insertAt] || (tree[insertAt] = []);
if (position.length === 0)
{
tree[insertAt] = value;
return;
}
writeToTree(tree[insertAt], position, value);
}
var aDirTree = [];
writeToTree(aDirTree, [1, 55, 3], "someValue");
console.log(aDirTree);
I've been stepping through the tutorial on Angulars own homepage (the tour of heroes) to learn Angular 2 but have stumbled upon a problem when doing the chapter about Services.
When running the app I get the above error message which I can't find anything about anywhere. So I was wondering if there's anybody who could explain to me what this means? I only find topics on a similar issue but then the character is < and the error is rather an uncaught syntaxerror.
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('#angular/core');
var forms_1 = require('#angular/forms');
var platform_browser_1 = require('#angular/platform-browser');
var app_component_1 = require('./app.component');
var hero_detail_component_1 = require('./hero-detail.component');
var AppModule = (function () {
function AppModule() {
}
AppModule = __decorate([
core_1.NgModule({
imports: [
platform_browser_1.BrowserModule,
forms_1.FormsModule
],
declarations: [
app_component_1.AppComponent,
hero_detail_component_1.HeroDetailComponent
],
bootstrap: [
app_component_1.AppComponent
]
}),
__metadata('design:paramtypes', [])
], AppModule);
return AppModule;
}());
exports.AppModule = AppModule;
//# sourceMappingURL=app.module.js.map
Thrown Error
So I solved the issue myself.
The problem was that I had set one object property to become a variable instead which made Angular2 read it in such way that it found the unexpected token ].
This was the property heroes below where I had thus set an equal sign instead of colon.
export class HeroesComponent implements OnInit {
heroes = Hero[]; **//THIS CREATES THE ERROR, = SHOULD BE REPLACED WITH ://**
selectedHero: Hero;
constructor(private heroService: HeroService) { }
getHeroes(): void {
this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}
ngOnInit(): void{
this.getHeroes();
}
onSelect(hero: Hero): void {
this.selectedHero = hero;
}
}
After lots of tries and searching I decide to ask because I am stuck.I have a txt file like this:
CITYS
CITYS.AREAS
CITYS.AREAS.STREETS
CITYS.AREAS.STREETS.HOUSES
CITYS.AREAS.STREETS.HOUSES.ROOMS
CITYS.AREAS.STREETS.HOUSES.ROOMS.KITCHEN
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TV
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.VASE
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.ASTREY
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.SHAMPOO
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.CONTITIONER
CITYS.AREAS.STREETS.HOUSES.GARDEN
CITYS.AREAS.STREETS.HOUSES.GARDEN.POOL
CITYS.AREAS.STREETS.HOUSES.GARDEN.POOL.WATER
CITYS.AREAS.STREETS.HOUSES.GARDEN.TREE.....
CITYS.AREAS.STREETS.CARS
CITYS.AREAS.STREETS.CARS.BRAND...
CITYS.AREAS.STREETS.CARS.BRAND.LOGO.....
CITYS.AREAS.STREETS.CARS.COLOR..
CITYS.AREAS.STREETS.CARS.TYPE..
And I want to convert it into a nested object like this
CITYS:{
AREAS:{
STREETS:{
HOUSES:{
ROOMS: {
LIVINGROOMS: {TV,TABLE:{VASE,ASTREY}},
BATHROOMS: {BATHTUBE:{SHAMPOO,CONTITIONER},MIRROR},
...
},
GARDEN:{
......
},
},
CARS:{
BRAND:{LOGO},
COLOR:{},
TYPE:{},
......
},
},
}
}
I am tring to do somthing like that (IN ARRAY)
for(var line = 0; line < lines.length; line++){
var n = lines[line];
var ninpieces = n.split(".");
var name=ninpieces[ninpieces.length-1];
var nametostore=ninpieces[ninpieces.length-2] ;
CreateObject(name,nametostore);
};
CreateObject=function(name,nametostore){
this.a= name;
this.b= nametostore;
newpar=this['b'];
newchild=this['a'];
this[newchild]=new Array();
if (typeof this[newpar] != "object") {
this[newpar]=new Array();
}
this[newchild].push(name);
this[newpar].push(this[newchild])
stractureobj.push(this[newpar])
}
Is a combination of things that I found here in stackoverflow but it's not working.
You can use the following code. This "algorithm" temporarily stores also properties by their fully dotted names, as synonyms for the corresponding nested objects. This way it can quickly retrieve where to inject the next line's object.
Note that the algorithm performs fastest if the input is sorted. This you can do with lines.sort() if necessary.
function addNestedObject(obj, lines) {
var map = { '': obj }; // Set starting point for empty path
function addLine(line) {
var name = line.split(".").pop();
var path = line.substr(0, line.length-name.length-1);
if (!map[path]) addLine(path); // recurse to create parent
if (!map[line]) map[line] = map[path][name] = {}; // set name & line synonym
}
// Process each line with above private function.
for (var line of lines.slice().sort()) addLine(line);
return obj; // Might be useful to have as return value as well
};
// Sample input
var lines = [
'CITYS.AREAS',
'CITYS.AREAS.STREETS',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TV',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.VASE',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.ASTREY',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.SHAMPOO',
'CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.CONTITIONER',
'CITYS.AREAS.STREETS.HOUSES.GARDEN',
'CITYS.AREAS.STREETS.HOUSES.GARDEN.POOL',
'CITYS.AREAS.STREETS.HOUSES.GARDEN.POOL.WATER',
'CITYS',
];
var stractureobj = { 'otherProperty': 42 };
// Convert lines to nested object and add to stractureobj
addNestedObject(stractureobj, lines);
// Output in snippet
document.querySelector('pre').textContent=JSON.stringify(stractureobj, null, 4);
<pre></pre>
The above uses an object stractureobj, with already its own properties, to which the nested structure must be added.
If you are only interested to have an object with just the nested structure, and nothing else, you could call it with the empty object and assign the return value:
var stractureobj = addNestedObject({}, lines);
Which comes down to the same as this:
var stractureobj = {};
addNestedObject(stractureobj, lines);
You can use String.prototype.split() with RegExp /\n/ as parameter to split text file at new line characters, Array.prototype.filter() with parameter Boolean to remove empty items from array; set stractureobj to an empty object; use single for loop, Array.prototype.reduce() to set properties of stractureobj
for (var line = 0
, stractureobj = {}
, lines = textFileContents.split(/\n/).filter(Boolean)
; line < lines.length
; line++) {
var n = lines[line];
if (line === 0) {
stractureobj[lines[line]] = {}
} else {
var ninpieces = n.split(/\./).filter(Boolean);
ninpieces.reduce(function(obj, prop, index) {
var curr = ninpieces[index + 1];
if (!obj[prop] && !!curr) {
obj[prop] = {
[curr]: {}
};
} else {
if (obj[prop] && curr
&& !obj[prop][curr]) {
obj[prop][curr] = {}
}
}
return obj[prop]
}, stractureobj)
}
};
for (var line = 0
, stractureobj = {}
, lines = document.querySelector("pre")
.textContent.split(/\n/).filter(Boolean)
; line < lines.length
; line++) {
var n = lines[line];
if (line === 0) {
stractureobj[lines[line]] = {}
} else {
var ninpieces = n.split(/\./).filter(Boolean);
ninpieces.reduce(function(obj, prop, index) {
var curr = ninpieces[index + 1];
if (!obj[prop] && !!curr) {
obj[prop] = {
[curr]: {}
};
} else {
if (obj[prop] && curr && !obj[prop][curr]) {
obj[prop][curr] = {}
}
}
return obj[prop]
}, stractureobj)
}
};
document.querySelectorAll("pre")[1].textContent = JSON.stringify(stractureobj, null, 2)
pre:nth-of-type(1) {
display: none;
}
<pre>CITYS
CITYS.AREAS
CITYS.AREAS.STREETS
CITYS.AREAS.STREETS.HOUSES
CITYS.AREAS.STREETS.HOUSES.ROOMS
CITYS.AREAS.STREETS.HOUSES.ROOMS.KITCHEN
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TV
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.VASE
CITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.ASTREY
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.SHAMPOO
CITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.CONTITIONER
CITYS.AREAS.STREETS.HOUSES.GARDEN
CITYS.AREAS.STREETS.HOUSES.GARDEN.POOL
CITYS.AREAS.STREETS.HOUSES.GARDEN.POOL.WATER
CITYS.AREAS.STREETS.HOUSES.GARDEN.TREE
CITYS.AREAS.STREETS.CARS
CITYS.AREAS.STREETS.CARS.BRAND
CITYS.AREAS.STREETS.CARS.BRAND.LOGO
CITYS.AREAS.STREETS.CARS.COLOR
CITYS.AREAS.STREETS.CARS.TYPE
</pre>
<pre></pre>
I guess in JS it's essential to have "dynamic" access to nested values both to get or set them. I think this is a missing functionality. So i decided to develop two reusable Object methods. They are Object.prototype.getNestedValue() and Object.prototype.setNestedValue() They are very handy tools for these use cases and just turn your job nothing more than a very simple task. OK let's get into them to see what they are.
setNestedValue() takes a number of arguments. All arguments except the last one are used as object properties if it's a "string" type or array index if it's a "number" type. The last argument is the value of the last object property or array index at the very last in line. Accordingly.
var o = {};
o.setNestedValue("a",3,"b","value");
or
var o = {};
o.setNestedValue(...["a",3,"b"],"value");
are typical use cases. Lets see a simple example.
Object.prototype.setNestedValue = function(...a) {
a.length > 2 ? typeof this[a[0]] === "object" && this[a[0]] !== null ? this[a[0]].setNestedValue(...a.slice(1))
: (this[a[0]] = typeof a[1] === "string" ? {} : new Array(a[1]),
this[a[0]].setNestedValue(...a.slice(1)))
: this[a[0]] = a[1];
return this;
};
var o = {};
o.setNestedValue("a",3,"x","value");
o.setNestedValue("a",2,"y","value");
o.setNestedValue("a",1,"z","value");
o.setNestedValue("a",0,"w","value");
console.log(JSON.stringify(o,null,2));
OK now it's the time for your solution;
Object.prototype.getNestedValue = function(...a) {
return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};
Object.prototype.setNestedValue = function(...a) {
a.length > 2 ? typeof this[a[0]] === "object" && this[a[0]] !== null ? this[a[0]].setNestedValue(...a.slice(1))
: (this[a[0]] = typeof a[1] === "string" ? {} : new Array(a[1]),
this[a[0]].setNestedValue(...a.slice(1)))
: this[a[0]] = a[1];
return this;
};
var data = "CITYS\nCITYS.AREAS\nCITYS.AREAS.STREETS\nCITYS.AREAS.STREETS.HOUSES\nCITYS.AREAS.STREETS.HOUSES.ROOMS\nCITYS.AREAS.STREETS.HOUSES.ROOMS.KITCHEN\nCITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS\nCITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TV\nCITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE\nCITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.VASE\nCITYS.AREAS.STREETS.HOUSES.ROOMS.LIVINGROOMS.TABLE.ASTREY\nCITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS\nCITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE\nCITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.SHAMPOO\nCITYS.AREAS.STREETS.HOUSES.ROOMS.BATHROOMS.BATHTUBE.CONTITIONER\nCITYS.AREAS.STREETS.HOUSES.GARDEN\nCITYS.AREAS.STREETS.HOUSES.GARDEN.POOL\nCITYS.AREAS.STREETS.HOUSES.GARDEN.POOL.WATER\nCITYS.AREAS.STREETS.HOUSES.GARDEN.TREE\nCITYS.AREAS.STREETS.CARS\nCITYS.AREAS.STREETS.CARS.BRAND\nCITYS.AREAS.STREETS.CARS.BRAND.LOGO\nCITYS.AREAS.STREETS.CARS.COLOR\nCITYS.AREAS.STREETS.CARS.TYPE",
datarr = data.split("\n").map(e => e.split(".")), // get your list in an array
o = {};
datarr.forEach(a => o.setNestedValue(...a,""));
console.log(JSON.stringify(o,null,2));
Allright.. that's it... It's so simple.
/** Supplant **/
String.prototype.supplant = function(o) {
return this.replace (/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
);
};
Crockford is no doubt a JavaScript Grand Wizard, but his prototype is lacking when it comes to multiple level objects.
I would like this function to cover multiple level object replacement such as '{post.detailed}' could anyone help me with a revised version of supplant?
That shouldn't be too difficult. Use this replace function instead:
function (a, b) {
var r = o,
parts = b.split(".");
for (var i=0; r && i<parts.length; i++)
r = r[parts[i]];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
I personally hate it when people stuff their own rubbish on the native types in JavaScript. If I were to write it I would do the following... But why no love for boolean?
function supplant(str, data) {
return str.replace(/{([^{}]*)}/g, function (a, b) {
// Split the variable into its dot notation parts
var p = b.split(/\./);
// The c variable becomes our cursor that will traverse the object
var c = data;
// Loop over the steps in the dot notation path
for(var i = 0; i < p.length; ++i) {
// If the key doesn't exist in the object do not process
// mirrors how the function worked for bad values
if(c[p[i]] == null)
return a;
// Move the cursor up to the next step
c = c[p[i]];
}
// If the data is a string or number return it otherwise do
// not process, return the value it was, i.e. {x}
return typeof c === 'string' || typeof c === 'number' ? c : a;
});
};
It doesn't support arrays btw, you would need to do some additional stuff to support that.
#Bergi method w/ support to boolean:
function (a, b) {
var r = o,
parts = b.split(".");
for (var i=0; r && i<parts.length; i++)
r = r[parts[i]];
return typeof r === 'string' || typeof r === 'number' || typeof r === 'boolean' ? r : a;
}
Original Crockford's Supplant method w/ support to boolean:
if (!String.prototype.supplant) {
String.prototype.supplant = function (o) {
return this.replace(/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' || typeof r === 'boolean' ? r : a;
}
);
};
}
Best of luck!
https://gist.github.com/fsschmitt/b48db17397499282ff8c36d73a36a8af